From 1eebfa60c17e988ddb29073aafd6c2c7c039780c Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 9 Sep 2024 10:53:12 +0200
Subject: [PATCH 001/272] Easier grid drag animation (#6321)

**Problem:**

The grid drag animation is a bit jaggy.

**Fix:**

1. Disable the element outline during the grid drag interaction
2. Make the animation use a more explicit tween definition
3. Remove unused/legacy experiment for a dedicated the snap animation

![Kapture 2024-09-05 at 17 18
20](https://github.com/user-attachments/assets/f1992e51-9052-4ad6-9b01-503c6d183728)

**Note: the GIF does not make this justice, it should be smooth 60 fps
IRL.**

Fixes #6320
---
 .../canvas/controls/grid-controls.tsx         | 26 +++++--------------
 .../canvas/controls/new-canvas-controls.tsx   | 12 ++++++---
 .../select-mode/select-mode-hooks.tsx         | 25 ++++++++----------
 .../left-pane/roll-your-own-pane.tsx          |  2 --
 4 files changed, 26 insertions(+), 39 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 2a9fbc4a3aa6..492055cd6152 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -134,7 +134,6 @@ function getLabelForAxis(
   return gridCSSNumberToLabel(defaultEither(fromDOM, fromPropsAtIndex))
 }
 
-const SHADOW_SNAP_ANIMATION = 'shadow-snap'
 const GRID_RESIZE_HANDLE_CONTAINER_SIZE = 30 // px
 const GRID_RESIZE_HANDLE_SIZE = 15 // px
 
@@ -648,7 +647,7 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
     return maybeGridFrame
   }, [gridPath, metadataRef])
 
-  useSnapAnimation({
+  useCellAnimation({
     disabled: anyTargetAbsolute,
     targetRootCell: targetRootCell,
     controls: controls,
@@ -946,15 +945,6 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
         interactionData?.drag != null &&
         hoveringStart != null ? (
           <motion.div
-            initial={'normal'}
-            variants={{
-              normal: { scale: 1 },
-              [SHADOW_SNAP_ANIMATION]: {
-                scale: [1, 1.4, 1],
-                transition: { duration: 0.15, type: 'tween' },
-              },
-            }}
-            animate={controls}
             style={{
               pointerEvents: 'none',
               position: 'absolute',
@@ -977,7 +967,7 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
   )
 })
 
-function useSnapAnimation(params: {
+function useCellAnimation(params: {
   disabled: boolean
   gridPath: ElementPath | null
   shadowFrame: CanvasRectangle | null
@@ -985,7 +975,6 @@ function useSnapAnimation(params: {
   controls: AnimationControls
 }) {
   const { gridPath, targetRootCell, controls, shadowFrame, disabled } = params
-  const features = useRollYourOwnFeatures()
 
   const [lastTargetRootCellId, setLastTargetRootCellId] = React.useState(targetRootCell)
   const [lastSnapPoint, setLastSnapPoint] = React.useState<CanvasPoint | null>(shadowFrame)
@@ -1048,12 +1037,12 @@ function useSnapAnimation(params: {
             x: [moveFromPoint.x - snapPoint.x, 0],
             y: [moveFromPoint.y - snapPoint.y, 0],
           },
-          { duration: CELL_ANIMATION_DURATION },
+          {
+            duration: CELL_ANIMATION_DURATION,
+            type: 'tween',
+            ease: 'easeInOut',
+          },
         )
-
-        if (features.Grid.animateShadowSnap) {
-          void controls.start(SHADOW_SNAP_ANIMATION)
-        }
       }
     }
     setLastSnapPoint(snapPoint)
@@ -1061,7 +1050,6 @@ function useSnapAnimation(params: {
   }, [
     targetRootCell,
     controls,
-    features.Grid.animateShadowSnap,
     lastSnapPoint,
     snapPoint,
     animate,
diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx
index 53aa788e9c00..b6cead1192f7 100644
--- a/editor/src/components/canvas/controls/new-canvas-controls.tsx
+++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx
@@ -36,6 +36,7 @@ import type { ResolveFn } from '../../custom-code/code-file'
 import { useColorTheme } from '../../../uuiui'
 import {
   isDragInteractionActive,
+  isGridDragInteractionActive,
   pickSelectionEnabled,
   useMaybeHighlightElement,
   useSelectAndHover,
@@ -71,10 +72,8 @@ import { useSelectionArea } from './selection-area-hooks'
 import { RemixSceneLabelControl } from './select-mode/remix-scene-label'
 import { NO_OP } from '../../../core/shared/utils'
 import { useIsMyProject } from '../../editor/store/collaborative-editing'
-import { useStatus } from '../../../../liveblocks.config'
 import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 import { MultiplayerPresence } from '../multiplayer-presence'
-import { isFeatureEnabled } from '../../../utils/feature-switches'
 
 export const CanvasControlsContainerID = 'new-canvas-controls-container'
 
@@ -170,7 +169,7 @@ export const NewCanvasControls = React.memo((props: NewCanvasControlsProps) => {
     canDrop: () => true,
   }
 
-  const [_, drop] = useDrop(dropSpec)
+  const [, drop] = useDrop(dropSpec)
 
   const forwardedRef = React.useCallback(
     (node: ConnectableElement) => {
@@ -295,6 +294,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
     keysPressed,
     componentMetadata,
     dragInteractionActive,
+    gridDragInteractionActive,
     selectionEnabled,
     textEditor,
     editorMode,
@@ -313,6 +313,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
         keysPressed: store.editor.keysPressed,
         componentMetadata: getMetadata(store.editor),
         dragInteractionActive: isDragInteractionActive(store.editor),
+        gridDragInteractionActive: isGridDragInteractionActive(store.editor),
         selectionEnabled: pickSelectionEnabled(store.editor.canvas, store.editor.keysPressed),
         editorMode: store.editor.mode,
         textEditor: store.editor.canvas.textEditor,
@@ -555,7 +556,10 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
           <>
             {renderHighlightControls()}
             {unless(dragInteractionActive, <LayoutParentControl />)}
-            <MultiSelectOutlineControl localSelectedElements={localSelectedViews} />
+            {unless(
+              gridDragInteractionActive,
+              <MultiSelectOutlineControl localSelectedElements={localSelectedViews} />,
+            )}
             <ZeroSizedElementControls.control showAllPossibleElements={false} />
 
             {when(
diff --git a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
index 2566bd81d97b..32852623061f 100644
--- a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
+++ b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
@@ -1,21 +1,13 @@
 import React from 'react'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
-import { mapArrayToDictionary, mapDropNulls, uniqBy } from '../../../../core/shared/array-utils'
+import { uniqBy } from '../../../../core/shared/array-utils'
 import type { ElementInstanceMetadataMap } from '../../../../core/shared/element-template'
 import type { WindowPoint } from '../../../../core/shared/math-utils'
-import {
-  boundingRectangleArray,
-  CanvasPoint,
-  distance,
-  isInfinityRectangle,
-  point,
-  windowPoint,
-} from '../../../../core/shared/math-utils'
+import { point, windowPoint } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 import * as EP from '../../../../core/shared/element-path'
-import { NO_OP, assertNever, fastForEach } from '../../../../core/shared/utils'
+import { assertNever } from '../../../../core/shared/utils'
 import type { KeysPressed } from '../../../../utils/keyboard'
-import Keyboard, { isDigit } from '../../../../utils/keyboard'
 import Utils from '../../../../utils/utils'
 import {
   clearHighlightedViews,
@@ -49,14 +41,12 @@ import {
 import { Modifier } from '../../../../utils/modifiers'
 import { pathsEqual } from '../../../../core/shared/element-path'
 import type { EditorAction } from '../../../../components/editor/action-types'
-import { EditorDispatch } from '../../../../components/editor/action-types'
-import { EditorModes, isInsertMode, isSelectModeWithArea } from '../../../editor/editor-modes'
+import { isInsertMode, isSelectModeWithArea } from '../../../editor/editor-modes'
 import {
   scheduleTextEditForNextFrame,
   useTextEditModeSelectAndHover,
 } from '../text-edit-mode/text-edit-mode-hooks'
 import { useDispatch } from '../../../editor/store/dispatch-context'
-import { isFeatureEnabled } from '../../../../utils/feature-switches'
 import { useSetAtom } from 'jotai'
 import type { CanvasControlWithProps } from '../../../inspector/common/inspector-atoms'
 import {
@@ -73,6 +63,13 @@ export function isDragInteractionActive(editorState: EditorState): boolean {
   return editorState.canvas.interactionSession?.interactionData.type === 'DRAG'
 }
 
+export function isGridDragInteractionActive(editorState: EditorState): boolean {
+  return (
+    editorState.canvas.interactionSession?.interactionData.type === 'DRAG' &&
+    editorState.canvas.interactionSession.activeControl.type === 'GRID_CELL_HANDLE'
+  )
+}
+
 export function pickSelectionEnabled(
   canvas: EditorState['canvas'],
   keysPressed: KeysPressed,
diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
index f574bff73575..4c6f421ae995 100644
--- a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
+++ b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
@@ -14,7 +14,6 @@ type GridFeatures = {
   dragVerbatim: boolean
   dragMagnetic: boolean
   dragRatio: boolean
-  animateShadowSnap: boolean
   dotgrid: boolean
   shadow: boolean
   activeGridColor: string
@@ -37,7 +36,6 @@ const defaultRollYourOwnFeatures: RollYourOwnFeatures = {
     dragVerbatim: false,
     dragMagnetic: false,
     dragRatio: true,
-    animateShadowSnap: false,
     dotgrid: true,
     shadow: true,
     activeGridColor: '#0099ff77',

From 3443ee3c74e7106eec79b3d81a6e9f4540f9081d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Mon, 9 Sep 2024 15:14:57 +0200
Subject: [PATCH 002/272] disable flaky tests related to focusing elements
 (#6336)

## Description

This PR disables the following flaky tests:


https://github.com/concrete-utopia/utopia/blob/1eebfa60c17e988ddb29073aafd6c2c7c039780c/editor/src/components/canvas/controls/select-mode/select-mode.spec.browser2.tsx#L419


https://github.com/concrete-utopia/utopia/blob/1eebfa60c17e988ddb29073aafd6c2c7c039780c/editor/src/components/canvas/controls/select-mode/select-mode.spec.browser2.tsx#L753

Tracker issue: https://github.com/concrete-utopia/utopia/issues/6337
---
 .../canvas/controls/select-mode/select-mode.spec.browser2.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/canvas/controls/select-mode/select-mode.spec.browser2.tsx b/editor/src/components/canvas/controls/select-mode/select-mode.spec.browser2.tsx
index 572d9dbfb79b..1471339b2b49 100644
--- a/editor/src/components/canvas/controls/select-mode/select-mode.spec.browser2.tsx
+++ b/editor/src/components/canvas/controls/select-mode/select-mode.spec.browser2.tsx
@@ -416,7 +416,7 @@ describe('Select Mode Clicking', () => {
     checkFocusedPath(renderResult, desiredPaths[2])
     checkSelectedPaths(renderResult, [desiredPaths[2]])
   })
-  it('Single click and five double clicks will focus a generated Card and select the Button inside', async function (this: Mocha.Context) {
+  xit('Single click and five double clicks will focus a generated Card and select the Button inside', async function (this: Mocha.Context) {
     this.timeout(TimeoutForThisFile)
     // prettier-ignore
     const desiredPaths = createConsecutivePaths(
@@ -750,7 +750,7 @@ describe('Select Mode Double Clicking With Fragments', () => {
     checkSelectedPaths(renderResult, [desiredPaths[1]])
   })
 
-  it('Single click and three double clicks will focus a generated Card', async () => {
+  xit('Single click and three double clicks will focus a generated Card', async () => {
     // prettier-ignore
     const desiredPaths = createConsecutivePaths(
       'sb' +                  // Skipped as it's the storyboard

From 3cae9651e6a84e9ee38bb7ac9a4af6587189b848 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 9 Sep 2024 18:16:41 +0300
Subject: [PATCH 003/272] fix(grid): show gaps and cells on gap resize (#6341)

**Problem:**
Today when changing grid gaps the grid cells (and gap handlers that rely
on them) disappear:

<video
src="https://github.com/user-attachments/assets/6a6a4e26-5aed-4b47-9a0d-1f2f945287c7"></video>

**Fix:**
Draw the cell placeholders explicitly when resizing the gaps (similar to
reparent into grid).

<video
src="https://github.com/user-attachments/assets/3e2a1cdd-d475-4e89-9735-b918a879a114"></video>

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode
---
 .../strategies/set-grid-gap-strategy.tsx      | 39 ++++++++++++++-----
 .../controls/select-mode/grid-gap-control.tsx |  2 +-
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
index 52dafc7bb7dd..e284b8d75aa0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
@@ -30,7 +30,7 @@ import {
 } from '../../gap-utils'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
-import type { InteractionCanvasState } from '../canvas-strategy-types'
+import type { ControlWithProps, InteractionCanvasState } from '../canvas-strategy-types'
 import {
   controlWithProps,
   emptyStrategyApplicationResult,
@@ -40,7 +40,10 @@ import {
 import type { InteractionSession } from '../interaction-state'
 import { colorTheme } from '../../../../uuiui'
 import { activeFrameTargetPath, setActiveFrames } from '../../commands/set-active-frames-command'
+import type { GridGapControlProps } from '../../controls/select-mode/grid-gap-control'
 import { GridGapControl } from '../../controls/select-mode/grid-gap-control'
+import type { GridControlsProps } from '../../controls/grid-controls'
+import { GridControls } from '../../controls/grid-controls'
 
 const SetGridGapStrategyId = 'SET_GRID_GAP_STRATEGY'
 
@@ -101,7 +104,7 @@ export const setGridGapStrategy: CanvasStrategyFactory = (
     column: offsetMeasurementByDelta(gridGap.column, dragDelta.x, adjustPrecision),
   }
 
-  const resizeControl = controlWithProps({
+  const gridGapControl = controlWithProps({
     control: GridGapControl,
     props: {
       selectedElement: selectedElement,
@@ -116,21 +119,39 @@ export const setGridGapStrategy: CanvasStrategyFactory = (
 
   const maybeIndicatorProps = gridGapValueIndicatorProps(interactionSession, gridGap)
 
-  const controlsToRender = optionalMap(
-    (props) => [
-      resizeControl,
+  const controlsToRender: Array<
+    | ControlWithProps<FloatingIndicatorProps>
+    | ControlWithProps<GridControlsProps>
+    | ControlWithProps<GridGapControlProps>
+  > = [gridGapControl]
+
+  // show indicator if needed
+  if (maybeIndicatorProps != null) {
+    controlsToRender.push(
       controlWithProps({
         control: FloatingIndicator,
         props: {
-          ...props,
+          ...maybeIndicatorProps,
           color: colorTheme.brandNeonPink.value,
         },
         key: 'padding-value-indicator-control',
         show: 'visible-except-when-other-strategy-is-active',
       }),
-    ],
-    maybeIndicatorProps,
-  ) ?? [resizeControl]
+    )
+  }
+
+  // when the drag is ongoing, keep showing the grid cells
+  if (isDragOngoing(interactionSession)) {
+    controlsToRender.push(
+      controlWithProps({
+        control: GridControls,
+        props: { targets: [selectedElement] },
+        key: `set-grid-gap-strategy-controls`,
+        show: 'always-visible',
+        priority: 'bottom',
+      }),
+    )
+  }
 
   return {
     id: SetGridGapStrategyId,
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
index e0601c4436db..ccf0049b9037 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
@@ -26,7 +26,7 @@ import { isZeroSizedElement } from '../outline-utils'
 import { createArrayWithLength } from '../../../../core/shared/array-utils'
 import { useGridData } from '../grid-controls'
 
-interface GridGapControlProps {
+export interface GridGapControlProps {
   selectedElement: ElementPath
   updatedGapValueRow: CSSNumberWithRenderedValue | null
   updatedGapValueColumn: CSSNumberWithRenderedValue | null

From 3dd1c23101ac3799ecdb3a2cce8ca3acc3feb673 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 9 Sep 2024 17:19:07 +0200
Subject: [PATCH 004/272] Offset distance indicators for grid absolute move
 (#6339)

**Problem:**

When doing an absolute move on grid child elements, it would be good to
have visual indicators for the current offset from the cell the element
resides in.

**Fix:**

Add top/left indicators during the move.
The indicators will follow the target root cell, and adjust their
position so they don't go over each other.
If the offset is outside of the cell boundaries, additional orthogonal
lines will be displayed for clarity.



https://github.com/user-attachments/assets/165ffd7b-50fc-4ae5-a146-39daf22acc71



Fixes #6338
---
 .../canvas/controls/grid-controls.tsx         | 357 +++++++++++++++++-
 1 file changed, 350 insertions(+), 7 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 492055cd6152..9ac6790706d7 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -5,6 +5,7 @@ import type { AnimationControls } from 'framer-motion'
 import { motion, useAnimationControls } from 'framer-motion'
 import type { CSSProperties } from 'react'
 import React from 'react'
+import type { Sides } from 'utopia-api/core'
 import type { ElementPath } from 'utopia-shared/src/types'
 import type { GridDimension } from '../../../components/inspector/common/css-utils'
 import {
@@ -23,8 +24,10 @@ import {
 import type { CanvasPoint, CanvasRectangle } from '../../../core/shared/math-utils'
 import {
   canvasPoint,
+  canvasRectangle,
   isFiniteRectangle,
   isInfinityRectangle,
+  nullIfInfinity,
   pointsEqual,
   scaleRect,
   windowPoint,
@@ -39,9 +42,11 @@ import {
 } from '../../../core/shared/optics/optic-creators'
 import { toFirst } from '../../../core/shared/optics/optic-utilities'
 import type { Optic } from '../../../core/shared/optics/optics'
+import { optionalMap } from '../../../core/shared/optional-utils'
 import { assertNever } from '../../../core/shared/utils'
 import { Modifier } from '../../../utils/modifiers'
 import { when } from '../../../utils/react-conditionals'
+import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
 import { useRollYourOwnFeatures } from '../../navigator/left-pane/roll-your-own-pane'
@@ -52,16 +57,13 @@ import type {
   GridResizeEdgeProperties,
 } from '../canvas-strategies/interaction-state'
 import {
-  GridResizeEdges,
   createInteractionViaMouse,
   gridAxisHandle,
   gridCellHandle,
   gridResizeEdgeProperties,
+  GridResizeEdges,
   gridResizeHandle,
 } from '../canvas-strategies/interaction-state'
-import { windowToCanvasCoordinates } from '../dom-lookup'
-import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
-import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { gridCellTargetId } from '../canvas-strategies/strategies/grid-helpers'
 import { resizeBoundingBoxFromSide } from '../canvas-strategies/strategies/resize-helpers'
 import type { EdgePosition } from '../canvas-types'
@@ -72,11 +74,11 @@ import {
   EdgePositionRight,
   EdgePositionTop,
 } from '../canvas-types'
+import { windowToCanvasCoordinates } from '../dom-lookup'
+import type { Axis } from '../gap-utils'
 import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
+import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
 import { CanvasLabel } from './select-mode/controls-common'
-import { optionalMap } from '../../../core/shared/optional-utils'
-import type { Sides } from 'utopia-api/core'
-import type { Axis } from '../gap-utils'
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
@@ -962,11 +964,343 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
             }}
           />
         ) : null}
+        <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
       </CanvasOffsetWrapper>
     </React.Fragment>
   )
 })
 
+const MIN_INDICATORS_DISTANCE = 32 // px
+
+const AbsoluteDistanceIndicators = React.memo(
+  (props: { targetRootCell: GridCellCoordinates | null }) => {
+    const colorTheme = useColorTheme()
+
+    const cellFrame = useEditorState(
+      Substores.metadata,
+      (store) => {
+        if (store.editor.selectedViews.length !== 1) {
+          return null
+        }
+
+        const meta = MetadataUtils.findElementByElementPath(
+          store.editor.jsxMetadata,
+          store.editor.selectedViews[0],
+        )
+        if (!MetadataUtils.isPositionAbsolute(meta)) {
+          return null
+        }
+
+        return nullIfInfinity(meta?.globalFrame)
+      },
+      'AbsoluteDistanceIndicators cellFrame',
+    )
+    const canvasScale = useEditorState(
+      Substores.canvasOffset,
+      (store) => store.editor.canvas.scale,
+      'AbsoluteDistanceIndicators canvasScale',
+    )
+
+    const canvasOffset = useEditorState(
+      Substores.canvasOffset,
+      (store) => store.editor.canvas.roundedCanvasOffset,
+      'AbsoluteDistanceIndicators canvasOffset',
+    )
+
+    const targetCellBoundingBox = React.useMemo(() => {
+      if (props.targetRootCell == null) {
+        return null
+      }
+      const element = getGridPlaceholderDomElementFromCoordinates(props.targetRootCell)
+      const boundingBox = element?.getBoundingClientRect()
+      if (boundingBox == null) {
+        return null
+      }
+
+      const canvasOrigin = windowToCanvasCoordinates(
+        canvasScale,
+        canvasOffset,
+        windowPoint({ x: boundingBox.left, y: boundingBox.top }),
+      ).canvasPositionRounded
+      const canvasRect = canvasRectangle({
+        x: canvasOrigin.x,
+        y: canvasOrigin.y,
+        width: boundingBox.width * canvasScale,
+        height: boundingBox.height * canvasScale,
+      })
+
+      return canvasRect
+    }, [props.targetRootCell, canvasScale, canvasOffset])
+
+    const distanceTop =
+      targetCellBoundingBox == null || cellFrame == null ? 0 : cellFrame.y - targetCellBoundingBox.y
+
+    const distanceLeft =
+      targetCellBoundingBox == null || cellFrame == null ? 0 : cellFrame.x - targetCellBoundingBox.x
+
+    const positioning = React.useMemo(() => {
+      if (cellFrame == null || targetCellBoundingBox == null) {
+        return null
+      }
+
+      function position(
+        wantedCoord: 'x' | 'y',
+        cell: CanvasRectangle,
+        root: CanvasRectangle,
+        dominantDistance: number,
+        otherDistance: number,
+      ): { left: number; top: number } {
+        const otherCoord = wantedCoord === 'x' ? 'y' : 'x'
+        const dimension = wantedCoord === 'x' ? 'width' : 'height'
+        const dominant =
+          cell[wantedCoord] < root[wantedCoord] ||
+          dominantDistance < MIN_INDICATORS_DISTANCE ||
+          otherDistance < 0
+            ? root[wantedCoord] + root[dimension] / 2
+            : Math.max(root[wantedCoord], cell[wantedCoord])
+        const other = otherDistance < 0 ? cell[otherCoord] : root[otherCoord]
+        if (wantedCoord === 'x') {
+          return {
+            left: dominant,
+            top: other,
+          }
+        } else {
+          return {
+            left: other,
+            top: dominant,
+          }
+        }
+      }
+
+      function compensationNegative(
+        wantedCoord: 'x' | 'y',
+        cell: CanvasRectangle,
+        root: CanvasRectangle,
+        dist: number,
+      ): { width: number; height: number; left: number; top: number } | null {
+        const otherCoord = wantedCoord === 'x' ? 'y' : 'x'
+        const dimension = wantedCoord === 'x' ? 'width' : 'height'
+
+        const shouldCompensate =
+          dist < 0 && cell[wantedCoord] > root[wantedCoord] + root[dimension] / 2
+        if (!shouldCompensate) {
+          return null
+        }
+
+        const size = Math.abs(root[wantedCoord] + root[dimension] / 2 - cell[wantedCoord])
+        const dominant = root[wantedCoord] + root[dimension] / 2
+        const other = cell[otherCoord]
+
+        return wantedCoord === 'x'
+          ? {
+              width: size,
+              height: 1,
+              top: other,
+              left: dominant,
+            }
+          : {
+              width: 1,
+              height: size,
+              top: dominant,
+              left: other,
+            }
+      }
+
+      function compensationPositive(
+        wantedCoord: 'x' | 'y',
+        cell: CanvasRectangle,
+        root: CanvasRectangle,
+        dist: number,
+      ): { width: number; height: number; left: number; top: number } | null {
+        const otherCoord = wantedCoord === 'x' ? 'y' : 'x'
+        const dimension = wantedCoord === 'x' ? 'width' : 'height'
+
+        const shouldCompensate = dist > 0 && cell[wantedCoord] > root[wantedCoord] + root[dimension]
+        if (!shouldCompensate) {
+          return null
+        }
+
+        const size = Math.abs(root[wantedCoord] + root[dimension] / 2 - cell[wantedCoord])
+        const other = root[otherCoord]
+        const dominant = root[wantedCoord] + root[dimension] / 2
+
+        return wantedCoord === 'x'
+          ? {
+              width: size,
+              height: 1,
+              top: other,
+              left: dominant,
+            }
+          : {
+              height: size,
+              width: 1,
+              left: other,
+              top: dominant,
+            }
+      }
+
+      const topIndicator = {
+        ...position('x', cellFrame, targetCellBoundingBox, distanceLeft, distanceTop),
+        compensateNegative: compensationNegative(
+          'x',
+          cellFrame,
+          targetCellBoundingBox,
+          distanceTop,
+        ),
+        compensatePositive: compensationPositive(
+          'x',
+          cellFrame,
+          targetCellBoundingBox,
+          distanceTop,
+        ),
+      }
+
+      const leftIndicator = {
+        ...position('y', cellFrame, targetCellBoundingBox, distanceLeft, distanceLeft),
+        compensateNegative: compensationNegative(
+          'y',
+          cellFrame,
+          targetCellBoundingBox,
+          distanceLeft,
+        ),
+        compensatePositive: compensationPositive(
+          'y',
+          cellFrame,
+          targetCellBoundingBox,
+          distanceLeft,
+        ),
+      }
+
+      return { topIndicator, leftIndicator }
+    }, [cellFrame, targetCellBoundingBox, distanceLeft, distanceTop])
+
+    if (targetCellBoundingBox == null || cellFrame == null || positioning == null) {
+      return null
+    }
+
+    const backgroundColor = colorTheme.brandNeonPink.value
+    const dashedBorder = `1px dashed ${backgroundColor}`
+
+    return (
+      <React.Fragment>
+        {/* top distance */}
+        <React.Fragment>
+          <div
+            style={{
+              position: 'absolute',
+              borderLeft: dashedBorder,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+
+              left: positioning.topIndicator.left,
+              top: positioning.topIndicator.top,
+              width: 1,
+              height: Math.abs(distanceTop),
+            }}
+          >
+            <span
+              style={{
+                backgroundColor: backgroundColor,
+                padding: '0px 2px',
+                borderRadius: 2,
+                fontSize: 9,
+                color: '#fff',
+              }}
+            >
+              {distanceTop}
+            </span>
+          </div>
+          {/* compensate */}
+          {positioning.topIndicator.compensateNegative != null ? (
+            <div
+              style={{
+                position: 'absolute',
+                borderTop: dashedBorder,
+
+                left: positioning.topIndicator.compensateNegative.left,
+                top: positioning.topIndicator.compensateNegative.top,
+                width: positioning.topIndicator.compensateNegative.width,
+                height: positioning.topIndicator.compensateNegative.height,
+              }}
+            />
+          ) : null}
+          {positioning.topIndicator.compensatePositive != null ? (
+            <div
+              style={{
+                position: 'absolute',
+                borderTop: dashedBorder,
+
+                left: positioning.topIndicator.compensatePositive.left,
+                top: positioning.topIndicator.compensatePositive.top,
+                width: positioning.topIndicator.compensatePositive.width,
+                height: positioning.topIndicator.compensatePositive.height,
+              }}
+            />
+          ) : null}
+        </React.Fragment>
+
+        {/* left distance */}
+        <React.Fragment>
+          <div
+            style={{
+              position: 'absolute',
+              borderTop: dashedBorder,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+
+              left: positioning.leftIndicator.left,
+              top: positioning.leftIndicator.top,
+              width: Math.abs(distanceLeft),
+              height: 1,
+            }}
+          >
+            <span
+              style={{
+                backgroundColor: backgroundColor,
+                padding: '0px 2px',
+                borderRadius: 2,
+                fontSize: 9,
+                color: '#fff',
+              }}
+            >
+              {distanceLeft}
+            </span>
+          </div>
+          {/* compensate */}
+          {positioning.leftIndicator.compensateNegative != null ? (
+            <div
+              style={{
+                position: 'absolute',
+                borderLeft: dashedBorder,
+
+                left: positioning.leftIndicator.compensateNegative.left,
+                top: positioning.leftIndicator.compensateNegative.top,
+                width: positioning.leftIndicator.compensateNegative.width,
+                height: positioning.leftIndicator.compensateNegative.height,
+              }}
+            />
+          ) : null}
+          {positioning.leftIndicator.compensatePositive != null ? (
+            <div
+              style={{
+                position: 'absolute',
+                borderLeft: dashedBorder,
+
+                left: positioning.leftIndicator.compensatePositive.left,
+                top: positioning.leftIndicator.compensatePositive.top,
+                width: positioning.leftIndicator.compensatePositive.width,
+                height: positioning.leftIndicator.compensatePositive.height,
+              }}
+            />
+          ) : null}
+        </React.Fragment>
+      </React.Fragment>
+    )
+  },
+)
+
 function useCellAnimation(params: {
   disabled: boolean
   gridPath: ElementPath | null
@@ -1356,4 +1690,13 @@ export function getGridPlaceholderDomElement(elementPath: ElementPath): HTMLElem
   return document.getElementById(gridKeyFromPath(elementPath))
 }
 
+export function getGridPlaceholderDomElementFromCoordinates(params: {
+  row: number
+  column: number
+}): HTMLElement | null {
+  return document.querySelector(
+    `[data-grid-row="${params.row}"]` + `[data-grid-column="${params.column}"]`,
+  )
+}
+
 const gridPlaceholderBorder = (color: string) => `2px solid ${color}`

From b2994d21bf470eef5fae9c3b4b654c4746169b9a Mon Sep 17 00:00:00 2001
From: RheeseyB <1044774+Rheeseyb@users.noreply.github.com>
Date: Mon, 9 Sep 2024 16:32:09 +0100
Subject: [PATCH 005/272] Fix an issue with updatePackageJsonInEditorState
 (#6333)

**Problem:**
`updatePackageJsonInEditorState` was providing incorrect arguments to
the `codeFile` factory function when updating the package.json file.

**Fix:**
Fix it.

**Side note:** IMO the `codeFile` function should always be
`RevisionsState.CodeAheadButPleaseTellVSCodeAboutIt` by default, since
it is typically used as a convenient way to create a new `TextFile` from
the design side of Utopia. However, I tried making that change and it
broke far too much of the editor, somehow resulting in the project
contents being entirely wiped, so I'd rather just leave it be for the
moment.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

Fixes #6328
---
 editor/src/components/editor/store/editor-state.ts        | 5 ++++-
 editor/src/components/editor/store/editor-update.spec.tsx | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index b874154f03d2..aa3231f356da 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -3278,14 +3278,17 @@ export function updatePackageJsonInEditorState(
       // There is a package.json file, we should update it.
       updatedPackageJsonFile = codeFile(
         transformPackageJson(packageJsonFile.fileContents.code),
-        RevisionsState.CodeAhead,
+        null,
         packageJsonFile.versionNumber + 1,
+        RevisionsState.CodeAheadButPleaseTellVSCodeAboutIt,
       )
     } else {
       // There is something else called package.json, we should bulldoze over it.
       updatedPackageJsonFile = codeFile(
         transformPackageJson(JSON.stringify(DefaultPackageJson)),
         null,
+        0,
+        RevisionsState.CodeAheadButPleaseTellVSCodeAboutIt,
       )
     }
   }
diff --git a/editor/src/components/editor/store/editor-update.spec.tsx b/editor/src/components/editor/store/editor-update.spec.tsx
index 62d35e4ec115..855542efe4d1 100644
--- a/editor/src/components/editor/store/editor-update.spec.tsx
+++ b/editor/src/components/editor/store/editor-update.spec.tsx
@@ -1030,7 +1030,7 @@ describe('updating package.json', () => {
           "parsed": Object {
             "type": "UNPARSED",
           },
-          "revisionsState": "CODE_AHEAD",
+          "revisionsState": "CODE_AHEAD_BUT_PLEASE_TELL_VSCODE_ABOUT_IT",
         }
       `)
     }

From 55c5ab3214393427c60b4a9a39a8422c47755e0a Mon Sep 17 00:00:00 2001
From: RheeseyB <1044774+Rheeseyb@users.noreply.github.com>
Date: Mon, 9 Sep 2024 16:32:24 +0100
Subject: [PATCH 006/272] Send message to utopia when a file is saved in vs
 code (#6334)

**Problem:**
When saving a file in the code editor it was still marked as unsaved in
Utopia.

**Fix:**
This was just because we weren't informing Utopia that the file had been
saved, so it was simply a case of sending the right message when the
file is saved.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 utopia-vscode-extension/src/utopia-fs.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/utopia-vscode-extension/src/utopia-fs.ts b/utopia-vscode-extension/src/utopia-fs.ts
index c03971029194..fb3592783ed5 100644
--- a/utopia-vscode-extension/src/utopia-fs.ts
+++ b/utopia-vscode-extension/src/utopia-fs.ts
@@ -50,7 +50,7 @@ import {
   isNotDirectoryError,
   pathIsFile,
 } from './in-mem-fs'
-import { appendToPath, dirname, vsCodeFileDelete } from 'utopia-vscode-common'
+import { appendToPath, dirname, vsCodeFileChange, vsCodeFileDelete } from 'utopia-vscode-common'
 import type { ProjectFile } from 'utopia-vscode-common'
 import { addSchemeToPath, allPathsUpToPath } from './path-utils'
 
@@ -219,6 +219,7 @@ export class UtopiaFSExtension
     const path = uri.path
     createDirectory(path)
     this.notifyFileCreated(path)
+    // TODO Add a message for when a directory is created / renamed
   }
 
   readFile(uri: Uri): Uint8Array {
@@ -243,6 +244,9 @@ export class UtopiaFSExtension
     } else {
       this.notifyFileCreated(path)
     }
+
+    const updatedFile = readFileAsUTF8(path)
+    commands.executeCommand('utopia.toUtopiaMessage', vsCodeFileChange(path, updatedFile))
   }
 
   ensureDirectoryExists(pathToEnsure: string) {

From ac76e57f3432964ddcbefbac2b1403efe4931c53 Mon Sep 17 00:00:00 2001
From: RheeseyB <1044774+Rheeseyb@users.noreply.github.com>
Date: Tue, 10 Sep 2024 11:56:27 +0100
Subject: [PATCH 007/272] Disable another failing clicking test (#6343)

Follow up to #6336 with another failing test
---
 .../canvas/controls/select-mode/select-mode.spec.browser2.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/canvas/controls/select-mode/select-mode.spec.browser2.tsx b/editor/src/components/canvas/controls/select-mode/select-mode.spec.browser2.tsx
index 1471339b2b49..aba628750c29 100644
--- a/editor/src/components/canvas/controls/select-mode/select-mode.spec.browser2.tsx
+++ b/editor/src/components/canvas/controls/select-mode/select-mode.spec.browser2.tsx
@@ -325,7 +325,7 @@ describe('Select Mode Clicking', () => {
     checkSelectedPaths(renderResult, [desiredPath])
   })
 
-  it('Single click and then double click to select Button on a Card Scene Root', async () => {
+  xit('Single click and then double click to select Button on a Card Scene Root', async () => {
     // prettier-ignore
     const desiredPaths = createConsecutivePaths(
       'sb' +                // Skipped as it's the storyboard
@@ -703,7 +703,7 @@ describe('Select Mode Double Clicking With Fragments', () => {
     checkSelectedPaths(renderResult, [desiredPath])
   })
 
-  it('Single click and then double click to select Button on a Card Scene Root', async () => {
+  xit('Single click and then double click to select Button on a Card Scene Root', async () => {
     FOR_TESTS_setNextGeneratedUids([
       'cardlistfragment',
       'manuallistfragment',

From 74db368ff208e3a6e44a5d85c769784a33161f67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Tue, 10 Sep 2024 14:20:17 +0200
Subject: [PATCH 008/272] x for grids (#6332)

https://github.com/user-attachments/assets/7627f89e-c87b-4246-9ac5-1f70ca4e254d

## Problem
The x shortcut isn't aware of grids

## Fix
Special case grid elements in the x shortcut.

### How it works
If an element is a grid child and it's absolute positioned (for example
after a reparent or drawing), pressing x removes the `position:
absolute`, absolute positioning prop, and any explicit width/height
props on the element, and sets
`gridRow`/`gridColumn`/`gridRowStart`/gridRowEnd`/`gridColumnStart`/gridColumnEnd`
in way that snaps the element into the grid cells it occupies.

When an element is a non-position-absolute grid child, and x is pressed,
`position: absolute` is set, the element is sized to its visual
dimensions with `width`/`height`, and `top: 0` / `left: 0` is added.
Making it possible to absolute resize the element after this is left to
a follow-up PR.

### Details
- Due to a circular dependency, a lot of grid cell related code was
factored out into `grid-cell-utils.ts`
---
 .../canvas-strategy-types.ts                  |   2 +-
 .../strategies/grid-cell-bounds.ts            | 139 ++++++++++
 .../strategies/grid-helpers.ts                | 131 +--------
 .../grid-rearrange-keyboard-strategy.ts       |   3 +-
 ...-rearrange-move-strategy.spec.browser2.tsx |   2 +-
 .../strategies/grid-reparent-strategy.tsx     |   2 +-
 ...-resize-element-strategy.spec.browser2.tsx |   3 +-
 .../grid-resize-element-strategy.ts           |   3 +-
 .../canvas/controls/grid-controls.tsx         |   9 +-
 .../components/editor/global-shortcuts.tsx    |   1 +
 .../editor/shortcuts.spec.browser2.tsx        | 252 ++++++++++++++++++
 .../components/inspector/inspector-common.ts  | 136 +++++++++-
 12 files changed, 541 insertions(+), 142 deletions(-)
 create mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
index e1809f458ea4..dff0105a300e 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
@@ -10,9 +10,9 @@ import type { InsertionSubject } from '../../editor/editor-modes'
 import type { AllElementProps } from '../../editor/store/editor-state'
 import type { CanvasCommand } from '../commands/commands'
 import type { ActiveFrameAction } from '../commands/set-active-frames-command'
-import type { GridCellCoordinates } from '../controls/grid-controls'
 import type { StrategyApplicationStatus } from './interaction-state'
 import type { TargetGridCellData } from './strategies/grid-helpers'
+import type { GridCellCoordinates } from './strategies/grid-cell-bounds'
 
 // TODO: fill this in, maybe make it an ADT for different strategies
 export interface CustomStrategyState {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
new file mode 100644
index 000000000000..122fd4657bb6
--- /dev/null
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -0,0 +1,139 @@
+import type { ElementPath } from 'utopia-shared/src/types'
+import type { ElementInstanceMetadata } from '../../../../core/shared/element-template'
+import type { CanvasVector, WindowPoint, WindowRectangle } from '../../../../core/shared/math-utils'
+import {
+  isInfinityRectangle,
+  offsetPoint,
+  rectContainsPoint,
+  windowPoint,
+  windowRectangle,
+} from '../../../../core/shared/math-utils'
+import { canvasPointToWindowPoint } from '../../dom-lookup'
+import * as EP from '../../../../core/shared/element-path'
+
+export type GridCellCoordinates = { row: number; column: number }
+
+export function gridCellCoordinates(row: number, column: number): GridCellCoordinates {
+  return { row: row, column: column }
+}
+
+const gridCellTargetIdPrefix = 'grid-cell-target-'
+
+export function gridCellTargetId(
+  gridElementPath: ElementPath,
+  row: number,
+  column: number,
+): string {
+  return gridCellTargetIdPrefix + `${EP.toString(gridElementPath)}-${row}-${column}`
+}
+
+export function getGridCellUnderMouse(mousePoint: WindowPoint) {
+  return getGridCellAtPoint(mousePoint, false)
+}
+
+export function getGridCellUnderMouseRecursive(mousePoint: WindowPoint) {
+  return getGridCellAtPoint(mousePoint, true)
+}
+
+function isGridCellTargetId(id: string): boolean {
+  return id.startsWith(gridCellTargetIdPrefix)
+}
+
+export function getGridCellAtPoint(
+  point: WindowPoint,
+  duplicating: boolean,
+): { id: string; coordinates: GridCellCoordinates; cellWindowRectangle: WindowRectangle } | null {
+  function maybeRecursivelyFindCellAtPoint(
+    elements: Element[],
+  ): { element: Element; cellWindowRectangle: WindowRectangle } | null {
+    // If this used during duplication, the canvas controls will be in the way and we need to traverse the children too.
+    for (const element of elements) {
+      if (isGridCellTargetId(element.id)) {
+        const domRect = element.getBoundingClientRect()
+        const windowRect = windowRectangle(domRect)
+        if (rectContainsPoint(windowRect, point)) {
+          return { element: element, cellWindowRectangle: windowRect }
+        }
+      }
+
+      if (duplicating) {
+        const child = maybeRecursivelyFindCellAtPoint(Array.from(element.children))
+        if (child != null) {
+          return child
+        }
+      }
+    }
+
+    return null
+  }
+
+  const cellUnderMouse = maybeRecursivelyFindCellAtPoint(
+    document.elementsFromPoint(point.x, point.y),
+  )
+  if (cellUnderMouse == null) {
+    return null
+  }
+
+  const { element, cellWindowRectangle } = cellUnderMouse
+  const row = element.getAttribute('data-grid-row')
+  const column = element.getAttribute('data-grid-column')
+
+  return {
+    id: element.id,
+    cellWindowRectangle: cellWindowRectangle,
+    coordinates: gridCellCoordinates(
+      row == null ? 0 : parseInt(row),
+      column == null ? 0 : parseInt(column),
+    ),
+  }
+}
+
+const GRID_BOUNDS_TOLERANCE = 5 // px
+
+export function getGridCellBoundsFromCanvas(
+  cell: ElementInstanceMetadata,
+  canvasScale: number,
+  canvasOffset: CanvasVector,
+) {
+  const cellFrame = cell.globalFrame
+  if (cellFrame == null || isInfinityRectangle(cellFrame)) {
+    return null
+  }
+
+  const canvasFrameWidth = cellFrame.width * canvasScale
+  const canvasFrameHeight = cellFrame.height * canvasScale
+
+  const cellOriginPoint = offsetPoint(
+    canvasPointToWindowPoint(cellFrame, canvasScale, canvasOffset),
+    windowPoint({ x: GRID_BOUNDS_TOLERANCE, y: GRID_BOUNDS_TOLERANCE }),
+  )
+  const cellOrigin = getGridCellAtPoint(cellOriginPoint, true)
+  if (cellOrigin == null) {
+    return null
+  }
+
+  const cellEndPoint = offsetPoint(
+    cellOriginPoint,
+    windowPoint({
+      x: canvasFrameWidth - GRID_BOUNDS_TOLERANCE,
+      y: canvasFrameHeight - GRID_BOUNDS_TOLERANCE,
+    }),
+  )
+  const cellEnd = getGridCellAtPoint(cellEndPoint, true)
+  if (cellEnd == null) {
+    return null
+  }
+
+  const cellOriginCoords = cellOrigin.coordinates
+  const cellEndCoords = cellEnd.coordinates
+
+  const cellWidth = cellEndCoords.column - cellOriginCoords.column + 1
+  const cellHeight = cellEndCoords.row - cellOriginCoords.row + 1
+
+  return {
+    column: cellOriginCoords.column,
+    row: cellOriginCoords.row,
+    width: cellWidth,
+    height: cellHeight,
+  }
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index f1d8f4a573e5..b8c0839bd4c9 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -13,10 +13,8 @@ import {
   canvasPoint,
   isInfinityRectangle,
   offsetPoint,
-  rectContainsPoint,
   scaleVector,
   windowPoint,
-  windowRectangle,
   windowVector,
   type WindowPoint,
 } from '../../../../core/shared/math-utils'
@@ -26,83 +24,16 @@ import { setProperty } from '../../commands/set-property-command'
 import { canvasPointToWindowPoint } from '../../dom-lookup'
 import type { DragInteractionData } from '../interaction-state'
 import type { GridCustomStrategyState, InteractionCanvasState } from '../canvas-strategy-types'
-import type { GridCellCoordinates } from '../../controls/grid-controls'
-import { gridCellCoordinates } from '../../controls/grid-controls'
 import * as EP from '../../../../core/shared/element-path'
 import { deleteProperties } from '../../commands/delete-properties-command'
 import { cssNumber, isCSSKeyword } from '../../../inspector/common/css-utils'
 import { setCssLengthProperty } from '../../commands/set-css-length-command'
-
-export function getGridCellUnderMouse(mousePoint: WindowPoint) {
-  return getGridCellAtPoint(mousePoint, false)
-}
-
-function getGridCellUnderMouseRecursive(mousePoint: WindowPoint) {
-  return getGridCellAtPoint(mousePoint, true)
-}
-
-const gridCellTargetIdPrefix = 'grid-cell-target-'
-
-export function gridCellTargetId(
-  gridElementPath: ElementPath,
-  row: number,
-  column: number,
-): string {
-  return gridCellTargetIdPrefix + `${EP.toString(gridElementPath)}-${row}-${column}`
-}
-
-function isGridCellTargetId(id: string): boolean {
-  return id.startsWith(gridCellTargetIdPrefix)
-}
-
-export function getGridCellAtPoint(
-  point: WindowPoint,
-  duplicating: boolean,
-): { id: string; coordinates: GridCellCoordinates; cellWindowRectangle: WindowRectangle } | null {
-  function maybeRecursivelyFindCellAtPoint(
-    elements: Element[],
-  ): { element: Element; cellWindowRectangle: WindowRectangle } | null {
-    // If this used during duplication, the canvas controls will be in the way and we need to traverse the children too.
-    for (const element of elements) {
-      if (isGridCellTargetId(element.id)) {
-        const domRect = element.getBoundingClientRect()
-        const windowRect = windowRectangle(domRect)
-        if (rectContainsPoint(windowRect, point)) {
-          return { element: element, cellWindowRectangle: windowRect }
-        }
-      }
-
-      if (duplicating) {
-        const child = maybeRecursivelyFindCellAtPoint(Array.from(element.children))
-        if (child != null) {
-          return child
-        }
-      }
-    }
-
-    return null
-  }
-
-  const cellUnderMouse = maybeRecursivelyFindCellAtPoint(
-    document.elementsFromPoint(point.x, point.y),
-  )
-  if (cellUnderMouse == null) {
-    return null
-  }
-
-  const { element, cellWindowRectangle } = cellUnderMouse
-  const row = element.getAttribute('data-grid-row')
-  const column = element.getAttribute('data-grid-column')
-
-  return {
-    id: element.id,
-    cellWindowRectangle: cellWindowRectangle,
-    coordinates: gridCellCoordinates(
-      row == null ? 0 : parseInt(row),
-      column == null ? 0 : parseInt(column),
-    ),
-  }
-}
+import type { GridCellCoordinates } from './grid-cell-bounds'
+import {
+  getGridCellUnderMouse,
+  getGridCellUnderMouseRecursive,
+  gridCellCoordinates,
+} from './grid-cell-bounds'
 
 export function runGridRearrangeMove(
   targetElement: ElementPath,
@@ -501,53 +432,3 @@ function gridChildAbsoluteMoveCommands(
     ),
   ]
 }
-
-const GRID_BOUNDS_TOLERANCE = 5 // px
-
-export function getGridCellBoundsFromCanvas(
-  cell: ElementInstanceMetadata,
-  canvasScale: number,
-  canvasOffset: CanvasVector,
-) {
-  const cellFrame = cell.globalFrame
-  if (cellFrame == null || isInfinityRectangle(cellFrame)) {
-    return null
-  }
-
-  const canvasFrameWidth = cellFrame.width * canvasScale
-  const canvasFrameHeight = cellFrame.height * canvasScale
-
-  const cellOriginPoint = offsetPoint(
-    canvasPointToWindowPoint(cellFrame, canvasScale, canvasOffset),
-    windowPoint({ x: GRID_BOUNDS_TOLERANCE, y: GRID_BOUNDS_TOLERANCE }),
-  )
-  const cellOrigin = getGridCellAtPoint(cellOriginPoint, true)
-  if (cellOrigin == null) {
-    return null
-  }
-
-  const cellEndPoint = offsetPoint(
-    cellOriginPoint,
-    windowPoint({
-      x: canvasFrameWidth - GRID_BOUNDS_TOLERANCE,
-      y: canvasFrameHeight - GRID_BOUNDS_TOLERANCE,
-    }),
-  )
-  const cellEnd = getGridCellAtPoint(cellEndPoint, true)
-  if (cellEnd == null) {
-    return null
-  }
-
-  const cellOriginCoords = cellOrigin.coordinates
-  const cellEndCoords = cellEnd.coordinates
-
-  const cellWidth = cellEndCoords.column - cellOriginCoords.column + 1
-  const cellHeight = cellEndCoords.row - cellOriginCoords.row + 1
-
-  return {
-    column: cellOriginCoords.column,
-    row: cellOriginCoords.row,
-    width: cellWidth,
-    height: cellHeight,
-  }
-}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
index a8254b819c27..b378a9702ad6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
@@ -14,7 +14,8 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { getGridCellBoundsFromCanvas, setGridPropsCommands } from './grid-helpers'
+import { setGridPropsCommands } from './grid-helpers'
+import { getGridCellBoundsFromCanvas } from './grid-cell-bounds'
 import { accumulatePresses } from './shared-keyboard-strategy-helpers'
 
 export function gridRearrangeResizeKeyboardStrategy(
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
index 6326d5d74cb2..212b6c8cb2df 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
@@ -11,7 +11,7 @@ import { GridCellTestId } from '../../controls/grid-controls'
 import { mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
 import type { EditorRenderResult } from '../../ui-jsx.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
-import { gridCellTargetId } from './grid-helpers'
+import { gridCellTargetId } from './grid-cell-bounds'
 
 describe('grid rearrange move strategy', () => {
   it('can rearrange elements on a grid', async () => {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 4c9a08b22bf3..079640425291 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -34,7 +34,6 @@ import { flattenSelection } from './shared-move-strategies-helpers'
 import type { CanvasRectangle, CanvasVector } from '../../../../core/shared/math-utils'
 import { canvasVector, isInfinityRectangle, offsetPoint } from '../../../../core/shared/math-utils'
 import { showGridControls } from '../../commands/show-grid-controls-command'
-import type { GridCellCoordinates } from '../../controls/grid-controls'
 import { GridControls } from '../../controls/grid-controls'
 import {
   gridPositionValue,
@@ -49,6 +48,7 @@ import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-prop
 import { canvasPointToWindowPoint } from '../../dom-lookup'
 import type { TargetGridCellData } from './grid-helpers'
 import { getTargetCell, setGridPropsCommands } from './grid-helpers'
+import type { GridCellCoordinates } from './grid-cell-bounds'
 
 export function gridReparentStrategy(
   reparentTarget: ReparentTarget,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 269d2c956972..85928426360a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -14,8 +14,7 @@ import { mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
 import type { EditorRenderResult } from '../../ui-jsx.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
 import type { GridResizeEdge } from '../interaction-state'
-import { gridCellTargetId } from './grid-helpers'
-import { wait } from '../../../../core/model/performance-scripts'
+import { gridCellTargetId } from './grid-cell-bounds'
 
 async function runCellResizeTest(
   editor: EditorRenderResult,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index a855235f8f39..0c1e4127742c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -15,8 +15,9 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
+import { getGridCellUnderMouse } from './grid-cell-bounds'
 import type { TargetGridCellData } from './grid-helpers'
-import { getGridCellUnderMouse, setGridPropsCommands } from './grid-helpers'
+import { setGridPropsCommands } from './grid-helpers'
 
 export const gridResizeElementStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 9ac6790706d7..077b729a6d45 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -64,7 +64,6 @@ import {
   GridResizeEdges,
   gridResizeHandle,
 } from '../canvas-strategies/interaction-state'
-import { gridCellTargetId } from '../canvas-strategies/strategies/grid-helpers'
 import { resizeBoundingBoxFromSide } from '../canvas-strategies/strategies/resize-helpers'
 import type { EdgePosition } from '../canvas-types'
 import {
@@ -80,17 +79,13 @@ import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
 import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
 import { CanvasLabel } from './select-mode/controls-common'
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
+import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
+import { gridCellTargetId } from '../canvas-strategies/strategies/grid-cell-bounds'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
 export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`
 
-export type GridCellCoordinates = { row: number; column: number }
-
-export function gridCellCoordinates(row: number, column: number): GridCellCoordinates {
-  return { row: row, column: column }
-}
-
 function getCellsCount(template: GridAutoOrTemplateBase | null): number {
   if (template == null) {
     return 0
diff --git a/editor/src/components/editor/global-shortcuts.tsx b/editor/src/components/editor/global-shortcuts.tsx
index 2c6c4e21bbe1..ef19ed9c7287 100644
--- a/editor/src/components/editor/global-shortcuts.tsx
+++ b/editor/src/components/editor/global-shortcuts.tsx
@@ -963,6 +963,7 @@ export function handleKeyDown(
           editor.allElementProps,
           editor.elementPathTree,
           editor.selectedViews,
+          { scale: editor.canvas.scale, offset: editor.canvas.realCanvasOffset },
         )
 
         if (commands.length === 0) {
diff --git a/editor/src/components/editor/shortcuts.spec.browser2.tsx b/editor/src/components/editor/shortcuts.spec.browser2.tsx
index f52647bf152a..0e1342631ae7 100644
--- a/editor/src/components/editor/shortcuts.spec.browser2.tsx
+++ b/editor/src/components/editor/shortcuts.spec.browser2.tsx
@@ -259,6 +259,258 @@ describe('shortcuts', () => {
         canvasRectangle({ x: 186, y: 34, width: 94, height: 55 }),
       )
     })
+
+    describe('inside grid', () => {
+      it('can place element spanning a single cell into the grid and take it out', async () => {
+        const editor = await renderTestEditorWithCode(
+          `import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 620,
+        height: 548,
+        position: 'absolute',
+        left: 212,
+        top: 103,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+      data-uid='grid'
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 527,
+          height: 461,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr 1fr 1fr',
+          contain: 'layout',
+          gridGap: 2,
+          position: 'absolute',
+          left: 46,
+          top: 43,
+        }}
+      >
+        <div
+        data-uid='child'
+        data-testid='child'
+          style={{
+            backgroundColor: '#0162ff',
+            position: 'absolute',
+            left: 13,
+            top: 19,
+            width: 74,
+            height: 59,
+            gridColumn: 3,
+            gridRow: 3,
+          }}
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`,
+          'await-first-dom-report',
+        )
+
+        await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+        await pressKey('x')
+
+        {
+          const { position, gridRow, gridColumn, width, height } =
+            editor.renderedDOM.getByTestId('child').style
+          expect({ position, gridRow, gridColumn, width, height }).toEqual({
+            gridColumn: '3',
+            gridRow: '3',
+            height: '',
+            position: '',
+            width: '',
+          })
+        }
+
+        await pressKey('x') // convert it back to absolute
+
+        {
+          const { position, gridRow, gridColumn, width, height, top, left } =
+            editor.renderedDOM.getByTestId('child').style
+          expect({ position, gridRow, gridColumn, width, height, top, left }).toEqual({
+            gridColumn: '3',
+            gridRow: '3',
+            height: '90.5px',
+            left: '0px',
+            position: 'absolute',
+            top: '0px',
+            width: '104px',
+          })
+        }
+      })
+
+      it('can place element spanning multiple grid cells into the grid and take it out', async () => {
+        const editor = await renderTestEditorWithCode(
+          `import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 620,
+        height: 548,
+        position: 'absolute',
+        left: 212,
+        top: 103,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+      data-uid='grid'
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 527,
+          height: 461,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr 1fr 1fr',
+          contain: 'layout',
+          gridGap: 2,
+          position: 'absolute',
+          left: 46,
+          top: 43,
+        }}
+      >
+        <div
+        data-uid='child'
+        data-testid='child'
+          style={{
+            position: 'absolute',
+            left: 29,
+            top: 34,
+            width: 237,
+            height: 121,
+            gridColumn: 2,
+            gridRow: 2,
+            backgroundImage:
+              'linear-gradient(44deg, #BE3B5E 0%, #309212 100%)',
+          }}
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`,
+          'await-first-dom-report',
+        )
+
+        await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+        await pressKey('x')
+
+        {
+          const { position, gridRow, gridColumn, width, height } =
+            editor.renderedDOM.getByTestId('child').style
+          expect({ position, gridRow, gridColumn, width, height }).toEqual({
+            gridColumn: '2 / 5',
+            gridRow: '2 / 4',
+            height: '',
+            position: '',
+            width: '',
+          })
+        }
+
+        await pressKey('x') // convert it back to absolute
+
+        {
+          const { position, gridRow, gridColumn, width, height, top, left } =
+            editor.renderedDOM.getByTestId('child').style
+          expect({ position, gridRow, gridColumn, width, height, top, left }).toEqual({
+            gridColumn: '2',
+            gridRow: '2',
+            height: '183px',
+            left: '0px',
+            position: 'absolute',
+            top: '0px',
+            width: '315.5px',
+          })
+        }
+      })
+
+      it('can place element with no grid positioning props set', async () => {
+        const editor = await renderTestEditorWithCode(
+          `import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 620,
+        height: 548,
+        position: 'absolute',
+        left: 212,
+        top: 103,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        data-uid='grid'
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 527,
+          height: 461,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr 1fr 1fr',
+          contain: 'layout',
+          gridGap: 2,
+          position: 'absolute',
+          left: 46,
+          top: 43,
+        }}
+      >
+        <div
+          data-uid='child'
+          data-testid='child'
+          style={{
+            backgroundColor: '#0162ff',
+            position: 'absolute',
+            left: 113,
+            top: 119,
+            width: 174,
+            height: 119,
+          }}
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`,
+          'await-first-dom-report',
+        )
+
+        await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+        await pressKey('x')
+
+        {
+          const { position, gridRow, gridColumn, width, height } =
+            editor.renderedDOM.getByTestId('child').style
+          expect({ position, gridRow, gridColumn, width, height }).toEqual({
+            gridColumn: '2 / 4',
+            gridRow: '2 / 4',
+            height: '',
+            position: '',
+            width: '',
+          })
+        }
+      })
+    })
   })
 
   describe('jump to parent', () => {
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index 0f48cbb3ff53..69c4c92638b6 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -13,7 +13,6 @@ import type {
   ElementInstanceMetadata,
   ElementInstanceMetadataMap,
   JSXAttributes,
-  JSXElement,
 } from '../../core/shared/element-template'
 import {
   isJSXElement,
@@ -35,7 +34,12 @@ import { optionalMap } from '../../core/shared/optional-utils'
 import type { CSSProperties } from 'react'
 import type { CanvasCommand } from '../canvas/commands/commands'
 import { deleteProperties } from '../canvas/commands/delete-properties-command'
-import { setProperty } from '../canvas/commands/set-property-command'
+import {
+  propertyToDelete,
+  propertyToSet,
+  setProperty,
+  updateBulkProperties,
+} from '../canvas/commands/set-property-command'
 import { addContainLayoutIfNeeded } from '../canvas/commands/add-contain-layout-if-needed-command'
 import {
   setCssLengthProperty,
@@ -47,7 +51,7 @@ import {
   setPropHugAbsoluteStrategies,
 } from './inspector-strategies/inspector-strategies'
 import { commandsForFirstApplicableStrategy } from './inspector-strategies/inspector-strategy'
-import type { Size } from '../../core/shared/math-utils'
+import type { CanvasVector, Size } from '../../core/shared/math-utils'
 import {
   isFiniteRectangle,
   isInfinityRectangle,
@@ -76,6 +80,7 @@ import { fixedSizeDimensionHandlingText } from '../text-editor/text-handling'
 import { convertToAbsolute } from '../canvas/commands/convert-to-absolute-command'
 import { hugPropertiesFromStyleMap } from '../../core/shared/dom-utils'
 import { setHugContentForAxis } from './inspector-strategies/hug-contents-strategy'
+import { getGridCellBoundsFromCanvas } from '../canvas/canvas-strategies/strategies/grid-cell-bounds'
 
 export type StartCenterEnd = 'flex-start' | 'center' | 'flex-end'
 
@@ -1216,6 +1221,7 @@ export function toggleAbsolutePositioningCommands(
   allElementProps: AllElementProps,
   elementPathTree: ElementPathTrees,
   selectedViews: Array<ElementPath>,
+  canvasContext: { scale: number; offset: CanvasVector },
 ): Array<CanvasCommand> {
   const commands = selectedViews.flatMap((elementPath) => {
     const maybeGroupConversionCommands = groupConversionCommands(
@@ -1229,6 +1235,16 @@ export function toggleAbsolutePositioningCommands(
       return maybeGroupConversionCommands
     }
 
+    const maybeGridElementConversionCommands = gridChildAbsolutePositionConversionCommands(
+      jsxMetadata,
+      elementPathTree,
+      elementPath,
+      canvasContext,
+    )
+    if (maybeGridElementConversionCommands != null) {
+      return maybeGridElementConversionCommands
+    }
+
     const element = MetadataUtils.findElementByElementPath(jsxMetadata, elementPath)
     if (element == null) {
       return []
@@ -1401,3 +1417,117 @@ export function getConstraintsIncludingImplicitForElement(
 export function isHuggingParent(element: ElementInstanceMetadata, property: 'width' | 'height') {
   return element.specialSizeMeasurements.computedHugProperty[property] != null
 }
+
+interface ContainedGridPositioning {
+  type: 'contained'
+  gridRow: number
+  gridColumn: number
+}
+
+interface SpanningGridPositioning {
+  type: 'span'
+  gridRowStart: number
+  gridRowEnd: number
+  gridColumnStart: number
+  gridColumnEnd: number
+}
+
+type DetectedGridPositioning = ContainedGridPositioning | SpanningGridPositioning
+
+function getGridElementBounds(
+  cell: ElementInstanceMetadata,
+  canvasContext: { scale: number; offset: CanvasVector },
+): DetectedGridPositioning | null {
+  const initialCellBounds = getGridCellBoundsFromCanvas(
+    cell,
+    canvasContext.scale,
+    canvasContext.offset,
+  )
+
+  if (initialCellBounds == null) {
+    return null
+  }
+
+  if (initialCellBounds.height > 1 || initialCellBounds.width > 1) {
+    return {
+      type: 'span',
+      gridRowStart: initialCellBounds.row,
+      gridRowEnd: initialCellBounds.row + initialCellBounds.height,
+      gridColumnStart: initialCellBounds.column,
+      gridColumnEnd: initialCellBounds.column + initialCellBounds.width,
+    }
+  }
+
+  return {
+    type: 'contained',
+    gridRow: initialCellBounds.row,
+    gridColumn: initialCellBounds.column,
+  }
+}
+
+function gridChildAbsolutePositionConversionCommands(
+  jsxMetadata: ElementInstanceMetadataMap,
+  elementPathTree: ElementPathTrees,
+  elementPath: ElementPath,
+  canvasContext: { scale: number; offset: CanvasVector },
+): CanvasCommand[] | null {
+  if (!MetadataUtils.isGridCell(jsxMetadata, elementPath)) {
+    return null
+  }
+
+  const instance = MetadataUtils.findElementByElementPath(jsxMetadata, elementPath)
+  if (instance == null) {
+    return null
+  }
+
+  const cellBounds = getGridElementBounds(instance, canvasContext)
+  if (cellBounds == null) {
+    return null
+  }
+
+  if (MetadataUtils.isPositionAbsolute(instance)) {
+    const gridPositioningProps =
+      cellBounds.type === 'contained'
+        ? [
+            { prop: PP.create('style', 'gridRow'), value: cellBounds.gridRow },
+            { prop: PP.create('style', 'gridColumn'), value: cellBounds.gridColumn },
+          ]
+        : cellBounds.type === 'span'
+        ? [
+            { prop: PP.create('style', 'gridRowStart'), value: cellBounds.gridRowStart },
+            { prop: PP.create('style', 'gridRowEnd'), value: cellBounds.gridRowEnd },
+            { prop: PP.create('style', 'gridColumnStart'), value: cellBounds.gridColumnStart },
+            { prop: PP.create('style', 'gridColumnEnd'), value: cellBounds.gridColumnEnd },
+          ]
+        : assertNever(cellBounds)
+
+    return [
+      ...nukeAllAbsolutePositioningPropsCommands(elementPath),
+      updateBulkProperties('always', elementPath, [
+        propertyToDelete(PP.create('style', 'width')),
+        propertyToDelete(PP.create('style', 'height')),
+        ...gridElementProps.map(propertyToDelete),
+        ...gridPositioningProps.map(({ prop, value }) => propertyToSet(prop, value)),
+      ]),
+    ]
+  }
+
+  const { row, column } =
+    cellBounds.type === 'contained'
+      ? { row: cellBounds.gridRow, column: cellBounds.gridColumn }
+      : cellBounds.type === 'span'
+      ? { row: cellBounds.gridRowStart, column: cellBounds.gridColumnStart }
+      : assertNever(cellBounds)
+
+  return [
+    ...sizeToVisualDimensions(jsxMetadata, elementPathTree, elementPath),
+    updateBulkProperties('always', elementPath, [
+      ...gridElementProps.map(propertyToDelete),
+      propertyToSet(PP.create('style', 'gridRow'), row),
+      propertyToSet(PP.create('style', 'gridColumn'), column),
+      propertyToSet(PP.create('style', 'position'), 'absolute'),
+      propertyToSet(PP.create('style', 'top'), 0),
+      propertyToSet(PP.create('style', 'left'), 0),
+    ]),
+  ]
+}

From 1293ce4be9ddf2e4c176112ad73283699bb5306f Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 10 Sep 2024 15:40:11 +0200
Subject: [PATCH 009/272] Resize grid cell if the element is set to fill,
 resize the element otherwise (#6347)

**Problem:**

Currently when a grid element is selected, it's only possible to resize
it's _cell_.

**Fix:**

This PR expands the functionality in two ways:

1. if the selected element is set to fill on both width and height, show
the _cell_ resize controls
2. otherwise, show the regular _element_ resize controls



https://github.com/user-attachments/assets/9e1ad8ac-0dae-43c2-b0f0-c282152e884b



Fixes #6348
---
 .../strategies/basic-resize-strategy.tsx      | 20 ++++++---
 .../grid-draw-to-insert-strategy.tsx          | 12 +----
 .../grid-rearrange-keyboard-strategy.ts       | 12 +----
 .../grid-rearrange-move-duplicate-strategy.ts | 12 +----
 ...-rearrange-move-strategy.spec.browser2.tsx |  4 +-
 .../grid-rearrange-move-strategy.ts           | 12 +----
 .../strategies/grid-reparent-strategy.tsx     | 44 ++++++++-----------
 ...-resize-element-strategy.spec.browser2.tsx | 22 +++++++++-
 .../grid-resize-element-strategy.ts           | 20 +++++----
 .../rearrange-grid-swap-strategy.ts           | 12 +----
 .../strategies/resize-grid-strategy.ts        | 11 +----
 .../strategies/set-grid-gap-strategy.tsx      | 12 +----
 .../canvas/controls/grid-controls.tsx         | 11 +++++
 13 files changed, 94 insertions(+), 110 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
index 6a0246a9980f..ba16fa986e4d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -1,8 +1,8 @@
-import { styleStringInArray } from '../../../../utils/common-constants'
 import { getLayoutProperty } from '../../../../core/layout/getLayoutProperty'
 import type { PropsOrJSXAttributes } from '../../../../core/model/element-metadata-utils'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { foldEither, isLeft, right } from '../../../../core/shared/either'
+import * as EP from '../../../../core/shared/element-path'
 import type { ElementInstanceMetadata } from '../../../../core/shared/element-template'
 import { isJSXElement } from '../../../../core/shared/element-template'
 import type { CanvasPoint, CanvasRectangle } from '../../../../core/shared/math-utils'
@@ -11,7 +11,10 @@ import {
   isInfinityRectangle,
   offsetPoint,
 } from '../../../../core/shared/math-utils'
+import { styleStringInArray } from '../../../../utils/common-constants'
+import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
+import { isFixedHugFillModeApplied } from '../../../inspector/inspector-common'
 import type { EdgePosition } from '../../canvas-types'
 import { oppositeEdgePosition } from '../../canvas-types'
 import {
@@ -24,9 +27,12 @@ import {
   adjustCssLengthProperties,
   lengthPropertyToAdjust,
 } from '../../commands/adjust-css-length-command'
+import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
+import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls'
 import { ImmediateParentBounds } from '../../controls/parent-bounds'
 import { ImmediateParentOutlines } from '../../controls/parent-outlines'
 import { AbsoluteResizeControl } from '../../controls/select-mode/absolute-resize-control'
@@ -44,16 +50,13 @@ import {
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
 import { honoursPropsSize } from './absolute-utils'
+import { treatElementAsGroupLike } from './group-helpers'
 import {
   getLockedAspectRatio,
   isAnySelectedElementAspectRatioLocked,
   pickCursorFromEdgePosition,
   resizeBoundingBox,
 } from './resize-helpers'
-import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
-import { queueTrueUpElement } from '../../commands/queue-true-up-command'
-import { treatElementAsGroupLike } from './group-helpers'
-import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
 
 export const BASIC_RESIZE_STRATEGY_ID = 'BASIC_RESIZE'
 
@@ -76,7 +79,11 @@ export function basicResizeStrategy(
   const elementDimensionsProps = metadata != null ? getElementDimensions(metadata) : null
   const elementParentBounds = metadata?.specialSizeMeasurements.immediateParentBounds ?? null
 
-  if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+  const isGridCell = MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)
+  if (
+    isGridCell &&
+    isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'fill')
+  ) {
     return null
   }
 
@@ -113,6 +120,7 @@ export function basicResizeStrategy(
         key: 'parent-bounds-control',
         show: 'visible-only-while-active',
       }),
+      ...(isGridCell ? [controlsForGridPlaceholders(EP.parentPath(selectedElement))] : []),
     ],
     fitness:
       interactionSession != null &&
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index c485498776aa..a1a518dbef2c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -24,7 +24,7 @@ import type { InsertElementInsertionSubject } from '../../commands/insert-elemen
 import { insertElementInsertionSubject } from '../../commands/insert-element-insertion-subject'
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { wildcardPatch } from '../../commands/wildcard-patch-command'
-import { GridControls } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls'
 import { canvasPointToWindowPoint } from '../../dom-lookup'
 import {
   getWrapperWithGeneratedUid,
@@ -153,15 +153,7 @@ const gridDrawToInsertStrategyInner =
         category: 'tools',
         type: 'pointer',
       },
-      controlsToRender: [
-        {
-          control: GridControls,
-          props: { targets: [targetParent] },
-          key: `draw-into-grid-strategy-controls`,
-          show: 'always-visible',
-          priority: 'bottom',
-        },
-      ],
+      controlsToRender: [controlsForGridPlaceholders(targetParent)],
       fitness: 5,
       apply: (strategyLifecycle) => {
         const newTargetCell = getGridCellUnderCursor(
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
index b378a9702ad6..3807c3d9b71d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
@@ -2,7 +2,7 @@ import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
 import type { GridPositionValue } from '../../../../core/shared/element-template'
 import { gridPositionValue } from '../../../../core/shared/element-template'
-import { GridControls, GridControlsKey } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls'
 import type {
   CanvasStrategy,
   CustomStrategyState,
@@ -78,15 +78,7 @@ export function gridRearrangeResizeKeyboardStrategy(
       category: 'modalities',
       type: 'reorder-large',
     },
-    controlsToRender: [
-      {
-        control: GridControls,
-        props: { targets: [parentGridPath] },
-        key: GridControlsKey(parentGridPath),
-        show: 'always-visible',
-        priority: 'bottom',
-      },
-    ],
+    controlsToRender: [controlsForGridPlaceholders(parentGridPath)],
     fitness: fitness(interactionSession),
     apply: () => {
       if (interactionSession == null || interactionSession.interactionData.type !== 'KEYBOARD') {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
index bdc88e3624cf..ec44a5d3d40d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
@@ -7,7 +7,7 @@ import { setCursorCommand } from '../../commands/set-cursor-command'
 import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
-import { GridControls, GridControlsKey } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { CustomStrategyState, InteractionCanvasState } from '../canvas-strategy-types'
@@ -49,15 +49,7 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
       category: 'tools',
       type: 'pointer',
     },
-    controlsToRender: [
-      {
-        control: GridControls,
-        props: { targets: [EP.parentPath(selectedElement)] },
-        key: GridControlsKey(EP.parentPath(selectedElement)),
-        show: 'always-visible',
-        priority: 'bottom',
-      },
-    ],
+    controlsToRender: [controlsForGridPlaceholders(EP.parentPath(selectedElement))],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 3),
     apply: () => {
       if (
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
index 212b6c8cb2df..43d2142f35e1 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
@@ -5,7 +5,7 @@ import {
   offsetPoint,
   windowPoint,
 } from '../../../../core/shared/math-utils'
-import { selectComponentsForTest, wait } from '../../../../utils/utils.test-utils'
+import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 import CanvasActions from '../../canvas-actions'
 import { GridCellTestId } from '../../controls/grid-controls'
 import { mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
@@ -117,6 +117,8 @@ export var storyboard = (
           gridTemplateRows: '1fr',
           gridColumn: 1,
           gridRow: 2,
+		  width: '100%',
+		  height: '100%',
         }}
       >
         <div
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index 193d7b4566ba..0e108b5dfb1a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -1,7 +1,7 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
-import { GridControls, GridControlsKey } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls'
 import type {
   ElementInstanceMetadataMap,
   GridAutoOrTemplateBase,
@@ -409,14 +409,6 @@ function getStrategyToApply(
   return {
     type: 'GRID_REARRANGE',
     name: 'Rearrange Grid (Move)',
-    controlsToRender: [
-      {
-        control: GridControls,
-        props: { targets: [parentGridPath] },
-        key: GridControlsKey(parentGridPath),
-        show: 'always-visible',
-        priority: 'bottom',
-      },
-    ],
+    controlsToRender: [controlsForGridPlaceholders(parentGridPath)],
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 079640425291..6af2b2f095a9 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -1,15 +1,29 @@
+import type { NodeModules, ProjectContentTreeRoot } from 'utopia-shared/src/types'
+import type { BuiltInDependencies } from '../../../../core/es-modules/package-manager/built-in-dependencies-list'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { mapDropNulls } from '../../../../core/shared/array-utils'
 import * as EP from '../../../../core/shared/element-path'
-import * as PP from '../../../../core/shared/property-path'
+import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
+import {
+  gridPositionValue,
+  type ElementInstanceMetadataMap,
+} from '../../../../core/shared/element-template'
+import type { CanvasRectangle, CanvasVector } from '../../../../core/shared/math-utils'
+import { canvasVector, isInfinityRectangle, offsetPoint } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
+import * as PP from '../../../../core/shared/property-path'
+import type { AllElementProps } from '../../../editor/store/editor-state'
+import type { InsertionPath } from '../../../editor/store/insertion-path'
 import { CSSCursor } from '../../canvas-types'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 import { propertyToSet, updateBulkProperties } from '../../commands/set-property-command'
+import { showGridControls } from '../../commands/show-grid-controls-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls'
 import { ParentBounds } from '../../controls/parent-bounds'
 import { ParentOutlines } from '../../controls/parent-outlines'
 import { ZeroSizedElementControls } from '../../controls/zero-sized-element-controls'
+import { canvasPointToWindowPoint } from '../../dom-lookup'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import type {
   CanvasStrategy,
@@ -27,27 +41,13 @@ import {
 import type { DragInteractionData, InteractionSession, UpdatedPathMap } from '../interaction-state'
 import { honoursPropsPosition, shouldKeepMovingDraggedGroupChildren } from './absolute-utils'
 import { replaceFragmentLikePathsWithTheirChildrenRecursive } from './fragment-like-helpers'
+import type { TargetGridCellData } from './grid-helpers'
+import { getTargetCell, setGridPropsCommands } from './grid-helpers'
 import { ifAllowedToReparent, isAllowedToReparent } from './reparent-helpers/reparent-helpers'
+import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-property-changes'
 import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentOutcome, pathToReparent } from './reparent-utils'
 import { flattenSelection } from './shared-move-strategies-helpers'
-import type { CanvasRectangle, CanvasVector } from '../../../../core/shared/math-utils'
-import { canvasVector, isInfinityRectangle, offsetPoint } from '../../../../core/shared/math-utils'
-import { showGridControls } from '../../commands/show-grid-controls-command'
-import { GridControls } from '../../controls/grid-controls'
-import {
-  gridPositionValue,
-  type ElementInstanceMetadataMap,
-} from '../../../../core/shared/element-template'
-import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
-import type { AllElementProps } from '../../../editor/store/editor-state'
-import type { BuiltInDependencies } from '../../../../core/es-modules/package-manager/built-in-dependencies-list'
-import type { NodeModules, ProjectContentTreeRoot } from 'utopia-shared/src/types'
-import type { InsertionPath } from '../../../editor/store/insertion-path'
-import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-property-changes'
-import { canvasPointToWindowPoint } from '../../dom-lookup'
-import type { TargetGridCellData } from './grid-helpers'
-import { getTargetCell, setGridPropsCommands } from './grid-helpers'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 
 export function gridReparentStrategy(
@@ -137,13 +137,7 @@ export function controlsForGridReparent(reparentTarget: ReparentTarget): Control
       key: 'zero-size-control',
       show: 'visible-only-while-active',
     }),
-    {
-      control: GridControls,
-      props: { targets: [reparentTarget.newParent.intendedParentPath] },
-      key: `draw-into-grid-strategy-controls`,
-      show: 'always-visible',
-      priority: 'bottom',
-    },
+    controlsForGridPlaceholders(reparentTarget.newParent.intendedParentPath),
   ]
 }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 85928426360a..0ba50510b128 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -45,6 +45,15 @@ async function runCellResizeTest(
 }
 
 describe('grid resize element strategy', () => {
+  it('cannot resize non-filling cells', async () => {
+    const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+    await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/grid-child-not-filling')])
+
+    const resizeControl = editor.renderedDOM.queryByTestId(GridResizeEdgeTestId('column-end'))
+    expect(resizeControl).toBeNull()
+  })
+
   describe('column-end', () => {
     it('can enlarge element', async () => {
       const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
@@ -230,6 +239,8 @@ describe('grid resize element strategy', () => {
     expect(styleProp).toEqual([
       ['minHeight', 0],
       ['backgroundColor', '#db48f6'],
+      ['width', '100%'],
+      ['height', '100%'],
       ['gridColumnStart', 7],
       ['gridColumnEnd', 11],
       ['gridRow', 2],
@@ -271,6 +282,8 @@ export var storyboard = (
           gridTemplateRows: '1fr',
           gridColumn: 1,
           gridRow: 2,
+		  width: '100%',
+		  height: '100%',
         }}
       >
         <div
@@ -392,8 +405,11 @@ export var storyboard = (
             gridColumnStart: 1,
             gridRowStart: 3,
             backgroundColor: '#0074ff',
+			width: 25,
+			height: 30,
           }}
-          data-uid='ccc'
+          data-uid='grid-child-not-filling'
+		  data-testid='grid-child-not-filling'
         />
         <div
           style={{
@@ -403,6 +419,8 @@ export var storyboard = (
             gridColumnStart: 7,
             gridRowStart: 2,
             backgroundColor: '#db48f6',
+			width: '100%',
+			height: '100%',
           }}
           data-uid='ddd'
           data-testid='grid-child'
@@ -451,6 +469,8 @@ export var storyboard = (
             minHeight: 0,
             gridArea: '2 / 7 / 3 / 10',
             backgroundColor: '#db48f6',
+			width: '100%',
+			height: '100%',
           }}
           data-uid='ddd'
           data-testid='grid-child'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 0c1e4127742c..7f2c358e3d1b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -4,7 +4,8 @@ import type { GridElementProperties, GridPosition } from '../../../../core/share
 import { offsetPoint } from '../../../../core/shared/math-utils'
 import { assertNever } from '../../../../core/shared/utils'
 import { isCSSKeyword } from '../../../inspector/common/css-utils'
-import { GridControls, GridControlsKey, GridResizeControls } from '../../controls/grid-controls'
+import { isFixedHugFillModeApplied } from '../../../inspector/inspector-common'
+import { controlsForGridPlaceholders, GridResizeControls } from '../../controls/grid-controls'
 import { canvasPointToWindowPoint } from '../../dom-lookup'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
@@ -38,6 +39,15 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
     return null
   }
 
+  const isFillContainer = isFixedHugFillModeApplied(
+    canvasState.startingMetadata,
+    selectedElement,
+    'fill',
+  )
+  if (!isFillContainer) {
+    return null
+  }
+
   const parentGridPath = EP.parentPath(selectedElement)
 
   return {
@@ -55,13 +65,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         key: `grid-resize-controls-${EP.toString(selectedElement)}`,
         show: 'always-visible',
       },
-      {
-        control: GridControls,
-        props: { targets: [parentGridPath] },
-        key: GridControlsKey(parentGridPath),
-        show: 'always-visible',
-        priority: 'bottom',
-      },
+      controlsForGridPlaceholders(parentGridPath),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_RESIZE_HANDLE', 1),
     apply: () => {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
index 85688d7c2441..54971c1429bf 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
@@ -14,7 +14,7 @@ import { create } from '../../../../core/shared/property-path'
 import type { CanvasCommand } from '../../commands/commands'
 import { deleteProperties } from '../../commands/delete-properties-command'
 import { rearrangeChildren } from '../../commands/rearrange-children-command'
-import { GridControls, GridControlsKey } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls'
 import { recurseIntoChildrenOfMapOrFragment } from '../../gap-utils'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
@@ -67,15 +67,7 @@ export const rearrangeGridSwapStrategy: CanvasStrategyFactory = (
       category: 'tools',
       type: 'pointer',
     },
-    controlsToRender: [
-      {
-        control: GridControls,
-        props: { targets: [parentGridPath] },
-        key: GridControlsKey(parentGridPath),
-        show: 'always-visible',
-        priority: 'bottom',
-      },
-    ],
+    controlsToRender: [controlsForGridPlaceholders(parentGridPath)],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 1),
     apply: () => {
       if (
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index 619fe370b4ce..57f261d4e10f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -9,8 +9,7 @@ import * as EP from '../../../../core/shared/element-path'
 import * as PP from '../../../../core/shared/property-path'
 import { setProperty } from '../../commands/set-property-command'
 import {
-  GridControls,
-  GridControlsKey,
+  controlsForGridPlaceholders,
   GridRowColumnResizingControls,
 } from '../../controls/grid-controls'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
@@ -73,13 +72,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         show: 'always-visible',
         priority: 'top',
       },
-      {
-        control: GridControls,
-        props: { targets: [gridPath] },
-        key: GridControlsKey(gridPath),
-        show: 'always-visible',
-        priority: 'bottom',
-      },
+      controlsForGridPlaceholders(gridPath),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_AXIS_HANDLE', 1),
     apply: () => {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
index e284b8d75aa0..b99698f01649 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
@@ -43,7 +43,7 @@ import { activeFrameTargetPath, setActiveFrames } from '../../commands/set-activ
 import type { GridGapControlProps } from '../../controls/select-mode/grid-gap-control'
 import { GridGapControl } from '../../controls/select-mode/grid-gap-control'
 import type { GridControlsProps } from '../../controls/grid-controls'
-import { GridControls } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls'
 
 const SetGridGapStrategyId = 'SET_GRID_GAP_STRATEGY'
 
@@ -142,15 +142,7 @@ export const setGridGapStrategy: CanvasStrategyFactory = (
 
   // when the drag is ongoing, keep showing the grid cells
   if (isDragOngoing(interactionSession)) {
-    controlsToRender.push(
-      controlWithProps({
-        control: GridControls,
-        props: { targets: [selectedElement] },
-        key: `set-grid-gap-strategy-controls`,
-        show: 'always-visible',
-        priority: 'bottom',
-      }),
-    )
+    controlsToRender.push(controlsForGridPlaceholders(selectedElement))
   }
 
   return {
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 077b729a6d45..7a4fcdc11cfd 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -51,6 +51,7 @@ import { useDispatch } from '../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
 import { useRollYourOwnFeatures } from '../../navigator/left-pane/roll-your-own-pane'
 import CanvasActions from '../canvas-actions'
+import type { ControlWithProps } from '../canvas-strategies/canvas-strategy-types'
 import { controlForStrategyMemoized } from '../canvas-strategies/canvas-strategy-types'
 import type {
   GridResizeEdge,
@@ -1695,3 +1696,13 @@ export function getGridPlaceholderDomElementFromCoordinates(params: {
 }
 
 const gridPlaceholderBorder = (color: string) => `2px solid ${color}`
+
+export function controlsForGridPlaceholders(gridPath: ElementPath): ControlWithProps<any> {
+  return {
+    control: GridControls,
+    props: { targets: [gridPath] },
+    key: GridControlsKey(gridPath),
+    show: 'always-visible',
+    priority: 'bottom',
+  }
+}

From c929e929f10076a52c1aedf85a7ddf53ba5583e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Tue, 10 Sep 2024 17:54:52 +0200
Subject: [PATCH 010/272] Absolute move should use the root cell in
 calculations (#6342)

## Problem


https://github.com/user-attachments/assets/a0e33272-6b37-4d5b-b145-4437b615bc1b

## Fix
Use `targetRootCell` in the absolute move offset calculations


https://github.com/user-attachments/assets/c8864c75-ed4d-42a3-be6f-72b8da14988e
---
 .../strategies/grid-cell-bounds.ts            | 20 +++++
 .../strategies/grid-helpers.ts                | 23 ++---
 ...-rearrange-move-strategy.spec.browser2.tsx | 83 +++++++++++++++++++
 .../canvas/controls/grid-controls.tsx         | 14 +---
 4 files changed, 120 insertions(+), 20 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
index 122fd4657bb6..02e7bf3f1d81 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -137,3 +137,23 @@ export function getGridCellBoundsFromCanvas(
     height: cellHeight,
   }
 }
+
+export function getGridPlaceholderDomElementFromCoordinates(params: {
+  row: number
+  column: number
+}): HTMLElement | null {
+  return document.querySelector(
+    `[data-grid-row="${params.row}"]` + `[data-grid-column="${params.column}"]`,
+  )
+}
+
+export function getCellWindowRect(coords: GridCellCoordinates): WindowRectangle | null {
+  const element = getGridPlaceholderDomElementFromCoordinates(coords)
+  if (element == null) {
+    return null
+  }
+
+  const domRect = element!.getBoundingClientRect()
+  const windowRect = windowRectangle(domRect)
+  return windowRect
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index b8c0839bd4c9..aa51581ec657 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -30,6 +30,7 @@ import { cssNumber, isCSSKeyword } from '../../../inspector/common/css-utils'
 import { setCssLengthProperty } from '../../commands/set-css-length-command'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 import {
+  getCellWindowRect,
   getGridCellUnderMouse,
   getGridCellUnderMouseRecursive,
   gridCellCoordinates,
@@ -86,16 +87,6 @@ export function runGridRearrangeMove(
 
   const targetCellUnderMouse = targetCellData?.gridCellCoordinates ?? null
 
-  const absoluteMoveCommands =
-    targetCellData == null
-      ? []
-      : gridChildAbsoluteMoveCommands(
-          MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
-          targetCellData.cellWindowRectangle,
-          interactionData,
-          { scale: canvasScale, canvasOffset: canvasOffset },
-        )
-
   const originalElementMetadata = MetadataUtils.findElementByElementPath(
     jsxMetadata,
     selectedElement,
@@ -148,6 +139,18 @@ export function runGridRearrangeMove(
 
   const targetRootCell = gridCellCoordinates(row.start, column.start)
 
+  const windowRect = getCellWindowRect(targetRootCell)
+
+  const absoluteMoveCommands =
+    windowRect == null
+      ? []
+      : gridChildAbsoluteMoveCommands(
+          MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
+          windowRect,
+          interactionData,
+          { scale: canvasScale, canvasOffset: canvasOffset },
+        )
+
   const gridCellMoveCommands = setGridPropsCommands(targetElement, gridTemplate, {
     gridColumnStart: gridPositionValue(column.start),
     gridColumnEnd: gridPositionValue(column.end),
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
index 43d2142f35e1..ce0becd9726d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
@@ -370,6 +370,89 @@ export var storyboard = (
         })
       }
     })
+
+    it("can move element spanning multiple cell by a cell that isn't the root cell", async () => {
+      const editor = await renderTestEditorWithCode(
+        `import { Scene, Storyboard } from 'utopia-api'
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      data-uid='scene'
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 700,
+        height: 759,
+        position: 'absolute',
+        left: 212,
+        top: 128,
+      }}
+      data-label='Playground'
+    >
+      <div
+        data-uid='grid'
+        style={{
+          backgroundColor: '#fefefe',
+          position: 'absolute',
+          left: 123,
+          top: 133,
+          width: 461,
+          height: 448,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr 1fr',
+          border: '5px solid #000',
+          gridGap: 10,
+        }}
+      >
+        <div
+          data-uid='child'
+          data-testid='child'
+          style={{
+            position: 'absolute',
+            wordBreak: 'break-word',
+            width: 127,
+            height: 122,
+            backgroundColor: '#ff2800',
+            gridColumn: 2,
+            gridRow: 2,
+            top: 45,
+            left: 41.25,
+          }}
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`,
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+
+      const child = editor.renderedDOM.getByTestId('child')
+      const childBounds = child.getBoundingClientRect()
+      const startPoint = windowPoint({
+        x: Math.floor(childBounds.left + childBounds.width - 3),
+        y: Math.floor(childBounds.top + childBounds.height - 3),
+      })
+
+      await mouseDragFromPointToPoint(
+        editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
+        startPoint,
+        offsetPoint(startPoint, windowPoint({ x: -100, y: -100 })),
+      )
+
+      {
+        const { top, left, gridColumn, gridRow } = child.style
+        expect({ top, left, gridColumn, gridRow }).toEqual({
+          gridColumn: '1',
+          gridRow: '1',
+          left: '60.5px',
+          top: '61px',
+        })
+      }
+    })
   })
 })
 
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 7a4fcdc11cfd..f3d47c9991f8 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -81,7 +81,10 @@ import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
 import { CanvasLabel } from './select-mode/controls-common'
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
-import { gridCellTargetId } from '../canvas-strategies/strategies/grid-cell-bounds'
+import {
+  getGridPlaceholderDomElementFromCoordinates,
+  gridCellTargetId,
+} from '../canvas-strategies/strategies/grid-cell-bounds'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -1686,15 +1689,6 @@ export function getGridPlaceholderDomElement(elementPath: ElementPath): HTMLElem
   return document.getElementById(gridKeyFromPath(elementPath))
 }
 
-export function getGridPlaceholderDomElementFromCoordinates(params: {
-  row: number
-  column: number
-}): HTMLElement | null {
-  return document.querySelector(
-    `[data-grid-row="${params.row}"]` + `[data-grid-column="${params.column}"]`,
-  )
-}
-
 const gridPlaceholderBorder = (color: string) => `2px solid ${color}`
 
 export function controlsForGridPlaceholders(gridPath: ElementPath): ControlWithProps<any> {

From 73b4df7b5a904761ab95b8a70ed196d662ab0e21 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 11 Sep 2024 12:49:50 +0100
Subject: [PATCH 011/272] performance(editor) Improved `buildTree`. (#6325)

- Reworked `buildTree_MUTATE` to build the tree from the root downwards,
combining it with some of the logic taken from `getChildrenPaths`.
- Further improvement to `isDescendantOf` replacing the previous
implementation.
- `getReorderedPaths` now avoids a lot of repeated logic for checking
the element type.
- Broke apart `ElementPathTree.children` into two separate fields
  to make for easier ordering.
- Added `getElementPathTreeChildren` and `forEachElementPathTreeChild`
utility functions.
- `buildTree_MUTATE` now adds to the two different children fields based
on the element path representing inner children over property children.
- `getReorderedIndexInPaths` further reworked to handle shifting by the
siblings.
- Fixed some tests that had expressions incorrectly ordered.
---
 editor/src/benchmarks.benchmark.ts            |   4 +-
 editor/src/components/canvas/canvas.ts        |   4 +-
 .../controls/select-mode/scene-label.tsx      |   4 +-
 .../canvas/dom-sampler.spec.browser2.tsx      |   6 +-
 editor/src/components/canvas/gap-utils.ts     |   8 +-
 .../store/store-deep-equality-instances.ts    |   6 +-
 .../components/navigator/navigator-utils.ts   |  18 +-
 .../navigator/navigator.spec.browser2.tsx     |   6 +-
 .../model/element-metadata-utils.spec.tsx     |  14 +
 .../src/core/model/element-metadata-utils.ts  |  19 +-
 .../shared/element-path-tree.benchmark.ts     |  56 ++++
 .../element-path-tree.spec.browser2.tsx       |   6 +-
 editor/src/core/shared/element-path-tree.ts   | 283 ++++++++++--------
 editor/src/core/shared/element-path.ts        |  50 +++-
 14 files changed, 324 insertions(+), 160 deletions(-)

diff --git a/editor/src/benchmarks.benchmark.ts b/editor/src/benchmarks.benchmark.ts
index 4cb01c8292cf..57192a78c629 100644
--- a/editor/src/benchmarks.benchmark.ts
+++ b/editor/src/benchmarks.benchmark.ts
@@ -5,9 +5,9 @@ import { benchmarkOptics } from './core/shared/optics.benchmark'
 import { benchmarkPropertyPathFunction } from './core/shared/property-path.benchmark'
 import { benchmarkGetUniqueUids } from './core/model/get-unique-ids.benchmark'
 
-// await benchmarkBuildTree()
+await benchmarkBuildTree()
 // await benchmarkElementPathFunction()
 // await benchmarkPropertyPathFunction()
 // await benchmarkAttributes()
 // await benchmarkOptics()
-await benchmarkGetUniqueUids()
+// await benchmarkGetUniqueUids()
diff --git a/editor/src/components/canvas/canvas.ts b/editor/src/components/canvas/canvas.ts
index ca9b4009d4db..d59c126e1400 100644
--- a/editor/src/components/canvas/canvas.ts
+++ b/editor/src/components/canvas/canvas.ts
@@ -18,7 +18,7 @@ import type {
 } from '../editor/store/editor-state'
 import * as EP from '../../core/shared/element-path'
 import type { ElementPathTree, ElementPathTrees } from '../../core/shared/element-path-tree'
-import { getSubTree } from '../../core/shared/element-path-tree'
+import { forEachElementPathTreeChild, getSubTree } from '../../core/shared/element-path-tree'
 import { assertNever, fastForEach } from '../../core/shared/utils'
 import { memoize } from '../../core/shared/memoize'
 import { maybeToArray } from '../../core/shared/optional-utils'
@@ -73,7 +73,7 @@ function getFramesInCanvasContextUncached(
 
     let children: Array<ElementPathTree> = []
     let unfurledComponents: Array<ElementPathTree> = []
-    fastForEach(Object.values(componentTree.children), (childTree) => {
+    forEachElementPathTreeChild(componentTree, (childTree) => {
       if (EP.isRootElementOfInstance(childTree.path)) {
         unfurledComponents.push(childTree)
       } else {
diff --git a/editor/src/components/canvas/controls/select-mode/scene-label.tsx b/editor/src/components/canvas/controls/select-mode/scene-label.tsx
index fc5db3cd09f0..36e9227f4157 100644
--- a/editor/src/components/canvas/controls/select-mode/scene-label.tsx
+++ b/editor/src/components/canvas/controls/select-mode/scene-label.tsx
@@ -18,7 +18,7 @@ import { boundingArea, createInteractionViaMouse } from '../../canvas-strategies
 import { windowToCanvasCoordinates } from '../../dom-lookup'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
 import { isCommentMode, isSelectModeWithArea } from '../../../editor/editor-modes'
-import { getSubTree } from '../../../../core/shared/element-path-tree'
+import { getElementPathTreeChildren, getSubTree } from '../../../../core/shared/element-path-tree'
 
 interface SceneLabelControlProps {
   maybeHighlightOnHover: (target: ElementPath) => void
@@ -65,7 +65,7 @@ const SceneLabel = React.memo<SceneLabelProps>((props) => {
       if (subTree == null) {
         return false
       } else {
-        return subTree.children.length === 1
+        return getElementPathTreeChildren(subTree).length === 1
       }
     },
     'SceneLabel sceneHasSingleChild',
diff --git a/editor/src/components/canvas/dom-sampler.spec.browser2.tsx b/editor/src/components/canvas/dom-sampler.spec.browser2.tsx
index f1ca07c54a40..3b93654cda41 100644
--- a/editor/src/components/canvas/dom-sampler.spec.browser2.tsx
+++ b/editor/src/components/canvas/dom-sampler.spec.browser2.tsx
@@ -296,16 +296,14 @@ export var storyboard = (
         navigatorEntryToKey,
       ),
     ).toEqual([
-      'regular-sb/1e7',
       'regular-sb/sc',
       'regular-sb/sc/app',
       'regular-sb/sc/app:app-root',
       'regular-sb/sc/app:app-root/card',
       'regular-sb/sc/app:app-root/card:card-root',
-      'regular-sb/sc/app:app-root/card:card-root/30d',
       'regular-sb/sc/app:app-root/card:card-root/card-span',
+      'regular-sb/sc/app:app-root/card:card-root/30d',
       'regular-sb/sc/app:app-root/card/card-child',
-      'regular-sb/sc/app:app-root/children-code-block',
       'regular-sb/sc/app:app-root/frag',
       'regular-sb/sc/app:app-root/frag/frag-child',
       'regular-sb/sc/app:app-root/frag/cond-1',
@@ -319,7 +317,9 @@ export var storyboard = (
       'synthetic-sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/d84-attribute',
       'conditional-clause-sb/sc/app:app-root/frag/cond-1-false-case',
       'synthetic-sb/sc/app:app-root/frag/cond-1/019-attribute',
+      'regular-sb/sc/app:app-root/children-code-block',
       'regular-sb/sc/app/app-child',
+      'regular-sb/1e7',
     ])
   })
 
diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
index 99a70eeae5c4..c30454a2afeb 100644
--- a/editor/src/components/canvas/gap-utils.ts
+++ b/editor/src/components/canvas/gap-utils.ts
@@ -22,7 +22,11 @@ import type { CSSNumber, FlexDirection } from '../inspector/common/css-utils'
 import type { Sides } from 'utopia-api/core'
 import { sides } from 'utopia-api/core'
 import { styleStringInArray } from '../../utils/common-constants'
-import { getSubTree, type ElementPathTrees } from '../../core/shared/element-path-tree'
+import {
+  getElementPathTreeChildren,
+  getSubTree,
+  type ElementPathTrees,
+} from '../../core/shared/element-path-tree'
 import { isReversedFlexDirection } from '../../core/model/flex-utils'
 import * as EP from '../../core/shared/element-path'
 import { treatElementAsFragmentLike } from './canvas-strategies/strategies/fragment-like-helpers'
@@ -380,7 +384,7 @@ export function recurseIntoChildrenOfMapOrFragment(
     return []
   }
 
-  return subTree.children.flatMap((element) => {
+  return getElementPathTreeChildren(subTree).flatMap((element) => {
     const elementPath = element.path
     if (EP.isRootElementOfInstance(elementPath)) {
       return []
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 6f3b13d23626..e19d4f36fab4 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -2996,12 +2996,14 @@ export function ElementPathTreeKeepDeepEquality(
   oldValue: ElementPathTree,
   newValue: ElementPathTree,
 ): KeepDeepEqualityResult<ElementPathTree> {
-  return combine3EqualityCalls(
+  return combine4EqualityCalls(
     (pathTree) => pathTree.path,
     ElementPathKeepDeepEquality,
     (pathTree) => pathTree.pathString,
     createCallWithTripleEquals<string>(),
-    (pathTree) => pathTree.children,
+    (pathTree) => pathTree.innerChildren,
+    arrayDeepEquality(ElementPathTreeKeepDeepEquality),
+    (pathTree) => pathTree.propsChildren,
     arrayDeepEquality(ElementPathTreeKeepDeepEquality),
     elementPathTree,
   )(oldValue, newValue)
diff --git a/editor/src/components/navigator/navigator-utils.ts b/editor/src/components/navigator/navigator-utils.ts
index c3a8c358566e..d84324561244 100644
--- a/editor/src/components/navigator/navigator-utils.ts
+++ b/editor/src/components/navigator/navigator-utils.ts
@@ -37,7 +37,11 @@ import {
   syntheticNavigatorEntry,
 } from '../editor/store/editor-state'
 import type { ElementPathTree, ElementPathTrees } from '../../core/shared/element-path-tree'
-import { getCanvasRoots, getSubTree } from '../../core/shared/element-path-tree'
+import {
+  getCanvasRoots,
+  getElementPathTreeChildren,
+  getSubTree,
+} from '../../core/shared/element-path-tree'
 import { assertNever } from '../../core/shared/utils'
 import type { ConditionalCase } from '../../core/model/conditionals'
 import { getConditionalClausePath } from '../../core/model/conditionals'
@@ -320,7 +324,9 @@ function walkRegularNavigatorEntry(
 
       const childPath = EP.appendToPath(elementPath, getUtopiaID(propValue))
 
-      const subTreeChild = subTree?.children.find((child) => EP.pathsEqual(child.path, childPath))
+      const subTreeChild = getElementPathTreeChildren(subTree).find((child) =>
+        EP.pathsEqual(child.path, childPath),
+      )
       if (subTreeChild != null) {
         const childTreeEntry = createNavigatorSubtree(
           metadata,
@@ -359,7 +365,7 @@ function walkRegularNavigatorEntry(
     })
   }
 
-  const childrenPaths = subTree.children.filter(
+  const childrenPaths = getElementPathTreeChildren(subTree).filter(
     (child) => !processedAccumulator.has(EP.toString(child.path)),
   )
   const children: Array<NavigatorTree> = mapDropNulls((child) => {
@@ -457,7 +463,7 @@ function walkConditionalClause(
   const branch = conditionalCase === 'true-case' ? conditional.whenTrue : conditional.whenFalse
 
   // Walk the clause of the conditional.
-  const clausePathTrees = Object.values(conditionalSubTree.children).filter((childPath) => {
+  const clausePathTrees = getElementPathTreeChildren(conditionalSubTree).filter((childPath) => {
     if (isDynamic(childPath.path) && hasElementsWithin(branch)) {
       for (const element of Object.values(branch.elementsWithin)) {
         const firstChildPath = EP.appendToPath(EP.parentPath(clausePath), element.uid)
@@ -513,7 +519,7 @@ function walkMapExpression(
   const commentFlag = findUtopiaCommentFlag(element.comments, 'map-count')
 
   const mapCountOverride = isUtopiaPropOrCommentFlagMapCount(commentFlag) ? commentFlag.value : null
-  const mappedChildren = Object.values(subTree.children).map((child) =>
+  const mappedChildren = getElementPathTreeChildren(subTree).map((child) =>
     createNavigatorSubtree(
       metadata,
       elementPathTrees,
@@ -531,7 +537,7 @@ function walkMapExpression(
     }
 
     let invalidEntries: Array<NavigatorTree> = []
-    for (let i = Object.values(subTree.children).length; i < mapCountOverride; i++) {
+    for (let i = getElementPathTreeChildren(subTree).length; i < mapCountOverride; i++) {
       const entry = invalidOverrideNavigatorEntry(
         EP.appendToPath(subTree.path, `invalid-override-${i + 1}`),
         'data source not found',
diff --git a/editor/src/components/navigator/navigator.spec.browser2.tsx b/editor/src/components/navigator/navigator.spec.browser2.tsx
index 2da3ac334c1d..e8911f87814c 100644
--- a/editor/src/components/navigator/navigator.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator.spec.browser2.tsx
@@ -5495,16 +5495,14 @@ describe('Navigator row order', () => {
         navigatorEntryToKey,
       ),
     ).toEqual([
-      'regular-sb/1e7',
       'regular-sb/sc',
       'regular-sb/sc/app',
       'regular-sb/sc/app:app-root',
       'regular-sb/sc/app:app-root/card',
       'regular-sb/sc/app:app-root/card:card-root',
-      'regular-sb/sc/app:app-root/card:card-root/30d',
       'regular-sb/sc/app:app-root/card:card-root/card-span',
+      'regular-sb/sc/app:app-root/card:card-root/30d',
       'regular-sb/sc/app:app-root/card/card-child',
-      'regular-sb/sc/app:app-root/children-code-block',
       'regular-sb/sc/app:app-root/frag',
       'regular-sb/sc/app:app-root/frag/frag-child',
       'regular-sb/sc/app:app-root/frag/cond-1',
@@ -5518,7 +5516,9 @@ describe('Navigator row order', () => {
       'synthetic-sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/d84-attribute',
       'conditional-clause-sb/sc/app:app-root/frag/cond-1-false-case',
       'synthetic-sb/sc/app:app-root/frag/cond-1/019-attribute',
+      'regular-sb/sc/app:app-root/children-code-block',
       'regular-sb/sc/app/app-child',
+      'regular-sb/1e7',
     ])
   })
 
diff --git a/editor/src/core/model/element-metadata-utils.spec.tsx b/editor/src/core/model/element-metadata-utils.spec.tsx
index 49ab92bb84da..695b9a2de175 100644
--- a/editor/src/core/model/element-metadata-utils.spec.tsx
+++ b/editor/src/core/model/element-metadata-utils.spec.tsx
@@ -1101,6 +1101,7 @@ describe('getElementLabel', () => {
       spanElementMetadata.elementPath,
       EP.toString(spanElementMetadata.elementPath),
       [],
+      [],
     ),
     [EP.toString(divElementMetadata.elementPath)]: elementPathTree(
       divElementMetadata.elementPath,
@@ -1110,8 +1111,10 @@ describe('getElementLabel', () => {
           spanElementMetadata.elementPath,
           EP.toString(spanElementMetadata.elementPath),
           [],
+          [],
         ),
       ],
+      [],
     ),
   }
   it('the label of a spin containing text is that text', () => {
@@ -1138,16 +1141,19 @@ describe('getting the root paths', () => {
       testComponentSceneElement.elementPath,
       EP.toString(testComponentSceneElement.elementPath),
       [],
+      [],
     )
     const testStoryboardChildTree = elementPathTree(
       testStoryboardChildElement.elementPath,
       EP.toString(testStoryboardChildElement.elementPath),
       [],
+      [],
     )
     const storyboardTree = elementPathTree(
       EP.elementPath([[BakedInStoryboardUID]]),
       EP.toString(EP.elementPath([[BakedInStoryboardUID]])),
       [testComponentSceneTree, testStoryboardChildTree],
+      [],
     )
     const pathTrees: ElementPathTrees = {
       [EP.toString(EP.elementPath([[BakedInStoryboardUID]]))]: storyboardTree,
@@ -1170,41 +1176,49 @@ describe('getting the root paths', () => {
       testComponentSceneChildElement.elementPath,
       EP.toString(testComponentSceneChildElement.elementPath),
       [],
+      [],
     )
     const testComponentChild1Tree = elementPathTree(
       testComponentMetadataChild1.elementPath,
       EP.toString(testComponentMetadataChild1.elementPath),
       [],
+      [],
     )
     const testComponentChild2Tree = elementPathTree(
       testComponentMetadataChild2.elementPath,
       EP.toString(testComponentMetadataChild2.elementPath),
       [],
+      [],
     )
     const testComponentChild3Tree = elementPathTree(
       testComponentMetadataChild3.elementPath,
       EP.toString(testComponentMetadataChild3.elementPath),
       [],
+      [],
     )
     const testComponentRoot1Tree = elementPathTree(
       testComponentRoot1.elementPath,
       EP.toString(testComponentRoot1.elementPath),
       [testComponentChild1Tree, testComponentChild2Tree, testComponentChild3Tree],
+      [],
     )
     const testComponentSceneTree = elementPathTree(
       testComponentSceneElement.elementPath,
       EP.toString(testComponentSceneElement.elementPath),
       [testComponentSceneChildTree, testComponentRoot1Tree],
+      [],
     )
     const testStoryboardChildTree = elementPathTree(
       testStoryboardChildElement.elementPath,
       EP.toString(testStoryboardChildElement.elementPath),
       [],
+      [],
     )
     const storyboardTree = elementPathTree(
       EP.elementPath([[BakedInStoryboardUID]]),
       EP.toString(EP.elementPath([[BakedInStoryboardUID]])),
       [testComponentSceneChildTree, testStoryboardChildTree],
+      [],
     )
     const pathTrees: ElementPathTrees = {
       [EP.toString(EP.elementPath([[BakedInStoryboardUID]]))]: storyboardTree,
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index de4faaa17ad5..6c089afe8b5f 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -138,7 +138,15 @@ import {
 import type { ProjectContentTreeRoot } from '../../components/assets'
 import { memoize } from '../shared/memoize'
 import type { ElementPathTree, ElementPathTrees } from '../shared/element-path-tree'
-import { buildTree, getSubTree, getCanvasRoots, elementPathTree } from '../shared/element-path-tree'
+import {
+  buildTree,
+  getSubTree,
+  getCanvasRoots,
+  elementPathTree,
+  getElementPathTreeChildren,
+  forEachElementPathTreeChild,
+  printTree,
+} from '../shared/element-path-tree'
 import type { PropertyControlsInfo } from '../../components/custom-code/code-file'
 import { findUnderlyingTargetComponentImplementationFromImportInfo } from '../../components/custom-code/code-file'
 import type {
@@ -323,7 +331,6 @@ export const MetadataUtils = {
     if (target == null) {
       return []
     }
-
     const parentPath = EP.parentPath(target)
     const siblingPathsOrNull = EP.isRootElementOfInstance(target)
       ? MetadataUtils.getRootViewPathsOrdered(metadata, pathTree, parentPath)
@@ -724,7 +731,7 @@ export const MetadataUtils = {
     if (subTree == null) {
       return []
     } else {
-      return subTree.children
+      return getElementPathTreeChildren(subTree)
         .map((child) => child.path)
         .filter((path) => !EP.isRootElementOfInstance(path))
     }
@@ -845,7 +852,7 @@ export const MetadataUtils = {
       let result: Array<ElementPath> = []
       function recurseElement(tree: ElementPathTree): void {
         result.push(tree.path)
-        fastForEach(Object.values(tree.children), (childTree) => {
+        forEachElementPathTreeChild(tree, (childTree) => {
           recurseElement(childTree)
         })
       }
@@ -878,7 +885,7 @@ export const MetadataUtils = {
       if (tree != null) {
         result.push(tree.path)
 
-        fastForEach(Object.values(tree.children), (childTree) => {
+        forEachElementPathTreeChild(tree, (childTree) => {
           recurseElement(childTree)
         })
       }
@@ -1375,7 +1382,7 @@ export const MetadataUtils = {
 
           let unfurledComponents: Array<ElementPathTree> = []
 
-          fastForEach(Object.values(subTree.children), (child) => {
+          forEachElementPathTreeChild(subTree, (child) => {
             if (EP.isRootElementOfInstance(child.path)) {
               unfurledComponents.push(child)
             } else {
diff --git a/editor/src/core/shared/element-path-tree.benchmark.ts b/editor/src/core/shared/element-path-tree.benchmark.ts
index cc55e77ac41e..ffd7351e1ff3 100644
--- a/editor/src/core/shared/element-path-tree.benchmark.ts
+++ b/editor/src/core/shared/element-path-tree.benchmark.ts
@@ -17,6 +17,62 @@ function dummyMetadataFromPaths(elementPaths: ElementPath[]): ElementInstanceMet
 }
 
 export async function benchmarkBuildTree(): Promise<void> {
+  await Benny.suite(
+    'isDescendantOf - for immediate descendant',
+    Benny.add('for immediate descendant', () => {
+      const path1 = EP.fromString(`aaa/bbb/ccc`)
+      const path2 = EP.fromString(`aaa/bbb/ccc:ddd`)
+
+      return () => {
+        EP.isDescendantOf(path2, path1)
+      }
+    }),
+    Benny.cycle(),
+    Benny.complete(),
+    Benny.save({ file: 'buildTree immediate descendant', details: true }),
+  )
+  await Benny.suite(
+    'isDescendantOf - non-descendant',
+    Benny.add('non-descendant', () => {
+      const path1 = EP.fromString(`aaa/bbb/ccc`)
+      const path2 = EP.fromString(`aaa/bbb/ddd`)
+
+      return () => {
+        EP.isDescendantOf(path2, path1)
+      }
+    }),
+    Benny.cycle(),
+    Benny.complete(),
+    Benny.save({ file: 'buildTree non-descendant', details: true }),
+  )
+  await Benny.suite(
+    'isChildOf - child',
+    Benny.add('child', () => {
+      const path1 = EP.fromString(`aaa/bbb/ccc`)
+      const path2 = EP.fromString(`aaa/bbb/ccc:ddd`)
+
+      return () => {
+        EP.isChildOf(path2, path1)
+      }
+    }),
+    Benny.cycle(),
+    Benny.complete(),
+    Benny.save({ file: 'isChildOf child', details: true }),
+  )
+  await Benny.suite(
+    'isChildOf - not child',
+    Benny.add('not child', () => {
+      const path1 = EP.fromString(`aaa/bbb/ccc`)
+      const path2 = EP.fromString(`aaa/bbb/ddd`)
+
+      return () => {
+        EP.isChildOf(path2, path1)
+      }
+    }),
+    Benny.cycle(),
+    Benny.complete(),
+    Benny.save({ file: 'isChildOf not child', details: true }),
+  )
   await Benny.suite(
     'buildTree - deeply nested elements',
     Benny.add('deeply nested elements', () => {
diff --git a/editor/src/core/shared/element-path-tree.spec.browser2.tsx b/editor/src/core/shared/element-path-tree.spec.browser2.tsx
index 16348c6b1b1d..321414400399 100644
--- a/editor/src/core/shared/element-path-tree.spec.browser2.tsx
+++ b/editor/src/core/shared/element-path-tree.spec.browser2.tsx
@@ -126,16 +126,14 @@ describe('Building and ordering the element path tree for a real project', () =>
 
     expect(printTree(renderResult.getEditorState().editor.elementPathTree)).toEqual(
       `sb
-  sb/1e7
   sb/sc
     sb/sc/app
       sb/sc/app:app-root
         sb/sc/app:app-root/card
           sb/sc/app:app-root/card:card-root
-            sb/sc/app:app-root/card:card-root/30d
             sb/sc/app:app-root/card:card-root/card-span
+            sb/sc/app:app-root/card:card-root/30d
           sb/sc/app:app-root/card/card-child
-        sb/sc/app:app-root/52e
         sb/sc/app:app-root/frag
           sb/sc/app:app-root/frag/frag-child
           sb/sc/app:app-root/frag/cond-1
@@ -144,7 +142,9 @@ describe('Building and ordering the element path tree for a real project', () =>
               sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2
                 sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/e26
                   sb/sc/app:app-root/frag/cond-1/cond-1-true/cond-2/e26/cond-2-child~~~1
+        sb/sc/app:app-root/52e
       sb/sc/app/app-child
+  sb/1e7
 `,
     )
   })
diff --git a/editor/src/core/shared/element-path-tree.ts b/editor/src/core/shared/element-path-tree.ts
index 1c223657b4f9..55d36be8332f 100644
--- a/editor/src/core/shared/element-path-tree.ts
+++ b/editor/src/core/shared/element-path-tree.ts
@@ -1,140 +1,155 @@
 import { isFeatureEnabled } from '../../utils/feature-switches'
 import { MetadataUtils } from '../model/element-metadata-utils'
-import { isLeft, isRight } from './either'
+import { forEachRight, isLeft } from './either'
 import * as EP from './element-path'
-import type { ElementInstanceMetadataMap } from './element-template'
+import type { ElementInstanceMetadataMap, JSXElementChild } from './element-template'
 import {
-  isJSElementAccess,
-  isJSExpressionMapOrOtherJavaScript,
-  isJSIdentifier,
-  isJSPropertyAccess,
   isJSXConditionalExpression,
   isJSXElement,
+  isJSXElementLike,
   isJSXFragment,
-  isJSXTextBlock,
 } from './element-template'
 import type { ElementPath } from './project-file-types'
-import { fastForEach } from './utils'
+import { assertNever } from './utils'
 
 export interface ElementPathTree {
   path: ElementPath
   pathString: string
-  children: Array<ElementPathTree>
+  innerChildren: Array<ElementPathTree>
+  propsChildren: Array<ElementPathTree>
 }
 
 export function elementPathTree(
   path: ElementPath,
   pathString: string,
-  children: Array<ElementPathTree>,
+  innerChildren: Array<ElementPathTree>,
+  propsChildren: Array<ElementPathTree>,
 ): ElementPathTree {
   return {
     path: path,
     pathString: pathString,
-    children: children,
+    innerChildren: innerChildren,
+    propsChildren: propsChildren,
   }
 }
 
+export function getElementPathTreeChildren(tree: ElementPathTree): Array<ElementPathTree> {
+  return [...tree.innerChildren, ...tree.propsChildren]
+}
+
+export function forEachElementPathTreeChild(
+  tree: ElementPathTree,
+  handler: (elementPathTree: ElementPathTree) => void,
+): void {
+  tree.innerChildren.forEach(handler)
+  tree.propsChildren.forEach(handler)
+}
+
 export type ElementPathTrees = { [key: string]: ElementPathTree }
 
 export function buildTree(...metadatas: Array<ElementInstanceMetadataMap>): ElementPathTrees {
   let tree: ElementPathTrees = {}
   for (const metadata of metadatas) {
+    // The tree should maintain the ordering of the statically defined elements,
+    // But the metadata itself may not match that ordering.
     const elementPaths = Object.values(metadata).map((m) => m.elementPath)
-    if (elementPaths.length === 0) {
-      return {}
+    const firstElementPath = elementPaths.at(0)
+    if (firstElementPath == null) {
+      continue
     }
-    const root = EP.getStoryboardPathFromPath(elementPaths[0])
+    const root = EP.getStoryboardPathFromPath(firstElementPath)
     if (root == null) {
-      return {}
+      continue
     }
 
     const missingParents = getMissingParentPaths(elementPaths, metadata)
     const paths = getReorderedPaths(elementPaths, metadata, missingParents)
 
-    buildTreeRecursive_MUTATE(root, tree, paths, metadata)
+    buildTree_MUTATE(root, tree, paths, metadata)
   }
 
   return tree
 }
 
-function buildTreeRecursive_MUTATE(
+function addRootToTree(rootPath: ElementPath, trees: ElementPathTrees): void {
+  const rootPathString = EP.toString(rootPath)
+  if (!(rootPathString in trees)) {
+    trees[rootPathString] = elementPathTree(rootPath, rootPathString, [], [])
+  }
+}
+
+function buildTree_MUTATE(
   rootPath: ElementPath,
   trees: ElementPathTrees,
   originalPaths: ElementPath[],
   metadata: ElementInstanceMetadataMap,
-): ElementPathTree[] {
-  const rootPathString = EP.toString(rootPath)
-  trees[rootPathString] = elementPathTree(rootPath, rootPathString, [])
-
-  const childrenPaths = getChildrenPaths(metadata, rootPath, originalPaths)
+): void {
+  addRootToTree(rootPath, trees)
 
-  let children: ElementPathTree[] = []
-  for (const path of childrenPaths) {
+  function addPathToTree(path: ElementPath): void {
     const pathString = EP.toString(path)
-    const subTree = elementPathTree(
-      path,
-      pathString,
-      buildTreeRecursive_MUTATE(path, trees, originalPaths, metadata),
-    )
-    trees[rootPathString].children.push(subTree)
-    children.push(subTree)
-  }
+    const alreadyAdded = pathString in trees
+    if (!alreadyAdded) {
+      const parentPath = EP.parentPath(path)
+      const subTree = elementPathTree(path, pathString, [], [])
+      trees[pathString] = subTree
+      const pathLastPart = EP.lastElementPathForPath(path)
 
-  return children
-}
+      if (pathLastPart?.length === 1) {
+        // If the last part of the path is a single element, it should be added to the inner children.
+        // This would be a path like `a/b/c:d`.
+        trees[EP.toString(parentPath)].innerChildren.push(subTree)
+      } else {
+        // Otherwise this should be added to the props children.
+        trees[EP.toString(parentPath)].propsChildren.push(subTree)
+      }
+    }
+  }
 
-function getChildrenPaths(
-  metadata: ElementInstanceMetadataMap,
-  rootPath: ElementPath,
-  paths: ElementPath[],
-): ElementPath[] {
-  const element = metadata[EP.toString(rootPath)]
+  let workingPaths = [...originalPaths]
+  workingPaths.sort((a, b) => {
+    return EP.fullDepth(a) - EP.fullDepth(b)
+  })
+  for (const workingPath of workingPaths) {
+    addPathToTree(workingPath)
+  }
 
-  // Grab the child elements from the element metadata, if available.
-  let childrenFromElement: ElementPath[] = []
-  if (
-    element != null &&
-    isRight(element.element) &&
-    (isJSXElement(element.element.value) || isJSXFragment(element.element.value)) &&
-    element.element.value.children.length > 0
-  ) {
-    childrenFromElement = element.element.value.children
-      .filter((child) => {
+  for (const elementMetadata of Object.values(metadata)) {
+    forEachRight(elementMetadata.element, (element) => {
+      if (isJSXElementLike(element)) {
+        let elementChildren: Array<JSXElementChild>
         if (isFeatureEnabled('Condensed Navigator Entries')) {
-          // if Data Entries are enabled, we should always show them in the Navigator
-          return true
+          elementChildren = element.children
         } else {
-          return (
-            !isJSXTextBlock(child) &&
-            !isJSExpressionMapOrOtherJavaScript(child) &&
-            !isJSIdentifier(child) &&
-            !isJSPropertyAccess(child) &&
-            !isJSElementAccess(child)
-          )
+          elementChildren = element.children.filter((child) => {
+            switch (child.type) {
+              case 'JSX_TEXT_BLOCK':
+              case 'ATTRIBUTE_OTHER_JAVASCRIPT':
+              case 'JSX_MAP_EXPRESSION':
+              case 'JS_IDENTIFIER':
+              case 'JS_PROPERTY_ACCESS':
+              case 'JS_ELEMENT_ACCESS':
+                return false
+              case 'JSX_ELEMENT':
+              case 'JSX_CONDITIONAL_EXPRESSION':
+              case 'JSX_FRAGMENT':
+              case 'ATTRIBUTE_FUNCTION_CALL':
+              case 'ATTRIBUTE_NESTED_ARRAY':
+              case 'ATTRIBUTE_NESTED_OBJECT':
+              case 'ATTRIBUTE_VALUE':
+                return true
+              default:
+                assertNever(child)
+            }
+          })
         }
-      })
-      .map((child) => EP.appendToPath(rootPath, child.uid))
+        for (const child of elementChildren) {
+          const childPath = EP.appendToPath(elementMetadata.elementPath, child.uid)
+          addPathToTree(childPath)
+        }
+      }
+    })
   }
-
-  // Then, grab any other child from the paths array, which is not included in the
-  // elements from the metadata.
-  const otherChildrenFromPaths = paths.filter(
-    (path) =>
-      EP.isChildOf(path, rootPath) &&
-      !childrenFromElement.some((other) => EP.pathsEqual(other, path)),
-  )
-
-  // If there are children outside the element metadata, need to merge the two and sort them.
-  // Otherwise, return the children from the meta.
-  return otherChildrenFromPaths.length > 0
-    ? childrenFromElement
-        .concat(otherChildrenFromPaths)
-        .sort(
-          (a, b) =>
-            paths.findIndex((p) => EP.pathsEqual(p, a)) -
-            paths.findIndex((p) => EP.pathsEqual(p, b)),
-        )
-    : childrenFromElement
 }
 
 function getMissingParentPaths(
@@ -159,32 +174,19 @@ function getReorderedPaths(
   metadata: ElementInstanceMetadataMap,
   missingParents: ElementPath[],
 ): ElementPath[] {
-  const elementsToReorder = original.filter((path) => {
-    const element = MetadataUtils.findElementByElementPath(metadata, path)
-    if (element == null) {
-      return false
-    }
-    return (
-      MetadataUtils.isConditionalFromMetadata(element) ||
-      MetadataUtils.isExpressionOtherJavascriptFromMetadata(element) ||
-      MetadataUtils.isJSXMapExpressionFromMetadata(element) ||
-      MetadataUtils.isIdentifierFromMetadata(element) ||
-      MetadataUtils.isPropertyAccessFromMetadata(element) ||
-      MetadataUtils.isElementAccessFromMetadata(element)
-    )
+  const pathsToBeReordered = original.filter((path) => {
+    // Omit elements that have a missing ancestor.
+    return !missingParents.some((parentPath) => EP.isDescendantOf(path, parentPath))
   })
-  const pathsToBeReordered = original.filter(
-    (path) =>
-      !elementsToReorder.some((other) => EP.pathsEqual(other, path)) && // omit conditionals, that will be reordered
-      !missingParents.some((parentPath) => EP.isDescendantOf(path, parentPath)), // omit elements that have a missing parent
-  )
-  return elementsToReorder.reduce((paths, path) => {
+
+  return original.reduce((paths, path) => {
     const index = getReorderedIndexInPaths(paths, metadata, path)
     if (index === 'do-not-reorder') {
       return paths
     }
-    const before = paths.slice(0, index)
-    const after = paths.slice(index)
+    const pathsWithout = paths.filter((pathEntry) => !EP.pathsEqual(pathEntry, path))
+    const before = pathsWithout.slice(0, index)
+    const after = pathsWithout.slice(index)
     return [...before, path, ...after]
   }, pathsToBeReordered)
 }
@@ -192,34 +194,73 @@ function getReorderedPaths(
 function getReorderedIndexInPaths(
   paths: ElementPath[],
   metadata: ElementInstanceMetadataMap,
-  conditionalPath: ElementPath,
+  pathToReorder: ElementPath,
 ): number | 'do-not-reorder' {
-  const index = paths.findIndex((path) => EP.isDescendantOf(path, conditionalPath))
-  if (index >= 0) {
-    return index
-  }
-
-  const parent = MetadataUtils.getParent(metadata, conditionalPath)
+  const parent = MetadataUtils.getParent(metadata, pathToReorder)
   if (parent == null || isLeft(parent.element)) {
     return 'do-not-reorder'
   }
+  const parentElement = parent.element.value
 
-  if (isJSXElement(parent.element.value) || isJSXFragment(parent.element.value)) {
-    const innerIndex = parent.element.value.children.findIndex((child) => {
+  if (isJSXElement(parentElement) || isJSXFragment(parentElement)) {
+    let innerIndex: number | null = null
+    let priorSiblings: Array<JSXElementChild> = []
+    for (let childIndex = 0; childIndex < parentElement.children.length; childIndex++) {
+      const child = parentElement.children[childIndex]
       const childPath = EP.appendToPath(parent.elementPath, child.uid)
-      return EP.pathsEqual(childPath, conditionalPath)
-    })
-    const parentIndex = paths.findIndex((path) => EP.pathsEqual(parent.elementPath, path))
-    if (parentIndex < 0) {
+      if (EP.pathsEqual(childPath, pathToReorder)) {
+        // We've found the item that we're trying to reorder, so record the index
+        // and stop searching.
+        innerIndex = childIndex
+        break
+      } else {
+        // As we haven't reached the element of interest, record
+        // this prior sibling for later use.
+        priorSiblings.push(child)
+      }
+    }
+    if (innerIndex == null) {
       return 'do-not-reorder'
     }
-    return parentIndex + innerIndex
-  } else if (isJSXConditionalExpression(parent.element.value)) {
+
+    const parentIndex = paths.findIndex((path) => EP.pathsEqual(parent.elementPath, path))
+
+    if (innerIndex === 0) {
+      if (parentIndex < 0) {
+        return 'do-not-reorder'
+      } else {
+        // As this is the first item, shift the index past the parent.
+        return parentIndex + 1
+      }
+    } else {
+      const priorSiblingPaths = priorSiblings.map((sibling) => {
+        return EP.appendToPath(parent.elementPath, sibling.uid)
+      })
+      // As there are prior siblings, we need to count those and their descendants,
+      // so as to shift this element past them.
+      const priorSiblingDescendants = paths.reduce((workingCount, path) => {
+        if (
+          priorSiblingPaths.some((priorSiblingPath) => {
+            return EP.isDescendantOfOrEqualTo(path, priorSiblingPath)
+          })
+        ) {
+          return workingCount + 1
+        } else {
+          return workingCount
+        }
+      }, 0)
+
+      // Shift by the parent position, add 1 to put it past the parent and then shift it by the
+      // count of the prior siblings and their descendants.
+      return parentIndex + 1 + priorSiblingDescendants
+    }
+  } else if (isJSXConditionalExpression(parentElement)) {
     const parentIndex = paths.findIndex((path) => EP.pathsEqual(parent.elementPath, path))
     if (parentIndex < 0) {
       return 'do-not-reorder'
+    } else {
+      return parentIndex
     }
-    return parentIndex
   } else {
     return 'do-not-reorder'
   }
@@ -236,7 +277,7 @@ export function getCanvasRoots(trees: ElementPathTrees): Array<ElementPathTree>
     return []
   }
 
-  return storyboardTree.children
+  return getElementPathTreeChildren(storyboardTree)
 }
 
 export function printTree(treeRoot: ElementPathTrees): string {
@@ -247,7 +288,7 @@ export function printTree(treeRoot: ElementPathTrees): string {
     }
     outputText += EP.toString(element.path)
     outputText += '\n'
-    for (const child of element.children) {
+    for (const child of getElementPathTreeChildren(element)) {
       printElement(child, depth + 1)
     }
   }
@@ -265,7 +306,7 @@ export function forEachChildOfTarget(
 ): void {
   const foundTree = getSubTree(treeRoot, target)
   if (foundTree != null) {
-    fastForEach(Object.values(foundTree.children), (subTree) => {
+    forEachElementPathTreeChild(foundTree, (subTree) => {
       handler(subTree.path)
     })
   }
diff --git a/editor/src/core/shared/element-path.ts b/editor/src/core/shared/element-path.ts
index 8bfb72740ed1..a63ee8c85a88 100644
--- a/editor/src/core/shared/element-path.ts
+++ b/editor/src/core/shared/element-path.ts
@@ -642,14 +642,48 @@ export function findAmongAncestorsOfPath<T>(
 }
 
 export function isDescendantOf(target: ElementPath, maybeAncestor: ElementPath): boolean {
-  const targetString = toString(target)
-  const maybeAncestorString = toString(maybeAncestor)
-  return (
-    targetString !== maybeAncestorString &&
-    targetString.startsWith(maybeAncestorString) &&
-    (targetString[maybeAncestorString.length] === SceneSeparator ||
-      targetString[maybeAncestorString.length] === ElementSeparator)
-  )
+  // If the target has less parts than the potential ancestor, it's by default
+  // higher up the hierarchy.
+  if (target.parts.length < maybeAncestor.parts.length) {
+    return false
+  }
+  // Check if any of the shared (by index) parts are different, if any are that
+  // means these two are on different branches of the hierarchy.
+  for (let index = 0; index < maybeAncestor.parts.length - 1; index++) {
+    const maybeAncestorPart = maybeAncestor.parts[index]
+    const targetPart = target.parts[index]
+    if (!elementPathPartsEqual(maybeAncestorPart, targetPart)) {
+      return false
+    }
+  }
+  // As the rest of the parts are the same, we can check the last part to see
+  // if the target has less parts as that puts it higher up the hierarchy than the
+  // potential ancestor.
+  const lastTargetPart = target.parts[maybeAncestor.parts.length - 1]
+  const lastAncestorPart = maybeAncestor.parts[maybeAncestor.parts.length - 1]
+  if (lastTargetPart.length < lastAncestorPart.length) {
+    return false
+  }
+  // Check the elements of the last part to see if there are any differences
+  // as that means they're on a different branch. Limiting it to the length of
+  // the potential ancestor.
+  for (let partIndex = 0; partIndex < lastAncestorPart.length; partIndex++) {
+    const part = lastAncestorPart[partIndex]
+    if (lastTargetPart[partIndex] !== part) {
+      return false
+    }
+  }
+  // If the lengths of the parts and the lengths of the last parts are the same,
+  // since so far we've determined those to all match, then these are identical paths.
+  if (
+    target.parts.length === maybeAncestor.parts.length &&
+    lastTargetPart.length === lastAncestorPart.length
+  ) {
+    return false
+  }
+
+  // Fallback meaning this is a descendant.
+  return true
 }
 
 export function getAncestorsForLastPart(path: ElementPath): ElementPath[] {

From a2d6ac7ae1fd72a0edf02f84e8c0eb0377a0cb53 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 11 Sep 2024 14:09:31 +0200
Subject: [PATCH 012/272] Fix subscribing mutation/resize observers during a
 build error (#6344)

**Problem:**
Followup to https://github.com/concrete-utopia/utopia/pull/6326
In a Remix project it can happen that in the dispatch flow we don't have
the results of the rendering in the dom yet. It can even happen, that
after a build error is fixed, we still don't have the canvas root
container in the dom.
That is a critical issue, because we attach the mutation/resize
observers to the canvas root container element, so when we don't have
that we can subscribe them, so the dom sample is not going to run when
the rendering is finished.

**Fix:**
I needed an element, which is an ancestor of the canvas root container
and
1 is always rendered
2 does not contain canvas controls or other content
I choose canvas-container-outer, but I needed to modify its ancestors so
it is always rendered, even when there is a build error.
To make sure we don't observe unnecessary elements, I filtered the query
for the resize observer to only include elements with the `data-uid`
attribute.

I needed to update the tests to make sure the observers from the
previous domwalkermutablestate don't continue to fire when there is a
change, because the outer canvas container can stay persistent between
test runs.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

Fixes https://github.com/concrete-utopia/utopia/issues/6345
---
 .../canvas/canvas-component-entry.tsx         | 13 ++++++++----
 .../canvas/canvas-wrapper-component.tsx       | 21 +++++++++----------
 editor/src/components/canvas/dom-walker.ts    |  9 ++++----
 .../components/canvas/ui-jsx.test-utils.tsx   |  5 +++++
 editor/src/templates/editor-canvas.tsx        | 16 ++++++++------
 5 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/editor/src/components/canvas/canvas-component-entry.tsx b/editor/src/components/canvas/canvas-component-entry.tsx
index ba919a3f5bbb..e9a4faaf3343 100644
--- a/editor/src/components/canvas/canvas-component-entry.tsx
+++ b/editor/src/components/canvas/canvas-component-entry.tsx
@@ -25,7 +25,11 @@ import type {
 } from './ui-jsx-canvas'
 import { DomWalkerInvalidatePathsCtxAtom, UiJsxCanvas, pickUiJsxCanvasProps } from './ui-jsx-canvas'
 
-interface CanvasComponentEntryProps {}
+export const CanvasContainerOuterId = 'canvas-container-outer'
+
+interface CanvasComponentEntryProps {
+  shouldRenderCanvas: boolean
+}
 
 export const CanvasComponentEntry = React.memo((props: CanvasComponentEntryProps) => {
   const canvasStore = React.useContext(CanvasStateContext)
@@ -85,7 +89,7 @@ const CanvasComponentEntryInner = React.memo((props: CanvasComponentEntryProps)
     <>
       {when(canvasProps == null, <CanvasLoadingScreen />)}
       <div
-        id='canvas-container-outer'
+        id={CanvasContainerOuterId}
         ref={containerRef}
         style={{
           position: 'absolute',
@@ -93,14 +97,15 @@ const CanvasComponentEntryInner = React.memo((props: CanvasComponentEntryProps)
           transform: 'translate3d(0px, 0px, 0px)',
         }}
       >
-        {canvasProps == null ? null : (
+        {props.shouldRenderCanvas && canvasProps != null ? (
           <CanvasInner
             canvasProps={canvasProps}
             onRuntimeError={onRuntimeError}
             localClearRuntimeErrors={localClearRuntimeErrors}
           />
-        )}
+        ) : null}
       </div>
+      ,
     </>
   )
 })
diff --git a/editor/src/components/canvas/canvas-wrapper-component.tsx b/editor/src/components/canvas/canvas-wrapper-component.tsx
index 099a094a4747..d3782584d585 100644
--- a/editor/src/components/canvas/canvas-wrapper-component.tsx
+++ b/editor/src/components/canvas/canvas-wrapper-component.tsx
@@ -85,17 +85,16 @@ export const CanvasWrapperComponent = React.memo(() => {
         // ^ prevents Monaco from pushing the inspector out
       }}
     >
-      {fatalErrors.length === 0 && !safeMode ? (
-        <EditorCanvas
-          userState={userState}
-          editor={editorState}
-          derived={derivedState}
-          model={createCanvasModelKILLME(editorState, derivedState)}
-          builtinDependencies={builtinDependencies}
-          updateCanvasSize={updateCanvasSize}
-          dispatch={dispatch}
-        />
-      ) : null}
+      <EditorCanvas
+        userState={userState}
+        editor={editorState}
+        derived={derivedState}
+        model={createCanvasModelKILLME(editorState, derivedState)}
+        builtinDependencies={builtinDependencies}
+        updateCanvasSize={updateCanvasSize}
+        dispatch={dispatch}
+        shouldRenderCanvas={fatalErrors.length === 0 && !safeMode}
+      />
 
       <FlexRow
         style={{
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 7a9a55e604f8..3ff63324bf26 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -59,8 +59,7 @@ import {
 } from '../inspector/common/css-utils'
 import { camelCaseToDashed } from '../../core/shared/string-utils'
 import type { UtopiaStoreAPI } from '../editor/store/store-hook'
-import { UTOPIA_SCENE_ID_KEY } from '../../core/model/utopia-constants'
-import { CanvasContainerID } from './canvas-types'
+import { UTOPIA_SCENE_ID_KEY, UTOPIA_UID_KEY } from '../../core/model/utopia-constants'
 import { emptySet } from '../../core/shared/set-utils'
 import type { PathWithString } from '../../core/shared/uid-utils'
 import { getDeepestPathOnDomElement, getPathStringsOnDomElement } from '../../core/shared/uid-utils'
@@ -72,6 +71,7 @@ import { pick } from '../../core/shared/object-utils'
 import { getFlexAlignment, getFlexJustifyContent, MaxContent } from '../inspector/inspector-common'
 import type { EditorDispatch } from '../editor/action-types'
 import { runDOMWalker } from '../editor/actions/action-creators'
+import { CanvasContainerOuterId } from './canvas-component-entry'
 
 export const ResizeObserver =
   window.ResizeObserver ?? ResizeObserverSyntheticDefault.default ?? ResizeObserverSyntheticDefault
@@ -291,14 +291,15 @@ export function resubscribeObservers(domWalkerMutableState: {
   mutationObserver: MutationObserver
   resizeObserver: ResizeObserver
 }) {
-  const canvasRootContainer = document.getElementById(CanvasContainerID)
+  const canvasRootContainer = document.getElementById(CanvasContainerOuterId)
+
   if (
     ObserversAvailable &&
     canvasRootContainer != null &&
     domWalkerMutableState.resizeObserver != null &&
     domWalkerMutableState.mutationObserver != null
   ) {
-    document.querySelectorAll(`#${CanvasContainerID} *`).forEach((elem) => {
+    document.querySelectorAll(`#${CanvasContainerOuterId} [${UTOPIA_UID_KEY}]`).forEach((elem) => {
       domWalkerMutableState.resizeObserver.observe(elem)
     })
     domWalkerMutableState.mutationObserver.observe(canvasRootContainer, MutationObserverConfig)
diff --git a/editor/src/components/canvas/ui-jsx.test-utils.tsx b/editor/src/components/canvas/ui-jsx.test-utils.tsx
index a95396aafcc8..f1866c8ece55 100644
--- a/editor/src/components/canvas/ui-jsx.test-utils.tsx
+++ b/editor/src/components/canvas/ui-jsx.test-utils.tsx
@@ -306,6 +306,8 @@ export function optOutFromCheckFileTimestamps() {
   })
 }
 
+let prevDomWalkerMutableState: DomWalkerMutableStateData | null = null
+
 export async function renderTestEditorWithModel(
   rawModel: PersistentModel,
   awaitFirstDomReport: 'await-first-dom-report' | 'dont-await-first-dom-report',
@@ -600,7 +602,10 @@ export async function renderTestEditorWithModel(
     patchedStoreFromFullStore(initialEditorStore, 'canvas-store'),
   )
 
+  prevDomWalkerMutableState?.resizeObserver.disconnect()
+  prevDomWalkerMutableState?.mutationObserver.disconnect()
   const domWalkerMutableState = createDomWalkerMutableState(canvasStoreHook, asyncTestDispatch)
+  prevDomWalkerMutableState = domWalkerMutableState
 
   const lowPriorityStoreHook: UtopiaStoreAPI = createStoresAndState(
     patchedStoreFromFullStore(initialEditorStore, 'low-priority-store'),
diff --git a/editor/src/templates/editor-canvas.tsx b/editor/src/templates/editor-canvas.tsx
index cbccfb2c07c4..888acce8bc6f 100644
--- a/editor/src/templates/editor-canvas.tsx
+++ b/editor/src/templates/editor-canvas.tsx
@@ -695,6 +695,7 @@ interface EditorCanvasProps {
   builtinDependencies: BuiltInDependencies
   dispatch: EditorDispatch
   updateCanvasSize: (newValueOrUpdater: Size | ((oldValue: Size) => Size)) => void
+  shouldRenderCanvas: boolean
 }
 
 export class EditorCanvas extends React.Component<EditorCanvasProps> {
@@ -855,6 +856,10 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
     // we round the offset here, so all layers, the canvas, and controls use the same rounded value for positioning
     // instead of letting Chrome do it, because that results in funky artifacts (e.g. while scrolling, the layers don't "jump" pixels at the same time)
 
+    if (!this.props.shouldRenderCanvas) {
+      return <CanvasComponentEntry shouldRenderCanvas={false} />
+    }
+
     const nodeConnectorsDiv = createNodeConnectorsDiv(
       this.props.model.canvasOffset,
       this.props.model.scale,
@@ -871,10 +876,9 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
 
     const canvasIsLive = isLiveMode(this.props.editor.mode)
 
-    const canvasControls = React.createElement(NewCanvasControls, {
-      windowToCanvasPosition: this.getPosition,
-      cursor,
-    })
+    const canvasControls = (
+      <NewCanvasControls windowToCanvasPosition={this.getPosition} cursor={cursor} />
+    )
 
     const canvasLiveEditingStyle = canvasIsLive
       ? UtopiaStyles.canvas.live
@@ -1070,9 +1074,9 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
         },
       },
       nodeConnectorsDiv,
-      React.createElement(CanvasComponentEntry, {}),
+      <CanvasComponentEntry shouldRenderCanvas={true} />,
       canvasControls,
-      React.createElement(CursorComponent, {}),
+      <CursorComponent />,
       <EditorCommon mouseDown={this.handleMouseDown} />,
     )
   }

From d3a7bb85f57515ad9f55119e3f90b9c1a6441e6b Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 11 Sep 2024 14:31:54 +0200
Subject: [PATCH 013/272] Fix caching of null result of
 buildComponentRenderResult (#6352)

**Problem:**
When a component returns null, it is rerendered all the time.

**Root cause:**
The problem is in the caching of the result of
`buildComponentRenderResult`.
The cache is initialized with a `null` value, so when the value is
`null` we rerun `buildComponentRenderResult`
However, the value can be null just because the component renders
nothing.

**Commit Details:**

- Created a new type for the `buildResult` type which includes an
external value for the non-initialized state.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../ui-jsx-canvas-component-renderer.tsx      | 40 ++++++++++++++++---
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-component-renderer.tsx b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-component-renderer.tsx
index 55954b926d6a..ce6cefe6446a 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-component-renderer.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-component-renderer.tsx
@@ -66,6 +66,25 @@ function tryToGetInstancePath(
   }
 }
 
+type EmptyBuildResult = {
+  type: 'EMPTY_BUILD_RESULT'
+}
+
+type RenderedBuildResult = {
+  type: 'RENDERED_BUILD_RESULT'
+  result: React.ReactElement | null
+}
+
+type BuildResult = EmptyBuildResult | RenderedBuildResult
+
+function emptyBuildResult(): EmptyBuildResult {
+  return { type: 'EMPTY_BUILD_RESULT' }
+}
+
+function renderedBuildResult(result: React.ReactElement | null): RenderedBuildResult {
+  return { type: 'RENDERED_BUILD_RESULT', result: result }
+}
+
 export function createComponentRendererComponent(params: {
   topLevelElementName: string | null
   filePath: string
@@ -247,7 +266,7 @@ export function createComponentRendererComponent(params: {
       filePathMappings: rerenderUtopiaContext.filePathMappings,
     }
 
-    const buildResult = React.useRef<React.ReactElement | null>(null)
+    const buildResult = React.useRef<BuildResult>(emptyBuildResult())
 
     let earlyReturn: EarlyReturn | null = null
     if (utopiaJsxComponent.arbitraryJSBlock != null) {
@@ -299,11 +318,11 @@ export function createComponentRendererComponent(params: {
           break
         case 'EARLY_RETURN_VOID':
           earlyReturn = arbitraryBlockResult
-          buildResult.current = undefined as any
+          buildResult.current = renderedBuildResult(undefined as any)
           break
         case 'EARLY_RETURN_RESULT':
           earlyReturn = arbitraryBlockResult
-          buildResult.current = arbitraryBlockResult.result as any
+          buildResult.current = renderedBuildResult(arbitraryBlockResult.result as any)
           break
         default:
           assertNever(arbitraryBlockResult)
@@ -350,10 +369,19 @@ export function createComponentRendererComponent(params: {
           null,
         )
       }
-    } else if (shouldUpdate() || buildResult.current === null) {
-      buildResult.current = buildComponentRenderResult(utopiaJsxComponent.rootElement)
+    } else if (shouldUpdate() || buildResult.current.type === 'EMPTY_BUILD_RESULT') {
+      buildResult.current = renderedBuildResult(
+        buildComponentRenderResult(utopiaJsxComponent.rootElement),
+      )
+    }
+    switch (buildResult.current.type) {
+      case 'EMPTY_BUILD_RESULT':
+        return null
+      case 'RENDERED_BUILD_RESULT':
+        return buildResult.current.result
+      default:
+        assertNever(buildResult.current)
     }
-    return buildResult.current
   }
   Component.displayName = `ComponentRenderer(${params.topLevelElementName})`
   Component.topLevelElementName = params.topLevelElementName

From b142af62f0db122b14b4ce34a2be775fa256de47 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Wed, 11 Sep 2024 17:55:05 +0300
Subject: [PATCH 014/272] fix(grid): move controls when changing content
 placement (#6350)

**Problem:**
Today the grid controls placeholder don't move when changing `content`
placement

![10-45-psczv-wnkpg](https://github.com/user-attachments/assets/ea5d2623-0705-4337-8aa2-6d0139addec8)


**Fix:**
Copy `justifyContent` and `alignContent` props to the grid placeholder
as well.

<video
src="https://github.com/user-attachments/assets/0e8dfd6e-f6ca-4b46-bd83-89b2472d03a8"></video>

**Note:**
We should discuss how we can avoid these kinds of issues in the future -
where there might be a future grid style prop that will not be copied to
the grid control

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode
---
 .../ui-jsx-canvas-bugs.spec.tsx.snap          |   2 +
 .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 257 ++++++++++++++++++
 .../canvas/controls/grid-controls.tsx         |   6 +
 editor/src/components/canvas/dom-walker.ts    |   2 +
 .../store-deep-equality-instances-3.spec.ts   |   7 +
 .../store/store-deep-equality-instances.ts    |   1 +
 editor/src/core/shared/element-template.ts    |   4 +
 7 files changed, 279 insertions(+)

diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
index ea9b9c982796..8e7cd5aa4f45 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
@@ -158,6 +158,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -304,6 +305,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
index 301e9913f6e9..e57bf2a7375e 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
@@ -199,6 +199,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -368,6 +369,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -832,6 +834,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -1145,6 +1148,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -1313,6 +1317,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -1481,6 +1486,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -1649,6 +1655,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -1922,6 +1929,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -2091,6 +2099,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -2366,6 +2375,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -2638,6 +2648,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -2807,6 +2818,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -2956,6 +2968,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -3246,6 +3259,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -3415,6 +3429,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -3791,6 +3806,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -4133,6 +4149,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -4330,6 +4347,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -4493,6 +4511,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -4690,6 +4709,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -4853,6 +4873,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -5050,6 +5071,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -5213,6 +5235,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -5554,6 +5577,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -5723,6 +5747,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -6320,6 +6345,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -6883,6 +6909,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -7286,6 +7313,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -7655,6 +7683,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -7872,6 +7901,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -8055,6 +8085,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -8272,6 +8303,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -8455,6 +8487,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -8672,6 +8705,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -8855,6 +8889,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -9258,6 +9293,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -9627,6 +9663,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -9844,6 +9881,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -10027,6 +10065,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -10244,6 +10283,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -10427,6 +10467,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -10644,6 +10685,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -10827,6 +10869,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -11230,6 +11273,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -11599,6 +11643,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -11816,6 +11861,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -11999,6 +12045,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -12216,6 +12263,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -12399,6 +12447,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -12616,6 +12665,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -12799,6 +12849,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -13083,6 +13134,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -13252,6 +13304,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -13462,6 +13515,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -13612,6 +13666,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -13762,6 +13817,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -14034,6 +14090,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -14203,6 +14260,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -14465,6 +14523,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -14755,6 +14814,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -14924,6 +14984,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -15317,6 +15378,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -15675,6 +15737,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -15892,6 +15955,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -16109,6 +16173,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -16326,6 +16391,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -16616,6 +16682,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -16785,6 +16852,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -17178,6 +17246,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -17536,6 +17605,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -17753,6 +17823,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -17970,6 +18041,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -18187,6 +18259,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -18471,6 +18544,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -18640,6 +18714,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -18850,6 +18925,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -19000,6 +19076,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -19150,6 +19227,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -19434,6 +19512,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -19603,6 +19682,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -19918,6 +19998,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -20199,6 +20280,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -20350,6 +20432,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -20501,6 +20584,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -20801,6 +20885,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -20985,6 +21070,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -21448,6 +21534,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -21730,6 +21817,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -22029,6 +22117,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -22213,6 +22302,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -22676,6 +22766,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -22958,6 +23049,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -23258,6 +23350,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -23442,6 +23535,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -23956,6 +24050,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -24289,6 +24384,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -24589,6 +24685,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -24773,6 +24870,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -25287,6 +25385,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -25620,6 +25719,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -25891,6 +25991,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -26060,6 +26161,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -26209,6 +26311,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -26603,6 +26706,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -26772,6 +26876,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -28699,6 +28804,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -30172,6 +30278,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -31611,6 +31718,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -32232,6 +32340,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -32581,6 +32690,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -33202,6 +33312,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -33551,6 +33662,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -34172,6 +34284,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -34521,6 +34634,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -35180,6 +35294,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -35571,6 +35686,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -36230,6 +36346,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -36621,6 +36738,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -37280,6 +37398,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -37671,6 +37790,7 @@ export var storyboard = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -37965,6 +38085,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -38134,6 +38255,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -38378,6 +38500,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -38545,6 +38668,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -38712,6 +38836,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -38985,6 +39110,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -39154,6 +39280,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -39370,6 +39497,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -39642,6 +39770,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -39811,6 +39940,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -40131,6 +40261,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -40449,6 +40580,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -40618,6 +40750,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -40895,6 +41028,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -41121,6 +41255,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -41296,6 +41431,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -41596,6 +41732,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -41780,6 +41917,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -42134,6 +42272,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -42310,6 +42449,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -42763,6 +42903,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -42947,6 +43088,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -43303,6 +43445,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -43479,6 +43622,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -43863,6 +44007,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -44031,6 +44176,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -44824,6 +44970,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -44975,6 +45122,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -45126,6 +45274,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -45277,6 +45426,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -45430,6 +45580,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -45581,6 +45732,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -45732,6 +45884,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -45883,6 +46036,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -46102,6 +46256,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -46282,6 +46437,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -46435,6 +46591,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -46586,6 +46743,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -46737,6 +46895,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -46888,6 +47047,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -47039,6 +47199,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -47190,6 +47351,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -47341,6 +47503,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -47492,6 +47655,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -47643,6 +47807,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -47794,6 +47959,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -47945,6 +48111,7 @@ export var App = (props) => {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -48235,6 +48402,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -48404,6 +48572,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -48797,6 +48966,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -49155,6 +49325,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -49372,6 +49543,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -49589,6 +49761,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -49806,6 +49979,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -50096,6 +50270,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -50265,6 +50440,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -50657,6 +50833,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -51014,6 +51191,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -51231,6 +51409,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -51448,6 +51627,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -51665,6 +51845,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -51955,6 +52136,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -52124,6 +52306,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -52560,6 +52743,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -52961,6 +53145,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -53178,6 +53363,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -53395,6 +53581,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -53612,6 +53799,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -53908,6 +54096,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -54092,6 +54281,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -54355,6 +54545,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -54531,6 +54722,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -54805,6 +54997,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -54951,6 +55144,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -55145,6 +55339,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -55301,6 +55496,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -55457,6 +55653,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -55718,6 +55915,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -55864,6 +56062,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -56116,6 +56315,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -56310,6 +56510,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -56467,6 +56668,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -56716,6 +56918,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -56862,6 +57065,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -57124,6 +57328,7 @@ export var storyboard = (
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -57295,6 +57500,7 @@ export var storyboard = (
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -57544,6 +57750,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -57690,6 +57897,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -57839,6 +58047,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -58096,6 +58305,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -58242,6 +58452,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -58469,6 +58680,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -58645,6 +58857,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -58896,6 +59109,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -59042,6 +59256,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -59366,6 +59581,7 @@ export var storyboard = (
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -59556,6 +59772,7 @@ export var storyboard = (
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -59746,6 +59963,7 @@ export var storyboard = (
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -59996,6 +60214,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -60142,6 +60361,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -60308,6 +60528,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -60603,6 +60824,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -60772,6 +60994,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -61278,6 +61501,7 @@ export var storyboard = (
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -61434,6 +61658,7 @@ export var storyboard = (
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -61704,6 +61929,7 @@ export var storyboard = (
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -61972,6 +62198,7 @@ export var storyboard = (
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -62164,6 +62391,7 @@ export var storyboard = (
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -62354,6 +62582,7 @@ export var storyboard = (
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -62631,6 +62860,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -62800,6 +63030,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -62998,6 +63229,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -63165,6 +63397,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -63440,6 +63673,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -63609,6 +63843,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -63758,6 +63993,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -64063,6 +64299,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -64232,6 +64469,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -64650,6 +64888,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -65033,6 +65272,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -65264,6 +65504,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -65465,6 +65706,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -65632,6 +65874,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -65863,6 +66106,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -66064,6 +66308,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -66231,6 +66476,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -66462,6 +66708,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -66663,6 +66910,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -66830,6 +67078,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -67104,6 +67353,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -67273,6 +67523,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -67422,6 +67673,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -67706,6 +67958,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -67875,6 +68128,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -68092,6 +68346,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -68279,6 +68534,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
@@ -68436,6 +68692,7 @@ Object {
     "label": null,
     "nonRoundedGlobalFrame": null,
     "specialSizeMeasurements": Object {
+      "alignContent": null,
       "alignItems": null,
       "borderRadius": null,
       "clientHeight": 0,
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index f3d47c9991f8..e9732e84bfff 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -378,6 +378,8 @@ export type GridData = {
   gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null
   gridTemplateRowsFromProps: GridAutoOrTemplateBase | null
   gap: number | null
+  justifyContent: string | null
+  alignContent: string | null
   rowGap: number | null
   columnGap: number | null
   padding: Sides
@@ -435,6 +437,8 @@ export function useGridData(elementPaths: ElementPath[]): GridData[] {
           gap: gap,
           rowGap: rowGap,
           columnGap: columnGap,
+          justifyContent: targetGridContainer.specialSizeMeasurements.justifyContent,
+          alignContent: targetGridContainer.specialSizeMeasurements.alignContent,
           padding: padding,
           rows: rows,
           columns: columns,
@@ -770,6 +774,8 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
             border: `1px solid ${
               activelyDraggingOrResizingCell != null ? colorTheme.primary.value : 'transparent'
             }`,
+            justifyContent: grid.justifyContent ?? 'initial',
+            alignContent: grid.alignContent ?? 'initial',
             pointerEvents: 'none',
             padding:
               grid.padding == null
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 3ff63324bf26..9a0eae756546 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -681,6 +681,7 @@ function getSpecialMeasurements(
   const parentTextDirection = eitherToMaybe(parseDirection(parentElementStyle?.direction, null))
 
   const justifyContent = getFlexJustifyContent(elementStyle.justifyContent)
+  const alignContent = getFlexAlignment(elementStyle.alignContent)
   const alignItems = getFlexAlignment(elementStyle.alignItems)
 
   const margin = applicative4Either(
@@ -877,6 +878,7 @@ function getSpecialMeasurements(
     gap,
     flexDirection,
     justifyContent,
+    alignContent,
     alignItems,
     element.localName,
     childrenCount,
diff --git a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
index 02cbcf84fcec..808524bc5a1d 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
@@ -265,6 +265,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     gap: 11,
     flexDirection: 'column',
     justifyContent: 'center',
+    alignContent: 'auto',
     alignItems: 'auto',
     htmlElementName: 'div',
     renderedChildrenCount: 10,
@@ -383,6 +384,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     gap: 11,
     flexDirection: 'column',
     justifyContent: 'center',
+    alignContent: 'auto',
     alignItems: 'auto',
     htmlElementName: 'div',
     renderedChildrenCount: 10,
@@ -556,6 +558,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       gap: 11,
       flexDirection: 'column',
       justifyContent: 'center',
+      alignContent: 'auto',
       alignItems: 'auto',
       htmlElementName: 'div',
       renderedChildrenCount: 10,
@@ -706,6 +709,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       gap: 11,
       flexDirection: 'column',
       justifyContent: 'center',
+      alignContent: 'auto',
       alignItems: 'auto',
       htmlElementName: 'div',
       renderedChildrenCount: 10,
@@ -881,6 +885,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         gap: 11,
         flexDirection: 'column',
         justifyContent: 'center',
+        alignContent: 'auto',
         alignItems: 'auto',
         htmlElementName: 'div',
         renderedChildrenCount: 10,
@@ -1033,6 +1038,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         gap: 11,
         flexDirection: 'column',
         justifyContent: 'center',
+        alignContent: 'auto',
         alignItems: 'auto',
         htmlElementName: 'div',
         renderedChildrenCount: 10,
@@ -1185,6 +1191,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         gap: 11,
         flexDirection: 'column',
         justifyContent: 'center',
+        alignContent: 'auto',
         alignItems: 'auto',
         htmlElementName: 'div',
         renderedChildrenCount: 10,
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index e19d4f36fab4..a360d4d1eeca 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -2276,6 +2276,7 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
         newSize.gap,
         newSize.flexDirection,
         newSize.justifyContent,
+        newSize.alignContent,
         newSize.alignItems,
         newSize.htmlElementName,
         newSize.renderedChildrenCount,
diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts
index 7db708de5331..e26e1e1496e1 100644
--- a/editor/src/core/shared/element-template.ts
+++ b/editor/src/core/shared/element-template.ts
@@ -2810,6 +2810,7 @@ export interface SpecialSizeMeasurements {
   gap: number | null
   flexDirection: FlexDirection | null
   justifyContent: FlexJustifyContent | null
+  alignContent: FlexAlignment | null
   alignItems: FlexAlignment | null
   htmlElementName: string
   renderedChildrenCount: number
@@ -2859,6 +2860,7 @@ export function specialSizeMeasurements(
   gap: number | null,
   flexDirection: FlexDirection | null,
   justifyContent: FlexJustifyContent | null,
+  alignContent: FlexAlignment | null,
   alignItems: FlexAlignment | null,
   htmlElementName: string,
   renderedChildrenCount: number,
@@ -2909,6 +2911,7 @@ export function specialSizeMeasurements(
     gap,
     flexDirection,
     justifyContent,
+    alignContent,
     alignItems,
     htmlElementName,
     renderedChildrenCount,
@@ -2963,6 +2966,7 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements(
   null,
   null,
   null,
+  null,
   'div',
   0,
   null,

From 22bd0734dc07cbd0a0d4e4612cdde0ff3d26f8f2 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 12 Sep 2024 16:56:53 +0200
Subject: [PATCH 015/272] Fix active grid cell border during move (#6356)

**Problem:**

The new active cell indicator style introduce in
https://github.com/concrete-utopia/utopia/pull/6301 doesn't correctly
show the active cell borders.

**Fix:**

Fix that.

| Before | After |
|-------------|-----------|
| ![Kapture 2024-09-12 at 13 38
42](https://github.com/user-attachments/assets/c040c735-85b9-477e-9390-501536ed531d)
| ![Kapture 2024-09-12 at 13 39
10](https://github.com/user-attachments/assets/78820b33-0d11-414c-96a9-3dd8eb2ec3c9)
|
---
 .../components/canvas/controls/grid-controls.tsx    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index e9732e84bfff..688df97ef115 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -815,11 +815,13 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
                     ? features.Grid.dotgridColor
                     : 'transparent'
 
-                const borderColor =
+                const isActiveCell =
                   countedColumn === currentHoveredCell?.column &&
                   countedRow === currentHoveredCell?.row
-                    ? colorTheme.brandNeonPink.value
-                    : features.Grid.inactiveGridColor
+
+                const borderColor = isActiveCell
+                  ? colorTheme.brandNeonPink.value
+                  : features.Grid.inactiveGridColor
 
                 return (
                   <div
@@ -830,10 +832,13 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
                       borderTop: gridPlaceholderBorder(borderColor),
                       borderLeft: gridPlaceholderBorder(borderColor),
                       borderBottom:
-                        countedRow >= grid.rows || (grid.rowGap != null && grid.rowGap > 0)
+                        isActiveCell ||
+                        countedRow >= grid.rows ||
+                        (grid.rowGap != null && grid.rowGap > 0)
                           ? gridPlaceholderBorder(borderColor)
                           : undefined,
                       borderRight:
+                        isActiveCell ||
                         countedColumn >= grid.columns ||
                         (grid.columnGap != null && grid.columnGap > 0)
                           ? gridPlaceholderBorder(borderColor)

From 42942aaea3b429a3845145f1582a6d377ab91601 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Thu, 12 Sep 2024 18:54:16 +0300
Subject: [PATCH 016/272] fix(inspector): queue inspector focus in a microtask
 to prevent flushSync (#6358)

**Problem:**
Today triggering a dropdown from the inspector causes a `flushSync`
error

<video
src="https://github.com/user-attachments/assets/110f6556-689c-45de-ae64-414850e707c3"></video>

**Fix:**
Queue the `dispatch` in the inspector focus in a microtask to prevent
this React error

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode
---
 editor/src/components/inspector/inspector.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/editor/src/components/inspector/inspector.tsx b/editor/src/components/inspector/inspector.tsx
index e98d2a548c41..ead15872c320 100644
--- a/editor/src/components/inspector/inspector.tsx
+++ b/editor/src/components/inspector/inspector.tsx
@@ -341,7 +341,9 @@ export const Inspector = React.memo<InspectorProps>((props: InspectorProps) => {
   const onFocus = React.useCallback(
     (event: React.FocusEvent<HTMLElement>) => {
       if (focusedPanel !== 'inspector') {
-        dispatch([setFocus('inspector')], 'inspector')
+        queueMicrotask(() => {
+          dispatch([setFocus('inspector')], 'inspector')
+        })
       }
     },
     [dispatch, focusedPanel],

From ba474502fe7772d420a084949e6076039348980b Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 12 Sep 2024 19:09:44 +0200
Subject: [PATCH 017/272] Update grid placeholders during resize (#6360)

**Problem:**

The grid placeholders don't resize live while resizing a grid child
(with fixed size).

**Fix:**

Rerender the grid during resize, so its computed template is picked up.

| Before | After |
|---------|----------|
| ![Kapture 2024-09-12 at 18 38
52](https://github.com/user-attachments/assets/ce491425-d5ae-4970-8997-967356610da9)
| ![Kapture 2024-09-12 at 18 38
22](https://github.com/user-attachments/assets/978e0923-b9f6-414f-98cd-5a12add04948)
|

Fixes #6359
---
 .../strategies/basic-resize-strategy.tsx                  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
index ba16fa986e4d..60eccfac3a28 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -213,11 +213,17 @@ export function basicResizeStrategy(
             elementParentBounds?.height,
           )
 
+          const gridsToRerender = selectedElements
+            .filter((element) => MetadataUtils.isGridCell(canvasState.startingMetadata, element))
+            .map(EP.parentPath)
+
+          const elementsToRerender = [...selectedElements, ...gridsToRerender]
+
           return strategyApplicationResult([
             adjustCssLengthProperties('always', selectedElement, null, resizeProperties),
             updateHighlightedViews('mid-interaction', []),
             setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
-            setElementsToRerenderCommand(selectedElements),
+            setElementsToRerenderCommand(elementsToRerender),
             pushIntendedBoundsAndUpdateGroups(
               [{ target: selectedElement, frame: resizedBounds }],
               'starting-metadata',

From 68d13787833be4decd2f0c97a70e75a426ceaeb6 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 13 Sep 2024 11:50:01 +0200
Subject: [PATCH 018/272] Grid reorder (#6351)

**Problem:**
Moving grid elements currently means only explicitly setting their grid
positioning props (row, column), which has two issues:
1. it does not reorder elements in the code nor the navigator
2. it does not leverage the grid intrinsic ordering, those properties
should be set only when strictly necessary

**Fix:**

Extend the strategy so that it prioritizes reordering instead of
explicit positioning, and even in the cases where it needs to use
row/col props it will still reorder based on the starting index position
in the grid hierarchy (left-right, top-bottom).

Fixes #6355
---
 .../strategies/flex-reorder-strategy.tsx      |   1 -
 .../strategies/flow-reorder-strategy.tsx      |   1 -
 .../strategies/grid-helpers.ts                | 223 ++++++++++++++--
 ...-rearrange-move-strategy.spec.browser2.tsx | 249 +++++++++++++++++-
 .../strategies/reorder-utils.ts               |   1 -
 5 files changed, 442 insertions(+), 33 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-reorder-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-reorder-strategy.tsx
index 71c2ee5e0533..74cdcf6be833 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flex-reorder-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-reorder-strategy.tsx
@@ -96,7 +96,6 @@ export function flexReorderStrategy(
         return interactionSession == null
           ? emptyStrategyApplicationResult
           : applyReorderCommon(
-              originalTargets,
               retargetedTargets,
               canvasState,
               interactionSession,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flow-reorder-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flow-reorder-strategy.tsx
index d87eff82e39b..97de575b346f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flow-reorder-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flow-reorder-strategy.tsx
@@ -93,7 +93,6 @@ export function flowReorderStrategy(
         return interactionSession == null
           ? emptyStrategyApplicationResult
           : applyReorderCommon(
-              originalTargets,
               retargetedTargets,
               canvasState,
               interactionSession,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index aa51581ec657..437329d52b4b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -1,6 +1,10 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
-import type { ElementInstanceMetadataMap } from '../../../../core/shared/element-template'
+import * as EP from '../../../../core/shared/element-path'
+import type {
+  ElementInstanceMetadataMap,
+  GridPositionValue,
+} from '../../../../core/shared/element-template'
 import {
   gridPositionValue,
   type ElementInstanceMetadata,
@@ -19,15 +23,16 @@ import {
   type WindowPoint,
 } from '../../../../core/shared/math-utils'
 import * as PP from '../../../../core/shared/property-path'
+import { absolute } from '../../../../utils/utils'
+import { cssNumber, isCSSKeyword } from '../../../inspector/common/css-utils'
 import type { CanvasCommand } from '../../commands/commands'
+import { deleteProperties } from '../../commands/delete-properties-command'
+import { reorderElement } from '../../commands/reorder-element-command'
+import { setCssLengthProperty } from '../../commands/set-css-length-command'
 import { setProperty } from '../../commands/set-property-command'
 import { canvasPointToWindowPoint } from '../../dom-lookup'
-import type { DragInteractionData } from '../interaction-state'
 import type { GridCustomStrategyState, InteractionCanvasState } from '../canvas-strategy-types'
-import * as EP from '../../../../core/shared/element-path'
-import { deleteProperties } from '../../commands/delete-properties-command'
-import { cssNumber, isCSSKeyword } from '../../../inspector/common/css-utils'
-import { setCssLengthProperty } from '../../commands/set-css-length-command'
+import type { DragInteractionData } from '../interaction-state'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 import {
   getCellWindowRect,
@@ -114,7 +119,6 @@ export function runGridRearrangeMove(
       targetRootCell: null,
     }
   }
-
   const gridTemplate = containerMetadata.specialSizeMeasurements.containerGridProperties
 
   const cellGridProperties = getElementGridProperties(originalElementMetadata, targetCellUnderMouse)
@@ -137,20 +141,6 @@ export function runGridRearrangeMove(
     coordsDiff.column,
   )
 
-  const targetRootCell = gridCellCoordinates(row.start, column.start)
-
-  const windowRect = getCellWindowRect(targetRootCell)
-
-  const absoluteMoveCommands =
-    windowRect == null
-      ? []
-      : gridChildAbsoluteMoveCommands(
-          MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
-          windowRect,
-          interactionData,
-          { scale: canvasScale, canvasOffset: canvasOffset },
-        )
-
   const gridCellMoveCommands = setGridPropsCommands(targetElement, gridTemplate, {
     gridColumnStart: gridPositionValue(column.start),
     gridColumnEnd: gridPositionValue(column.end),
@@ -158,12 +148,103 @@ export function runGridRearrangeMove(
     gridRowStart: gridPositionValue(row.start),
   })
 
-  return {
-    commands: [...gridCellMoveCommands, ...absoluteMoveCommands],
-    targetCell: targetCellData ?? customState.targetCellData,
-    originalRootCell: rootCell,
-    draggingFromCell: draggingFromCell,
-    targetRootCell: targetRootCell,
+  const gridTemplateColumns =
+    gridTemplate.gridTemplateColumns?.type === 'DIMENSIONS'
+      ? gridTemplate.gridTemplateColumns.dimensions.length
+      : 1
+
+  // The "pure" index in the grid children for the cell under mouse
+  const possiblyReorderIndex = getGridPositionIndex({
+    row: targetCellUnderMouse.row,
+    column: targetCellUnderMouse.column,
+    gridTemplateColumns: gridTemplateColumns,
+  })
+
+  // The siblings of the grid element being moved
+  const siblings = MetadataUtils.getChildrenUnordered(jsxMetadata, EP.parentPath(selectedElement))
+    .filter((s) => !EP.pathsEqual(s.elementPath, selectedElement))
+    .map(
+      (s, index): SortableGridElementProperties => ({
+        ...s.specialSizeMeasurements.elementGridProperties,
+        index: index,
+        path: s.elementPath,
+      }),
+    )
+
+  // Sort the siblings and the cell under mouse ascending based on their grid coordinates, so that
+  // the indexes grow left-right, top-bottom.
+  const cellsSortedByPosition = siblings
+    .concat({
+      ...{
+        gridColumnStart: gridPositionValue(targetCellUnderMouse.column),
+        gridColumnEnd: gridPositionValue(targetCellUnderMouse.column),
+        gridRowStart: gridPositionValue(targetCellUnderMouse.row),
+        gridRowEnd: gridPositionValue(targetCellUnderMouse.row),
+      },
+      path: selectedElement,
+      index: siblings.length + 1,
+    })
+    .sort(sortElementsByGridPosition(gridTemplateColumns))
+
+  // If rearranging, reorder to the index based on the sorted cells arrays.
+  const indexInSortedCellsForRearrange = cellsSortedByPosition.findIndex((s) =>
+    EP.pathsEqual(selectedElement, s.path),
+  )
+
+  const moveType = getGridMoveType({
+    originalElementMetadata: originalElementMetadata,
+    possiblyReorderIndex: possiblyReorderIndex,
+    cellsSortedByPosition: cellsSortedByPosition,
+  })
+
+  switch (moveType) {
+    case 'rearrange': {
+      const targetRootCell = gridCellCoordinates(row.start, column.start)
+      const windowRect = getCellWindowRect(targetRootCell)
+      const absoluteMoveCommands =
+        windowRect == null
+          ? []
+          : gridChildAbsoluteMoveCommands(
+              MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
+              windowRect,
+              interactionData,
+              { scale: canvasScale, canvasOffset: canvasOffset },
+            )
+      return {
+        commands: [
+          ...gridCellMoveCommands,
+          ...absoluteMoveCommands,
+          reorderElement(
+            'always',
+            selectedElement,
+            absolute(Math.max(indexInSortedCellsForRearrange, 0)),
+          ),
+        ],
+        targetCell: targetCellData ?? customState.targetCellData,
+        originalRootCell: rootCell,
+        draggingFromCell: draggingFromCell,
+        targetRootCell: gridCellCoordinates(row.start, column.start),
+      }
+    }
+    case 'reorder': {
+      return {
+        commands: [
+          reorderElement('always', selectedElement, absolute(possiblyReorderIndex)),
+          deleteProperties('always', selectedElement, [
+            PP.create('style', 'gridColumn'),
+            PP.create('style', 'gridRow'),
+            PP.create('style', 'gridColumnStart'),
+            PP.create('style', 'gridColumnEnd'),
+            PP.create('style', 'gridRowStart'),
+            PP.create('style', 'gridRowEnd'),
+          ]),
+        ],
+        targetCell: targetCellData ?? customState.targetCellData,
+        originalRootCell: rootCell,
+        draggingFromCell: draggingFromCell,
+        targetRootCell: targetCellUnderMouse,
+      }
+    }
   }
 }
 
@@ -435,3 +516,91 @@ function gridChildAbsoluteMoveCommands(
     ),
   ]
 }
+
+type SortableGridElementProperties = GridElementProperties & { path: ElementPath; index: number }
+
+function sortElementsByGridPosition(gridTemplateColumns: number) {
+  return function (a: SortableGridElementProperties, b: SortableGridElementProperties): number {
+    function getPosition(index: number, e: GridElementProperties) {
+      if (
+        e.gridColumnStart == null ||
+        isCSSKeyword(e.gridColumnStart) ||
+        e.gridRowStart == null ||
+        isCSSKeyword(e.gridRowStart)
+      ) {
+        return index
+      }
+
+      const row = e.gridRowStart.numericalPosition ?? 1
+      const column = e.gridColumnStart.numericalPosition ?? 1
+
+      return (row - 1) * gridTemplateColumns + column - 1
+    }
+
+    return getPosition(a.index, a) - getPosition(b.index, b)
+  }
+}
+
+type GridMoveType =
+  | 'reorder' // reorder the element in the code based on the ascending position, and remove explicit positioning props
+  | 'rearrange' // set explicit positioning props, and reorder based on the visual location
+
+function getGridMoveType(params: {
+  originalElementMetadata: ElementInstanceMetadata
+  possiblyReorderIndex: number
+  cellsSortedByPosition: SortableGridElementProperties[]
+}): GridMoveType {
+  // For absolute move, just use rearrange.
+  // TODO: maybe worth reconsidering in the future?
+  if (MetadataUtils.isPositionAbsolute(params.originalElementMetadata)) {
+    return 'rearrange'
+  }
+  if (params.possiblyReorderIndex >= params.cellsSortedByPosition.length) {
+    return 'rearrange'
+  }
+
+  const elementGridProperties =
+    params.originalElementMetadata.specialSizeMeasurements.elementGridProperties
+
+  // The first element is intrinsically in order, so try to adjust for that
+  if (params.possiblyReorderIndex === 0) {
+    const isTheOnlyChild = params.cellsSortedByPosition.length === 1
+    const isAlreadyTheFirstChild = EP.pathsEqual(
+      params.cellsSortedByPosition[0].path,
+      params.originalElementMetadata.elementPath,
+    )
+    const isAlreadyAtOrigin =
+      gridPositionNumberValue(elementGridProperties.gridRowStart) === 1 &&
+      gridPositionNumberValue(elementGridProperties.gridColumnStart) === 1
+    if (isTheOnlyChild || isAlreadyTheFirstChild || isAlreadyAtOrigin) {
+      return 'reorder'
+    }
+  }
+
+  const previousElement = params.cellsSortedByPosition.at(params.possiblyReorderIndex - 1)
+  if (previousElement == null) {
+    return 'rearrange'
+  }
+  const previousElementColumn = previousElement.gridColumnStart ?? null
+  const previousElementRow = previousElement.gridRowStart ?? null
+  return isGridPositionNumericValue(previousElementColumn) &&
+    isGridPositionNumericValue(previousElementRow)
+    ? 'rearrange'
+    : 'reorder'
+}
+
+function isGridPositionNumericValue(p: GridPosition | null): p is GridPositionValue {
+  return p != null && !(isCSSKeyword(p) && p.value === 'auto')
+}
+
+function gridPositionNumberValue(p: GridPosition | null): number | null {
+  return isGridPositionNumericValue(p) ? p.numericalPosition : null
+}
+
+function getGridPositionIndex(props: {
+  row: number
+  column: number
+  gridTemplateColumns: number
+}): number {
+  return (props.row - 1) * props.gridTemplateColumns + props.column - 1
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
index ce0becd9726d..c942f983fa55 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
@@ -1,4 +1,7 @@
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import { isLeft } from '../../../../core/shared/either'
 import * as EP from '../../../../core/shared/element-path'
+import { isJSXElement } from '../../../../core/shared/element-template'
 import {
   getRectCenter,
   localRectangle,
@@ -11,6 +14,7 @@ import { GridCellTestId } from '../../controls/grid-controls'
 import { mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
 import type { EditorRenderResult } from '../../ui-jsx.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
+import type { GridCellCoordinates } from './grid-cell-bounds'
 import { gridCellTargetId } from './grid-cell-bounds'
 
 describe('grid rearrange move strategy', () => {
@@ -454,21 +458,149 @@ export var storyboard = (
       }
     })
   })
+
+  describe('reorder', () => {
+    it('reorders an element without setting positioning (inside contiguous area)', async () => {
+      const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
+        await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 3 })
+
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '',
+        gridColumnStart: '',
+        gridRowEnd: '',
+        gridRowStart: '',
+      })
+
+      expect(cells).toEqual(['pink', 'cyan', 'orange', 'blue'])
+    })
+    it('reorders an element without setting positioning (edge of contiguous area)', async () => {
+      const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
+
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
+        await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 2, column: 1 })
+
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '',
+        gridColumnStart: '',
+        gridRowEnd: '',
+        gridRowStart: '',
+      })
+
+      expect(cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
+    })
+    it('reorders an element setting positioning when outside of contiguous area', async () => {
+      const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
+
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
+        await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 2, column: 2 })
+
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: 'auto',
+        gridColumnStart: '2',
+        gridRowEnd: 'auto',
+        gridRowStart: '2',
+      })
+
+      expect(cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
+    })
+    it('reorders an element setting positioning also relative to other fixed elements', async () => {
+      const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
+
+      const first = await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 2, column: 2 })
+
+      expect({
+        gridRowStart: first.gridRowStart,
+        gridRowEnd: first.gridRowEnd,
+        gridColumnStart: first.gridColumnStart,
+        gridColumnEnd: first.gridColumnEnd,
+      }).toEqual({
+        gridColumnEnd: 'auto',
+        gridColumnStart: '2',
+        gridRowEnd: 'auto',
+        gridRowStart: '2',
+      })
+
+      expect(first.cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
+
+      const second = await runReorderTest(editor, 'sb/scene/grid', 'pink', { row: 2, column: 3 })
+
+      expect({
+        gridRowStart: second.gridRowStart,
+        gridRowEnd: second.gridRowEnd,
+        gridColumnStart: second.gridColumnStart,
+        gridColumnEnd: second.gridColumnEnd,
+      }).toEqual({
+        gridColumnEnd: 'auto',
+        gridColumnStart: '3',
+        gridRowEnd: 'auto',
+        gridRowStart: '2',
+      })
+
+      expect(second.cells).toEqual(['cyan', 'blue', 'orange', 'pink'])
+    })
+
+    it('reorders and removes positioning when moving back to contiguous', async () => {
+      const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
+
+      const first = await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 2, column: 2 })
+      expect({
+        gridRowStart: first.gridRowStart,
+        gridRowEnd: first.gridRowEnd,
+        gridColumnStart: first.gridColumnStart,
+        gridColumnEnd: first.gridColumnEnd,
+      }).toEqual({
+        gridColumnEnd: 'auto',
+        gridColumnStart: '2',
+        gridRowEnd: 'auto',
+        gridRowStart: '2',
+      })
+
+      expect(first.cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
+
+      const second = await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 1 })
+
+      expect({
+        gridRowStart: second.gridRowStart,
+        gridRowEnd: second.gridRowEnd,
+        gridColumnStart: second.gridColumnStart,
+        gridColumnEnd: second.gridColumnEnd,
+      }).toEqual({
+        gridColumnEnd: '',
+        gridColumnStart: '',
+        gridRowEnd: '',
+        gridRowStart: '',
+      })
+
+      expect(second.cells).toEqual(['orange', 'pink', 'cyan', 'blue'])
+    })
+  })
 })
 
 async function runMoveTest(
   editor: EditorRenderResult,
-  props: { scale: number; pathString: string; testId: string },
+  props: {
+    scale: number
+    pathString: string
+    testId: string
+    targetCell?: GridCellCoordinates
+  },
 ) {
   const elementPathToDrag = EP.fromString(props.pathString)
 
   await selectComponentsForTest(editor, [elementPathToDrag])
 
-  await editor.dispatch([CanvasActions.zoom(props.scale)], true)
+  if (props.scale !== 1) {
+    await editor.dispatch([CanvasActions.zoom(props.scale)], true)
+  }
 
   const sourceGridCell = editor.renderedDOM.getByTestId(GridCellTestId(elementPathToDrag))
   const targetGridCell = editor.renderedDOM.getByTestId(
-    gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 3),
+    gridCellTargetId(
+      EP.fromString('sb/scene/grid'),
+      props.targetCell?.row ?? 2,
+      props.targetCell?.column ?? 3,
+    ),
   )
 
   const sourceRect = sourceGridCell.getBoundingClientRect()
@@ -493,6 +625,39 @@ async function runMoveTest(
   return editor.renderedDOM.getByTestId(props.testId).style
 }
 
+async function runReorderTest(
+  editor: EditorRenderResult,
+  gridTestId: string,
+  testId: string,
+  targetCell: GridCellCoordinates,
+) {
+  const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
+    scale: 1,
+    pathString: `${gridTestId}/${testId}`,
+    testId: testId,
+    targetCell: targetCell,
+  })
+
+  const element = editor.getEditorState().editor.jsxMetadata[gridTestId]
+  if (isLeft(element.element) || !isJSXElement(element.element.value)) {
+    throw new Error('expected jsx element')
+  }
+
+  const cells = MetadataUtils.getChildrenOrdered(
+    editor.getEditorState().editor.jsxMetadata,
+    editor.getEditorState().editor.elementPathTree,
+    element.elementPath,
+  )
+
+  return {
+    gridRowStart: gridRowStart,
+    gridRowEnd: gridRowEnd,
+    gridColumnStart: gridColumnStart,
+    gridColumnEnd: gridColumnEnd,
+    cells: cells.map((c) => EP.toUid(c.elementPath)),
+  }
+}
+
 const ProjectCode = `import * as React from 'react'
 import { Scene, Storyboard, Placeholder } from 'utopia-api'
 
@@ -572,3 +737,81 @@ export var storyboard = (
   </Storyboard>
 )
 `
+
+const ProjectCodeReorder = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 600,
+        height: 600,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 500,
+          height: 500,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr',
+          gridGap: 10,
+          padding: 10,
+        }}
+        data-testid='grid'
+        data-uid='grid'
+      >
+        <div
+          style={{
+            backgroundColor: '#f09',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='pink'
+		  data-testid='pink'
+          data-label='pink'
+        />
+        <div
+          style={{
+            backgroundColor: '#f90',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='orange'
+		  data-testid='orange'
+          data-label='orange'
+        />
+        <div
+          style={{
+            backgroundColor: '#0f9',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='cyan'
+		  data-testid='cyan'
+          data-label='cyan'
+        />
+        <div
+          style={{
+            backgroundColor: '#09f',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='blue'
+		  data-testid='blue'
+          data-label='blue'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reorder-utils.ts b/editor/src/components/canvas/canvas-strategies/strategies/reorder-utils.ts
index 094a48b0656c..37cbc20bf15d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reorder-utils.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reorder-utils.ts
@@ -36,7 +36,6 @@ function isRootOfGeneratedElement(target: ElementPath): boolean {
 }
 
 export function applyReorderCommon(
-  originalTargets: Array<ElementPath>,
   targets: Array<ElementPath>,
   canvasState: InteractionCanvasState,
   interactionSession: InteractionSession,

From c67b665d85456d719c442c66cbc303c8fd1f0877 Mon Sep 17 00:00:00 2001
From: McKayla Lankau <lankaukk@yahoo.com>
Date: Fri, 13 Sep 2024 06:25:17 -0400
Subject: [PATCH 019/272] kill rogue comma (#6362)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

There was a comma floating on the canvas, now it's gone.

<img width="348" alt="Screenshot 2024-09-12 at 2 43 58 PM"
src="https://github.com/user-attachments/assets/f7f5b8be-d377-438d-a6d8-db6a7eab93c0">
---
 editor/src/components/canvas/canvas-component-entry.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/editor/src/components/canvas/canvas-component-entry.tsx b/editor/src/components/canvas/canvas-component-entry.tsx
index e9a4faaf3343..52e1365dea3f 100644
--- a/editor/src/components/canvas/canvas-component-entry.tsx
+++ b/editor/src/components/canvas/canvas-component-entry.tsx
@@ -105,7 +105,6 @@ const CanvasComponentEntryInner = React.memo((props: CanvasComponentEntryProps)
           />
         ) : null}
       </div>
-      ,
     </>
   )
 })

From a4ac2e49e4714f0a24e34736d13eb0eafd081f44 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 13 Sep 2024 16:26:56 +0200
Subject: [PATCH 020/272] Fix stubborn elements outside visible area indicator
 arrow (#6367)

**Problem:**

The elements outside visible area indicator arrow sometimes shows up
even when the element is obviously inside the visible area.

**Fix:**

Use the fresh metadata to detect the elements outside visible area,
because otherwise the frame data might be stale on certain interactions
(e.g. insertion).

Also, simplified the code by removing some pre-cursor-positioning code
that was not relevant anymore.

| Before | After |
|---------|-----------|
| ![Kapture 2024-09-13 at 14 23
17](https://github.com/user-attachments/assets/0e9af6f4-7522-4461-a776-ca92cf6aaf21)
| ![Kapture 2024-09-13 at 14 24
03](https://github.com/user-attachments/assets/4a8d9d69-2682-4ae2-b82b-a8d6e8ed8005)
|

Fixes #6366
---
 .../elements-outside-visible-area-hooks.tsx   | 91 ++++++-------------
 ...performance-regression-tests.spec.tsx.snap |  4 -
 .../performance-regression-tests.spec.tsx     |  4 +-
 3 files changed, 31 insertions(+), 68 deletions(-)

diff --git a/editor/src/components/canvas/controls/elements-outside-visible-area-hooks.tsx b/editor/src/components/canvas/controls/elements-outside-visible-area-hooks.tsx
index b256b4cef2e6..4908e3fc23c9 100644
--- a/editor/src/components/canvas/controls/elements-outside-visible-area-hooks.tsx
+++ b/editor/src/components/canvas/controls/elements-outside-visible-area-hooks.tsx
@@ -1,26 +1,16 @@
 import React from 'react'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { mapDropNulls } from '../../../core/shared/array-utils'
-import * as EP from '../../../core/shared/element-path'
-import type { CanvasRectangle, WindowPoint, WindowRectangle } from '../../../core/shared/math-utils'
+import type { CanvasRectangle, WindowPoint } from '../../../core/shared/math-utils'
 import {
   boundingRectangleArray,
   getRectCenter,
-  isFiniteRectangle,
   rectangleIntersection,
   windowRectangle,
 } from '../../../core/shared/math-utils'
-import type { ElementPath } from '../../../core/shared/project-file-types'
-import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
+import { Substores, useEditorState } from '../../editor/store/store-hook'
 import { canvasPointToWindowPoint } from '../dom-lookup'
 
-const topBarHeight = 40 // px
-
-type ElementOutsideVisibleArea = {
-  path: ElementPath
-  rect: WindowRectangle
-}
-
 export type ElementOutsideVisibleAreaIndicator = {
   position: WindowPoint
 }
@@ -28,16 +18,6 @@ export type ElementOutsideVisibleAreaIndicator = {
 export function useElementsOutsideVisibleArea(): ElementOutsideVisibleAreaIndicator | null {
   const canvasBounds = document.getElementById('canvas-root')?.getBoundingClientRect()
 
-  const selectedViews = useEditorState(
-    Substores.selectedViews,
-    (store) => store.editor.selectedViews,
-    'useElementsOutsideVisibleArea selectedViews',
-  )
-
-  const storeRef = useRefEditorState((store) => ({
-    jsxMetadata: store.editor.jsxMetadata,
-  }))
-
   const canvasScale = useEditorState(
     Substores.canvasOffset,
     (store) => store.editor.canvas.scale,
@@ -49,21 +29,6 @@ export function useElementsOutsideVisibleArea(): ElementOutsideVisibleAreaIndica
     'useElementsOutsideVisibleArea canvasOffset',
   )
 
-  const framesByPathString = React.useMemo(() => {
-    const frames: { [key: string]: CanvasRectangle } = {}
-    for (const path of selectedViews) {
-      const metadata = MetadataUtils.findElementByElementPath(storeRef.current.jsxMetadata, path)
-      if (
-        metadata != null &&
-        metadata.globalFrame != null &&
-        isFiniteRectangle(metadata.globalFrame)
-      ) {
-        frames[EP.toString(path)] = metadata.globalFrame
-      }
-    }
-    return frames
-  }, [storeRef, selectedViews])
-
   const scaledCanvasArea = React.useMemo(() => {
     if (canvasBounds == null) {
       return null
@@ -71,54 +36,56 @@ export function useElementsOutsideVisibleArea(): ElementOutsideVisibleAreaIndica
     const scaleRatio = canvasScale > 1 ? canvasScale : 1
     return windowRectangle({
       x: canvasBounds.x * scaleRatio,
-      y: (canvasBounds.y - topBarHeight) * scaleRatio,
+      y: canvasBounds.y * scaleRatio,
       width: canvasBounds.width,
       height: canvasBounds.height,
     })
   }, [canvasBounds, canvasScale])
 
-  const elementsOutsideVisibleArea = React.useMemo(() => {
-    return mapDropNulls((path: ElementPath): ElementOutsideVisibleArea | null => {
-      if (scaledCanvasArea == null) {
-        return null
-      }
-      const frame = framesByPathString[EP.toString(path)]
-      if (frame == null) {
+  const selectedElementsFrames: CanvasRectangle[] = useEditorState(
+    Substores.metadata,
+    (store) => {
+      return mapDropNulls(
+        (view) => MetadataUtils.getFrameOrZeroRectInCanvasCoords(view, store.editor.jsxMetadata),
+        store.editor.selectedViews,
+      )
+    },
+    'useElementsOutsideVisibleArea selectedElementsFrames',
+  )
+
+  return React.useMemo(() => {
+    if (scaledCanvasArea == null) {
+      return null
+    }
+
+    const framesOutsideVisibleArea = mapDropNulls((frame) => {
+      if (frame.width === 0 || frame.height === 0) {
         return null
       }
 
       const topLeftPoint = canvasPointToWindowPoint(frame, canvasScale, canvasOffset)
-      const elementRect = windowRectangle({
+      const elementWindowRect = windowRectangle({
         x: topLeftPoint.x,
-        y: topLeftPoint.y - topBarHeight,
+        y: topLeftPoint.y,
         width: frame.width * canvasScale,
         height: frame.height * canvasScale,
       })
-
-      const isOutsideVisibleArea = rectangleIntersection(scaledCanvasArea, elementRect) == null
-      if (!isOutsideVisibleArea) {
+      if (rectangleIntersection(scaledCanvasArea, elementWindowRect) != null) {
         return null
       }
 
-      return {
-        path: path,
-        rect: elementRect,
-      }
-    }, selectedViews)
-  }, [selectedViews, canvasOffset, canvasScale, scaledCanvasArea, framesByPathString])
+      return elementWindowRect
+    }, selectedElementsFrames)
 
-  return React.useMemo((): ElementOutsideVisibleAreaIndicator | null => {
-    if (elementsOutsideVisibleArea.length === 0) {
-      return null
-    }
-    const windowRect = boundingRectangleArray(elementsOutsideVisibleArea.map((a) => a.rect))
+    const windowRect = boundingRectangleArray(framesOutsideVisibleArea)
     if (windowRect == null) {
       return null
     }
+
     return {
       position: getRectCenter(windowRect),
     }
-  }, [elementsOutsideVisibleArea])
+  }, [selectedElementsFrames, canvasOffset, canvasScale, scaledCanvasArea])
 }
 
 export function getIndicatorAngleToTarget(from: WindowPoint, to: WindowPoint): number {
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 6befd7b80f07..0bd2ca37513e 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -88,8 +88,6 @@ Array [
   "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div/ElementsOutsideVisibleAreaIndicator/Symbol(react.memo)(IndicatorArrow)",
-  "/div/ElementsOutsideVisibleAreaIndicator/IndicatorArrow/Symbol(react.memo)(Icon)",
-  "/div/ElementsOutsideVisibleAreaIndicator/IndicatorArrow/div:data-testid='indicator-elements-outside-visible-area'",
   "/div/div/NavigatorComponent/Symbol(react.memo)()",
   "/div/div/NavigatorComponent/Symbol(react.memo)(NavigatorDragLayer)",
   "/div/div/NavigatorComponent/UtopiaSpiedClass(AutoSizer)",
@@ -750,8 +748,6 @@ Array [
   "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div/ElementsOutsideVisibleAreaIndicator/Symbol(react.memo)(IndicatorArrow)",
-  "/div/ElementsOutsideVisibleAreaIndicator/IndicatorArrow/Symbol(react.memo)(Icon)",
-  "/div/ElementsOutsideVisibleAreaIndicator/IndicatorArrow/div:data-testid='indicator-elements-outside-visible-area'",
   "/div/div/NavigatorComponent/Symbol(react.memo)()",
   "/div/div/NavigatorComponent/Symbol(react.memo)(NavigatorDragLayer)",
   "/div/div/NavigatorComponent/UtopiaSpiedClass(AutoSizer)",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index 4a03e049119f..3c487db99578 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`532`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`530`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`657`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`655`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })

From 9c636e6eebf77706ff0e0d9d5fe4fdcb62162850 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 13 Sep 2024 16:28:14 +0200
Subject: [PATCH 021/272] Grids: don't use absolute for click to insert (#6364)

**Problem:**

Click-to-insert into grids uses absolute positioning, which is not
ideal.

**Fix:**

Strip positioning props when click-to-insert.

Fixes #6363
---
 .../draw-to-insert-strategy.spec.browser2.tsx | 12 ++++++------
 .../grid-draw-to-insert-strategy.tsx          | 19 +++++++++++++++++++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
index 09b3c6d1914b..b1d558488842 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
@@ -237,9 +237,9 @@ export var storyboard = (
         gridColumn: '2',
         gridRow: '1',
         height: '100px',
-        left: '83px',
-        position: 'absolute',
-        top: '100px',
+        left: '',
+        position: '',
+        top: '',
         width: '100px',
       })
     })
@@ -280,9 +280,9 @@ export var storyboard = (
         gridColumn: '1',
         gridRow: '1',
         height: '100px',
-        left: '100px',
-        position: 'absolute',
-        top: '25px',
+        left: '',
+        position: '',
+        top: '',
         width: '100px',
       })
     })
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index a1a518dbef2c..a4fdd42e61e6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -52,6 +52,9 @@ import { newReparentSubjects } from './reparent-helpers/reparent-strategy-helper
 import { getReparentTargetUnified } from './reparent-helpers/reparent-strategy-parent-lookup'
 import { stripNulls } from '../../../../core/shared/array-utils'
 import { showGridControls } from '../../commands/show-grid-controls-command'
+import * as PP from '../../../../core/shared/property-path'
+import { propertyToDelete, updateBulkProperties } from '../../commands/set-property-command'
+import { deleteProperties } from '../../commands/delete-properties-command'
 
 export const gridDrawToInsertText: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -218,9 +221,25 @@ const gridDrawToInsertStrategyInner =
             ? []
             : getWrappingCommands(insertedElementPath, maybeWrapperWithUid)
 
+        const isClick = interactionData.type === 'DRAG' && interactionData.drag == null
+
+        // for click-to-insert, don't use absolute positioning
+        const clickToInsertCommands = isClick
+          ? [
+              deleteProperties('always', insertedElementPath, [
+                PP.create('style', 'position'),
+                PP.create('style', 'top'),
+                PP.create('style', 'left'),
+                PP.create('style', 'bottom'),
+                PP.create('style', 'right'),
+              ]),
+            ]
+          : []
+
         return strategyApplicationResult(
           [
             insertionCommand,
+            ...clickToInsertCommands,
             ...setGridPropsCommands(insertedElementPath, gridTemplate, {
               gridRowStart: { numericalPosition: gridCellCoordinates.row },
               gridColumnStart: { numericalPosition: gridCellCoordinates.column },

From 1798bb8c8b5f0abca72d7f60efaea7b9eb1b93a3 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 16 Sep 2024 11:40:01 +0200
Subject: [PATCH 022/272] Fix draw-to-insert into grid when going top-left of
 the origin (#6370)

**Problem:**

Draw-to-insert into a grid does not work if the drag vector goes
top/left of the drag origin.

**Fix:**

Fix the origin calculation.
Also, I added a TODO in the code to improve this strategy in an
incremental PR.

| Before | After |
|-------|---------|
| ![Kapture 2024-09-13 at 17 40
56](https://github.com/user-attachments/assets/218fb02c-4e6e-476f-9376-c7a963598959)
| ![Kapture 2024-09-13 at 17 40
06](https://github.com/user-attachments/assets/9187b0bb-9c79-4859-93f4-168061da8de5)
|

Fixes #6369
---
 .../grid-draw-to-insert-strategy.tsx          | 82 +++++++------------
 1 file changed, 29 insertions(+), 53 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index a4fdd42e61e6..7e4fac06a0b5 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -1,31 +1,27 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import { stripNulls } from '../../../../core/shared/array-utils'
 import * as EP from '../../../../core/shared/element-path'
-import type {
-  CanvasPoint,
-  CanvasRectangle,
-  Size,
-  WindowRectangle,
-} from '../../../../core/shared/math-utils'
+import type { CanvasPoint, CanvasRectangle, Size } from '../../../../core/shared/math-utils'
 import {
   canvasPoint,
   canvasRectangle,
-  canvasVector,
-  offsetPoint,
+  pointDifference,
   roundRectangleToNearestWhole,
-  scaleVector,
   size,
-  windowPoint,
 } from '../../../../core/shared/math-utils'
+import * as PP from '../../../../core/shared/property-path'
 import { assertNever } from '../../../../core/shared/utils'
 import { EditorModes, type InsertionSubject } from '../../../editor/editor-modes'
 import { childInsertionPath } from '../../../editor/store/insertion-path'
+import { deleteProperties } from '../../commands/delete-properties-command'
 import type { InsertElementInsertionSubject } from '../../commands/insert-element-insertion-subject'
 import { insertElementInsertionSubject } from '../../commands/insert-element-insertion-subject'
+import { showGridControls } from '../../commands/show-grid-controls-command'
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { wildcardPatch } from '../../commands/wildcard-patch-command'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls'
-import { canvasPointToWindowPoint } from '../../dom-lookup'
+import { canvasPointToWindowPoint, windowToCanvasCoordinates } from '../../dom-lookup'
 import {
   getWrapperWithGeneratedUid,
   getWrappingCommands,
@@ -50,11 +46,6 @@ import {
 import { getTargetCell, setGridPropsCommands } from './grid-helpers'
 import { newReparentSubjects } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentTargetUnified } from './reparent-helpers/reparent-strategy-parent-lookup'
-import { stripNulls } from '../../../../core/shared/array-utils'
-import { showGridControls } from '../../commands/show-grid-controls-command'
-import * as PP from '../../../../core/shared/property-path'
-import { propertyToDelete, updateBulkProperties } from '../../commands/set-property-command'
-import { deleteProperties } from '../../commands/delete-properties-command'
 
 export const gridDrawToInsertText: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -193,7 +184,11 @@ const gridDrawToInsertStrategyInner =
 
         const { gridCellCoordinates, cellWindowRectangle } = newTargetCell
 
-        const offset = getOffsetFromGridCell(interactionData, canvasState, cellWindowRectangle)
+        const cellCanvasOrigin = windowToCanvasCoordinates(
+          canvasState.scale,
+          canvasState.canvasOffset,
+          cellWindowRectangle,
+        ).canvasPositionRounded
 
         const defaultSize =
           interactionData.type === 'DRAG' &&
@@ -205,7 +200,7 @@ const gridDrawToInsertStrategyInner =
         const insertionCommand = getInsertionCommand(
           targetParent,
           insertionSubject,
-          getFrameForInsertion(interactionData, defaultSize, offset),
+          getFrameForInsertion(interactionData, defaultSize, cellCanvasOrigin),
         )
 
         const gridTemplate = parent.specialSizeMeasurements.containerGridProperties
@@ -245,6 +240,9 @@ const gridDrawToInsertStrategyInner =
               gridColumnStart: { numericalPosition: gridCellCoordinates.column },
               gridRowEnd: { numericalPosition: gridCellCoordinates.row + 1 },
               gridColumnEnd: { numericalPosition: gridCellCoordinates.column + 1 },
+              // TODO! this is currently going to assign the element to the cell the interaction started in,
+              // however it would be good to instead assign the element to _all_ cells overlapping with the final
+              // inserted frame.
             }),
             ...wrappingCommands,
             ...stripNulls([
@@ -279,17 +277,22 @@ const gridDrawToInsertStrategyInner =
 function getFrameForInsertion(
   interactionData: DragInteractionData | HoverInteractionData,
   defaultSize: Size,
-  offset: CanvasPoint,
+  cellOrigin: CanvasPoint,
 ): CanvasRectangle {
   if (interactionData.type === 'DRAG') {
-    const origin = interactionData.drag ?? { x: defaultSize.width / 2, y: defaultSize.height / 2 }
-
-    const { x, y } = { x: offset.x - origin.x, y: offset.y - origin.y }
+    const dragStart = interactionData.dragStart
+    const mouseAt = {
+      x: interactionData.dragStart.x + (interactionData.drag?.x ?? 0),
+      y: interactionData.dragStart.y + (interactionData.drag?.y ?? 0),
+    }
+    const width = Math.abs(interactionData.drag?.x ?? defaultSize.width)
+    const height = Math.abs(interactionData.drag?.y ?? defaultSize.height)
 
-    const { width, height } =
-      interactionData.drag == null
-        ? defaultSize
-        : { width: interactionData.drag.x, height: interactionData.drag.y }
+    const origin = canvasPoint({
+      x: Math.min(dragStart.x, mouseAt.x),
+      y: Math.min(dragStart.y, mouseAt.y),
+    })
+    const { x, y } = pointDifference(cellOrigin, origin)
 
     return roundRectangleToNearestWhole(canvasRectangle({ x, y, width, height }))
   }
@@ -347,30 +350,3 @@ function getGridCellUnderCursor(
     mouseWindowPoint,
   )
 }
-
-function getOffsetFromGridCell(
-  interactionData: DragInteractionData | HoverInteractionData,
-  canvasState: InteractionCanvasState,
-  cellWindowRectangle: WindowRectangle,
-) {
-  const windowPointToUse =
-    interactionData.type === 'DRAG'
-      ? offsetPoint(interactionData.dragStart, interactionData.drag ?? canvasVector({ x: 0, y: 0 }))
-      : interactionData.point
-
-  const mouseWindowPoint = canvasPointToWindowPoint(
-    windowPointToUse,
-    canvasState.scale,
-    canvasState.canvasOffset,
-  )
-
-  const { x, y } = scaleVector(
-    windowPoint({
-      x: mouseWindowPoint.x - cellWindowRectangle.x,
-      y: mouseWindowPoint.y - cellWindowRectangle.y,
-    }),
-    1 / canvasState.scale,
-  )
-
-  return canvasPoint({ x, y })
-}

From efc219cebe57cc9d925d333c83d2b3c0148bafb4 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Mon, 16 Sep 2024 11:47:49 +0200
Subject: [PATCH 023/272] Calculate global frame of grid cells (#6371)

**Problem:**
Grid strategies use DOM api to find grid cells under the mouse, find
their bounding box, etc.
That is against the strategy contract: strategies should rely on their
input and should not inspect the dom.
This PR is a first step to eliminate these: it introduces a function
which calculates the global frames of grid cells from some fields of
SpecialSizeMeasurements.

Note: we use SpecialSizeMeasurements.containerGridProperties`, and that
has a way more general type than necessary (it uses the same type as the
parsed style prop, so it allows keywords and not just numbers).

**TODO:**
- [ ] refactor the types, and create a `ComputedGridContainerProperties`
which only allows numbers in the dimensions
- [ ] memoize the function
- [ ] refactor grid helpers to rely on metadata and not on the dom api

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../strategies/grid-helpers.spec.browser2.tsx | 261 ++++++++++++++++++
 .../strategies/grid-helpers.ts                |  68 ++++-
 2 files changed, 328 insertions(+), 1 deletion(-)
 create mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.spec.browser2.tsx

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.spec.browser2.tsx
new file mode 100644
index 000000000000..9712f1d1fb76
--- /dev/null
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.spec.browser2.tsx
@@ -0,0 +1,261 @@
+import { matchInlineSnapshotBrowser } from '../../../../../test/karma-snapshots'
+import { runDOMWalker } from '../../../editor/actions/action-creators'
+import { makeTestProjectCodeWithSnippet, renderTestEditorWithCode } from '../../ui-jsx.test-utils'
+import { getGlobalFramesOfGridCellsFromMetadata } from './grid-helpers'
+
+describe('Grids', () => {
+  it('can calculate global frames of grid cells', async () => {
+    const editor = await renderTestEditorWithCode(
+      makeTestProjectCodeWithSnippet(`<div
+      style={{
+        backgroundColor: '#fff',
+        position: 'absolute',
+        left: 127,
+        top: 84,
+        width: 519,
+        height: 443,
+        display: 'grid',
+        gridTemplateColumns: '150px min-content 1fr 1fr',
+        gridTemplateRows: 'min-content 1fr 1fr 1fr 1fr',
+        gridGap: 10,
+        padding: 10,
+      }}
+      data-uid={'grid'}
+    >
+      <div
+        style={{
+          backgroundColor: '#09f',
+          width: '100%',
+          height: '100%',
+          gridColumn: 1,
+          gridRow: 1,
+          borderRadius: 10,
+        }}
+        data-uid={'child'}
+      />
+      <div
+        style={{
+          backgroundColor: '#9f0',
+          width: 80,
+          height: 50,
+          gridColumn: 2,
+          gridRow: 1,
+          borderTopLeftRadius: 10,
+          borderTopRightRadius: 10,
+          borderBottomRightRadius: 10,
+          borderBottomLeftRadius: 10,
+        }}
+      />
+      <div
+        style={{
+          backgroundColor: '#f09',
+          width: '100%',
+          height: '100%',
+          gridColumn: 1,
+          gridRowStart: 2,
+          gridRowEnd: 6,
+          borderTopLeftRadius: 10,
+          borderTopRightRadius: 10,
+          borderBottomRightRadius: 10,
+          borderBottomLeftRadius: 10,
+        }}
+      />
+      <div
+        style={{
+          backgroundColor: '#f90',
+          width: '100%',
+          height: '100%',
+          gridColumn: 2,
+          gridRow: 3,
+          borderRadius: 10,
+        }}
+      />
+      <div
+        style={{
+          backgroundColor: '#f90',
+          width: '100%',
+          height: '100%',
+          gridColumn: 2,
+          gridRow: 3,
+          borderRadius: 10,
+        }}
+      />
+      <div
+        style={{
+          backgroundColor: '#90f',
+          width: '100%',
+          height: '100%',
+          gridColumn: 2,
+          gridRow: 4,
+          borderRadius: 10,
+        }}
+      />
+      <div
+        style={{
+          backgroundColor: '#0f9',
+          width: 39,
+          height: 39,
+          alignSelf: 'center',
+          justifySelf: 'center',
+          gridColumn: 2,
+          gridRow: 5,
+          borderRadius: 10,
+        }}
+      />
+    </div>`),
+      'await-first-dom-report',
+    )
+
+    await editor.dispatch([runDOMWalker()], true)
+
+    // non-grids don't have cell measurements:
+    expect(
+      getGlobalFramesOfGridCellsFromMetadata(
+        editor.getEditorState().editor.jsxMetadata[
+          'utopia-storyboard-uid/scene-aaa/app-entity:grid/child'
+        ],
+      ),
+    ).toBeNull()
+
+    // grids have cell measurements:
+    matchInlineSnapshotBrowser(
+      getGlobalFramesOfGridCellsFromMetadata(
+        editor.getEditorState().editor.jsxMetadata[
+          'utopia-storyboard-uid/scene-aaa/app-entity:grid'
+        ],
+      ),
+      `Array [
+  Array [
+    Object {
+      \"height\": 50,
+      \"width\": 150,
+      \"x\": 10,
+      \"y\": 10,
+    },
+    Object {
+      \"height\": 50,
+      \"width\": 80,
+      \"x\": 170,
+      \"y\": 10,
+    },
+    Object {
+      \"height\": 50,
+      \"width\": 119.5,
+      \"x\": 260,
+      \"y\": 10,
+    },
+    Object {
+      \"height\": 50,
+      \"width\": 119.5,
+      \"x\": 389.5,
+      \"y\": 10,
+    },
+  ],
+  Array [
+    Object {
+      \"height\": 83.25,
+      \"width\": 150,
+      \"x\": 10,
+      \"y\": 70,
+    },
+    Object {
+      \"height\": 83.25,
+      \"width\": 80,
+      \"x\": 170,
+      \"y\": 70,
+    },
+    Object {
+      \"height\": 83.25,
+      \"width\": 119.5,
+      \"x\": 260,
+      \"y\": 70,
+    },
+    Object {
+      \"height\": 83.25,
+      \"width\": 119.5,
+      \"x\": 389.5,
+      \"y\": 70,
+    },
+  ],
+  Array [
+    Object {
+      \"height\": 83.25,
+      \"width\": 150,
+      \"x\": 10,
+      \"y\": 163.25,
+    },
+    Object {
+      \"height\": 83.25,
+      \"width\": 80,
+      \"x\": 170,
+      \"y\": 163.25,
+    },
+    Object {
+      \"height\": 83.25,
+      \"width\": 119.5,
+      \"x\": 260,
+      \"y\": 163.25,
+    },
+    Object {
+      \"height\": 83.25,
+      \"width\": 119.5,
+      \"x\": 389.5,
+      \"y\": 163.25,
+    },
+  ],
+  Array [
+    Object {
+      \"height\": 83.25,
+      \"width\": 150,
+      \"x\": 10,
+      \"y\": 256.5,
+    },
+    Object {
+      \"height\": 83.25,
+      \"width\": 80,
+      \"x\": 170,
+      \"y\": 256.5,
+    },
+    Object {
+      \"height\": 83.25,
+      \"width\": 119.5,
+      \"x\": 260,
+      \"y\": 256.5,
+    },
+    Object {
+      \"height\": 83.25,
+      \"width\": 119.5,
+      \"x\": 389.5,
+      \"y\": 256.5,
+    },
+  ],
+  Array [
+    Object {
+      \"height\": 83.25,
+      \"width\": 150,
+      \"x\": 10,
+      \"y\": 349.75,
+    },
+    Object {
+      \"height\": 83.25,
+      \"width\": 80,
+      \"x\": 170,
+      \"y\": 349.75,
+    },
+    Object {
+      \"height\": 83.25,
+      \"width\": 119.5,
+      \"x\": 260,
+      \"y\": 349.75,
+    },
+    Object {
+      \"height\": 83.25,
+      \"width\": 119.5,
+      \"x\": 389.5,
+      \"y\": 349.75,
+    },
+  ],
+]`,
+    )
+  })
+})
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 437329d52b4b..caff66fee4bd 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -4,6 +4,7 @@ import * as EP from '../../../../core/shared/element-path'
 import type {
   ElementInstanceMetadataMap,
   GridPositionValue,
+  GridTemplate,
 } from '../../../../core/shared/element-template'
 import {
   gridPositionValue,
@@ -12,9 +13,14 @@ import {
   type GridElementProperties,
   type GridPosition,
 } from '../../../../core/shared/element-template'
-import type { CanvasVector, WindowRectangle } from '../../../../core/shared/math-utils'
+import type {
+  CanvasRectangle,
+  CanvasVector,
+  WindowRectangle,
+} from '../../../../core/shared/math-utils'
 import {
   canvasPoint,
+  canvasRectangle,
   isInfinityRectangle,
   offsetPoint,
   scaleVector,
@@ -40,6 +46,7 @@ import {
   getGridCellUnderMouseRecursive,
   gridCellCoordinates,
 } from './grid-cell-bounds'
+import type { Sides } from 'utopia-api/core'
 
 export function runGridRearrangeMove(
   targetElement: ElementPath,
@@ -604,3 +611,62 @@ function getGridPositionIndex(props: {
 }): number {
   return (props.row - 1) * props.gridTemplateColumns + props.column - 1
 }
+
+export function getGlobalFramesOfGridCellsFromMetadata(
+  metadata: ElementInstanceMetadata,
+): Array<Array<CanvasRectangle>> | null {
+  return getGlobalFramesOfGridCells(metadata.specialSizeMeasurements)
+}
+
+export function getGlobalFramesOfGridCells({
+  containerGridProperties,
+  rowGap,
+  columnGap,
+  padding,
+}: {
+  containerGridProperties: GridContainerProperties
+  rowGap: number | null
+  columnGap: number | null
+  padding: Sides
+}): Array<Array<CanvasRectangle>> | null {
+  const columnWidths = gridTemplateToNumbers(containerGridProperties.gridTemplateColumns)
+
+  const rowHeights = gridTemplateToNumbers(containerGridProperties.gridTemplateRows)
+
+  if (columnWidths == null || rowHeights == null) {
+    return null
+  }
+
+  const cellRects: Array<Array<CanvasRectangle>> = []
+  let yOffset = padding.top ?? 0
+  rowHeights.forEach((height) => {
+    let xOffset = padding.left ?? 0
+    const rowRects: CanvasRectangle[] = []
+    columnWidths.forEach((width) => {
+      const rect = canvasRectangle({ x: xOffset, y: yOffset, width: width, height: height })
+      rowRects.push(rect)
+      xOffset += width + (columnGap ?? 0)
+    })
+    cellRects.push(rowRects)
+    yOffset += height + (rowGap ?? 0)
+  })
+
+  return cellRects
+}
+
+function gridTemplateToNumbers(gridTemplate: GridTemplate | null): Array<number> | null {
+  if (gridTemplate?.type !== 'DIMENSIONS') {
+    return null
+  }
+
+  const result: Array<number> = []
+
+  for (const dimension of gridTemplate.dimensions) {
+    if (dimension.type !== 'NUMBER') {
+      return null
+    }
+    result.push(dimension.value.value)
+  }
+
+  return result
+}

From 677269af2e34c8a6c175666dcc5c96ae5b624f44 Mon Sep 17 00:00:00 2001
From: RheeseyB <1044774+Rheeseyb@users.noreply.github.com>
Date: Mon, 16 Sep 2024 11:49:09 +0100
Subject: [PATCH 024/272] Add ThirdPartyNotices.txt (#6365)

**Problem:**
Our project was missing a ThirdPartyNotices.txt

**Fix:**
Add one. This was generated using `@rnx-kit/third-party-notices`, which
ironically doesn't have a `ThirdPartyNotices.txt`.
---
 ThirdPartyNotices.txt | 17465 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 17465 insertions(+)
 create mode 100644 ThirdPartyNotices.txt

diff --git a/ThirdPartyNotices.txt b/ThirdPartyNotices.txt
new file mode 100644
index 000000000000..81a8cc0bda74
--- /dev/null
+++ b/ThirdPartyNotices.txt
@@ -0,0 +1,17465 @@
+THIRD-PARTY SOFTWARE NOTICES AND INFORMATION
+
+This repository incorporates material as listed below or described in the code.
+
+========================================================================
+
+@ampproject/remapping 2.2.1
+--
+Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+========================================================================
+
+@babel/code-frame 7.23.5
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/compat-data 7.23.5
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/core 7.23.6
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/generator 7.23.6
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-annotate-as-pure 7.22.5
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-compilation-targets 7.23.6
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-create-class-features-plugin 7.23.6
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-environment-visitor 7.22.20
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-function-name 7.23.0
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-hoist-variables 7.22.5
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-member-expression-to-functions 7.23.0
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-module-imports 7.22.15
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-module-transforms 7.23.3
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-optimise-call-expression 7.22.5
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-plugin-utils 7.22.5
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-replace-supers 7.22.20
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-simple-access 7.22.5
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-skip-transparent-expression-wrappers 7.22.5
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-split-export-declaration 7.22.6
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-string-parser 7.23.4
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-validator-identifier 7.22.20
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helper-validator-option 7.23.5
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/helpers 7.23.6
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/highlight 7.23.4
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/parser 7.24.5
+--
+Copyright (C) 2012-2014 by various contributors (see AUTHORS)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+@babel/plugin-proposal-class-properties 7.16.7
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/plugin-proposal-export-namespace-from 7.14.5
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/plugin-syntax-export-namespace-from 7.8.3
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/plugin-transform-modules-commonjs 7.15.4
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/runtime 7.15.4
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/runtime-corejs3 7.15.4
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/standalone 7.15.7
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/template 7.22.15
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/traverse 7.23.6
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@babel/types 7.23.6
+--
+MIT License
+
+Copyright (c) 2014-present Sebastian McKenzie and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@emotion/cache 10.0.29
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/core 10.1.1
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/css 10.0.27
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/hash 0.8.0
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/is-prop-valid 1.1.0
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/memoize 0.7.4
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/react 11.1.2
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/serialize 0.11.16
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/sheet 0.9.4
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/styled 11.0.0
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/stylis 0.8.5
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/unitless 0.7.5
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/utils 0.11.3
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@emotion/weak-memoize 0.2.5
+--
+MIT License
+
+Copyright (c) Emotion team and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@floating-ui/core 1.5.0
+--
+MIT License
+
+Copyright (c) 2021-present Floating UI contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@floating-ui/dom 1.5.3
+--
+MIT License
+
+Copyright (c) 2021-present Floating UI contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@floating-ui/react-dom 2.0.4
+--
+MIT License
+
+Copyright (c) 2021-present Floating UI contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@floating-ui/utils 0.1.4
+--
+MIT License
+
+Copyright (c) 2021-present Floating UI contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@jridgewell/gen-mapping 0.3.3
+--
+Copyright 2022 Justin Ridgewell <jridgewell@google.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@jridgewell/resolve-uri 3.1.0
+--
+Copyright 2019 Justin Ridgewell <jridgewell@google.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@jridgewell/set-array 1.1.2
+--
+Copyright 2022 Justin Ridgewell <jridgewell@google.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@jridgewell/sourcemap-codec 1.4.15
+--
+The MIT License
+
+Copyright (c) 2015 Rich Harris
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+@jridgewell/trace-mapping 0.3.18
+--
+Copyright 2022 Justin Ridgewell <justin@ridgewell.name>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@juggle/resize-observer 3.4.0
+--
+Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2019 JUGGLE LTD
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+========================================================================
+
+@liveblocks/core 1.10.0
+--
+Licensed under Apache-2.0 (https://spdx.org/licenses/Apache-2.0.html)
+
+========================================================================
+
+@liveblocks/react 1.10.0
+--
+Licensed under Apache-2.0 (https://spdx.org/licenses/Apache-2.0.html)
+
+========================================================================
+
+@liveblocks/react-comments 1.10.0
+--
+Licensed under Apache-2.0 (https://spdx.org/licenses/Apache-2.0.html)
+
+========================================================================
+
+@liveblocks/yjs 1.10.0
+--
+Licensed under Apache-2.0 (https://spdx.org/licenses/Apache-2.0.html)
+
+========================================================================
+
+@popperjs/core 2.4.4
+--
+The MIT License (MIT)
+
+Copyright (c) 2019 Federico Zivolo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@radix-ui/number 1.1.0
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/primitive 1.0.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-arrow 1.1.0
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-collection 1.1.0
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-compose-refs 1.0.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-context 1.0.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-direction 1.1.0
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-dismissable-layer 1.0.5
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-dropdown-menu 2.1.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-focus-guards 1.0.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-focus-scope 1.0.4
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-id 1.0.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-menu 2.1.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-popover 1.0.7
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-popper 1.1.3
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-portal 1.0.4
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-presence 1.0.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-primitive 1.0.3
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-roving-focus 1.1.0
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-select 2.1.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-slot 1.0.2
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-toggle 1.0.3
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-tooltip 1.0.7
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-use-callback-ref 1.0.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-use-controllable-state 1.0.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-use-escape-keydown 1.0.3
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-use-layout-effect 1.0.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-use-previous 1.1.0
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-use-size 1.0.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@radix-ui/react-visually-hidden 1.0.3
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@react-spring/animated 9.0.0-rc.3
+--
+MIT License
+
+Copyright (c) 2018-present Paul Henschel, Alec Larson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@react-spring/core 9.0.0-rc.3
+--
+MIT License
+
+Copyright (c) 2018-present Paul Henschel, Alec Larson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@react-spring/shared 9.0.0-rc.3
+--
+MIT License
+
+Copyright (c) 2018-present Paul Henschel, Alec Larson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@react-spring/web 9.0.0-rc.3
+--
+MIT License
+
+Copyright (c) 2018-present Paul Henschel, Alec Larson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@remix-run/react 2.0.1
+--
+MIT License
+
+Copyright (c) Remix Software Inc. 2020-2021
+Copyright (c) Shopify Inc. 2022-2023
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@remix-run/router 1.13.0
+--
+MIT License
+
+Copyright (c) React Training LLC 2015-2019
+Copyright (c) Remix Software Inc. 2020-2021
+Copyright (c) Shopify Inc. 2022-2023
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@remix-run/server-runtime 2.3.1
+--
+MIT License
+
+Copyright (c) Remix Software Inc. 2020-2021
+Copyright (c) Shopify Inc. 2022-2023
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@root/encoding 1.0.1
+--
+Mozilla Public License Version 2.0
+
+   1. Definitions
+
+1.1. "Contributor" means each individual or legal entity that creates, contributes
+to the creation of, or owns Covered Software.
+
+1.2. "Contributor Version" means the combination of the Contributions of others
+(if any) used by a Contributor and that particular Contributor's Contribution.
+
+      1.3. "Contribution" means Covered Software of a particular Contributor.
+
+1.4. "Covered Software" means Source Code Form to which the initial Contributor
+has attached the notice in Exhibit A, the Executable Form of such Source Code
+Form, and Modifications of such Source Code Form, in each case including portions
+thereof.
+
+      1.5. "Incompatible With Secondary Licenses" means
+
+(a) that the initial Contributor has attached the notice described in Exhibit
+B to the Covered Software; or
+
+(b) that the Covered Software was made available under the terms of version
+1.1 or earlier of the License, but not also under the terms of a Secondary
+License.
+
+1.6. "Executable Form" means any form of the work other than Source Code Form.
+
+1.7. "Larger Work" means a work that combines Covered Software with other
+material, in a separate file or files, that is not Covered Software.
+
+      1.8. "License" means this document.
+
+1.9. "Licensable" means having the right to grant, to the maximum extent possible,
+whether at the time of the initial grant or subsequently, any and all of the
+rights conveyed by this License.
+
+      1.10. "Modifications" means any of the following:
+
+(a) any file in Source Code Form that results from an addition to, deletion
+from, or modification of the contents of Covered Software; or
+
+(b) any new file in Source Code Form that contains any Covered Software.
+
+1.11. "Patent Claims" of a Contributor means any patent claim(s), including
+without limitation, method, process, and apparatus claims, in any patent Licensable
+by such Contributor that would be infringed, but for the grant of the License,
+by the making, using, selling, offering for sale, having made, import, or
+transfer of either its Contributions or its Contributor Version.
+
+1.12. "Secondary License" means either the GNU General Public License, Version
+2.0, the GNU Lesser General Public License, Version 2.1, the GNU Affero General
+Public License, Version 3.0, or any later versions of those licenses.
+
+1.13. "Source Code Form" means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your") means an individual or a legal entity exercising rights
+under this License. For legal entities, "You" includes any entity that controls,
+is controlled by, or is under common control with You. For purposes of this
+definition, "control" means (a) the power, direct or indirect, to cause the
+direction or management of such entity, whether by contract or otherwise,
+or (b) ownership of more than fifty percent (50%) of the outstanding shares
+or beneficial ownership of such entity.
+
+   2. License Grants and Conditions
+
+      2.1. Grants
+
+Each Contributor hereby grants You a world-wide, royalty-free, non-exclusive
+license:
+
+(a) under intellectual property rights (other than patent or trademark) Licensable
+by such Contributor to use, reproduce, make available, modify, display, perform,
+distribute, and otherwise exploit its Contributions, either on an unmodified
+basis, with Modifications, or as part of a Larger Work; and
+
+(b) under Patent Claims of such Contributor to make, use, sell, offer for
+sale, have made, import, and otherwise transfer either its Contributions or
+its Contributor Version.
+
+      2.2. Effective Date
+
+The licenses granted in Section 2.1 with respect to any Contribution become
+effective for each Contribution on the date the Contributor first distributes
+such Contribution.
+
+      2.3. Limitations on Grant Scope
+
+The licenses granted in this Section 2 are the only rights granted under this
+License. No additional rights or licenses will be implied from the distribution
+or licensing of Covered Software under this License. Notwithstanding Section
+2.1(b) above, no patent license is granted by a Contributor:
+
+(a) for any code that a Contributor has removed from Covered Software; or
+
+(b) for infringements caused by: (i) Your and any other third party's modifications
+of Covered Software, or (ii) the combination of its Contributions with other
+software (except as part of its Contributor Version); or
+
+(c) under Patent Claims infringed by Covered Software in the absence of its
+Contributions.
+
+This License does not grant any rights in the trademarks, service marks, or
+logos of any Contributor (except as may be necessary to comply with the notice
+requirements in Section 3.4).
+
+      2.4. Subsequent Licenses
+
+No Contributor makes additional grants as a result of Your choice to distribute
+the Covered Software under a subsequent version of this License (see Section
+10.2) or under the terms of a Secondary License (if permitted under the terms
+of Section 3.3).
+
+      2.5. Representation
+
+Each Contributor represents that the Contributor believes its Contributions
+are its original creation(s) or it has sufficient rights to grant the rights
+to its Contributions conveyed by this License.
+
+      2.6. Fair Use
+
+This License is not intended to limit any rights You have under applicable
+copyright doctrines of fair use, fair dealing, or other equivalents.
+
+      2.7. Conditions
+
+Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in
+Section 2.1.
+
+   3. Responsibilities
+
+      3.1. Distribution of Source Form
+
+All distribution of Covered Software in Source Code Form, including any Modifications
+that You create or to which You contribute, must be under the terms of this
+License. You must inform recipients that the Source Code Form of the Covered
+Software is governed by the terms of this License, and how they can obtain
+a copy of this License. You may not attempt to alter or restrict the recipients'
+rights in the Source Code Form.
+
+      3.2. Distribution of Executable Form
+
+      If You distribute Covered Software in Executable Form then:
+
+(a) such Covered Software must also be made available in Source Code Form,
+as described in Section 3.1, and You must inform recipients of the Executable
+Form how they can obtain a copy of such Source Code Form by reasonable means
+in a timely manner, at a charge no more than the cost of distribution to the
+recipient; and
+
+(b) You may distribute such Executable Form under the terms of this License,
+or sublicense it under different terms, provided that the license for the
+Executable Form does not attempt to limit or alter the recipients' rights
+in the Source Code Form under this License.
+
+      3.3. Distribution of a Larger Work
+
+You may create and distribute a Larger Work under terms of Your choice, provided
+that You also comply with the requirements of this License for the Covered
+Software. If the Larger Work is a combination of Covered Software with a work
+governed by one or more Secondary Licenses, and the Covered Software is not
+Incompatible With Secondary Licenses, this License permits You to additionally
+distribute such Covered Software under the terms of such Secondary License(s),
+so that the recipient of the Larger Work may, at their option, further distribute
+the Covered Software under the terms of either this License or such Secondary
+License(s).
+
+      3.4. Notices
+
+You may not remove or alter the substance of any license notices (including
+copyright notices, patent notices, disclaimers of warranty, or limitations
+of liability) contained within the Source Code Form of the Covered Software,
+except that You may alter any license notices to the extent required to remedy
+known factual inaccuracies.
+
+      3.5. Application of Additional Terms
+
+You may choose to offer, and to charge a fee for, warranty, support, indemnity
+or liability obligations to one or more recipients of Covered Software. However,
+You may do so only on Your own behalf, and not on behalf of any Contributor.
+You must make it absolutely clear that any such warranty, support, indemnity,
+or liability obligation is offered by You alone, and You hereby agree to indemnify
+every Contributor for any liability incurred by such Contributor as a result
+of warranty, support, indemnity or liability terms You offer. You may include
+additional disclaimers of warranty and limitations of liability specific to
+any jurisdiction.
+
+   4. Inability to Comply Due to Statute or Regulation
+
+If it is impossible for You to comply with any of the terms of this License
+with respect to some or all of the Covered Software due to statute, judicial
+order, or regulation then You must: (a) comply with the terms of this License
+to the maximum extent possible; and (b) describe the limitations and the code
+they affect. Such description must be placed in a text file included with
+all distributions of the Covered Software under this License. Except to the
+extent prohibited by statute or regulation, such description must be sufficiently
+detailed for a recipient of ordinary skill to be able to understand it.
+
+   5. Termination
+
+5.1. The rights granted under this License will terminate automatically if
+You fail to comply with any of its terms. However, if You become compliant,
+then the rights granted under this License from a particular Contributor are
+reinstated (a) provisionally, unless and until such Contributor explicitly
+and finally terminates Your grants, and (b) on an ongoing basis, if such Contributor
+fails to notify You of the non-compliance by some reasonable means prior to
+60 days after You have come back into compliance. Moreover, Your grants from
+a particular Contributor are reinstated on an ongoing basis if such Contributor
+notifies You of the non-compliance by some reasonable means, this is the first
+time You have received notice of non-compliance with this License from such
+Contributor, and You become compliant prior to 30 days after Your receipt
+of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent infringement
+claim (excluding declaratory judgment actions, counter-claims, and cross-claims)
+alleging that a Contributor Version directly or indirectly infringes any patent,
+then the rights granted to You by any and all Contributors for the Covered
+Software under Section 2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all end
+user license agreements (excluding distributors and resellers) which have
+been validly granted by You or Your distributors under this License prior
+to termination shall survive termination.
+
+   6. Disclaimer of Warranty
+
+Covered Software is provided under this License on an "as is" basis, without
+warranty of any kind, either expressed, implied, or statutory, including,
+without limitation, warranties that the Covered Software is free of defects,
+merchantable, fit for a particular purpose or non-infringing. The entire risk
+as to the quality and performance of the Covered Software is with You. Should
+any Covered Software prove defective in any respect, You (not any Contributor)
+assume the cost of any necessary servicing, repair, or correction. This disclaimer
+of warranty constitutes an essential part of this License. No use of any Covered
+Software is authorized under this License except under this disclaimer.
+
+   7. Limitation of Liability
+
+Under no circumstances and under no legal theory, whether tort (including
+negligence), contract, or otherwise, shall any Contributor, or anyone who
+distributes Covered Software as permitted above, be liable to You for any
+direct, indirect, special, incidental, or consequential damages of any character
+including, without limitation, damages for lost profits, loss of goodwill,
+work stoppage, computer failure or malfunction, or any and all other commercial
+damages or losses, even if such party shall have been informed of the possibility
+of such damages. This limitation of liability shall not apply to liability
+for death or personal injury resulting from such party's negligence to the
+extent applicable law prohibits such limitation. Some jurisdictions do not
+allow the exclusion or limitation of incidental or consequential damages,
+so this exclusion and limitation may not apply to You.
+
+   8. Litigation
+
+Any litigation relating to this License may be brought only in the courts
+of a jurisdiction where the defendant maintains its principal place of business
+and such litigation shall be governed by laws of that jurisdiction, without
+reference to its conflict-of-law provisions. Nothing in this Section shall
+prevent a party's ability to bring cross-claims or counter-claims.
+
+   9. Miscellaneous
+
+This License represents the complete agreement concerning the subject matter
+hereof. If any provision of this License is held to be unenforceable, such
+provision shall be reformed only to the extent necessary to make it enforceable.
+Any law or regulation which provides that the language of a contract shall
+be construed against the drafter shall not be used to construe this License
+against a Contributor.
+
+   10. Versions of the License
+
+      10.1. New Versions
+
+Mozilla Foundation is the license steward. Except as provided in Section 10.3,
+no one other than the license steward has the right to modify or publish new
+versions of this License. Each version will be given a distinguishing version
+number.
+
+      10.2. Effect of New Versions
+
+You may distribute the Covered Software under the terms of the version of
+the License under which You originally received the Covered Software, or under
+the terms of any subsequent version published by the license steward.
+
+      10.3. Modified Versions
+
+If you create software not governed by this License, and you want to create
+a new license for such software, you may create and use a modified version
+of this License if you rename the license and remove any references to the
+name of the license steward (except to note that such modified license differs
+from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary Licenses
+
+If You choose to distribute Source Code Form that is Incompatible With Secondary
+Licenses under the terms of this version of the License, the notice described
+in Exhibit B of this License must be attached. Exhibit A - Source Code Form
+License Notice
+
+This Source Code Form is subject to the terms of the Mozilla Public License,
+v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain
+one at http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular file,
+then You may include the notice in a location (such as a LICENSE file in a
+relevant directory) where a recipient would be likely to look for such a notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+
+This Source Code Form is "Incompatible With Secondary Licenses", as defined
+by the Mozilla Public License, v. 2.0.
+
+========================================================================
+
+@seznam/compose-react-refs 1.0.6
+--
+Copyright (c) 2019, Seznam.cz, a.s.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+========================================================================
+
+@shopify/hydrogen 2024.4.1
+--
+Copyright 2023-present, Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+@shopify/hydrogen-react 2024.4.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@stitches/react 1.2.8
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+@tippyjs/react 4.1.0
+--
+MIT License
+
+Copyright (c) 2018 atomiks
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@twind/core 1.1.3
+--
+MIT License
+
+Copyright (c) 2022 [these people](https://github.com/tw-in-js/twind/graphs/contributors)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@twind/preset-autoprefix 1.0.7
+--
+MIT License
+
+Copyright (c) 2022 [these people](https://github.com/tw-in-js/twind/graphs/contributors)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@twind/preset-tailwind 1.1.4
+--
+MIT License
+
+Copyright (c) 2022 [these people](https://github.com/tw-in-js/twind/graphs/contributors)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@use-it/interval 0.1.3
+--
+MIT License
+
+Copyright (c) 2019-present Donavon West
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+@vercel/stega 0.1.0
+--
+# Mozilla Public License Version 2.0
+
+1. Definitions
+
+---
+
+1.1. "Contributor"
+means each individual or legal entity that creates, contributes to
+the creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+means the combination of the Contributions of others (if any) used
+by a Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+means Source Code Form to which the initial Contributor has attached
+the notice in Exhibit A, the Executable Form of such Source Code
+Form, and Modifications of such Source Code Form, in each case
+including portions thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+means
+
+    (a) that the initial Contributor has attached the notice described
+        in Exhibit B to the Covered Software; or
+
+    (b) that the Covered Software was made available under the terms of
+        version 1.1 or earlier of the License, but not also under the
+        terms of a Secondary License.
+
+1.6. "Executable Form"
+means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+means a work that combines Covered Software with other material, in
+a separate file or files, that is not Covered Software.
+
+1.8. "License"
+means this document.
+
+1.9. "Licensable"
+means having the right to grant, to the maximum extent possible,
+whether at the time of the initial grant or subsequently, any and
+all of the rights conveyed by this License.
+
+1.10. "Modifications"
+means any of the following:
+
+    (a) any file in Source Code Form that results from an addition to,
+        deletion from, or modification of the contents of Covered
+        Software; or
+
+    (b) any new file in Source Code Form that contains any Covered
+        Software.
+
+1.11. "Patent Claims" of a Contributor
+means any patent claim(s), including without limitation, method,
+process, and apparatus claims, in any patent Licensable by such
+Contributor that would be infringed, but for the grant of the
+License, by the making, using, selling, offering for sale, having
+made, import, or transfer of either its Contributions or its
+Contributor Version.
+
+1.12. "Secondary License"
+means either the GNU General Public License, Version 2.0, the GNU
+Lesser General Public License, Version 2.1, the GNU Affero General
+Public License, Version 3.0, or any later versions of those
+licenses.
+
+1.13. "Source Code Form"
+means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+means an individual or a legal entity exercising rights under this
+License. For legal entities, "You" includes any entity that
+controls, is controlled by, or is under common control with You. For
+purposes of this definition, "control" means (a) the power, direct
+or indirect, to cause the direction or management of such entity,
+whether by contract or otherwise, or (b) ownership of more than
+fifty percent (50%) of the outstanding shares or beneficial
+ownership of such entity.
+
+2. License Grants and Conditions
+
+---
+
+2.1. Grants
+
+Each Contributor hereby grants You a world-wide, royalty-free,
+non-exclusive license:
+
+(a) under intellectual property rights (other than patent or trademark)
+Licensable by such Contributor to use, reproduce, make available,
+modify, display, perform, distribute, and otherwise exploit its
+Contributions, either on an unmodified basis, with Modifications, or
+as part of a Larger Work; and
+
+(b) under Patent Claims of such Contributor to make, use, sell, offer
+for sale, have made, import, and otherwise transfer either its
+Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+The licenses granted in Section 2.1 with respect to any Contribution
+become effective for each Contribution on the date the Contributor first
+distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+The licenses granted in this Section 2 are the only rights granted under
+this License. No additional rights or licenses will be implied from the
+distribution or licensing of Covered Software under this License.
+Notwithstanding Section 2.1(b) above, no patent license is granted by a
+Contributor:
+
+(a) for any code that a Contributor has removed from Covered Software;
+or
+
+(b) for infringements caused by: (i) Your and any other third party's
+modifications of Covered Software, or (ii) the combination of its
+Contributions with other software (except as part of its Contributor
+Version); or
+
+(c) under Patent Claims infringed by Covered Software in the absence of
+its Contributions.
+
+This License does not grant any rights in the trademarks, service marks,
+or logos of any Contributor (except as may be necessary to comply with
+the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+No Contributor makes additional grants as a result of Your choice to
+distribute the Covered Software under a subsequent version of this
+License (see Section 10.2) or under the terms of a Secondary License (if
+permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+Each Contributor represents that the Contributor believes its
+Contributions are its original creation(s) or it has sufficient rights
+to grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+This License is not intended to limit any rights You have under
+applicable copyright doctrines of fair use, fair dealing, or other
+equivalents.
+
+2.7. Conditions
+
+Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
+in Section 2.1.
+
+3. Responsibilities
+
+---
+
+3.1. Distribution of Source Form
+
+All distribution of Covered Software in Source Code Form, including any
+Modifications that You create or to which You contribute, must be under
+the terms of this License. You must inform recipients that the Source
+Code Form of the Covered Software is governed by the terms of this
+License, and how they can obtain a copy of this License. You may not
+attempt to alter or restrict the recipients' rights in the Source Code
+Form.
+
+3.2. Distribution of Executable Form
+
+If You distribute Covered Software in Executable Form then:
+
+(a) such Covered Software must also be made available in Source Code
+Form, as described in Section 3.1, and You must inform recipients of
+the Executable Form how they can obtain a copy of such Source Code
+Form by reasonable means in a timely manner, at a charge no more
+than the cost of distribution to the recipient; and
+
+(b) You may distribute such Executable Form under the terms of this
+License, or sublicense it under different terms, provided that the
+license for the Executable Form does not attempt to limit or alter
+the recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+You may create and distribute a Larger Work under terms of Your choice,
+provided that You also comply with the requirements of this License for
+the Covered Software. If the Larger Work is a combination of Covered
+Software with a work governed by one or more Secondary Licenses, and the
+Covered Software is not Incompatible With Secondary Licenses, this
+License permits You to additionally distribute such Covered Software
+under the terms of such Secondary License(s), so that the recipient of
+the Larger Work may, at their option, further distribute the Covered
+Software under the terms of either this License or such Secondary
+License(s).
+
+3.4. Notices
+
+You may not remove or alter the substance of any license notices
+(including copyright notices, patent notices, disclaimers of warranty,
+or limitations of liability) contained within the Source Code Form of
+the Covered Software, except that You may alter any license notices to
+the extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+You may choose to offer, and to charge a fee for, warranty, support,
+indemnity or liability obligations to one or more recipients of Covered
+Software. However, You may do so only on Your own behalf, and not on
+behalf of any Contributor. You must make it absolutely clear that any
+such warranty, support, indemnity, or liability obligation is offered by
+You alone, and You hereby agree to indemnify every Contributor for any
+liability incurred by such Contributor as a result of warranty, support,
+indemnity or liability terms You offer. You may include additional
+disclaimers of warranty and limitations of liability specific to any
+jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+
+---
+
+If it is impossible for You to comply with any of the terms of this
+License with respect to some or all of the Covered Software due to
+statute, judicial order, or regulation then You must: (a) comply with
+the terms of this License to the maximum extent possible; and (b)
+describe the limitations and the code they affect. Such description must
+be placed in a text file included with all distributions of the Covered
+Software under this License. Except to the extent prohibited by statute
+or regulation, such description must be sufficiently detailed for a
+recipient of ordinary skill to be able to understand it.
+
+5. Termination
+
+---
+
+5.1. The rights granted under this License will terminate automatically
+if You fail to comply with any of its terms. However, if You become
+compliant, then the rights granted under this License from a particular
+Contributor are reinstated (a) provisionally, unless and until such
+Contributor explicitly and finally terminates Your grants, and (b) on an
+ongoing basis, if such Contributor fails to notify You of the
+non-compliance by some reasonable means prior to 60 days after You have
+come back into compliance. Moreover, Your grants from a particular
+Contributor are reinstated on an ongoing basis if such Contributor
+notifies You of the non-compliance by some reasonable means, this is the
+first time You have received notice of non-compliance with this License
+from such Contributor, and You become compliant prior to 30 days after
+Your receipt of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+infringement claim (excluding declaratory judgment actions,
+counter-claims, and cross-claims) alleging that a Contributor Version
+directly or indirectly infringes any patent, then the rights granted to
+You by any and all Contributors for the Covered Software under Section
+2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all
+end user license agreements (excluding distributors and resellers) which
+have been validly granted by You or Your distributors under this License
+prior to termination shall survive termination.
+
+---
+
+-                                                                      *
+- 6.  Disclaimer of Warranty \*
+- ------------------------- \*
+-                                                                      *
+- Covered Software is provided under this License on an "as is" \*
+- basis, without warranty of any kind, either expressed, implied, or \*
+- statutory, including, without limitation, warranties that the \*
+- Covered Software is free of defects, merchantable, fit for a \*
+- particular purpose or non-infringing. The entire risk as to the \*
+- quality and performance of the Covered Software is with You. \*
+- Should any Covered Software prove defective in any respect, You \*
+- (not any Contributor) assume the cost of any necessary servicing, \*
+- repair, or correction. This disclaimer of warranty constitutes an \*
+- essential part of this License. No use of any Covered Software is \*
+- authorized under this License except under this disclaimer. \*
+-                                                                      *
+
+---
+
+---
+
+-                                                                      *
+- 7.  Limitation of Liability \*
+- -------------------------- \*
+-                                                                      *
+- Under no circumstances and under no legal theory, whether tort \*
+- (including negligence), contract, or otherwise, shall any \*
+- Contributor, or anyone who distributes Covered Software as \*
+- permitted above, be liable to You for any direct, indirect, \*
+- special, incidental, or consequential damages of any character \*
+- including, without limitation, damages for lost profits, loss of \*
+- goodwill, work stoppage, computer failure or malfunction, or any \*
+- and all other commercial damages or losses, even if such party \*
+- shall have been informed of the possibility of such damages. This \*
+- limitation of liability shall not apply to liability for death or \*
+- personal injury resulting from such party's negligence to the \*
+- extent applicable law prohibits such limitation. Some \*
+- jurisdictions do not allow the exclusion or limitation of \*
+- incidental or consequential damages, so this exclusion and \*
+- limitation may not apply to You. \*
+-                                                                      *
+
+---
+
+8. Litigation
+
+---
+
+Any litigation relating to this License may be brought only in the
+courts of a jurisdiction where the defendant maintains its principal
+place of business and such litigation shall be governed by laws of that
+jurisdiction, without reference to its conflict-of-law provisions.
+Nothing in this Section shall prevent a party's ability to bring
+cross-claims or counter-claims.
+
+9. Miscellaneous
+
+---
+
+This License represents the complete agreement concerning the subject
+matter hereof. If any provision of this License is held to be
+unenforceable, such provision shall be reformed only to the extent
+necessary to make it enforceable. Any law or regulation which provides
+that the language of a contract shall be construed against the drafter
+shall not be used to construe this License against a Contributor.
+
+10. Versions of the License
+
+---
+
+10.1. New Versions
+
+Mozilla Foundation is the license steward. Except as provided in Section
+10.3, no one other than the license steward has the right to modify or
+publish new versions of this License. Each version will be given a
+distinguishing version number.
+
+10.2. Effect of New Versions
+
+You may distribute the Covered Software under the terms of the version
+of the License under which You originally received the Covered Software,
+or under the terms of any subsequent version published by the license
+steward.
+
+10.3. Modified Versions
+
+If you create software not governed by this License, and you want to
+create a new license for such software, you may create and use a
+modified version of this License if you rename the license and remove
+any references to the name of the license steward (except to note that
+such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+Licenses
+
+If You choose to distribute Source Code Form that is Incompatible With
+Secondary Licenses under the terms of this version of the License, the
+notice described in Exhibit B of this License must be attached.
+
+## Exhibit A - Source Code Form License Notice
+
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular
+file, then You may include the notice in a location (such as a LICENSE
+file in a relevant directory) where a recipient would be likely to look
+for such a notice.
+
+You may add additional accurate notices of copyright ownership.
+
+## Exhibit B - "Incompatible With Secondary Licenses" Notice
+
+This Source Code Form is "Incompatible With Secondary Licenses", as
+defined by the Mozilla Public License, v. 2.0.
+
+========================================================================
+
+@web3-storage/multipart-parser 1.0.0
+--
+Copyright vasco-santos; licensed under (Apache-2.0 AND MIT) (https://spdx.org/licenses/Apache-2.0.html https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+acorn 7.4.1
+--
+MIT License
+
+Copyright (C) 2012-2018 by various contributors (see AUTHORS)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+acorn-jsx 5.3.2
+--
+Copyright (C) 2012-2017 by Ingvar Stepanyan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+add-dom-event-listener 1.1.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2014-present yiminghe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+ajv 6.12.6
+--
+The MIT License (MIT)
+
+Copyright (c) 2015-2017 Evgeny Poberezkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+anser 2.1.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2012-21 Ionică Bizău <bizauionica@gmail.com> (https://ionicabizau.net)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+ansi-regex 5.0.1
+--
+MIT License
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+ansi-styles 3.2.1
+--
+MIT License
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+aria-hidden 1.2.3
+--
+MIT License
+
+Copyright (c) 2017 Anton Korzunov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+aria-query 4.2.2
+--
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction,
+and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by
+the copyright owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all
+other entities that control, are controlled by, or are under common
+control with that entity. For the purposes of this definition,
+"control" means (i) the power, direct or indirect, to cause the
+direction or management of such entity, whether by contract or
+otherwise, or (ii) ownership of fifty percent (50%) or more of the
+outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity
+exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications,
+including but not limited to software source code, documentation
+source, and configuration files.
+
+"Object" form shall mean any form resulting from mechanical
+transformation or translation of a Source form, including but
+not limited to compiled object code, generated documentation,
+and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or
+Object form, made available under the License, as indicated by a
+copyright notice that is included in or attached to the work
+(an example is provided in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object
+form, that is based on (or derived from) the Work and for which the
+editorial revisions, annotations, elaborations, or other modifications
+represent, as a whole, an original work of authorship. For the purposes
+of this License, Derivative Works shall not include works that remain
+separable from, or merely link (or bind by name) to the interfaces of,
+the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including
+the original version of the Work and any modifications or additions
+to that Work or Derivative Works thereof, that is intentionally
+submitted to Licensor for inclusion in the Work by the copyright owner
+or by an individual or Legal Entity authorized to submit on behalf of
+the copyright owner. For the purposes of this definition, "submitted"
+means any form of electronic, verbal, or written communication sent
+to the Licensor or its representatives, including but not limited to
+communication on electronic mailing lists, source code control systems,
+and issue tracking systems that are managed by, or on behalf of, the
+Licensor for the purpose of discussing and improving the Work, but
+excluding communication that is conspicuously marked or otherwise
+designated in writing by the copyright owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity
+on behalf of whom a Contribution has been received by Licensor and
+subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+this License, each Contributor hereby grants to You a perpetual,
+worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+copyright license to reproduce, prepare Derivative Works of,
+publicly display, publicly perform, sublicense, and distribute the
+Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+this License, each Contributor hereby grants to You a perpetual,
+worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+(except as stated in this section) patent license to make, have made,
+use, offer to sell, sell, import, and otherwise transfer the Work,
+where such license applies only to those patent claims licensable
+by such Contributor that are necessarily infringed by their
+Contribution(s) alone or by combination of their Contribution(s)
+with the Work to which such Contribution(s) was submitted. If You
+institute patent litigation against any entity (including a
+cross-claim or counterclaim in a lawsuit) alleging that the Work
+or a Contribution incorporated within the Work constitutes direct
+or contributory patent infringement, then any patent licenses
+granted to You under this License for that Work shall terminate
+as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+Work or Derivative Works thereof in any medium, with or without
+modifications, and in Source or Object form, provided that You
+meet the following conditions:
+
+(a) You must give any other recipients of the Work or
+Derivative Works a copy of this License; and
+
+(b) You must cause any modified files to carry prominent notices
+stating that You changed the files; and
+
+(c) You must retain, in the Source form of any Derivative Works
+that You distribute, all copyright, patent, trademark, and
+attribution notices from the Source form of the Work,
+excluding those notices that do not pertain to any part of
+the Derivative Works; and
+
+(d) If the Work includes a "NOTICE" text file as part of its
+distribution, then any Derivative Works that You distribute must
+include a readable copy of the attribution notices contained
+within such NOTICE file, excluding those notices that do not
+pertain to any part of the Derivative Works, in at least one
+of the following places: within a NOTICE text file distributed
+as part of the Derivative Works; within the Source form or
+documentation, if provided along with the Derivative Works; or,
+within a display generated by the Derivative Works, if and
+wherever such third-party notices normally appear. The contents
+of the NOTICE file are for informational purposes only and
+do not modify the License. You may add Your own attribution
+notices within Derivative Works that You distribute, alongside
+or as an addendum to the NOTICE text from the Work, provided
+that such additional attribution notices cannot be construed
+as modifying the License.
+
+You may add Your own copyright statement to Your modifications and
+may provide additional or different license terms and conditions
+for use, reproduction, or distribution of Your modifications, or
+for any such Derivative Works as a whole, provided Your use,
+reproduction, and distribution of the Work otherwise complies with
+the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+any Contribution intentionally submitted for inclusion in the Work
+by You to the Licensor shall be under the terms and conditions of
+this License, without any additional terms or conditions.
+Notwithstanding the above, nothing herein shall supersede or modify
+the terms of any separate license agreement you may have executed
+with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+names, trademarks, service marks, or product names of the Licensor,
+except as required for reasonable and customary use in describing the
+origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+agreed to in writing, Licensor provides the Work (and each
+Contributor provides its Contributions) on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied, including, without limitation, any warranties or conditions
+of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+PARTICULAR PURPOSE. You are solely responsible for determining the
+appropriateness of using or redistributing the Work and assume any
+risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+whether in tort (including negligence), contract, or otherwise,
+unless required by applicable law (such as deliberate and grossly
+negligent acts) or agreed to in writing, shall any Contributor be
+liable to You for damages, including any direct, indirect, special,
+incidental, or consequential damages of any character arising as a
+result of this License or out of the use or inability to use the
+Work (including but not limited to damages for loss of goodwill,
+work stoppage, computer failure or malfunction, or any and all
+other commercial damages or losses), even if such Contributor
+has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+the Work or Derivative Works thereof, You may choose to offer,
+and charge a fee for, acceptance of support, warranty, indemnity,
+or other liability obligations and/or rights consistent with this
+License. However, in accepting such obligations, You may act only
+on Your own behalf and on Your sole responsibility, not on behalf
+of any other Contributor, and only if You agree to indemnify,
+defend, and hold each Contributor harmless for any liability
+incurred by, or claims asserted against, such Contributor by reason
+of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+To apply the Apache License to your work, attach the following
+boilerplate notice, with the fields enclosed by brackets "{}"
+replaced with your own identifying information. (Don't include
+the brackets!)  The text should be enclosed in the appropriate
+comment syntax for the file format. We also recommend that a
+file or class name and description of purpose be included on the
+same "printed page" as the copyright notice for easier
+identification within third-party archives.
+
+Copyright 2020 A11yance
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+========================================================================
+
+array-includes 3.1.4
+--
+The MIT License (MIT)
+
+Copyright (C) 2015 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+array.prototype.flatmap 1.2.4
+--
+MIT License
+
+Copyright (c) 2017 ECMAScript Shims
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+assert 1.3.0
+--
+Copyright Joyent, Inc. and other Node contributors. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+
+========================================================================
+
+axobject-query 2.2.0
+--
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction,
+and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by
+the copyright owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all
+other entities that control, are controlled by, or are under common
+control with that entity. For the purposes of this definition,
+"control" means (i) the power, direct or indirect, to cause the
+direction or management of such entity, whether by contract or
+otherwise, or (ii) ownership of fifty percent (50%) or more of the
+outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity
+exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications,
+including but not limited to software source code, documentation
+source, and configuration files.
+
+"Object" form shall mean any form resulting from mechanical
+transformation or translation of a Source form, including but
+not limited to compiled object code, generated documentation,
+and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or
+Object form, made available under the License, as indicated by a
+copyright notice that is included in or attached to the work
+(an example is provided in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object
+form, that is based on (or derived from) the Work and for which the
+editorial revisions, annotations, elaborations, or other modifications
+represent, as a whole, an original work of authorship. For the purposes
+of this License, Derivative Works shall not include works that remain
+separable from, or merely link (or bind by name) to the interfaces of,
+the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including
+the original version of the Work and any modifications or additions
+to that Work or Derivative Works thereof, that is intentionally
+submitted to Licensor for inclusion in the Work by the copyright owner
+or by an individual or Legal Entity authorized to submit on behalf of
+the copyright owner. For the purposes of this definition, "submitted"
+means any form of electronic, verbal, or written communication sent
+to the Licensor or its representatives, including but not limited to
+communication on electronic mailing lists, source code control systems,
+and issue tracking systems that are managed by, or on behalf of, the
+Licensor for the purpose of discussing and improving the Work, but
+excluding communication that is conspicuously marked or otherwise
+designated in writing by the copyright owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity
+on behalf of whom a Contribution has been received by Licensor and
+subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+this License, each Contributor hereby grants to You a perpetual,
+worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+copyright license to reproduce, prepare Derivative Works of,
+publicly display, publicly perform, sublicense, and distribute the
+Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+this License, each Contributor hereby grants to You a perpetual,
+worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+(except as stated in this section) patent license to make, have made,
+use, offer to sell, sell, import, and otherwise transfer the Work,
+where such license applies only to those patent claims licensable
+by such Contributor that are necessarily infringed by their
+Contribution(s) alone or by combination of their Contribution(s)
+with the Work to which such Contribution(s) was submitted. If You
+institute patent litigation against any entity (including a
+cross-claim or counterclaim in a lawsuit) alleging that the Work
+or a Contribution incorporated within the Work constitutes direct
+or contributory patent infringement, then any patent licenses
+granted to You under this License for that Work shall terminate
+as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+Work or Derivative Works thereof in any medium, with or without
+modifications, and in Source or Object form, provided that You
+meet the following conditions:
+
+(a) You must give any other recipients of the Work or
+Derivative Works a copy of this License; and
+
+(b) You must cause any modified files to carry prominent notices
+stating that You changed the files; and
+
+(c) You must retain, in the Source form of any Derivative Works
+that You distribute, all copyright, patent, trademark, and
+attribution notices from the Source form of the Work,
+excluding those notices that do not pertain to any part of
+the Derivative Works; and
+
+(d) If the Work includes a "NOTICE" text file as part of its
+distribution, then any Derivative Works that You distribute must
+include a readable copy of the attribution notices contained
+within such NOTICE file, excluding those notices that do not
+pertain to any part of the Derivative Works, in at least one
+of the following places: within a NOTICE text file distributed
+as part of the Derivative Works; within the Source form or
+documentation, if provided along with the Derivative Works; or,
+within a display generated by the Derivative Works, if and
+wherever such third-party notices normally appear. The contents
+of the NOTICE file are for informational purposes only and
+do not modify the License. You may add Your own attribution
+notices within Derivative Works that You distribute, alongside
+or as an addendum to the NOTICE text from the Work, provided
+that such additional attribution notices cannot be construed
+as modifying the License.
+
+You may add Your own copyright statement to Your modifications and
+may provide additional or different license terms and conditions
+for use, reproduction, or distribution of Your modifications, or
+for any such Derivative Works as a whole, provided Your use,
+reproduction, and distribution of the Work otherwise complies with
+the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+any Contribution intentionally submitted for inclusion in the Work
+by You to the Licensor shall be under the terms and conditions of
+this License, without any additional terms or conditions.
+Notwithstanding the above, nothing herein shall supersede or modify
+the terms of any separate license agreement you may have executed
+with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+names, trademarks, service marks, or product names of the Licensor,
+except as required for reasonable and customary use in describing the
+origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+agreed to in writing, Licensor provides the Work (and each
+Contributor provides its Contributions) on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied, including, without limitation, any warranties or conditions
+of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+PARTICULAR PURPOSE. You are solely responsible for determining the
+appropriateness of using or redistributing the Work and assume any
+risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+whether in tort (including negligence), contract, or otherwise,
+unless required by applicable law (such as deliberate and grossly
+negligent acts) or agreed to in writing, shall any Contributor be
+liable to You for damages, including any direct, indirect, special,
+incidental, or consequential damages of any character arising as a
+result of this License or out of the use or inability to use the
+Work (including but not limited to damages for loss of goodwill,
+work stoppage, computer failure or malfunction, or any and all
+other commercial damages or losses), even if such Contributor
+has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+the Work or Derivative Works thereof, You may choose to offer,
+and charge a fee for, acceptance of support, warranty, indemnity,
+or other liability obligations and/or rights consistent with this
+License. However, in accepting such obligations, You may act only
+on Your own behalf and on Your sole responsibility, not on behalf
+of any other Contributor, and only if You agree to indemnify,
+defend, and hold each Contributor harmless for any liability
+incurred by, or claims asserted against, such Contributor by reason
+of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+To apply the Apache License to your work, attach the following
+boilerplate notice, with the fields enclosed by brackets "{}"
+replaced with your own identifying information. (Don't include
+the brackets!)  The text should be enclosed in the appropriate
+comment syntax for the file format. We also recommend that a
+file or class name and description of purpose be included on the
+same "printed page" as the copyright notice for easier
+identification within third-party archives.
+
+Copyright 2020 A11yance
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+========================================================================
+
+babel-eslint 10.0.1
+--
+Copyright (c) 2014-2016 Sebastian McKenzie <sebmck@gmail.com>
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+babel-helper-builder-react-jsx 6.26.0
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+babel-plugin-dynamic-import-node 2.3.3
+--
+MIT License
+
+Copyright (c) 2016 Airbnb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+babel-plugin-syntax-jsx 6.18.0
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+babel-plugin-transform-react-jsx 6.24.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+babel-runtime 6.26.0
+--
+Copyright Sebastian McKenzie <sebmck@gmail.com>; licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+babel-types 6.26.0
+--
+Copyright Sebastian McKenzie <sebmck@gmail.com>; licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+balanced-match 1.0.2
+--
+(MIT)
+
+Copyright (c) 2013 Julian Gruber &lt;julian@juliangruber.com&gt;
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+base64-js 1.5.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2014 Jameson Little
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+binaryextensions 4.18.0
+--
+<!-- LICENSEFILE/ -->
+
+<h1>License</h1>
+
+Unless stated otherwise all works are:
+
+<ul><li>Copyright &copy; 2013+ <a href="http://bevry.me">Bevry Pty Ltd</a></li></ul>
+
+and licensed under:
+
+<ul><li><a href="http://spdx.org/licenses/MIT.html">MIT License</a></li></ul>
+
+<h2>MIT License</h2>
+
+<pre>
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+</pre>
+
+<!-- /LICENSEFILE -->
+
+========================================================================
+
+brace-expansion 1.1.11
+--
+MIT License
+
+Copyright (c) 2013 Julian Gruber <julian@juliangruber.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+browserfs 2.0.0
+--
+BrowserFS's license follows:
+
+====
+
+Copyright (c) 2013, 2014, 2015, 2016, 2017 John Vilk and other BrowserFS contributors.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+====
+
+This license applies to all parts of BrowserFS, except for the following items:
+
+- The unit tests from Node, located in `test/tests/**/node-*.js`, and their
+  test fixtures, located in `test/fixtures/files/node`. Their license follows:
+  """
+    Copyright Joyent, Inc. and other Node contributors. All rights reserved.
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to
+    deal in the Software without restriction, including without limitation the
+    rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+    sell copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+    IN THE SOFTWARE.
+  """
+
+- The Emscripten file system in src/generic/emscripten_fs.ts is a modified
+  version of Emscripten's NODEFS. Emscripten's license follows:
+  """
+    Emscripten is available under 2 licenses, the MIT license and the
+    University of Illinois/NCSA Open Source License.
+
+    Both are permissive open source licenses, with little if any
+    practical difference between them.
+
+    The reason for offering both is that (1) the MIT license is
+    well-known, while (2) the University of Illinois/NCSA Open Source
+    License allows Emscripten's code to be integrated upstream into
+    LLVM, which uses that license, should the opportunity arise.
+
+    The full text of both licenses follows.
+
+    ==============================================================================
+
+    Copyright (c) 2010-2011 Emscripten authors, see AUTHORS file.
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+
+    ==============================================================================
+
+    Copyright (c) 2010-2011 Emscripten authors, see AUTHORS file.
+    All rights reserved.
+
+    Permission is hereby granted, free of charge, to any person obtaining a
+    copy of this software and associated documentation files (the
+    "Software"), to deal with the Software without restriction, including
+    without limitation the rights to use, copy, modify, merge, publish,
+    distribute, sublicense, and/or sell copies of the Software, and to
+    permit persons to whom the Software is furnished to do so, subject to
+    the following conditions:
+
+        Redistributions of source code must retain the above copyright
+        notice, this list of conditions and the following disclaimers.
+
+        Redistributions in binary form must reproduce the above
+        copyright notice, this list of conditions and the following disclaimers
+        in the documentation and/or other materials provided with the
+        distribution.
+
+        Neither the names of Mozilla,
+        nor the names of its contributors may be used to endorse
+        or promote products derived from this Software without specific prior
+        written permission.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+    OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+    IN NO EVENT SHALL THE CONTRIBUTORS OR COPYRIGHT HOLDERS BE LIABLE FOR
+    ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+    TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+    SOFTWARE OR THE USE OR OTHER DEALINGS WITH THE SOFTWARE.
+  """
+
+========================================================================
+
+browserslist 4.22.2
+--
+The MIT License (MIT)
+
+Copyright 2014 Andrey Sitnik <andrey@sitnik.ru> and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+buffer 6.0.3
+--
+The MIT License (MIT)
+
+Copyright (c) Feross Aboukhadijeh, and other contributors.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+call-bind 1.0.2
+--
+MIT License
+
+Copyright (c) 2020 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+caniuse-lite 1.0.30001570
+--
+Attribution 4.0 International
+
+=======================================================================
+
+Creative Commons Corporation ("Creative Commons") is not a law firm and
+does not provide legal services or legal advice. Distribution of
+Creative Commons public licenses does not create a lawyer-client or
+other relationship. Creative Commons makes its licenses and related
+information available on an "as-is" basis. Creative Commons gives no
+warranties regarding its licenses, any material licensed under their
+terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the
+fullest extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and
+conditions that creators and other rights holders may use to share
+original works of authorship and other material subject to copyright
+and certain other rights specified in the public license below. The
+following considerations are for informational purposes only, are not
+exhaustive, and do not form part of our licenses.
+
+     Considerations for licensors: Our public licenses are
+     intended for use by those authorized to give the public
+     permission to use material in ways otherwise restricted by
+     copyright and certain other rights. Our licenses are
+     irrevocable. Licensors should read and understand the terms
+     and conditions of the license they choose before applying it.
+     Licensors should also secure all rights necessary before
+     applying our licenses so that the public can reuse the
+     material as expected. Licensors should clearly mark any
+     material not subject to the license. This includes other CC-
+     licensed material, or material used under an exception or
+     limitation to copyright. More considerations for licensors:
+	wiki.creativecommons.org/Considerations_for_licensors
+
+     Considerations for the public: By using one of our public
+     licenses, a licensor grants the public permission to use the
+     licensed material under specified terms and conditions. If
+     the licensor's permission is not necessary for any reason--for
+     example, because of any applicable exception or limitation to
+     copyright--then that use is not regulated by the license. Our
+     licenses grant only permissions under copyright and certain
+     other rights that a licensor has authority to grant. Use of
+     the licensed material may still be restricted for other
+     reasons, including because others have copyright or other
+     rights in the material. A licensor may make special requests,
+     such as asking that all changes be marked or described.
+     Although not required by our licenses, you are encouraged to
+     respect those requests where reasonable. More_considerations
+     for the public: 
+	wiki.creativecommons.org/Considerations_for_licensees
+
+=======================================================================
+
+Creative Commons Attribution 4.0 International Public License
+
+By exercising the Licensed Rights (defined below), You accept and agree
+to be bound by the terms and conditions of this Creative Commons
+Attribution 4.0 International Public License ("Public License"). To the
+extent this Public License may be interpreted as a contract, You are
+granted the Licensed Rights in consideration of Your acceptance of
+these terms and conditions, and the Licensor grants You such rights in
+consideration of benefits the Licensor receives from making the
+Licensed Material available under these terms and conditions.
+
+
+Section 1 -- Definitions.
+
+  a. Adapted Material means material subject to Copyright and Similar
+     Rights that is derived from or based upon the Licensed Material
+     and in which the Licensed Material is translated, altered,
+     arranged, transformed, or otherwise modified in a manner requiring
+     permission under the Copyright and Similar Rights held by the
+     Licensor. For purposes of this Public License, where the Licensed
+     Material is a musical work, performance, or sound recording,
+     Adapted Material is always produced where the Licensed Material is
+     synched in timed relation with a moving image.
+
+  b. Adapter's License means the license You apply to Your Copyright
+     and Similar Rights in Your contributions to Adapted Material in
+     accordance with the terms and conditions of this Public License.
+
+  c. Copyright and Similar Rights means copyright and/or similar rights
+     closely related to copyright including, without limitation,
+     performance, broadcast, sound recording, and Sui Generis Database
+     Rights, without regard to how the rights are labeled or
+     categorized. For purposes of this Public License, the rights
+     specified in Section 2(b)(1)-(2) are not Copyright and Similar
+     Rights.
+
+  d. Effective Technological Measures means those measures that, in the
+     absence of proper authority, may not be circumvented under laws
+     fulfilling obligations under Article 11 of the WIPO Copyright
+     Treaty adopted on December 20, 1996, and/or similar international
+     agreements.
+
+  e. Exceptions and Limitations means fair use, fair dealing, and/or
+     any other exception or limitation to Copyright and Similar Rights
+     that applies to Your use of the Licensed Material.
+
+  f. Licensed Material means the artistic or literary work, database,
+     or other material to which the Licensor applied this Public
+     License.
+
+  g. Licensed Rights means the rights granted to You subject to the
+     terms and conditions of this Public License, which are limited to
+     all Copyright and Similar Rights that apply to Your use of the
+     Licensed Material and that the Licensor has authority to license.
+
+  h. Licensor means the individual(s) or entity(ies) granting rights
+     under this Public License.
+
+  i. Share means to provide material to the public by any means or
+     process that requires permission under the Licensed Rights, such
+     as reproduction, public display, public performance, distribution,
+     dissemination, communication, or importation, and to make material
+     available to the public including in ways that members of the
+     public may access the material from a place and at a time
+     individually chosen by them.
+
+  j. Sui Generis Database Rights means rights other than copyright
+     resulting from Directive 96/9/EC of the European Parliament and of
+     the Council of 11 March 1996 on the legal protection of databases,
+     as amended and/or succeeded, as well as other essentially
+     equivalent rights anywhere in the world.
+
+  k. You means the individual or entity exercising the Licensed Rights
+     under this Public License. Your has a corresponding meaning.
+
+
+Section 2 -- Scope.
+
+  a. License grant.
+
+       1. Subject to the terms and conditions of this Public License,
+          the Licensor hereby grants You a worldwide, royalty-free,
+          non-sublicensable, non-exclusive, irrevocable license to
+          exercise the Licensed Rights in the Licensed Material to:
+
+            a. reproduce and Share the Licensed Material, in whole or
+               in part; and
+
+            b. produce, reproduce, and Share Adapted Material.
+
+       2. Exceptions and Limitations. For the avoidance of doubt, where
+          Exceptions and Limitations apply to Your use, this Public
+          License does not apply, and You do not need to comply with
+          its terms and conditions.
+
+       3. Term. The term of this Public License is specified in Section
+          6(a).
+
+       4. Media and formats; technical modifications allowed. The
+          Licensor authorizes You to exercise the Licensed Rights in
+          all media and formats whether now known or hereafter created,
+          and to make technical modifications necessary to do so. The
+          Licensor waives and/or agrees not to assert any right or
+          authority to forbid You from making technical modifications
+          necessary to exercise the Licensed Rights, including
+          technical modifications necessary to circumvent Effective
+          Technological Measures. For purposes of this Public License,
+          simply making modifications authorized by this Section 2(a)
+          (4) never produces Adapted Material.
+
+       5. Downstream recipients.
+
+            a. Offer from the Licensor -- Licensed Material. Every
+               recipient of the Licensed Material automatically
+               receives an offer from the Licensor to exercise the
+               Licensed Rights under the terms and conditions of this
+               Public License.
+
+            b. No downstream restrictions. You may not offer or impose
+               any additional or different terms or conditions on, or
+               apply any Effective Technological Measures to, the
+               Licensed Material if doing so restricts exercise of the
+               Licensed Rights by any recipient of the Licensed
+               Material.
+
+       6. No endorsement. Nothing in this Public License constitutes or
+          may be construed as permission to assert or imply that You
+          are, or that Your use of the Licensed Material is, connected
+          with, or sponsored, endorsed, or granted official status by,
+          the Licensor or others designated to receive attribution as
+          provided in Section 3(a)(1)(A)(i).
+
+  b. Other rights.
+
+       1. Moral rights, such as the right of integrity, are not
+          licensed under this Public License, nor are publicity,
+          privacy, and/or other similar personality rights; however, to
+          the extent possible, the Licensor waives and/or agrees not to
+          assert any such rights held by the Licensor to the limited
+          extent necessary to allow You to exercise the Licensed
+          Rights, but not otherwise.
+
+       2. Patent and trademark rights are not licensed under this
+          Public License.
+
+       3. To the extent possible, the Licensor waives any right to
+          collect royalties from You for the exercise of the Licensed
+          Rights, whether directly or through a collecting society
+          under any voluntary or waivable statutory or compulsory
+          licensing scheme. In all other cases the Licensor expressly
+          reserves any right to collect such royalties.
+
+
+Section 3 -- License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the
+following conditions.
+
+  a. Attribution.
+
+       1. If You Share the Licensed Material (including in modified
+          form), You must:
+
+            a. retain the following if it is supplied by the Licensor
+               with the Licensed Material:
+
+                 i. identification of the creator(s) of the Licensed
+                    Material and any others designated to receive
+                    attribution, in any reasonable manner requested by
+                    the Licensor (including by pseudonym if
+                    designated);
+
+                ii. a copyright notice;
+
+               iii. a notice that refers to this Public License;
+
+                iv. a notice that refers to the disclaimer of
+                    warranties;
+
+                 v. a URI or hyperlink to the Licensed Material to the
+                    extent reasonably practicable;
+
+            b. indicate if You modified the Licensed Material and
+               retain an indication of any previous modifications; and
+
+            c. indicate the Licensed Material is licensed under this
+               Public License, and include the text of, or the URI or
+               hyperlink to, this Public License.
+
+       2. You may satisfy the conditions in Section 3(a)(1) in any
+          reasonable manner based on the medium, means, and context in
+          which You Share the Licensed Material. For example, it may be
+          reasonable to satisfy the conditions by providing a URI or
+          hyperlink to a resource that includes the required
+          information.
+
+       3. If requested by the Licensor, You must remove any of the
+          information required by Section 3(a)(1)(A) to the extent
+          reasonably practicable.
+
+       4. If You Share Adapted Material You produce, the Adapter's
+          License You apply must not prevent recipients of the Adapted
+          Material from complying with this Public License.
+
+
+Section 4 -- Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that
+apply to Your use of the Licensed Material:
+
+  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
+     to extract, reuse, reproduce, and Share all or a substantial
+     portion of the contents of the database;
+
+  b. if You include all or a substantial portion of the database
+     contents in a database in which You have Sui Generis Database
+     Rights, then the database in which You have Sui Generis Database
+     Rights (but not its individual contents) is Adapted Material; and
+
+  c. You must comply with the conditions in Section 3(a) if You Share
+     all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not
+replace Your obligations under this Public License where the Licensed
+Rights include other Copyright and Similar Rights.
+
+
+Section 5 -- Disclaimer of Warranties and Limitation of Liability.
+
+  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
+     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
+     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
+     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
+     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
+     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
+     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
+     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
+     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
+     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
+
+  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
+     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
+     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
+     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
+     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
+     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
+     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
+     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
+     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
+
+  c. The disclaimer of warranties and limitation of liability provided
+     above shall be interpreted in a manner that, to the extent
+     possible, most closely approximates an absolute disclaimer and
+     waiver of all liability.
+
+
+Section 6 -- Term and Termination.
+
+  a. This Public License applies for the term of the Copyright and
+     Similar Rights licensed here. However, if You fail to comply with
+     this Public License, then Your rights under this Public License
+     terminate automatically.
+
+  b. Where Your right to use the Licensed Material has terminated under
+     Section 6(a), it reinstates:
+
+       1. automatically as of the date the violation is cured, provided
+          it is cured within 30 days of Your discovery of the
+          violation; or
+
+       2. upon express reinstatement by the Licensor.
+
+     For the avoidance of doubt, this Section 6(b) does not affect any
+     right the Licensor may have to seek remedies for Your violations
+     of this Public License.
+
+  c. For the avoidance of doubt, the Licensor may also offer the
+     Licensed Material under separate terms or conditions or stop
+     distributing the Licensed Material at any time; however, doing so
+     will not terminate this Public License.
+
+  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
+     License.
+
+
+Section 7 -- Other Terms and Conditions.
+
+  a. The Licensor shall not be bound by any additional or different
+     terms or conditions communicated by You unless expressly agreed.
+
+  b. Any arrangements, understandings, or agreements regarding the
+     Licensed Material not stated herein are separate from and
+     independent of the terms and conditions of this Public License.
+
+
+Section 8 -- Interpretation.
+
+  a. For the avoidance of doubt, this Public License does not, and
+     shall not be interpreted to, reduce, limit, restrict, or impose
+     conditions on any use of the Licensed Material that could lawfully
+     be made without permission under this Public License.
+
+  b. To the extent possible, if any provision of this Public License is
+     deemed unenforceable, it shall be automatically reformed to the
+     minimum extent necessary to make it enforceable. If the provision
+     cannot be reformed, it shall be severed from this Public License
+     without affecting the enforceability of the remaining terms and
+     conditions.
+
+  c. No term or condition of this Public License will be waived and no
+     failure to comply consented to unless expressly agreed to by the
+     Licensor.
+
+  d. Nothing in this Public License constitutes or may be interpreted
+     as a limitation upon, or waiver of, any privileges and immunities
+     that apply to the Licensor or You, including from the legal
+     processes of any jurisdiction or authority.
+
+
+=======================================================================
+
+Creative Commons is not a party to its public
+licenses. Notwithstanding, Creative Commons may elect to apply one of
+its public licenses to material it publishes and in those instances
+will be considered the “Licensor.” The text of the Creative Commons
+public licenses is dedicated to the public domain under the CC0 Public
+Domain Dedication. Except for the limited purpose of indicating that
+material is shared under a Creative Commons public license or as
+otherwise permitted by the Creative Commons policies published at
+creativecommons.org/policies, Creative Commons does not authorize the
+use of the trademark "Creative Commons" or any other trademark or logo
+of Creative Commons without its prior written consent including,
+without limitation, in connection with any unauthorized modifications
+to any of its public licenses or any other arrangements,
+understandings, or agreements concerning use of licensed material. For
+the avoidance of doubt, this paragraph does not form part of the
+public licenses.
+
+Creative Commons may be contacted at creativecommons.org.
+
+========================================================================
+
+chalk 2.4.2
+--
+MIT License
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+chroma-js 2.1.0
+--
+###*
+ * @license
+ *
+ * chroma.js - JavaScript library for color conversions
+ * 
+ * Copyright (c) 2011-2017, Gregor Aisch
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ * 
+ * 1. Redistributions of source code must retain the above copyright notice, this
+ *    list of conditions and the following disclaimer.
+ * 
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution.
+ * 
+ * 3. The name Gregor Aisch may not be used to endorse or promote products
+ *    derived from this software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL GREGOR AISCH OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,
+ * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+ * BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+ * EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ * 
+###
+
+========================================================================
+
+classnames 2.2.6
+--
+The MIT License (MIT)
+
+Copyright (c) 2017 Jed Watson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+clipboard-polyfill 2.4.6
+--
+# License
+
+The MIT License (MIT)
+
+Copyright (c) 2014 Lucas Garron
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+clsx 1.2.1
+--
+MIT License
+
+Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+color-convert 1.9.3
+--
+Copyright (c) 2011-2016 Heather Arthur <fayearthur@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+color-name 1.1.3
+--
+The MIT License (MIT)
+Copyright (c) 2015 Dmitry Ivanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+component-classes 1.2.6
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+compute-scroll-into-view 1.0.17
+--
+MIT License
+
+Copyright (c) 2018 Cody Olsen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+concat-map 0.0.1
+--
+This software is released under the MIT license:
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+content-security-policy-builder 2.1.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2015-2022 Evan Hahn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+convert-source-map 2.0.0
+--
+Copyright 2013 Thorsten Lorenz. 
+All rights reserved.
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+cookie 0.5.0
+--
+(The MIT License)
+
+Copyright (c) 2012-2014 Roman Shtylman <shtylman@gmail.com>
+Copyright (c) 2015 Douglas Christopher Wilson <doug@somethingdoug.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+core-js 2.6.12
+--
+Copyright (c) 2014-2020 Denis Pushkarev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+core-js-pure 3.18.1
+--
+Copyright (c) 2014-2021 Denis Pushkarev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+create-react-class 15.6.3
+--
+MIT License
+
+Copyright (c) 2013-present, Facebook, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+css-animation 1.6.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2014-present yiminghe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+css-loader 0.28.4
+--
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+css-tree 2.3.1
+--
+Copyright (C) 2016-2022 by Roman Dvornov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+damerau-levenshtein 1.0.7
+--
+BSD 2-Clause License
+
+Copyright (c) 2018, Tadeusz Łazurski
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+debug 4.3.4
+--
+(The MIT License)
+
+Copyright (c) 2014-2017 TJ Holowaychuk <tj@vision-media.ca>
+Copyright (c) 2018-2021 Josh Junon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+and associated documentation files (the 'Software'), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+deepmerge 4.2.2
+--
+The MIT License (MIT)
+
+Copyright (c) 2012 James Halliday, Josh Duff, and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+define-properties 1.2.0
+--
+The MIT License (MIT)
+
+Copyright (C) 2015 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+direction 1.0.4
+--
+(The MIT License)
+
+Copyright (c) 2014 Titus Wormer <tituswormer@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+dnd-core 16.0.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Dan Abramov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+doctrine 3.0.0
+--
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+  * Redistributions of source code must retain the above copyright
+    notice, this list of conditions and the following disclaimer.
+  * Redistributions in binary form must reproduce the above copyright
+    notice, this list of conditions and the following disclaimer in the
+    documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+dom-align 1.12.4
+--
+The MIT License (MIT)
+
+Copyright (c) 2014-present yiminghe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+dom-serializer 2.0.0
+--
+License
+
+(The MIT License)
+
+Copyright (c) 2014 The cheeriojs contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+domelementtype 2.3.0
+--
+Copyright (c) Felix Böhm
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+THIS IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+domhandler 5.0.3
+--
+Copyright (c) Felix Böhm
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+THIS IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+domutils 3.1.0
+--
+Copyright (c) Felix Böhm
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+THIS IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+electron-to-chromium 1.4.613
+--
+Copyright 2018 Kilian Valkhof
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+========================================================================
+
+emoji-regex 9.2.2
+--
+Copyright Mathias Bynens <https://mathiasbynens.be/>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+entities 4.5.0
+--
+Copyright (c) Felix Böhm
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+THIS IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+es-abstract 1.21.3
+--
+The MIT License (MIT)
+
+Copyright (C) 2015 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+es-to-primitive 1.2.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+escape-string-regexp 4.0.0
+--
+MIT License
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+eslint 7.32.0
+--
+Copyright JS Foundation and other contributors, https://js.foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+eslint-module-utils 2.8.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Ben Mosher
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+eslint-plugin-import 2.25.3
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Ben Mosher
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+eslint-plugin-jsx-a11y 6.5.1
+--
+The MIT License (MIT)
+Copyright (c) 2016 Ethan Cohen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+eslint-plugin-react 7.23.2
+--
+The MIT License (MIT)
+
+Copyright (c) 2014 Yannick Croissant
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+eslint-plugin-react-hooks 4.2.0
+--
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+eslint-scope 5.1.1
+--
+Copyright JS Foundation and other contributors, https://js.foundation
+Copyright (C) 2012-2013 Yusuke Suzuki (twitter: @Constellation) and other contributors.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+  * Redistributions of source code must retain the above copyright
+    notice, this list of conditions and the following disclaimer.
+  * Redistributions in binary form must reproduce the above copyright
+    notice, this list of conditions and the following disclaimer in the
+    documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+eslint-utils 1.4.3
+--
+MIT License
+
+Copyright (c) 2018 Toru Nagashima
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+eslint-visitor-keys 1.3.0
+--
+Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "{}"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright contributors
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+========================================================================
+
+espree 6.2.1
+--
+Espree
+Copyright JS Foundation and other contributors, https://js.foundation
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+  * Redistributions of source code must retain the above copyright
+    notice, this list of conditions and the following disclaimer.
+  * Redistributions in binary form must reproduce the above copyright
+    notice, this list of conditions and the following disclaimer in the
+    documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+esquery 1.4.0
+--
+Copyright (c) 2013, Joel Feenstra
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * Neither the name of the ESQuery nor the names of its contributors may
+      be used to endorse or promote products derived from this software without
+      specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL JOEL FEENSTRA BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+esrecurse 4.3.0
+--
+Licensed under BSD-2-Clause (https://spdx.org/licenses/BSD-2-Clause.html)
+
+========================================================================
+
+estraverse 5.3.0
+--
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+  * Redistributions of source code must retain the above copyright
+    notice, this list of conditions and the following disclaimer.
+  * Redistributions in binary form must reproduce the above copyright
+    notice, this list of conditions and the following disclaimer in the
+    documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+esutils 2.0.3
+--
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+  * Redistributions of source code must retain the above copyright
+    notice, this list of conditions and the following disclaimer.
+  * Redistributions in binary form must reproduce the above copyright
+    notice, this list of conditions and the following disclaimer in the
+    documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+events 1.1.1
+--
+MIT
+
+Copyright Joyent, Inc. and other Node contributors.
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included
+in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+fast-deep-equal 3.1.3
+--
+MIT License
+
+Copyright (c) 2017 Evgeny Poberezkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+fast-equals 3.0.3
+--
+MIT License
+
+Copyright (c) 2017 Tony Quetano
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+fast-json-stable-stringify 2.1.0
+--
+This software is released under the MIT license:
+
+Copyright (c) 2017 Evgeny Poberezkin
+Copyright (c) 2013 James Halliday
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+fast-memoize 2.5.2
+--
+The MIT License (MIT)
+
+Copyright (c) 2016 Caio Gondim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+fbjs 0.8.17
+--
+MIT License
+
+Copyright (c) 2013-present, Facebook, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+fluids 0.1.10
+--
+Copyright Alec Larson; licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+framer-motion 11.2.13
+--
+The MIT License (MIT)
+
+Copyright (c) 2018 Framer B.V.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+friendly-words 1.1.10
+--
+MIT License
+
+Copyright (c) 2018 Glitch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+function-bind 1.1.1
+--
+Copyright (c) 2013 Raynos.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+functional-red-black-tree 1.0.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2013 Mikola Lysenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+functions-have-names 1.2.3
+--
+MIT License
+
+Copyright (c) 2019 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+gensync 1.0.0-beta.2
+--
+Copyright 2018 Logan Smyth <loganfsmyth@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+get-intrinsic 1.2.1
+--
+MIT License
+
+Copyright (c) 2020 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+get-nonce 1.0.1
+--
+MIT License
+
+Copyright (c) 2020 Anton Korzunov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+glob-to-regexp 0.4.1
+--
+Copyright Nick Fitzgerald <fitzgen@gmail.com>; licensed under BSD-2-Clause (https://spdx.org/licenses/BSD-2-Clause.html)
+
+========================================================================
+
+globals 11.12.0
+--
+MIT License
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+gopd 1.0.1
+--
+MIT License
+
+Copyright (c) 2022 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+has 1.0.3
+--
+Copyright (c) 2013 Thiago de Arruda
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+has-property-descriptors 1.0.0
+--
+MIT License
+
+Copyright (c) 2022 Inspect JS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+has-proto 1.0.1
+--
+MIT License
+
+Copyright (c) 2022 Inspect JS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+has-symbols 1.0.3
+--
+MIT License
+
+Copyright (c) 2016 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+has-tostringtag 1.0.0
+--
+MIT License
+
+Copyright (c) 2021 Inspect JS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+he 1.2.0
+--
+Copyright Mathias Bynens <https://mathiasbynens.be/>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+hoist-non-react-statics 3.3.2
+--
+Software License Agreement (BSD License)
+========================================
+
+Copyright (c) 2015, Yahoo! Inc. All rights reserved.
+----------------------------------------------------
+
+Redistribution and use of this software in source and binary forms, with or
+without modification, are permitted provided that the following conditions are
+met:
+
+  * Redistributions of source code must retain the above copyright notice, this
+    list of conditions and the following disclaimer.
+  * Redistributions in binary form must reproduce the above copyright notice,
+    this list of conditions and the following disclaimer in the documentation
+    and/or other materials provided with the distribution.
+  * Neither the name of Yahoo! Inc. nor the names of YUI's contributors may be
+    used to endorse or promote products derived from this software without
+    specific prior written permission of Yahoo! Inc.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+hosted-git-info 4.0.2
+--
+Copyright (c) 2015, Rebecca Turner
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+
+========================================================================
+
+html-dom-parser 0.3.0
+--
+MIT License
+
+Copyright (c) 2016 Menglin "Mark" Xu <mark@remarkablemark.org>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+html-entities 1.2.1
+--
+Copyright (c) 2013 Dulin Marat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+html-react-parser 0.13.0
+--
+The MIT License
+
+Copyright (c) 2016 Menglin "Mark" Xu <mark@remarkablemark.org>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+htmlparser2 8.0.2
+--
+Copyright 2010, 2011, Chris Winberry <chris@winberry.net>. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+ 
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+ 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+
+========================================================================
+
+ieee754 1.2.1
+--
+Copyright 2008 Fair Oaks Labs, Inc.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+ignore 4.0.6
+--
+Copyright (c) 2013 Kael Zhang <i@kael.me>, contributors
+http://kael.me/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+immediate 3.0.6
+--
+Copyright (c) 2012 Barnesandnoble.com, llc, Donavon West, Domenic Denicola, Brian Cavalier
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+immer 9.0.21
+--
+MIT License
+
+Copyright (c) 2017 Michel Weststrate
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+immutability-helper 3.1.1
+--
+MIT License
+
+Copyright (c) 2017 Moshe Kolodny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+inherits 2.0.4
+--
+The ISC License
+
+Copyright (c) Isaac Z. Schlueter
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+
+========================================================================
+
+inline-style-parser 0.1.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+internal-slot 1.0.5
+--
+MIT License
+
+Copyright (c) 2019 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+is-callable 1.2.7
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+is-core-module 2.12.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2014 Dave Justice
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+is-date-object 1.0.5
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+is-hotkey 0.1.8
+--
+The MIT License
+
+Copyright &copy; 2017, [Ian Storm Taylor](https://ianstormtaylor.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+is-plain-object 5.0.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2014-2017, Jon Schlinkert.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+is-regex 1.1.4
+--
+The MIT License (MIT)
+
+Copyright (c) 2014 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+is-string 1.0.7
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+is-symbol 1.0.4
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+isobject 3.0.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2014-2017, Jon Schlinkert.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+istextorbinary 5.11.0
+--
+<!-- LICENSEFILE/ -->
+
+<h1>License</h1>
+
+Unless stated otherwise all works are:
+
+<ul><li>Copyright &copy; 2012+ <a href="http://bevry.me">Bevry Pty Ltd</a></li>
+<li>Copyright &copy; 2011 <a href="https://balupton.com">Benjamin Lupton</a></li></ul>
+
+and licensed under:
+
+<ul><li><a href="http://spdx.org/licenses/MIT.html">MIT License</a></li></ul>
+
+<h2>MIT License</h2>
+
+<pre>
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice (including the next paragraph) shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+</pre>
+
+<!-- /LICENSEFILE -->
+
+========================================================================
+
+jotai 2.4.3
+--
+MIT License
+
+Copyright (c) 2020-2023 Poimandres
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+jotai-devtools 0.6.2
+--
+MIT License
+
+Copyright (c) 2023 Jotai Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+js-base64 3.7.5
+--
+Copyright (c) 2014, Dan Kogai
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of {{{project}}} nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+js-tokens 4.0.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2014, 2015, 2016, 2017, 2018 Simon Lydell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+jsesc 2.5.2
+--
+Copyright Mathias Bynens <https://mathiasbynens.be/>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+json-schema-traverse 0.4.1
+--
+MIT License
+
+Copyright (c) 2017 Evgeny Poberezkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+json5 0.5.1
+--
+MIT License
+
+Copyright (c) 2012-2016 Aseem Kishore, and [others](https://github.com/aseemk/json5/contributors).
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+jsx-ast-utils 3.2.1
+--
+The MIT License (MIT)
+Copyright (c) 2016 Ethan Cohen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+jszip 3.5.0
+--
+JSZip is dual licensed. You may use it under the MIT license *or* the GPLv3
+license.
+
+The MIT License
+===============
+
+Copyright (c) 2009-2016 Stuart Knightley, David Duponchel, Franz Buchinger, António Afonso
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+
+GPL version 3
+=============
+
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+========================================================================
+
+language-tags 1.0.5
+--
+Copyright Matthew Caruana Galizia <m@m.cg>; licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+levn 0.3.0
+--
+Copyright (c) George Zahariev
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+lib0 0.2.87
+--
+The MIT License (MIT)
+
+Copyright (c) 2019 Kevin Jahns <kevin.jahns@protonmail.com>.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+lie 3.3.0
+--
+#Copyright (c) 2014-2018 Calvin Metcalf, Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+**THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.**
+
+========================================================================
+
+localforage 1.7.3
+--
+Copyright 2014 Mozilla
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+========================================================================
+
+lodash 4.17.21
+--
+Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+
+Based on Underscore.js, copyright Jeremy Ashkenas,
+DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
+
+This software consists of voluntary contributions made by many
+individuals. For exact contribution history, see the revision history
+available at https://github.com/lodash/lodash
+
+The following license applies to all parts of this software except as
+documented below:
+
+====
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+====
+
+Copyright and related rights for sample code are waived via CC0. Sample
+code is defined as all source code displayed within the prose of the
+documentation.
+
+CC0: http://creativecommons.org/publicdomain/zero/1.0/
+
+====
+
+Files located in the node_modules and vendor directories are externally
+maintained libraries used by this software which have their own
+licenses; we recommend you read them, as their terms may differ from the
+terms above.
+
+========================================================================
+
+lodash.clamp 4.0.3
+--
+Copyright jQuery Foundation and other contributors <https://jquery.org/>
+
+Based on Underscore.js, copyright Jeremy Ashkenas,
+DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
+
+This software consists of voluntary contributions made by many
+individuals. For exact contribution history, see the revision history
+available at https://github.com/lodash/lodash
+
+The following license applies to all parts of this software except as
+documented below:
+
+====
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+====
+
+Copyright and related rights for sample code are waived via CC0. Sample
+code is defined as all source code displayed within the prose of the
+documentation.
+
+CC0: http://creativecommons.org/publicdomain/zero/1.0/
+
+====
+
+Files located in the node_modules and vendor directories are externally
+maintained libraries used by this software which have their own
+licenses; we recommend you read them, as their terms may differ from the
+terms above.
+
+========================================================================
+
+lodash.debounce 4.0.8
+--
+Copyright jQuery Foundation and other contributors <https://jquery.org/>
+
+Based on Underscore.js, copyright Jeremy Ashkenas,
+DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
+
+This software consists of voluntary contributions made by many
+individuals. For exact contribution history, see the revision history
+available at https://github.com/lodash/lodash
+
+The following license applies to all parts of this software except as
+documented below:
+
+====
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+====
+
+Copyright and related rights for sample code are waived via CC0. Sample
+code is defined as all source code displayed within the prose of the
+documentation.
+
+CC0: http://creativecommons.org/publicdomain/zero/1.0/
+
+====
+
+Files located in the node_modules and vendor directories are externally
+maintained libraries used by this software which have their own
+licenses; we recommend you read them, as their terms may differ from the
+terms above.
+
+========================================================================
+
+lodash.findlastindex 4.6.0
+--
+Copyright jQuery Foundation and other contributors <https://jquery.org/>
+
+Based on Underscore.js, copyright Jeremy Ashkenas,
+DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
+
+This software consists of voluntary contributions made by many
+individuals. For exact contribution history, see the revision history
+available at https://github.com/lodash/lodash
+
+The following license applies to all parts of this software except as
+documented below:
+
+====
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+====
+
+Copyright and related rights for sample code are waived via CC0. Sample
+code is defined as all source code displayed within the prose of the
+documentation.
+
+CC0: http://creativecommons.org/publicdomain/zero/1.0/
+
+====
+
+Files located in the node_modules and vendor directories are externally
+maintained libraries used by this software which have their own
+licenses; we recommend you read them, as their terms may differ from the
+terms above.
+
+========================================================================
+
+lodash.throttle 4.1.1
+--
+Copyright jQuery Foundation and other contributors <https://jquery.org/>
+
+Based on Underscore.js, copyright Jeremy Ashkenas,
+DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>
+
+This software consists of voluntary contributions made by many
+individuals. For exact contribution history, see the revision history
+available at https://github.com/lodash/lodash
+
+The following license applies to all parts of this software except as
+documented below:
+
+====
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+====
+
+Copyright and related rights for sample code are waived via CC0. Sample
+code is defined as all source code displayed within the prose of the
+documentation.
+
+CC0: http://creativecommons.org/publicdomain/zero/1.0/
+
+====
+
+Files located in the node_modules and vendor directories are externally
+maintained libraries used by this software which have their own
+licenses; we recommend you read them, as their terms may differ from the
+terms above.
+
+========================================================================
+
+lru-cache 7.10.1
+--
+The ISC License
+
+Copyright (c) 2010-2022 Isaac Z. Schlueter and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+========================================================================
+
+memoize-one 5.2.1
+--
+MIT License
+
+Copyright (c) 2019 Alexander Reardon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+micro-memoize 4.0.14
+--
+MIT License
+
+Copyright (c) 2018 Tony Quetano
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+mime-db 1.40.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2014 Jonathan Ong me@jongleberry.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+mime-types 2.1.24
+--
+(The MIT License)
+
+Copyright (c) 2014 Jonathan Ong <me@jongleberry.com>
+Copyright (c) 2015 Douglas Christopher Wilson <doug@somethingdoug.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+minimatch 3.0.4
+--
+The ISC License
+
+Copyright (c) Isaac Z. Schlueter and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+========================================================================
+
+moize 6.1.4
+--
+MIT License
+
+Copyright (c) 2016 Tony Quetano
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+ms 2.1.2
+--
+The MIT License (MIT)
+
+Copyright (c) 2016 Zeit, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+murmurhash3js 3.0.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2012-2015 Karan Lyons, Sascha Droste
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+nanoid 3.3.6
+--
+The MIT License (MIT)
+
+Copyright 2017 Andrey Sitnik <andrey@sitnik.ru>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+natural-compare 1.4.0
+--
+Copyright Lauri Rooden (https://github.com/litejs/natural-compare-lite); licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+node-diff3 3.1.2
+--
+### The MIT License (MIT)
+
+diff function extracted from Project Synchrotron.
+
+For more detail please visit:
+- https://leastfixedpoint.com/tonyg/kcbbs/projects/synchrotron.html
+- https://github.com/tonyg/synchrotron
+
+Copyright (c) 2006, 2008 Tony Garnock-Jones &lt;tonyg@lshift.net&gt;<br/>
+Copyright (c) 2006, 2008 LShift Ltd. &lt;query@lshift.net&gt;<br/>
+Copyright (c) 2019 Bryan Housel &lt;bhousel@gmail.com&gt;<br/>
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation files
+(the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
+BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+node-html-parser 1.2.20
+--
+Copyright 2019 Tao Qiufeng
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+npm-package-arg 8.1.5
+--
+The ISC License
+
+Copyright (c) npm, Inc.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+========================================================================
+
+object-assign 4.1.1
+--
+The MIT License (MIT)
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+object-inspect 1.12.3
+--
+MIT License
+
+Copyright (c) 2013 James Halliday
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+object-keys 1.1.1
+--
+The MIT License (MIT)
+
+Copyright (C) 2013 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+object-path 0.11.4
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Mario Casciaro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+object-path-immutable 3.0.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Mario Casciaro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+object.assign 4.1.4
+--
+The MIT License (MIT)
+
+Copyright (c) 2014 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+object.entries 1.1.4
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+object.fromentries 2.0.4
+--
+MIT License
+
+Copyright (c) 2018 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+object.values 1.1.4
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+pako 1.0.11
+--
+(The MIT License)
+
+Copyright (C) 2014-2017 by Vitaly Puzrin and Andrei Tuputcyn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+parse-srcset 1.0.2
+--
+The MIT License (MIT)
+
+Copyright (c) 2014 Alex Bell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+path 0.12.7
+--
+Copyright Joyent, Inc. and other Node contributors. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+
+========================================================================
+
+path-browserify 1.0.1
+--
+MIT License
+
+Copyright (c) 2013 James Halliday
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+path-parse 1.0.7
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Javier Blanco
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+picocolors 1.0.0
+--
+ISC License
+
+Copyright (c) 2021 Alexey Raspopov, Kostiantyn Denysov, Anton Verinov
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+========================================================================
+
+platform-detect 3.0.0
+--
+MIT License
+
+Copyright (c) 2018 Mike Kovařík, Mutiny.cz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+postcss 8.4.27
+--
+The MIT License (MIT)
+
+Copyright 2013 Andrey Sitnik <andrey@sitnik.ru>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+prelude-ls 1.1.2
+--
+Copyright (c) George Zahariev
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+prettier 2.8.8
+--
+# Prettier license
+
+Prettier is released under the MIT license:
+
+Copyright © James Long and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+## Licenses of bundled dependencies
+
+The published Prettier artifact additionally contains code with the following licenses:
+MIT, ISC, BSD-2-Clause, BSD-3-Clause, Apache-2.0, 0BSD
+
+## Bundled dependencies
+
+### @angular/compiler@v12.2.16
+
+License: MIT
+By: angular
+Repository: <https://github.com/angular/angular.git>
+
+----------------------------------------
+
+### @babel/code-frame@v7.18.6
+
+License: MIT
+By: The Babel Team
+Repository: <https://github.com/babel/babel.git>
+
+> MIT License
+>
+> Copyright (c) 2014-present Sebastian McKenzie and other contributors
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> "Software"), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+> LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+> OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+> WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### @babel/helper-validator-identifier@v7.19.1
+
+License: MIT
+By: The Babel Team
+Repository: <https://github.com/babel/babel.git>
+
+> MIT License
+>
+> Copyright (c) 2014-present Sebastian McKenzie and other contributors
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> "Software"), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+> LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+> OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+> WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### @babel/highlight@v7.18.6
+
+License: MIT
+By: The Babel Team
+Repository: <https://github.com/babel/babel.git>
+
+> MIT License
+>
+> Copyright (c) 2014-present Sebastian McKenzie and other contributors
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> "Software"), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+> LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+> OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+> WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### @babel/parser@v7.21.3
+
+License: MIT
+By: The Babel Team
+Repository: <https://github.com/babel/babel.git>
+
+> Copyright (C) 2012-2014 by various contributors (see AUTHORS)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### @glimmer/env@v0.1.7
+
+License: MIT
+
+> Copyright (c) 2017 Martin Muñoz and contributors.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+> of the Software, and to permit persons to whom the Software is furnished to do
+> so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### @glimmer/syntax@v0.84.2
+
+License: MIT
+
+> Copyright (c) 2015 Tilde, Inc.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+> of the Software, and to permit persons to whom the Software is furnished to do
+> so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### @glimmer/util@v0.84.2
+
+License: MIT
+
+> Copyright (c) 2015 Tilde, Inc.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+> of the Software, and to permit persons to whom the Software is furnished to do
+> so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### @handlebars/parser@v2.0.0
+
+License: ISC
+Repository: <git+https://github.com/handlebars-lang/handlebars-parser.git>
+
+----------------------------------------
+
+### @iarna/toml@v2.2.5
+
+License: ISC
+By: Rebecca Turner
+Repository: <git+https://github.com/iarna/iarna-toml.git>
+
+> Copyright (c) 2016, Rebecca Turner <me@re-becca.org>
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+> OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### @nodelib/fs.scandir@v2.1.5
+
+License: MIT
+
+> The MIT License (MIT)
+>
+> Copyright (c) Denis Malinochkin
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### @nodelib/fs.stat@v2.0.5
+
+License: MIT
+
+> The MIT License (MIT)
+>
+> Copyright (c) Denis Malinochkin
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### @nodelib/fs.walk@v1.2.8
+
+License: MIT
+
+> The MIT License (MIT)
+>
+> Copyright (c) Denis Malinochkin
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### @typescript-eslint/types@v5.55.0
+
+License: MIT
+Repository: <https://github.com/typescript-eslint/typescript-eslint.git>
+
+> MIT License
+>
+> Copyright (c) 2019 typescript-eslint and other contributors
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### @typescript-eslint/typescript-estree@v5.55.0
+
+License: BSD-2-Clause
+Repository: <https://github.com/typescript-eslint/typescript-eslint.git>
+
+> TypeScript ESTree
+>
+> Originally extracted from:
+>
+> TypeScript ESLint Parser
+> Copyright JS Foundation and other contributors, https://js.foundation
+>
+> Redistribution and use in source and binary forms, with or without
+> modification, are permitted provided that the following conditions are met:
+>
+> - Redistributions of source code must retain the above copyright
+>   notice, this list of conditions and the following disclaimer.
+> - Redistributions in binary form must reproduce the above copyright
+>   notice, this list of conditions and the following disclaimer in the
+>   documentation and/or other materials provided with the distribution.
+>
+> THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+> AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+> IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+> ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+> DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+> (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+> LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+> ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+> (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+> THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+----------------------------------------
+
+### @typescript-eslint/visitor-keys@v5.55.0
+
+License: MIT
+Repository: <https://github.com/typescript-eslint/typescript-eslint.git>
+
+> MIT License
+>
+> Copyright (c) 2019 typescript-eslint and other contributors
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### acorn@v8.8.1
+
+License: MIT
+Repository: <https://github.com/acornjs/acorn.git>
+
+> MIT License
+>
+> Copyright (C) 2012-2022 by various contributors (see AUTHORS)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### acorn-jsx@v5.3.2
+
+License: MIT
+Repository: <https://github.com/acornjs/acorn-jsx>
+
+> Copyright (C) 2012-2017 by Ingvar Stepanyan
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### aggregate-error@v3.1.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### angular-estree-parser@v2.5.1
+
+License: MIT
+By: Ika
+
+> MIT License
+>
+> Copyright (c) Ika <ikatyang@gmail.com> (https://github.com/ikatyang)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### angular-html-parser@v1.8.0
+
+License: MIT
+By: Ika
+
+> MIT License
+>
+> Copyright (c) Ika <ikatyang@gmail.com> (https://github.com/ikatyang)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### ansi-regex@v6.0.1
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### ansi-styles@v3.2.1
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### array-union@v2.1.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### bail@v1.0.5
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### balanced-match@v1.0.2
+
+License: MIT
+By: Julian Gruber
+Repository: <git://github.com/juliangruber/balanced-match.git>
+
+> (MIT)
+>
+> Copyright (c) 2013 Julian Gruber &lt;julian@juliangruber.com&gt;
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+> of the Software, and to permit persons to whom the Software is furnished to do
+> so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### brace-expansion@v1.1.11
+
+License: MIT
+By: Julian Gruber
+Repository: <git://github.com/juliangruber/brace-expansion.git>
+
+> MIT License
+>
+> Copyright (c) 2013 Julian Gruber <julian@juliangruber.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### braces@v3.0.2
+
+License: MIT
+By: Jon Schlinkert
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014-2018, Jon Schlinkert.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### camelcase@v6.3.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### ccount@v1.1.0
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### chalk@v2.4.2
+
+License: MIT
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### chalk@v5.0.1
+
+License: MIT
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### character-entities@v1.2.4
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### character-entities-legacy@v1.1.4
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### character-reference-invalid@v1.1.4
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### ci-info@v3.3.0
+
+License: MIT
+By: Thomas Watson Steen
+Repository: <https://github.com/watson/ci-info.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2016-2021 Thomas Watson Steen
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### clean-stack@v2.2.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### clone@v1.0.4
+
+License: MIT
+By: Paul Vorbach
+Repository: <git://github.com/pvorb/node-clone.git>
+
+> Copyright © 2011-2015 Paul Vorbach <paul@vorba.ch>
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the “Software”), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+> the Software, and to permit persons to whom the Software is furnished to do so,
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+> FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+> COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+> IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### collapse-white-space@v1.0.6
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### color-convert@v1.9.3
+
+License: MIT
+By: Heather Arthur
+
+> Copyright (c) 2011-2016 Heather Arthur <fayearthur@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> "Software"), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+> LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+> OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+> WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### color-name@v1.1.3
+
+License: MIT
+By: DY
+Repository: <git@github.com:dfcreative/color-name.git>
+
+> The MIT License (MIT)
+> Copyright (c) 2015 Dmitry Ivanov
+> 
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+> 
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+> 
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### commondir@v1.0.1
+
+License: MIT
+By: James Halliday
+Repository: <http://github.com/substack/node-commondir.git>
+
+> The MIT License
+>
+> Copyright (c) 2013 James Halliday (mail@substack.net)
+>
+> Permission is hereby granted, free of charge, 
+> to any person obtaining a copy of this software and 
+> associated documentation files (the "Software"), to 
+> deal in the Software without restriction, including 
+> without limitation the rights to use, copy, modify, 
+> merge, publish, distribute, sublicense, and/or sell 
+> copies of the Software, and to permit persons to whom 
+> the Software is furnished to do so, 
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice 
+> shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
+> OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR 
+> ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### concat-map@v0.0.1
+
+License: MIT
+By: James Halliday
+Repository: <git://github.com/substack/node-concat-map.git>
+
+> This software is released under the MIT license:
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+> the Software, and to permit persons to whom the Software is furnished to do so,
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+> FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+> COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+> IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+> CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### cosmiconfig@v7.0.1
+
+License: MIT
+By: David Clark
+Repository: <git+https://github.com/davidtheclark/cosmiconfig.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2015 David Clark
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### cross-spawn@v7.0.3
+
+License: MIT
+By: André Cruz
+Repository: <git@github.com:moxystudio/node-cross-spawn.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2018 Made With MOXY Lda <hello@moxy.studio>
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### crypto-random-string@v4.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### css-units-list@v1.1.0
+
+License: MIT
+By: fisker Cheung
+
+> MIT License
+>
+> Copyright (c) fisker Cheung <lionkay@gmail.com> (https://www.fiskercheung.com/)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### dashify@v2.0.0
+
+License: MIT
+By: Jon Schlinkert
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2015-present, Jon Schlinkert.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### defaults@v1.0.4
+
+License: MIT
+By: Elijah Insua
+Repository: <git://github.com/sindresorhus/node-defaults.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2022 Sindre Sorhus
+> Copyright (c) 2015 Elijah Insua
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### del@v6.1.1
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### detect-newline@v3.1.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### diff@v5.0.0
+
+License: BSD-3-Clause
+Repository: <git://github.com/kpdecker/jsdiff.git>
+
+> Software License Agreement (BSD License)
+>
+> Copyright (c) 2009-2015, Kevin Decker <kpdecker@gmail.com>
+>
+> All rights reserved.
+>
+> Redistribution and use of this software in source and binary forms, with or without modification,
+> are permitted provided that the following conditions are met:
+>
+> * Redistributions of source code must retain the above
+>   copyright notice, this list of conditions and the
+>   following disclaimer.
+>
+> * Redistributions in binary form must reproduce the above
+>   copyright notice, this list of conditions and the
+>   following disclaimer in the documentation and/or other
+>   materials provided with the distribution.
+>
+> * Neither the name of Kevin Decker nor the names of its
+>   contributors may be used to endorse or promote products
+>   derived from this software without specific prior
+>   written permission.
+>
+> THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
+> IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
+> FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
+> CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+> DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+> DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+> IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
+> OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+----------------------------------------
+
+### dir-glob@v3.0.1
+
+License: MIT
+By: Kevin Mårtensson
+
+> MIT License
+>
+> Copyright (c) Kevin Mårtensson <kevinmartensson@gmail.com> (github.com/kevva)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### editorconfig@v0.15.3
+
+License: MIT
+By: EditorConfig Team
+Repository: <git://github.com/editorconfig/editorconfig-core-js.git>
+
+> Copyright © 2012 EditorConfig Team
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the “Software”), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### editorconfig-to-prettier@v1.0.0
+
+License: ISC
+By: Joseph Frazier
+Repository: <git+https://github.com/josephfrazier/editorconfig-to-prettier.git>
+
+----------------------------------------
+
+### emoji-regex@v9.2.2
+
+License: MIT
+By: Mathias Bynens
+Repository: <https://github.com/mathiasbynens/emoji-regex.git>
+
+> Copyright Mathias Bynens <https://mathiasbynens.be/>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> "Software"), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+> LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+> OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+> WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### error-ex@v1.3.2
+
+License: MIT
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2015 JD Ballard
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### escape-string-regexp@v1.0.5
+
+License: MIT
+By: Sindre Sorhus
+
+> The MIT License (MIT)
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### escape-string-regexp@v5.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### eslint-visitor-keys@v3.3.0
+
+License: Apache-2.0
+By: Toru Nagashima
+
+> Apache License
+>                            Version 2.0, January 2004
+>                         http://www.apache.org/licenses/
+>
+>    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+>
+>    1. Definitions.
+>
+>       "License" shall mean the terms and conditions for use, reproduction,
+>       and distribution as defined by Sections 1 through 9 of this document.
+>
+>       "Licensor" shall mean the copyright owner or entity authorized by
+>       the copyright owner that is granting the License.
+>
+>       "Legal Entity" shall mean the union of the acting entity and all
+>       other entities that control, are controlled by, or are under common
+>       control with that entity. For the purposes of this definition,
+>       "control" means (i) the power, direct or indirect, to cause the
+>       direction or management of such entity, whether by contract or
+>       otherwise, or (ii) ownership of fifty percent (50%) or more of the
+>       outstanding shares, or (iii) beneficial ownership of such entity.
+>
+>       "You" (or "Your") shall mean an individual or Legal Entity
+>       exercising permissions granted by this License.
+>
+>       "Source" form shall mean the preferred form for making modifications,
+>       including but not limited to software source code, documentation
+>       source, and configuration files.
+>
+>       "Object" form shall mean any form resulting from mechanical
+>       transformation or translation of a Source form, including but
+>       not limited to compiled object code, generated documentation,
+>       and conversions to other media types.
+>
+>       "Work" shall mean the work of authorship, whether in Source or
+>       Object form, made available under the License, as indicated by a
+>       copyright notice that is included in or attached to the work
+>       (an example is provided in the Appendix below).
+>
+>       "Derivative Works" shall mean any work, whether in Source or Object
+>       form, that is based on (or derived from) the Work and for which the
+>       editorial revisions, annotations, elaborations, or other modifications
+>       represent, as a whole, an original work of authorship. For the purposes
+>       of this License, Derivative Works shall not include works that remain
+>       separable from, or merely link (or bind by name) to the interfaces of,
+>       the Work and Derivative Works thereof.
+>
+>       "Contribution" shall mean any work of authorship, including
+>       the original version of the Work and any modifications or additions
+>       to that Work or Derivative Works thereof, that is intentionally
+>       submitted to Licensor for inclusion in the Work by the copyright owner
+>       or by an individual or Legal Entity authorized to submit on behalf of
+>       the copyright owner. For the purposes of this definition, "submitted"
+>       means any form of electronic, verbal, or written communication sent
+>       to the Licensor or its representatives, including but not limited to
+>       communication on electronic mailing lists, source code control systems,
+>       and issue tracking systems that are managed by, or on behalf of, the
+>       Licensor for the purpose of discussing and improving the Work, but
+>       excluding communication that is conspicuously marked or otherwise
+>       designated in writing by the copyright owner as "Not a Contribution."
+>
+>       "Contributor" shall mean Licensor and any individual or Legal Entity
+>       on behalf of whom a Contribution has been received by Licensor and
+>       subsequently incorporated within the Work.
+>
+>    2. Grant of Copyright License. Subject to the terms and conditions of
+>       this License, each Contributor hereby grants to You a perpetual,
+>       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+>       copyright license to reproduce, prepare Derivative Works of,
+>       publicly display, publicly perform, sublicense, and distribute the
+>       Work and such Derivative Works in Source or Object form.
+>
+>    3. Grant of Patent License. Subject to the terms and conditions of
+>       this License, each Contributor hereby grants to You a perpetual,
+>       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+>       (except as stated in this section) patent license to make, have made,
+>       use, offer to sell, sell, import, and otherwise transfer the Work,
+>       where such license applies only to those patent claims licensable
+>       by such Contributor that are necessarily infringed by their
+>       Contribution(s) alone or by combination of their Contribution(s)
+>       with the Work to which such Contribution(s) was submitted. If You
+>       institute patent litigation against any entity (including a
+>       cross-claim or counterclaim in a lawsuit) alleging that the Work
+>       or a Contribution incorporated within the Work constitutes direct
+>       or contributory patent infringement, then any patent licenses
+>       granted to You under this License for that Work shall terminate
+>       as of the date such litigation is filed.
+>
+>    4. Redistribution. You may reproduce and distribute copies of the
+>       Work or Derivative Works thereof in any medium, with or without
+>       modifications, and in Source or Object form, provided that You
+>       meet the following conditions:
+>
+>       (a) You must give any other recipients of the Work or
+>           Derivative Works a copy of this License; and
+>
+>       (b) You must cause any modified files to carry prominent notices
+>           stating that You changed the files; and
+>
+>       (c) You must retain, in the Source form of any Derivative Works
+>           that You distribute, all copyright, patent, trademark, and
+>           attribution notices from the Source form of the Work,
+>           excluding those notices that do not pertain to any part of
+>           the Derivative Works; and
+>
+>       (d) If the Work includes a "NOTICE" text file as part of its
+>           distribution, then any Derivative Works that You distribute must
+>           include a readable copy of the attribution notices contained
+>           within such NOTICE file, excluding those notices that do not
+>           pertain to any part of the Derivative Works, in at least one
+>           of the following places: within a NOTICE text file distributed
+>           as part of the Derivative Works; within the Source form or
+>           documentation, if provided along with the Derivative Works; or,
+>           within a display generated by the Derivative Works, if and
+>           wherever such third-party notices normally appear. The contents
+>           of the NOTICE file are for informational purposes only and
+>           do not modify the License. You may add Your own attribution
+>           notices within Derivative Works that You distribute, alongside
+>           or as an addendum to the NOTICE text from the Work, provided
+>           that such additional attribution notices cannot be construed
+>           as modifying the License.
+>
+>       You may add Your own copyright statement to Your modifications and
+>       may provide additional or different license terms and conditions
+>       for use, reproduction, or distribution of Your modifications, or
+>       for any such Derivative Works as a whole, provided Your use,
+>       reproduction, and distribution of the Work otherwise complies with
+>       the conditions stated in this License.
+>
+>    5. Submission of Contributions. Unless You explicitly state otherwise,
+>       any Contribution intentionally submitted for inclusion in the Work
+>       by You to the Licensor shall be under the terms and conditions of
+>       this License, without any additional terms or conditions.
+>       Notwithstanding the above, nothing herein shall supersede or modify
+>       the terms of any separate license agreement you may have executed
+>       with Licensor regarding such Contributions.
+>
+>    6. Trademarks. This License does not grant permission to use the trade
+>       names, trademarks, service marks, or product names of the Licensor,
+>       except as required for reasonable and customary use in describing the
+>       origin of the Work and reproducing the content of the NOTICE file.
+>
+>    7. Disclaimer of Warranty. Unless required by applicable law or
+>       agreed to in writing, Licensor provides the Work (and each
+>       Contributor provides its Contributions) on an "AS IS" BASIS,
+>       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+>       implied, including, without limitation, any warranties or conditions
+>       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+>       PARTICULAR PURPOSE. You are solely responsible for determining the
+>       appropriateness of using or redistributing the Work and assume any
+>       risks associated with Your exercise of permissions under this License.
+>
+>    8. Limitation of Liability. In no event and under no legal theory,
+>       whether in tort (including negligence), contract, or otherwise,
+>       unless required by applicable law (such as deliberate and grossly
+>       negligent acts) or agreed to in writing, shall any Contributor be
+>       liable to You for damages, including any direct, indirect, special,
+>       incidental, or consequential damages of any character arising as a
+>       result of this License or out of the use or inability to use the
+>       Work (including but not limited to damages for loss of goodwill,
+>       work stoppage, computer failure or malfunction, or any and all
+>       other commercial damages or losses), even if such Contributor
+>       has been advised of the possibility of such damages.
+>
+>    9. Accepting Warranty or Additional Liability. While redistributing
+>       the Work or Derivative Works thereof, You may choose to offer,
+>       and charge a fee for, acceptance of support, warranty, indemnity,
+>       or other liability obligations and/or rights consistent with this
+>       License. However, in accepting such obligations, You may act only
+>       on Your own behalf and on Your sole responsibility, not on behalf
+>       of any other Contributor, and only if You agree to indemnify,
+>       defend, and hold each Contributor harmless for any liability
+>       incurred by, or claims asserted against, such Contributor by reason
+>       of your accepting any such warranty or additional liability.
+>
+>    END OF TERMS AND CONDITIONS
+>
+>    APPENDIX: How to apply the Apache License to your work.
+>
+>       To apply the Apache License to your work, attach the following
+>       boilerplate notice, with the fields enclosed by brackets "{}"
+>       replaced with your own identifying information. (Don't include
+>       the brackets!)  The text should be enclosed in the appropriate
+>       comment syntax for the file format. We also recommend that a
+>       file or class name and description of purpose be included on the
+>       same "printed page" as the copyright notice for easier
+>       identification within third-party archives.
+>
+>    Copyright contributors
+>
+>    Licensed under the Apache License, Version 2.0 (the "License");
+>    you may not use this file except in compliance with the License.
+>    You may obtain a copy of the License at
+>
+>        http://www.apache.org/licenses/LICENSE-2.0
+>
+>    Unless required by applicable law or agreed to in writing, software
+>    distributed under the License is distributed on an "AS IS" BASIS,
+>    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+>    See the License for the specific language governing permissions and
+>    limitations under the License.
+
+----------------------------------------
+
+### espree@v9.4.1
+
+License: BSD-2-Clause
+By: Nicholas C. Zakas
+
+> BSD 2-Clause License
+>
+> Copyright (c) Open JS Foundation
+> All rights reserved.
+>
+> Redistribution and use in source and binary forms, with or without
+> modification, are permitted provided that the following conditions are met:
+>
+> 1. Redistributions of source code must retain the above copyright notice, this
+>    list of conditions and the following disclaimer.
+>
+> 2. Redistributions in binary form must reproduce the above copyright notice,
+>    this list of conditions and the following disclaimer in the documentation
+>    and/or other materials provided with the distribution.
+>
+> THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+> AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+> IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+> DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+> FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+> DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+> SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+> CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+> OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+> OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+----------------------------------------
+
+### esutils@v2.0.3
+
+License: BSD-2-Clause
+Repository: <http://github.com/estools/esutils.git>
+
+> Redistribution and use in source and binary forms, with or without
+> modification, are permitted provided that the following conditions are met:
+>
+>   * Redistributions of source code must retain the above copyright
+>     notice, this list of conditions and the following disclaimer.
+>   * Redistributions in binary form must reproduce the above copyright
+>     notice, this list of conditions and the following disclaimer in the
+>     documentation and/or other materials provided with the distribution.
+>
+> THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+> AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+> IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+> ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+> DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+> (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+> LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+> ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+> (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+> THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+----------------------------------------
+
+### execa@v6.1.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### extend@v3.0.2
+
+License: MIT
+By: Stefan Thomas
+Repository: <https://github.com/justmoon/node-extend.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014 Stefan Thomas
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> "Software"), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+> LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+> OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+> WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### fast-glob@v3.2.12
+
+License: MIT
+By: Denis Malinochkin
+
+> The MIT License (MIT)
+>
+> Copyright (c) Denis Malinochkin
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### fast-json-stable-stringify@v2.1.0
+
+License: MIT
+By: James Halliday
+Repository: <git://github.com/epoberezkin/fast-json-stable-stringify.git>
+
+> This software is released under the MIT license:
+>
+> Copyright (c) 2017 Evgeny Poberezkin
+> Copyright (c) 2013 James Halliday
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+> the Software, and to permit persons to whom the Software is furnished to do so,
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+> FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+> COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+> IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+> CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### fastq@v1.14.0
+
+License: ISC
+By: Matteo Collina
+Repository: <git+https://github.com/mcollina/fastq.git>
+
+> Copyright (c) 2015-2020, Matteo Collina <matteo.collina@gmail.com>
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+> OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### file-entry-cache@v6.0.1
+
+License: MIT
+By: Roy Riojas
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2015 Roy Riojas
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### fill-range@v7.0.1
+
+License: MIT
+By: Jon Schlinkert
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014-present, Jon Schlinkert.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### find-cache-dir@v3.3.2
+
+License: MIT
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### find-parent-dir@v0.3.1
+
+License: MIT
+By: Thorsten Lorenz
+Repository: <git://github.com/thlorenz/find-parent-dir.git>
+
+> Copyright 2013 Thorsten Lorenz. 
+> All rights reserved.
+>
+> Permission is hereby granted, free of charge, to any person
+> obtaining a copy of this software and associated documentation
+> files (the "Software"), to deal in the Software without
+> restriction, including without limitation the rights to use,
+> copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the
+> Software is furnished to do so, subject to the following
+> conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+> OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+> HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+> WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+> FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+> OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### find-up@v4.1.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### flat-cache@v3.0.4
+
+License: MIT
+By: Roy Riojas
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2015 Roy Riojas
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### flatted@v3.2.7
+
+License: ISC
+By: Andrea Giammarchi
+Repository: <git+https://github.com/WebReflection/flatted.git>
+
+> ISC License
+>
+> Copyright (c) 2018-2020, Andrea Giammarchi, @WebReflection
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+> REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+> AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+> INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+> LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+> OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+> PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### flatten@v1.0.3
+
+License: MIT
+By: Joshua Holbrook
+Repository: <git+https://github.com/mk-pmb/flatten-js.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2016 Joshua Holbrook
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### flow-parser@v0.180.0
+
+License: MIT
+By: Flow Team
+Repository: <https://github.com/facebook/flow.git>
+
+----------------------------------------
+
+### fs.realpath@v1.0.0
+
+License: ISC
+By: Isaac Z. Schlueter
+Repository: <git+https://github.com/isaacs/fs.realpath.git>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+>
+> ----
+>
+> This library bundles a version of the `fs.realpath` and `fs.realpathSync`
+> methods from Node.js v0.10 under the terms of the Node.js MIT license.
+>
+> Node's license follows, also included at the header of `old.js` which contains
+> the licensed code:
+>
+>   Copyright Joyent, Inc. and other Node contributors.
+>
+>   Permission is hereby granted, free of charge, to any person obtaining a
+>   copy of this software and associated documentation files (the "Software"),
+>   to deal in the Software without restriction, including without limitation
+>   the rights to use, copy, modify, merge, publish, distribute, sublicense,
+>   and/or sell copies of the Software, and to permit persons to whom the
+>   Software is furnished to do so, subject to the following conditions:
+>
+>   The above copyright notice and this permission notice shall be included in
+>   all copies or substantial portions of the Software.
+>
+>   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+>   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+>   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+>   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+>   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+>   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+>   DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### function-bind@v1.1.1
+
+License: MIT
+By: Raynos
+
+> Copyright (c) 2013 Raynos.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### get-stdin@v8.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### get-stream@v6.0.1
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### glob@v7.2.3
+
+License: ISC
+By: Isaac Z. Schlueter
+Repository: <git://github.com/isaacs/node-glob.git>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+>
+> ## Glob Logo
+>
+> Glob's logo created by Tanya Brassie <http://tanyabrassie.com/>, licensed
+> under a Creative Commons Attribution-ShareAlike 4.0 International License
+> https://creativecommons.org/licenses/by-sa/4.0/
+
+----------------------------------------
+
+### glob-parent@v5.1.2
+
+License: ISC
+By: Gulp Team
+
+> The ISC License
+>
+> Copyright (c) 2015, 2019 Elan Shanker
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### globby@v11.1.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### graceful-fs@v4.2.10
+
+License: ISC
+Repository: <https://github.com/isaacs/node-graceful-fs>
+
+> The ISC License
+>
+> Copyright (c) 2011-2022 Isaac Z. Schlueter, Ben Noordhuis, and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### graphql@v15.6.1
+
+License: MIT
+Repository: <https://github.com/graphql/graphql-js.git>
+
+> MIT License
+>
+> Copyright (c) GraphQL Contributors
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### has@v1.0.3
+
+License: MIT
+By: Thiago de Arruda
+Repository: <git://github.com/tarruda/has.git>
+
+> Copyright (c) 2013 Thiago de Arruda
+>
+> Permission is hereby granted, free of charge, to any person
+> obtaining a copy of this software and associated documentation
+> files (the "Software"), to deal in the Software without
+> restriction, including without limitation the rights to use,
+> copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the
+> Software is furnished to do so, subject to the following
+> conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+> OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+> HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+> WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+> FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+> OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### has-flag@v3.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### html-element-attributes@v3.1.0
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### html-tag-names@v2.0.1
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### human-signals@v3.0.1
+
+License: Apache-2.0
+By: ehmicky
+
+> Apache License
+>                            Version 2.0, January 2004
+>                         http://www.apache.org/licenses/
+>
+>    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+>
+>    1. Definitions.
+>
+>       "License" shall mean the terms and conditions for use, reproduction,
+>       and distribution as defined by Sections 1 through 9 of this document.
+>
+>       "Licensor" shall mean the copyright owner or entity authorized by
+>       the copyright owner that is granting the License.
+>
+>       "Legal Entity" shall mean the union of the acting entity and all
+>       other entities that control, are controlled by, or are under common
+>       control with that entity. For the purposes of this definition,
+>       "control" means (i) the power, direct or indirect, to cause the
+>       direction or management of such entity, whether by contract or
+>       otherwise, or (ii) ownership of fifty percent (50%) or more of the
+>       outstanding shares, or (iii) beneficial ownership of such entity.
+>
+>       "You" (or "Your") shall mean an individual or Legal Entity
+>       exercising permissions granted by this License.
+>
+>       "Source" form shall mean the preferred form for making modifications,
+>       including but not limited to software source code, documentation
+>       source, and configuration files.
+>
+>       "Object" form shall mean any form resulting from mechanical
+>       transformation or translation of a Source form, including but
+>       not limited to compiled object code, generated documentation,
+>       and conversions to other media types.
+>
+>       "Work" shall mean the work of authorship, whether in Source or
+>       Object form, made available under the License, as indicated by a
+>       copyright notice that is included in or attached to the work
+>       (an example is provided in the Appendix below).
+>
+>       "Derivative Works" shall mean any work, whether in Source or Object
+>       form, that is based on (or derived from) the Work and for which the
+>       editorial revisions, annotations, elaborations, or other modifications
+>       represent, as a whole, an original work of authorship. For the purposes
+>       of this License, Derivative Works shall not include works that remain
+>       separable from, or merely link (or bind by name) to the interfaces of,
+>       the Work and Derivative Works thereof.
+>
+>       "Contribution" shall mean any work of authorship, including
+>       the original version of the Work and any modifications or additions
+>       to that Work or Derivative Works thereof, that is intentionally
+>       submitted to Licensor for inclusion in the Work by the copyright owner
+>       or by an individual or Legal Entity authorized to submit on behalf of
+>       the copyright owner. For the purposes of this definition, "submitted"
+>       means any form of electronic, verbal, or written communication sent
+>       to the Licensor or its representatives, including but not limited to
+>       communication on electronic mailing lists, source code control systems,
+>       and issue tracking systems that are managed by, or on behalf of, the
+>       Licensor for the purpose of discussing and improving the Work, but
+>       excluding communication that is conspicuously marked or otherwise
+>       designated in writing by the copyright owner as "Not a Contribution."
+>
+>       "Contributor" shall mean Licensor and any individual or Legal Entity
+>       on behalf of whom a Contribution has been received by Licensor and
+>       subsequently incorporated within the Work.
+>
+>    2. Grant of Copyright License. Subject to the terms and conditions of
+>       this License, each Contributor hereby grants to You a perpetual,
+>       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+>       copyright license to reproduce, prepare Derivative Works of,
+>       publicly display, publicly perform, sublicense, and distribute the
+>       Work and such Derivative Works in Source or Object form.
+>
+>    3. Grant of Patent License. Subject to the terms and conditions of
+>       this License, each Contributor hereby grants to You a perpetual,
+>       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+>       (except as stated in this section) patent license to make, have made,
+>       use, offer to sell, sell, import, and otherwise transfer the Work,
+>       where such license applies only to those patent claims licensable
+>       by such Contributor that are necessarily infringed by their
+>       Contribution(s) alone or by combination of their Contribution(s)
+>       with the Work to which such Contribution(s) was submitted. If You
+>       institute patent litigation against any entity (including a
+>       cross-claim or counterclaim in a lawsuit) alleging that the Work
+>       or a Contribution incorporated within the Work constitutes direct
+>       or contributory patent infringement, then any patent licenses
+>       granted to You under this License for that Work shall terminate
+>       as of the date such litigation is filed.
+>
+>    4. Redistribution. You may reproduce and distribute copies of the
+>       Work or Derivative Works thereof in any medium, with or without
+>       modifications, and in Source or Object form, provided that You
+>       meet the following conditions:
+>
+>       (a) You must give any other recipients of the Work or
+>           Derivative Works a copy of this License; and
+>
+>       (b) You must cause any modified files to carry prominent notices
+>           stating that You changed the files; and
+>
+>       (c) You must retain, in the Source form of any Derivative Works
+>           that You distribute, all copyright, patent, trademark, and
+>           attribution notices from the Source form of the Work,
+>           excluding those notices that do not pertain to any part of
+>           the Derivative Works; and
+>
+>       (d) If the Work includes a "NOTICE" text file as part of its
+>           distribution, then any Derivative Works that You distribute must
+>           include a readable copy of the attribution notices contained
+>           within such NOTICE file, excluding those notices that do not
+>           pertain to any part of the Derivative Works, in at least one
+>           of the following places: within a NOTICE text file distributed
+>           as part of the Derivative Works; within the Source form or
+>           documentation, if provided along with the Derivative Works; or,
+>           within a display generated by the Derivative Works, if and
+>           wherever such third-party notices normally appear. The contents
+>           of the NOTICE file are for informational purposes only and
+>           do not modify the License. You may add Your own attribution
+>           notices within Derivative Works that You distribute, alongside
+>           or as an addendum to the NOTICE text from the Work, provided
+>           that such additional attribution notices cannot be construed
+>           as modifying the License.
+>
+>       You may add Your own copyright statement to Your modifications and
+>       may provide additional or different license terms and conditions
+>       for use, reproduction, or distribution of Your modifications, or
+>       for any such Derivative Works as a whole, provided Your use,
+>       reproduction, and distribution of the Work otherwise complies with
+>       the conditions stated in this License.
+>
+>    5. Submission of Contributions. Unless You explicitly state otherwise,
+>       any Contribution intentionally submitted for inclusion in the Work
+>       by You to the Licensor shall be under the terms and conditions of
+>       this License, without any additional terms or conditions.
+>       Notwithstanding the above, nothing herein shall supersede or modify
+>       the terms of any separate license agreement you may have executed
+>       with Licensor regarding such Contributions.
+>
+>    6. Trademarks. This License does not grant permission to use the trade
+>       names, trademarks, service marks, or product names of the Licensor,
+>       except as required for reasonable and customary use in describing the
+>       origin of the Work and reproducing the content of the NOTICE file.
+>
+>    7. Disclaimer of Warranty. Unless required by applicable law or
+>       agreed to in writing, Licensor provides the Work (and each
+>       Contributor provides its Contributions) on an "AS IS" BASIS,
+>       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+>       implied, including, without limitation, any warranties or conditions
+>       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+>       PARTICULAR PURPOSE. You are solely responsible for determining the
+>       appropriateness of using or redistributing the Work and assume any
+>       risks associated with Your exercise of permissions under this License.
+>
+>    8. Limitation of Liability. In no event and under no legal theory,
+>       whether in tort (including negligence), contract, or otherwise,
+>       unless required by applicable law (such as deliberate and grossly
+>       negligent acts) or agreed to in writing, shall any Contributor be
+>       liable to You for damages, including any direct, indirect, special,
+>       incidental, or consequential damages of any character arising as a
+>       result of this License or out of the use or inability to use the
+>       Work (including but not limited to damages for loss of goodwill,
+>       work stoppage, computer failure or malfunction, or any and all
+>       other commercial damages or losses), even if such Contributor
+>       has been advised of the possibility of such damages.
+>
+>    9. Accepting Warranty or Additional Liability. While redistributing
+>       the Work or Derivative Works thereof, You may choose to offer,
+>       and charge a fee for, acceptance of support, warranty, indemnity,
+>       or other liability obligations and/or rights consistent with this
+>       License. However, in accepting such obligations, You may act only
+>       on Your own behalf and on Your sole responsibility, not on behalf
+>       of any other Contributor, and only if You agree to indemnify,
+>       defend, and hold each Contributor harmless for any liability
+>       incurred by, or claims asserted against, such Contributor by reason
+>       of your accepting any such warranty or additional liability.
+>
+>    END OF TERMS AND CONDITIONS
+>
+>    APPENDIX: How to apply the Apache License to your work.
+>
+>       To apply the Apache License to your work, attach the following
+>       boilerplate notice, with the fields enclosed by brackets "[]"
+>       replaced with your own identifying information. (Don't include
+>       the brackets!)  The text should be enclosed in the appropriate
+>       comment syntax for the file format. We also recommend that a
+>       file or class name and description of purpose be included on the
+>       same "printed page" as the copyright notice for easier
+>       identification within third-party archives.
+>
+>    Copyright 2021 ehmicky <ehmicky@gmail.com>
+>
+>    Licensed under the Apache License, Version 2.0 (the "License");
+>    you may not use this file except in compliance with the License.
+>    You may obtain a copy of the License at
+>
+>        http://www.apache.org/licenses/LICENSE-2.0
+>
+>    Unless required by applicable law or agreed to in writing, software
+>    distributed under the License is distributed on an "AS IS" BASIS,
+>    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+>    See the License for the specific language governing permissions and
+>    limitations under the License.
+
+----------------------------------------
+
+### ignore@v5.2.0
+
+License: MIT
+By: kael
+Repository: <git@github.com:kaelzhang/node-ignore.git>
+
+> Copyright (c) 2013 Kael Zhang <i@kael.me>, contributors
+> http://kael.me/
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> "Software"), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+> LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+> OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+> WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### ignore@v5.2.4
+
+License: MIT
+By: kael
+Repository: <git@github.com:kaelzhang/node-ignore.git>
+
+> Copyright (c) 2013 Kael Zhang <i@kael.me>, contributors
+> http://kael.me/
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> "Software"), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+> LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+> OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+> WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### import-fresh@v3.3.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### indent-string@v4.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### indexes-of@v1.0.1
+
+License: MIT
+By: Dominic Tarr
+Repository: <git://github.com/dominictarr/indexes-of.git>
+
+> Copyright (c) 2013 Dominic Tarr
+>
+> Permission is hereby granted, free of charge, 
+> to any person obtaining a copy of this software and 
+> associated documentation files (the "Software"), to 
+> deal in the Software without restriction, including 
+> without limitation the rights to use, copy, modify, 
+> merge, publish, distribute, sublicense, and/or sell 
+> copies of the Software, and to permit persons to whom 
+> the Software is furnished to do so, 
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice 
+> shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
+> OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR 
+> ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### inflight@v1.0.6
+
+License: ISC
+By: Isaac Z. Schlueter
+Repository: <https://github.com/npm/inflight.git>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### inherits@v2.0.4
+
+License: ISC
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+> REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+> FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+> INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+> LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+> OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+> PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### is-alphabetical@v1.0.4
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### is-alphanumerical@v1.0.4
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### is-arrayish@v0.2.1
+
+License: MIT
+By: Qix
+Repository: <https://github.com/qix-/node-is-arrayish.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2015 JD Ballard
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### is-buffer@v2.0.5
+
+License: MIT
+By: Feross Aboukhadijeh
+Repository: <git://github.com/feross/is-buffer.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) Feross Aboukhadijeh
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### is-core-module@v2.11.0
+
+License: MIT
+By: Jordan Harband
+Repository: <git+https://github.com/inspect-js/is-core-module.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014 Dave Justice
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+> the Software, and to permit persons to whom the Software is furnished to do so,
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+> FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+> COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+> IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+> CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### is-decimal@v1.0.4
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### is-extglob@v2.1.1
+
+License: MIT
+By: Jon Schlinkert
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014-2016, Jon Schlinkert
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### is-fullwidth-code-point@v4.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### is-glob@v4.0.3
+
+License: MIT
+By: Jon Schlinkert
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014-2017, Jon Schlinkert.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### is-hexadecimal@v1.0.4
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### is-number@v7.0.0
+
+License: MIT
+By: Jon Schlinkert
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014-present, Jon Schlinkert.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### is-path-cwd@v2.2.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### is-path-inside@v3.0.3
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### is-plain-obj@v2.1.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### is-stream@v3.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### is-whitespace-character@v1.0.4
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### is-word-character@v1.0.4
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### isexe@v2.0.0
+
+License: ISC
+By: Isaac Z. Schlueter
+Repository: <git+https://github.com/isaacs/isexe.git>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### jest-docblock@v28.1.1
+
+License: MIT
+Repository: <https://github.com/facebook/jest.git>
+
+> MIT License
+>
+> Copyright (c) Facebook, Inc. and its affiliates.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### js-tokens@v4.0.0
+
+License: MIT
+By: Simon Lydell
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014, 2015, 2016, 2017, 2018 Simon Lydell
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### json-parse-even-better-errors@v2.3.1
+
+License: MIT
+By: Kat Marchán
+
+> Copyright 2017 Kat Marchán
+> Copyright npm, Inc.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a
+> copy of this software and associated documentation files (the "Software"),
+> to deal in the Software without restriction, including without limitation
+> the rights to use, copy, modify, merge, publish, distribute, sublicense,
+> and/or sell copies of the Software, and to permit persons to whom the
+> Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+> FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+> DEALINGS IN THE SOFTWARE.
+>
+> ---
+>
+> This library is a fork of 'better-json-errors' by Kat Marchán, extended and
+> distributed under the terms of the MIT license above.
+
+----------------------------------------
+
+### json5@v2.2.2
+
+License: MIT
+By: Aseem Kishore
+Repository: <git+https://github.com/json5/json5.git>
+
+> MIT License
+>
+> Copyright (c) 2012-2018 Aseem Kishore, and [others].
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+>
+> [others]: https://github.com/json5/json5/contributors
+
+----------------------------------------
+
+### leven@v2.1.0
+
+License: MIT
+By: Sindre Sorhus
+
+> The MIT License (MIT)
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### leven@v4.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### lines-and-columns@v1.2.4
+
+License: MIT
+By: Brian Donovan
+Repository: <https://github.com/eventualbuddha/lines-and-columns.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2015 Brian Donovan
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### lines-and-columns@v2.0.3
+
+License: MIT
+By: Brian Donovan
+Repository: <https://github.com/eventualbuddha/lines-and-columns.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2015 Brian Donovan
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### linguist-languages@v7.21.0
+
+License: MIT
+By: Ika
+
+> MIT License
+>
+> Copyright (c) Ika <ikatyang@gmail.com> (https://github.com/ikatyang)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### locate-path@v5.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### lru-cache@v4.1.5
+
+License: ISC
+By: Isaac Z. Schlueter
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### lru-cache@v6.0.0
+
+License: ISC
+By: Isaac Z. Schlueter
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### make-dir@v3.1.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### map-age-cleaner@v0.1.3
+
+License: MIT
+By: Sam Verschueren
+
+> MIT License
+>
+> Copyright (c) Sam Verschueren <sam.verschueren@gmail.com> (github.com/SamVerschueren)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### markdown-escapes@v1.0.4
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### mem@v9.0.2
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### merge-stream@v2.0.0
+
+License: MIT
+By: Stephen Sugden
+
+> The MIT License (MIT)
+>
+> Copyright (c) Stephen Sugden <me@stephensugden.com> (stephensugden.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### merge2@v1.4.1
+
+License: MIT
+Repository: <git@github.com:teambition/merge2.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014-2020 Teambition
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### meriyah@v4.2.1
+
+License: ISC
+By: Kenny F.
+Repository: <https://github.com/meriyah/meriyah>
+
+> ISC License
+>
+> Copyright (c) 2019 and later, KFlash and others.
+>
+> Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### micromatch@v4.0.5
+
+License: MIT
+By: Jon Schlinkert
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014-present, Jon Schlinkert.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### mimic-fn@v4.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### minimatch@v3.1.2
+
+License: ISC
+By: Isaac Z. Schlueter
+Repository: <git://github.com/isaacs/minimatch.git>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### minimist@v1.2.6
+
+License: MIT
+By: James Halliday
+Repository: <git://github.com/substack/minimist.git>
+
+> This software is released under the MIT license:
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+> the Software, and to permit persons to whom the Software is furnished to do so,
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+> FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+> COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+> IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+> CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### n-readlines@v1.0.1
+
+License: MIT
+By: Yoan Arnaudov
+Repository: <http://github.com/nacholibre/node-readlines.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2013 Liucw
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+> the Software, and to permit persons to whom the Software is furnished to do so,
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+> FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+> COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+> IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+> CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### npm-run-path@v5.1.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### once@v1.4.0
+
+License: ISC
+By: Isaac Z. Schlueter
+Repository: <git://github.com/isaacs/once>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### onetime@v6.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### outdent@v0.8.0
+
+License: MIT
+By: Andrew Bradley
+Repository: <git+https://github.com/cspotcode/outdent.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2016 Andrew Bradley
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### p-defer@v1.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> The MIT License (MIT)
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### p-limit@v2.3.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### p-locate@v4.1.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### p-map@v4.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### p-try@v2.2.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### parse-entities@v2.0.0
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2015 Titus Wormer <mailto:tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### parse-json@v5.2.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### parse-srcset@v1.0.2
+
+License: MIT
+By: Alex Bell
+Repository: <git+https://github.com/albell/parse-srcset.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014 Alex Bell
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### path-exists@v4.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### path-is-absolute@v1.0.1
+
+License: MIT
+By: Sindre Sorhus
+
+> The MIT License (MIT)
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### path-key@v3.1.1
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### path-parse@v1.0.7
+
+License: MIT
+By: Javier Blanco
+Repository: <https://github.com/jbgutierrez/path-parse.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2015 Javier Blanco
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### path-type@v4.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### picocolors@v0.2.1
+
+License: ISC
+By: Alexey Raspopov
+
+> ISC License
+>
+> Copyright (c) 2021 Alexey Raspopov, Kostiantyn Denysov, Anton Verinov
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+> OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### picomatch@v2.3.1
+
+License: MIT
+By: Jon Schlinkert
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2017-present, Jon Schlinkert.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### pkg-dir@v4.2.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### please-upgrade-node@v3.2.0
+
+License: MIT
+By: typicode
+Repository: <git+https://github.com/typicode/please-upgrade-node.git>
+
+> MIT License
+>
+> Copyright (c) 2017 
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### postcss@v7.0.39
+
+License: MIT
+By: Andrey Sitnik
+
+> The MIT License (MIT)
+>
+> Copyright 2013 Andrey Sitnik <andrey@sitnik.ru>
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+> the Software, and to permit persons to whom the Software is furnished to do so,
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+> FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+> COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+> IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+> CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### postcss-less@v3.1.4
+
+License: MIT
+By: Denys Kniazevych
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2013 Andrey Sitnik <andrey@sitnik.ru>
+> Copyright (c) 2016 Denys Kniazevych <webschik@gmail.com>
+> Copyright (c) 2016 Pat Sissons <patricksissons@gmail.com>
+> Copyright (c) 2017 Andrew Powell <andrew@shellscape.org>
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### postcss-media-query-parser@v0.2.3
+
+License: MIT
+By: dryoma
+Repository: <git+https://github.com/dryoma/postcss-media-query-parser.git>
+
+----------------------------------------
+
+### postcss-scss@v2.1.1
+
+License: MIT
+By: Andrey Sitnik
+
+> The MIT License (MIT)
+>
+> Copyright 2013 Andrey Sitnik <andrey@sitnik.ru>
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+> the Software, and to permit persons to whom the Software is furnished to do so,
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+> FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+> COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+> IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+> CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### postcss-selector-parser@v2.2.3
+
+License: MIT
+By: Ben Briggs
+
+> Copyright (c) Ben Briggs <beneb.info@gmail.com> (http://beneb.info)
+>
+> Permission is hereby granted, free of charge, to any person
+> obtaining a copy of this software and associated documentation
+> files (the "Software"), to deal in the Software without
+> restriction, including without limitation the rights to use,
+> copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the
+> Software is furnished to do so, subject to the following
+> conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+> OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+> HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+> WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+> FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+> OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### postcss-values-parser@v2.0.1
+
+License: MIT
+By: Andrew Powell (shellscape)
+
+> Copyright (c) Andrew Powell <andrew@shellscape.org>
+>
+> Permission is hereby granted, free of charge, to any person
+> obtaining a copy of this software and associated documentation
+> files (the "Software"), to deal in the Software without
+> restriction, including without limitation the rights to use,
+> copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the
+> Software is furnished to do so, subject to the following
+> conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+> OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+> NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+> HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+> WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+> FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+> OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### pseudomap@v1.0.2
+
+License: ISC
+By: Isaac Z. Schlueter
+Repository: <git+https://github.com/isaacs/pseudomap.git>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### queue-microtask@v1.2.3
+
+License: MIT
+By: Feross Aboukhadijeh
+Repository: <git://github.com/feross/queue-microtask.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) Feross Aboukhadijeh
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+> the Software, and to permit persons to whom the Software is furnished to do so,
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+> FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+> COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+> IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+> CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### remark-footnotes@v2.0.0
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2020 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### remark-math@v3.0.1
+
+License: MIT
+By: Junyoung Choi
+
+----------------------------------------
+
+### remark-parse@v8.0.3
+
+License: MIT
+By: Titus Wormer
+
+----------------------------------------
+
+### repeat-string@v1.6.1
+
+License: MIT
+By: Jon Schlinkert
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2014-2016, Jon Schlinkert.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### resolve@v1.22.1
+
+License: MIT
+By: James Halliday
+Repository: <git://github.com/browserify/resolve.git>
+
+> MIT License
+>
+> Copyright (c) 2012 James Halliday
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### resolve-from@v4.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### reusify@v1.0.4
+
+License: MIT
+By: Matteo Collina
+Repository: <git+https://github.com/mcollina/reusify.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2015 Matteo Collina
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### rimraf@v3.0.2
+
+License: ISC
+By: Isaac Z. Schlueter
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### rollup-plugin-node-polyfills@v0.2.1
+
+License: MIT
+Repository: <git@github.com:ionic-team/rollup-plugin-node-polyfills.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2019 these people
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### run-parallel@v1.2.0
+
+License: MIT
+By: Feross Aboukhadijeh
+Repository: <git://github.com/feross/run-parallel.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) Feross Aboukhadijeh
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+> the Software, and to permit persons to whom the Software is furnished to do so,
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+> FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+> COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+> IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+> CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### sdbm@v2.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### semver@v6.3.0
+
+License: ISC
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### semver@v7.3.7
+
+License: ISC
+By: GitHub Inc.
+Repository: <https://github.com/npm/node-semver.git>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### semver@v7.3.8
+
+License: ISC
+By: GitHub Inc.
+Repository: <https://github.com/npm/node-semver.git>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### semver-compare@v1.0.0
+
+License: MIT
+By: James Halliday
+Repository: <git://github.com/substack/semver-compare.git>
+
+> This software is released under the MIT license:
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+> the Software, and to permit persons to whom the Software is furnished to do so,
+> subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+> FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+> COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+> IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+> CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### shebang-command@v2.0.0
+
+License: MIT
+By: Kevin Mårtensson
+
+> MIT License
+>
+> Copyright (c) Kevin Mårtensson <kevinmartensson@gmail.com> (github.com/kevva)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### shebang-regex@v3.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### sigmund@v1.0.1
+
+License: ISC
+By: Isaac Z. Schlueter
+Repository: <git://github.com/isaacs/sigmund>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### signal-exit@v3.0.7
+
+License: ISC
+By: Ben Coe
+Repository: <https://github.com/tapjs/signal-exit.git>
+
+> The ISC License
+>
+> Copyright (c) 2015, Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software
+> for any purpose with or without fee is hereby granted, provided
+> that the above copyright notice and this permission notice
+> appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES
+> OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE
+> LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES
+> OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS,
+> WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION,
+> ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### simple-html-tokenizer@v0.5.11
+
+License: MIT
+Repository: <https://github.com/tildeio/simple-html-tokenizer.git>
+
+> Copyright (c) 2014 Yehuda Katz and contributors
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+> of the Software, and to permit persons to whom the Software is furnished to do
+> so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### slash@v3.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### state-toggle@v1.0.3
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### string-width@v5.0.1
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### strip-ansi@v7.0.1
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### strip-final-newline@v3.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### supports-color@v5.5.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### temp-dir@v2.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### tempy@v2.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### to-regex-range@v5.0.1
+
+License: MIT
+By: Jon Schlinkert
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2015-present, Jon Schlinkert.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### trim@v0.0.1
+
+By: TJ Holowaychuk
+
+----------------------------------------
+
+### trim-trailing-lines@v1.1.4
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2015 Titus Wormer <mailto:tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### trough@v1.0.5
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### tslib@v1.14.1
+
+License: 0BSD
+By: Microsoft Corp.
+Repository: <https://github.com/Microsoft/tslib.git>
+
+> Copyright (c) Microsoft Corporation.
+> 
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted.
+> 
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+> REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+> AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+> INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+> LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+> OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+> PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### tsutils@v3.21.0
+
+License: MIT
+By: Klaus Meinhardt
+Repository: <https://github.com/ajafff/tsutils>
+
+> The MIT License (MIT)
+> 
+> Copyright (c) 2017 Klaus Meinhardt
+> 
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+> 
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+> 
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### typescript@v5.0.2
+
+License: Apache-2.0
+By: Microsoft Corp.
+Repository: <https://github.com/Microsoft/TypeScript.git>
+
+> Apache License
+> 
+> Version 2.0, January 2004
+> 
+> http://www.apache.org/licenses/ 
+> 
+> TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+> 
+> 1. Definitions.
+> 
+> "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+> 
+> "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+> 
+> "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+> 
+> "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+> 
+> "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+> 
+> "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+> 
+> "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+> 
+> "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+> 
+> "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+> 
+> "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+> 
+> 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+> 
+> 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+> 
+> 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+> 
+> You must give any other recipients of the Work or Derivative Works a copy of this License; and
+> 
+> You must cause any modified files to carry prominent notices stating that You changed the files; and
+> 
+> You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
+> 
+> If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+> 
+> 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+> 
+> 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+> 
+> 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+> 
+> 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+> 
+> 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+> 
+> END OF TERMS AND CONDITIONS
+
+----------------------------------------
+
+### unherit@v1.1.3
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### unified@v9.2.1
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### uniq@v1.0.1
+
+License: MIT
+By: Mikola Lysenko
+Repository: <git://github.com/mikolalysenko/uniq.git>
+
+> The MIT License (MIT)
+>
+> Copyright (c) 2013 Mikola Lysenko
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### unique-string@v3.0.0
+
+License: MIT
+By: Sindre Sorhus
+
+> MIT License
+>
+> Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### unist-util-is@v4.1.0
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT license)
+>
+> Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### unist-util-remove-position@v2.0.1
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### unist-util-stringify-position@v2.0.3
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### unist-util-visit@v2.0.3
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### unist-util-visit-parents@v3.1.1
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### vfile@v4.2.1
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2015 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### vfile-location@v3.2.0
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### vfile-message@v2.0.4
+
+License: MIT
+By: Titus Wormer
+
+> (The MIT License)
+>
+> Copyright (c) 2017 Titus Wormer <tituswormer@gmail.com>
+>
+> Permission is hereby granted, free of charge, to any person obtaining
+> a copy of this software and associated documentation files (the
+> 'Software'), to deal in the Software without restriction, including
+> without limitation the rights to use, copy, modify, merge, publish,
+> distribute, sublicense, and/or sell copies of the Software, and to
+> permit persons to whom the Software is furnished to do so, subject to
+> the following conditions:
+>
+> The above copyright notice and this permission notice shall be
+> included in all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+> MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+> CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+> TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+> SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+----------------------------------------
+
+### vnopts@v1.0.2
+
+License: MIT
+By: Ika
+
+> MIT License
+>
+> Copyright (c) Ika <ikatyang@gmail.com> (https://github.com/ikatyang)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+----------------------------------------
+
+### wcwidth@v1.0.1
+
+License: MIT
+By: Tim Oxley
+Repository: <git+https://github.com/timoxley/wcwidth.git>
+
+> wcwidth.js: JavaScript Portng of Markus Kuhn's wcwidth() Implementation
+> =======================================================================
+>
+> Copyright (C) 2012 by Jun Woong.
+>
+> This package is a JavaScript porting of `wcwidth()` implementation
+> [by Markus Kuhn](http://www.cl.cam.ac.uk/~mgk25/ucs/wcwidth.c).
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy of
+> this software and associated documentation files (the "Software"), to deal in
+> the Software without restriction, including without limitation the rights to
+> use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+> of the Software, and to permit persons to whom the Software is furnished to do
+> so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+>
+> THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES,
+> INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
+> FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR
+> OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+> EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+> PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
+> BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+> IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+> ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+> POSSIBILITY OF SUCH DAMAGE.
+
+----------------------------------------
+
+### which@v2.0.2
+
+License: ISC
+By: Isaac Z. Schlueter
+Repository: <git://github.com/isaacs/node-which.git>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### wrappy@v1.0.2
+
+License: ISC
+By: Isaac Z. Schlueter
+Repository: <https://github.com/npm/wrappy>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### xtend@v4.0.2
+
+License: MIT
+By: Raynos
+
+> The MIT License (MIT)
+> Copyright (c) 2012-2014 Raynos.
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in
+> all copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+> THE SOFTWARE.
+
+----------------------------------------
+
+### yallist@v2.1.2
+
+License: ISC
+By: Isaac Z. Schlueter
+Repository: <git+https://github.com/isaacs/yallist.git>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### yallist@v4.0.0
+
+License: ISC
+By: Isaac Z. Schlueter
+Repository: <git+https://github.com/isaacs/yallist.git>
+
+> The ISC License
+>
+> Copyright (c) Isaac Z. Schlueter and Contributors
+>
+> Permission to use, copy, modify, and/or distribute this software for any
+> purpose with or without fee is hereby granted, provided that the above
+> copyright notice and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+> WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+> MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+> ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+> WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+> ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+> IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+----------------------------------------
+
+### yaml@v1.10.2
+
+License: ISC
+By: Eemeli Aro
+
+> Copyright 2018 Eemeli Aro <eemeli@gmail.com>
+>
+> Permission to use, copy, modify, and/or distribute this software for any purpose
+> with or without fee is hereby granted, provided that the above copyright notice
+> and this permission notice appear in all copies.
+>
+> THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+> REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+> FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+> INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+> OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+> TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+> THIS SOFTWARE.
+
+----------------------------------------
+
+### yaml-unist-parser@v1.3.1
+
+License: MIT
+By: Ika
+
+> MIT License
+>
+> Copyright (c) Ika <ikatyang@gmail.com> (https://github.com/ikatyang)
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+========================================================================
+
+prop-types 15.8.1
+--
+MIT License
+
+Copyright (c) 2013-present, Facebook, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+pubsub-js 1.9.3
+--
+The MIT License (MIT)
+=====================
+
+Copyright © `2010` [Morgan Roderick](https://roderick.dk), [http://roderick.dk/](https://roderick.dk) <[morgan@roderick.dk](mailto:morgan@roderick.dk)>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+punycode 1.3.2
+--
+Copyright Mathias Bynens <https://mathiasbynens.be/>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+querystring 0.2.0
+--
+Copyright 2012 Irakli Gozalishvili. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+
+========================================================================
+
+rc-align 2.4.5
+--
+The MIT License (MIT)
+
+Copyright (c) 2014-present yiminghe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+rc-animate 2.11.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2014-present yiminghe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+rc-slider 8.6.0
+--
+The MIT License (MIT)
+Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+rc-tooltip 3.7.3
+--
+The MIT License (MIT)
+Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+rc-trigger 2.6.5
+--
+The MIT License (MIT)
+Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+rc-util 4.21.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2014-present yiminghe
+Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+re-reselect 4.0.1
+--
+Copyright (c) Andrea Carraro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+re-resizable 6.9.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2018 @bokuweb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react 18.1.0
+--
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-contexify 6.0.0
+--
+MIT License
+
+Copyright (c) 2020 Fadi Khadra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-dnd 16.0.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2016 Dan Abramov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-dnd-html5-backend 16.0.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Dan Abramov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-dom 18.1.0
+--
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-fast-compare 3.2.0
+--
+MIT License
+
+Copyright (c) 2018 Formidable Labs
+Copyright (c) 2017 Evgeny Poberezkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-helmet 6.1.0
+--
+Copyright (c) 2015 NFL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-highlight-words 0.17.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Treasure Data
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-hot-loader 4.12.12
+--
+MIT License
+
+Copyright (c) 2016 Dan Abramov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-input-autosize 2.2.2
+--
+The MIT License (MIT)
+
+Copyright (c) 2018 Jed Watson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-is 16.13.1
+--
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-layout-effect 1.0.5
+--
+MIT License
+
+Copyright (c) Alec Larson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-lifecycles-compat 3.0.4
+--
+MIT License
+
+Copyright (c) 2013-present, Facebook, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-onclickoutside 6.9.0
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+react-popper 2.2.3
+--
+The MIT License (MIT)
+
+Copyright (c) 2018 React Popper authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-property 1.0.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+react-remove-scroll 2.5.5
+--
+MIT License
+
+Copyright (c) 2017 Anton Korzunov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-remove-scroll-bar 2.3.4
+--
+Copyright Anton Korzunov <thekashey@gmail.com>; licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+react-router 6.16.0
+--
+MIT License
+
+Copyright (c) React Training LLC 2015-2019
+Copyright (c) Remix Software Inc. 2020-2021
+Copyright (c) Shopify Inc. 2022-2023
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-router-dom 6.16.0
+--
+MIT License
+
+Copyright (c) React Training LLC 2015-2019
+Copyright (c) Remix Software Inc. 2020-2021
+Copyright (c) Shopify Inc. 2022-2023
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-select 3.1.0
+--
+Copyright Jed Watson; licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+react-side-effect 2.1.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Dan Abramov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-style-singleton 2.2.1
+--
+Copyright Anton Korzunov (thekashey@gmail.com); licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+react-timeago 7.1.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2014 Naman Goel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-use-gesture 6.0.2
+--
+Copyright (c) 2018-present Paul Henschel <drcmda@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-virtualized-auto-sizer 1.0.2
+--
+Copyright Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/); licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+react-virtuoso 4.6.2
+--
+MIT License
+
+Copyright (c) 2020 Petyo Ivanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-vtree 2.0.0
+--
+MIT License
+
+Copyright (c) 2018-present Vladimir Rindevich
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+react-window 1.8.7
+--
+The MIT License (MIT)
+
+Copyright (c) 2018 Brian Vaughn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+readable-stream 3.6.0
+--
+Node.js is licensed for use as follows:
+
+"""
+Copyright Node.js contributors. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+"""
+
+This license applies to parts of Node.js originating from the
+https://github.com/joyent/node repository:
+
+"""
+Copyright Joyent, Inc. and other Node contributors. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+"""
+
+========================================================================
+
+redux 4.2.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2015-present Dan Abramov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+regexp.prototype.flags 1.5.0
+--
+The MIT License (MIT)
+
+Copyright (C) 2014 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+regexpp 2.0.1
+--
+MIT License
+
+Copyright (c) 2018 Toru Nagashima
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+reselect 4.1.7
+--
+The MIT License (MIT)
+
+Copyright (c) 2015-2018 Reselect Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+resize-observer-polyfill 1.5.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2016 Denis Rul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+resolve 2.0.0-next.3
+--
+MIT License
+
+Copyright (c) 2012 James Halliday
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+safe-buffer 5.2.1
+--
+The MIT License (MIT)
+
+Copyright (c) Feross Aboukhadijeh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+safe-regex-test 1.0.0
+--
+MIT License
+
+Copyright (c) 2022 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+sanitize-html 2.11.0
+--
+Copyright (c) 2013, 2014, 2015 P'unk Avenue LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+scheduler 0.22.0
+--
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+scroll-into-view-if-needed 2.2.28
+--
+MIT License
+
+Copyright (c) 2017 Stian Didriksen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+semver 7.3.5
+--
+The ISC License
+
+Copyright (c) Isaac Z. Schlueter and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+========================================================================
+
+set-cookie-parser 2.6.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Nathan Friedly <nathan@nfriedly.com> (http://nfriedly.com/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+set-immediate-shim 1.0.1
+--
+Copyright Sindre Sorhus; licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+settle-promise 1.0.0
+--
+Copyright Joe Haddad <timer150@gmail.com>; licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+sha.js 2.4.11
+--
+Copyright (c) 2013-2018 sha.js contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+Copyright (c) 1998 - 2009, Paul Johnston & Contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+Redistributions of source code must retain the above copyright notice, this
+list of conditions and the following disclaimer.
+
+Redistributions in binary form must reproduce the above copyright notice, this
+list of conditions and the following disclaimer in the documentation and/or
+other materials provided with the distribution.
+
+Neither the name of the author nor the names of its contributors may be used to
+endorse or promote products derived from this software without specific prior
+written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+shallowequal 1.1.0
+--
+MIT License
+
+Copyright (c) 2017 Alberto Leal <mailforalberto@gmail.com> (github.com/dashed)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+side-channel 1.0.4
+--
+MIT License
+
+Copyright (c) 2019 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+slate 0.94.1
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+slate-history 0.93.0
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+slate-react 0.98.4
+--
+Licensed under MIT (https://spdx.org/licenses/MIT.html)
+
+========================================================================
+
+source-map 0.5.6
+--
+Copyright (c) 2009-2011, Mozilla Foundation and contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the names of the Mozilla Foundation nor the names of project
+  contributors may be used to endorse or promote products derived from this
+  software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+source-map-js 1.0.2
+--
+Copyright (c) 2009-2011, Mozilla Foundation and contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the names of the Mozilla Foundation nor the names of project
+  contributors may be used to endorse or promote products derived from this
+  software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+stream-browserify 3.0.0
+--
+MIT License
+
+Copyright (c) James Halliday
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+string-hash 1.1.3
+--
+Copyright The Dark Sky Company; licensed under CC0-1.0 (https://spdx.org/licenses/CC0-1.0.html)
+
+========================================================================
+
+string.prototype.matchall 4.0.5
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+string.prototype.trim 1.2.7
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 Jordan Harband
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+string_decoder 1.3.0
+--
+Node.js is licensed for use as follows:
+
+"""
+Copyright Node.js contributors. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+"""
+
+This license applies to parts of Node.js originating from the
+https://github.com/joyent/node repository:
+
+"""
+Copyright Joyent, Inc. and other Node contributors. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+"""
+
+========================================================================
+
+strip-ansi 6.0.0
+--
+MIT License
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+style-loader 0.18.2
+--
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+style-to-object 0.3.0
+--
+The MIT License (MIT)
+
+Copyright (c) 2017 Menglin "Mark" Xu <mark@remarkablemark.org>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+style-vendorizer 2.2.3
+--
+The MIT License (MIT)
+
+Copyright (c) 2020-2022 Kristóf Poduszló
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+stylis 4.0.10
+--
+MIT License
+
+Copyright (c) 2016-present Sultan Tarimo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+supports-color 5.5.0
+--
+MIT License
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+textextensions 5.14.0
+--
+<!-- LICENSEFILE/ -->
+
+<h1>License</h1>
+
+Unless stated otherwise all works are:
+
+<ul><li>Copyright &copy; 2013+ <a href="http://bevry.me">Bevry Pty Ltd</a></li></ul>
+
+and licensed under:
+
+<ul><li><a href="http://spdx.org/licenses/MIT.html">MIT License</a></li></ul>
+
+<h2>MIT License</h2>
+
+<pre>
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+</pre>
+
+<!-- /LICENSEFILE -->
+
+========================================================================
+
+tippy.js 6.2.6
+--
+MIT License
+
+Copyright (c) 2017-present atomiks
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+to-fast-properties 2.0.0
+--
+MIT License
+
+Copyright (c) 2014 Petka Antonov
+              2015 Sindre Sorhus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+tslib 2.6.2
+--
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+
+========================================================================
+
+type-check 0.3.2
+--
+Copyright (c) George Zahariev
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+typescript 4.6.4
+--
+Apache License
+
+Version 2.0, January 2004
+
+http://www.apache.org/licenses/ 
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+
+You must give any other recipients of the Work or Derivative Works a copy of this License; and
+
+You must cause any modified files to carry prominent notices stating that You changed the files; and
+
+You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
+
+If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+========================================================================
+
+uri-js 4.4.1
+--
+Copyright 2011 Gary Court. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1.	Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2.	Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY GARY COURT "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GARY COURT OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+The views and conclusions contained in the software and documentation are those of the authors and should not be interpreted as representing official policies, either expressed or implied, of Gary Court.
+
+========================================================================
+
+url 0.11.0
+--
+The MIT License (MIT)
+
+Copyright Joyent, Inc. and other Node contributors.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+url-join 4.0.1
+--
+MIT License
+
+Copyright (c) 2015 José F. Romaniello
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+use-callback-ref 1.3.0
+--
+MIT License
+
+Copyright (c) 2017 Anton Korzunov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+use-context-selector 1.3.9
+--
+The MIT License (MIT)
+
+Copyright (c) 2019-2021 Daishi Kato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+========================================================================
+
+use-memo-one 1.1.2
+--
+MIT License
+
+Copyright (c) 2019 Alexander Reardon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+use-sidecar 1.1.2
+--
+MIT License
+
+Copyright (c) 2017 Anton Korzunov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+use-sync-external-store 1.2.0
+--
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+util 0.10.4
+--
+Copyright Joyent, Inc. and other Node contributors. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+
+========================================================================
+
+util-deprecate 1.0.2
+--
+(The MIT License)
+
+Copyright (c) 2014 Nathan Rajlich <nathan@tootallnate.net>
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+uuid 8.3.2
+--
+The MIT License (MIT)
+
+Copyright (c) 2010-2020 Robert Kieffer and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+validate-npm-package-name 3.0.0
+--
+Copyright (c) 2015, npm, Inc
+
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+========================================================================
+
+warning 3.0.0
+--
+BSD License
+
+For React software
+
+Copyright (c) 2013-2015, Facebook, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+ * Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+ * Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+ * Neither the name Facebook nor the names of its contributors may be used to
+   endorse or promote products derived from this software without specific
+   prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+========================================================================
+
+worktop 0.7.3
+--
+MIT License
+
+Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+========================================================================
+
+xstate 4.23.1
+--
+The MIT License (MIT)
+
+Copyright (c) 2015 David Khourshid
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+yallist 4.0.0
+--
+The ISC License
+
+Copyright (c) Isaac Z. Schlueter and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+========================================================================
+
+yjs 13.6.8
+--
+The MIT License (MIT)
+
+Copyright (c) 2014
+  - Kevin Jahns <kevin.jahns@rwth-aachen.de>.
+  - Chair of Computer Science 5 (Databases & Information Systems), RWTH Aachen University, Germany
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+zustand 4.1.5
+--
+MIT License
+
+Copyright (c) 2019 Paul Henschel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+========================================================================
+
+microsoft/vscode 1.91.1
+--
+MIT License
+
+Copyright (c) 2015 - present Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file

From 31d2174817569da3facd27fc01a1362465731157 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Mon, 16 Sep 2024 11:50:42 +0100
Subject: [PATCH 025/272] fix(editor) Reparenting sets the elements to
 re-render correctly. (#6361)

- `applyGridReparent` invokes `setElementsToRerenderCommand`.
- `baseFlexReparentToAbsoluteStrategy` invokes
`setElementsToRerenderCommand`.
---
 .../strategies/flex-reparent-to-absolute-strategy.tsx        | 5 +++++
 .../canvas-strategies/strategies/grid-reparent-strategy.tsx  | 2 ++
 2 files changed, 7 insertions(+)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-absolute-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-absolute-strategy.tsx
index b36ceb998322..60941a9865e5 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-absolute-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-absolute-strategy.tsx
@@ -1,6 +1,7 @@
 import { canvasPoint } from '../../../../core/shared/math-utils'
 import type { EditorStatePatch } from '../../../editor/store/editor-state'
 import { foldAndApplyCommandsInner } from '../../commands/commands'
+import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
 import { updateFunctionCommand } from '../../commands/update-function-command'
 import { ParentBounds } from '../../controls/parent-bounds'
 import { ParentOutlines } from '../../controls/parent-outlines'
@@ -104,6 +105,10 @@ export function baseFlexReparentToAbsoluteStrategy(
               [
                 ...placeholderCommands.commands,
                 ...escapeHatchCommands,
+                setElementsToRerenderCommand([
+                  newParent.intendedParentPath,
+                  ...filteredSelectedElements,
+                ]),
                 updateFunctionCommand(
                   'always',
                   (editorState, commandLifecycle): Array<EditorStatePatch> => {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 6af2b2f095a9..24bb761a39f2 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -49,6 +49,7 @@ import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helper
 import { getReparentOutcome, pathToReparent } from './reparent-utils'
 import { flattenSelection } from './shared-move-strategies-helpers'
 import type { GridCellCoordinates } from './grid-cell-bounds'
+import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
 
 export function gridReparentStrategy(
   reparentTarget: ReparentTarget,
@@ -258,6 +259,7 @@ export function applyGridReparent(
             updateSelectedViews('always', newPaths),
             setCursorCommand(CSSCursor.Reparent),
             showGridControls('mid-interaction', reparentTarget.newParent.intendedParentPath),
+            setElementsToRerenderCommand(elementsToRerender),
           ],
           {
             elementsToRerender: elementsToRerender,

From c7d1524646159f347efb45135054a26a9c09c4b8 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 16 Sep 2024 16:42:15 +0300
Subject: [PATCH 026/272] feat(grid): advanced grid controls (#6354)

This PR adds advanced grid controls:
* add inspector modal for advanced controls
* justify + Align items - as chain controls
* justify + Align content - as dropdowns
* adding the ability to unset by clicking on the same button

<video
src="https://github.com/user-attachments/assets/17fc9368-ad77-4802-9f50-faa0c798136a"></video>

Reviewers: the main logic is in
[`editor/src/components/inspector/controls/advanced-grid-modal.tsx`](https://github.com/concrete-utopia/utopia/pull/6354/files#diff-0c658c76e054ebe3b417768607e4f5b50552cef5825e33d0cf694a966a04bc36)

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode
---
 .../components/canvas/design-panel-root.tsx   | 173 ++++++-----
 editor/src/components/canvas/dom-walker.ts    |   2 +-
 .../store-deep-equality-instances-3.spec.ts   |  14 +-
 .../add-remove-layout-system-control.tsx      | 136 ++++++---
 .../components/inspector/common/css-utils.ts  |  13 +-
 .../controls/advanced-grid-modal.tsx          | 280 ++++++++++++++++++
 .../components/inspector/controls/control.ts  |   1 +
 .../controls/option-chain-control.tsx         |   6 +-
 .../flex-container-controls.tsx               |   4 +-
 .../package-manager/utopia-api-typings.ts     |   4 +-
 editor/src/core/layout/layout-helpers-new.ts  |   1 +
 editor/src/core/shared/element-template.ts    |   4 +-
 editor/src/uuiui/radix-components.tsx         |  11 +-
 editor/src/uuiui/styles/theme/utopia-theme.ts |   3 +-
 utopia-api/src/layout/flex.ts                 |   2 +-
 utopia-api/src/layout/layout.ts               |   2 +-
 16 files changed, 520 insertions(+), 136 deletions(-)
 create mode 100644 editor/src/components/inspector/controls/advanced-grid-modal.tsx

diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
index cfd85994fbef..5852f12f0e23 100644
--- a/editor/src/components/canvas/design-panel-root.tsx
+++ b/editor/src/components/canvas/design-panel-root.tsx
@@ -171,95 +171,116 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
 
   const allowedToEdit = useAllowedToEditProject()
 
+  const designPanelRef = React.useRef<HTMLDivElement>(null)
+
   if (!isRightMenuExpanded) {
     return null
   }
 
+  const panelWidth = designPanelRef.current?.offsetWidth ?? 0
+  const panelHeight = designPanelRef.current?.offsetHeight ?? 0
+
   return (
-    <FlexColumn
-      style={{
-        flex: 1,
-        overflow: 'hidden',
-        backgroundColor: colorTheme.inspectorBackground.value,
-        borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
-        boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
-      }}
-    >
-      <TitleBarUserProfile panelData={props.panelData} />
-      <FlexRow
+    <DesignPanelContext.Provider value={{ panelWidth, panelHeight }}>
+      <FlexColumn
+        ref={designPanelRef}
         style={{
-          marginBottom: 10,
-          gap: 2,
-          alignSelf: 'stretch',
-          flexShrink: 0,
-          overflowX: 'scroll',
+          flex: 1,
+          overflow: 'hidden',
+          backgroundColor: colorTheme.inspectorBackground.value,
+          borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
+          boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
         }}
-        css={undefined}
       >
-        <MenuTab
-          label={'Inspector'}
-          selected={selectedTab === RightMenuTab.Inspector}
-          onClick={onClickInspectorTab}
-        />
-        {when(
-          allowedToEdit,
-          <>
-            {when(
-              IS_TEST_ENVIRONMENT,
-              <MenuTab
-                label={'Insert'}
-                selected={selectedTab === RightMenuTab.Insert}
-                onClick={onClickInsertTab}
-              />,
-            )}
-          </>,
-        )}
-        {when(
-          canComment,
+        <TitleBarUserProfile panelData={props.panelData} />
+        <FlexRow
+          style={{
+            marginBottom: 10,
+            gap: 2,
+            alignSelf: 'stretch',
+            flexShrink: 0,
+            overflowX: 'scroll',
+          }}
+          css={undefined}
+        >
           <MenuTab
-            testId='comments-tab'
-            label={'Comments'}
-            selected={selectedTab === RightMenuTab.Comments}
-            onClick={onClickCommentsTab}
-          />,
-        )}
-        <MenuTab
-          label={'Settings'}
-          selected={selectedTab === RightMenuTab.Settings}
-          onClick={onClickSettingsTab}
-        />
-        {when(
-          isFeatureEnabled('Roll Your Own'),
+            label={'Inspector'}
+            selected={selectedTab === RightMenuTab.Inspector}
+            onClick={onClickInspectorTab}
+          />
+          {when(
+            allowedToEdit,
+            <>
+              {when(
+                IS_TEST_ENVIRONMENT,
+                <MenuTab
+                  label={'Insert'}
+                  selected={selectedTab === RightMenuTab.Insert}
+                  onClick={onClickInsertTab}
+                />,
+              )}
+            </>,
+          )}
+          {when(
+            canComment,
+            <MenuTab
+              testId='comments-tab'
+              label={'Comments'}
+              selected={selectedTab === RightMenuTab.Comments}
+              onClick={onClickCommentsTab}
+            />,
+          )}
           <MenuTab
-            label={'RYO'}
-            selected={selectedTab === RightMenuTab.RollYourOwn}
-            onClick={onClickRollYourOwnTab}
-          />,
-        )}
-      </FlexRow>
-      <SimpleFlexRow
-        className='Inspector-entrypoint'
-        id='inspector-root'
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          flexGrow: 1,
-          position: 'relative',
-          color: colorTheme.fg1.value,
-          overflowY: 'scroll',
-          backgroundColor: colorTheme.inspectorBackground.value,
-        }}
-      >
-        {when(selectedTab === RightMenuTab.Inspector, <InspectorEntryPoint />)}
-        {when(selectedTab === RightMenuTab.Settings, <SettingsPane />)}
-        {when(selectedTab === RightMenuTab.Comments, <CommentsPane />)}
-        {when(selectedTab === RightMenuTab.RollYourOwn, <RollYourOwnFeaturesPane />)}
-      </SimpleFlexRow>
-      <CanvasStrategyInspector />
-    </FlexColumn>
+            label={'Settings'}
+            selected={selectedTab === RightMenuTab.Settings}
+            onClick={onClickSettingsTab}
+          />
+          {when(
+            isFeatureEnabled('Roll Your Own'),
+            <MenuTab
+              label={'RYO'}
+              selected={selectedTab === RightMenuTab.RollYourOwn}
+              onClick={onClickRollYourOwnTab}
+            />,
+          )}
+        </FlexRow>
+        <SimpleFlexRow
+          className='Inspector-entrypoint'
+          id='inspector-root'
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            flexGrow: 1,
+            position: 'relative',
+            color: colorTheme.fg1.value,
+            overflowY: 'scroll',
+            backgroundColor: colorTheme.inspectorBackground.value,
+          }}
+        >
+          {when(selectedTab === RightMenuTab.Inspector, <InspectorEntryPoint />)}
+          {when(selectedTab === RightMenuTab.Settings, <SettingsPane />)}
+          {when(selectedTab === RightMenuTab.Comments, <CommentsPane />)}
+          {when(selectedTab === RightMenuTab.RollYourOwn, <RollYourOwnFeaturesPane />)}
+        </SimpleFlexRow>
+        <CanvasStrategyInspector />
+      </FlexColumn>
+    </DesignPanelContext.Provider>
   )
 })
 
+// a context provider for the design panel measurements
+export const DesignPanelContext = React.createContext<{
+  panelWidth: number
+  panelHeight: number
+}>({
+  panelWidth: 0,
+  panelHeight: 0,
+})
+
+export const useDesignPanelContext = () => {
+  return React.useContext(DesignPanelContext)
+}
+
 interface CodeEditorPaneProps {
   panelData: StoredPanel
   small: boolean
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 9a0eae756546..0051199c8df8 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -681,7 +681,7 @@ function getSpecialMeasurements(
   const parentTextDirection = eitherToMaybe(parseDirection(parentElementStyle?.direction, null))
 
   const justifyContent = getFlexJustifyContent(elementStyle.justifyContent)
-  const alignContent = getFlexAlignment(elementStyle.alignContent)
+  const alignContent = getFlexJustifyContent(elementStyle.alignContent)
   const alignItems = getFlexAlignment(elementStyle.alignItems)
 
   const margin = applicative4Either(
diff --git a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
index 808524bc5a1d..30b51566aba5 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
@@ -265,7 +265,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     gap: 11,
     flexDirection: 'column',
     justifyContent: 'center',
-    alignContent: 'auto',
+    alignContent: null,
     alignItems: 'auto',
     htmlElementName: 'div',
     renderedChildrenCount: 10,
@@ -384,7 +384,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     gap: 11,
     flexDirection: 'column',
     justifyContent: 'center',
-    alignContent: 'auto',
+    alignContent: null,
     alignItems: 'auto',
     htmlElementName: 'div',
     renderedChildrenCount: 10,
@@ -558,7 +558,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       gap: 11,
       flexDirection: 'column',
       justifyContent: 'center',
-      alignContent: 'auto',
+      alignContent: null,
       alignItems: 'auto',
       htmlElementName: 'div',
       renderedChildrenCount: 10,
@@ -709,7 +709,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       gap: 11,
       flexDirection: 'column',
       justifyContent: 'center',
-      alignContent: 'auto',
+      alignContent: null,
       alignItems: 'auto',
       htmlElementName: 'div',
       renderedChildrenCount: 10,
@@ -885,7 +885,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         gap: 11,
         flexDirection: 'column',
         justifyContent: 'center',
-        alignContent: 'auto',
+        alignContent: null,
         alignItems: 'auto',
         htmlElementName: 'div',
         renderedChildrenCount: 10,
@@ -1038,7 +1038,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         gap: 11,
         flexDirection: 'column',
         justifyContent: 'center',
-        alignContent: 'auto',
+        alignContent: null,
         alignItems: 'auto',
         htmlElementName: 'div',
         renderedChildrenCount: 10,
@@ -1191,7 +1191,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         gap: 11,
         flexDirection: 'column',
         justifyContent: 'center',
-        alignContent: 'auto',
+        alignContent: null,
         alignItems: 'auto',
         htmlElementName: 'div',
         renderedChildrenCount: 10,
diff --git a/editor/src/components/inspector/add-remove-layout-system-control.tsx b/editor/src/components/inspector/add-remove-layout-system-control.tsx
index 26499eb80cef..9ddf99588922 100644
--- a/editor/src/components/inspector/add-remove-layout-system-control.tsx
+++ b/editor/src/components/inspector/add-remove-layout-system-control.tsx
@@ -15,10 +15,16 @@ import { executeFirstApplicableStrategy } from './inspector-strategies/inspector
 import { useDispatch } from '../editor/store/dispatch-context'
 import { NO_OP, assertNever } from '../../core/shared/utils'
 import type { DropdownMenuItem } from '../../uuiui/radix-components'
-import { DropdownMenu, regularDropdownMenuItem } from '../../uuiui/radix-components'
+import {
+  DropdownMenu,
+  regularDropdownMenuItem,
+  separatorDropdownMenuItem,
+} from '../../uuiui/radix-components'
 import { stripNulls } from '../../core/shared/array-utils'
 import { layoutSystemSelector } from './flex-section'
-import { optionalMap } from '../../core/shared/optional-utils'
+import { AdvancedGridModal } from './controls/advanced-grid-modal'
+import { when } from '../../utils/react-conditionals'
+import { useDesignPanelContext } from '../canvas/design-panel-root'
 
 export const AddRemoveLayoutSystemControlTestId = (): string => 'AddRemoveLayoutSystemControlTestId'
 export const AddFlexLayoutOptionId = 'add-flex-layout'
@@ -27,7 +33,19 @@ export const RemoveLayoutSystemOptionId = 'remove-layout-system'
 
 interface AddRemoveLayoutSystemControlProps {}
 
+// adjusting the modal position to have some space from the left edge of the design panel
+const X_OFFSET = 20
+const Y_OFFSET = 20
+
 export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemControlProps>(() => {
+  const [popupOpen, setPopupOpen] = React.useState(false)
+  const closePopup = React.useCallback(() => {
+    setPopupOpen(false)
+  }, [])
+  const openPopup = React.useCallback(() => {
+    setPopupOpen(true)
+  }, [])
+
   const layoutSystem = useEditorState(
     Substores.metadata,
     layoutSystemSelector,
@@ -87,41 +105,71 @@ export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemCont
 
   const colorTheme = useColorTheme()
 
-  const addLayoutSystemOpenerButton = React.useCallback(
-    () => (
-      <SquareButton highlight onClick={NO_OP}>
-        {layoutSystem == null ? <Icons.SmallPlus /> : <Icons.Threedots />}
+  const addLayoutSystemOpenerButton = React.useCallback(() => {
+    return (
+      <SquareButton highlight onClick={NO_OP} primary={popupOpen}>
+        {layoutSystem == null ? (
+          <Icons.SmallPlus />
+        ) : (
+          <Icons.Threedots color={popupOpen ? 'white' : 'main'} />
+        )}
       </SquareButton>
-    ),
-    [layoutSystem],
-  )
+    )
+  }, [layoutSystem, popupOpen])
 
-  const addLayoutSystemMenuDropdownItems = React.useMemo(
-    (): DropdownMenuItem[] =>
-      stripNulls([
-        regularDropdownMenuItem({
-          id: AddFlexLayoutOptionId,
-          label: 'Convert to Flex',
-          onSelect: addFlexLayoutSystem,
-        }),
-        regularDropdownMenuItem({
-          id: AddGridLayoutOptionId,
-          label: 'Convert to Grid',
-          onSelect: addGridLayoutSystem,
-        }),
-        optionalMap(
-          () =>
-            regularDropdownMenuItem({
-              id: RemoveLayoutSystemOptionId,
-              label: 'Remove layout system',
-              onSelect: removeLayoutSystem,
-              danger: true,
-            }),
-          layoutSystem,
-        ),
-      ]),
-    [addFlexLayoutSystem, addGridLayoutSystem, layoutSystem, removeLayoutSystem],
-  )
+  const addLayoutSystemMenuDropdownItems = React.useMemo((): DropdownMenuItem[] => {
+    const gridItems: DropdownMenuItem[] = [
+      regularDropdownMenuItem({
+        id: 'more-settings',
+        label: 'Advanced',
+        onSelect: openPopup,
+      }),
+      regularDropdownMenuItem({
+        id: AddFlexLayoutOptionId,
+        label: 'Convert to Flex',
+        onSelect: addFlexLayoutSystem,
+      }),
+      separatorDropdownMenuItem('dropdown-separator'),
+      regularDropdownMenuItem({
+        id: RemoveLayoutSystemOptionId,
+        label: 'Remove Grid',
+        onSelect: removeLayoutSystem,
+        danger: true,
+      }),
+    ]
+
+    const flexItems: DropdownMenuItem[] = [
+      regularDropdownMenuItem({
+        id: AddGridLayoutOptionId,
+        label: 'Convert to Grid',
+        onSelect: addGridLayoutSystem,
+      }),
+      separatorDropdownMenuItem('dropdown-separator'),
+      regularDropdownMenuItem({
+        id: RemoveLayoutSystemOptionId,
+        label: 'Remove Flex',
+        onSelect: removeLayoutSystem,
+        danger: true,
+      }),
+    ]
+
+    const noLayoutItems: DropdownMenuItem[] = [
+      regularDropdownMenuItem({
+        id: AddFlexLayoutOptionId,
+        label: 'Flex',
+        onSelect: addFlexLayoutSystem,
+      }),
+      regularDropdownMenuItem({
+        id: AddGridLayoutOptionId,
+        label: 'Grid',
+        onSelect: addGridLayoutSystem,
+      }),
+    ]
+
+    return stripNulls(
+      layoutSystem === 'grid' ? gridItems : layoutSystem === 'flex' ? flexItems : noLayoutItems,
+    )
+  }, [addFlexLayoutSystem, addGridLayoutSystem, layoutSystem, removeLayoutSystem, openPopup])
 
   const label = () => {
     switch (layoutSystem) {
@@ -136,6 +184,13 @@ export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemCont
     }
   }
 
+  const { panelWidth } = useDesignPanelContext()
+  const modalOffset = React.useMemo(() => {
+    const x = -1 * (panelWidth + X_OFFSET)
+    const y = -1 * Y_OFFSET
+    return { x: x, y: y }
+  }, [panelWidth])
+
   return (
     <InspectorSectionHeader
       css={{
@@ -156,6 +211,17 @@ export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemCont
         }}
       >
         <span style={{ textTransform: 'capitalize', fontSize: '11px' }}>{label()}</span>
+        {when(
+          popupOpen,
+          <AdvancedGridModal
+            id='grid-advanced'
+            testId='grid-advanced'
+            key='grid-advanced'
+            closePopup={closePopup}
+            popupOpen={popupOpen}
+            modalOffset={modalOffset}
+          />,
+        )}
       </FlexRow>
       <div data-testid={AddRemoveLayoutSystemControlTestId()}>
         <DropdownMenu
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index 405a1e1a24a9..2b361ff8d03e 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -4492,7 +4492,8 @@ export interface ParsedCSSProperties {
   flexWrap: FlexWrap
   flexDirection: FlexDirection
   alignItems: FlexAlignment
-  alignContent: FlexAlignment
+  justifyItems: FlexAlignment
+  alignContent: FlexJustifyContent
   justifyContent: FlexJustifyContent
   alignSelf: FlexAlignment
   position: CSSPosition
@@ -4602,7 +4603,8 @@ export const cssEmptyValues: ParsedCSSProperties = {
   flexWrap: FlexWrap.NoWrap,
   flexDirection: 'row',
   alignItems: FlexAlignment.FlexStart,
-  alignContent: FlexAlignment.FlexStart,
+  justifyItems: FlexAlignment.FlexStart,
+  alignContent: FlexJustifyContent.FlexStart,
   justifyContent: FlexJustifyContent.FlexStart,
   padding: {
     paddingTop: {
@@ -4771,7 +4773,8 @@ export const cssParsers: CSSParsers = {
   flexWrap: flexWrapParser,
   flexDirection: parseFlexDirection,
   alignItems: flexAlignmentsParser,
-  alignContent: flexAlignmentsParser,
+  justifyItems: flexAlignmentsParser,
+  alignContent: flexJustifyContentParser,
   justifyContent: flexJustifyContentParser,
   padding: parsePadding,
   paddingTop: parseCSSLengthPercent,
@@ -4848,6 +4851,7 @@ const cssPrinters: CSSPrinters = {
   flexWrap: jsxAttributeValueWithNoComments,
   flexDirection: jsxAttributeValueWithNoComments,
   alignItems: jsxAttributeValueWithNoComments,
+  justifyItems: jsxAttributeValueWithNoComments,
   alignContent: jsxAttributeValueWithNoComments,
   justifyContent: jsxAttributeValueWithNoComments,
   padding: printPaddingAsAttributeValue,
@@ -5526,7 +5530,8 @@ export const trivialDefaultValues: ParsedPropertiesWithNonTrivial = {
   flexWrap: FlexWrap.NoWrap,
   flexDirection: 'row',
   alignItems: FlexAlignment.FlexStart,
-  alignContent: FlexAlignment.FlexStart,
+  justifyItems: FlexAlignment.FlexStart,
+  alignContent: FlexJustifyContent.FlexStart,
   justifyContent: FlexJustifyContent.FlexStart,
   padding: nontrivial,
   paddingTop: {
diff --git a/editor/src/components/inspector/controls/advanced-grid-modal.tsx b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
new file mode 100644
index 000000000000..9f735385a7e8
--- /dev/null
+++ b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
@@ -0,0 +1,280 @@
+import React from 'react'
+import { InspectorModal } from '../widgets/inspector-modal'
+import { FlexColumn, H1, SquareButton, UtopiaStyles } from '../../../uuiui'
+import type { GridRowVariant } from '../widgets/ui-grid-row'
+import { UIGridRow } from '../widgets/ui-grid-row'
+import type { OptionChainOption } from './option-chain-control'
+import { OptionChainControl } from './option-chain-control'
+import { PrettyLabel } from '../sections/layout-section/flex-container-subsection/flex-container-controls'
+import type { InspectorInfo } from '../common/property-path-hooks'
+import { useInspectorLayoutInfo } from '../common/property-path-hooks'
+import {
+  RadixSelect,
+  regularRadixSelectOption,
+  separatorRadixSelectOption,
+} from '../../../uuiui/radix-components'
+import { optionalMap } from '../../../core/shared/optional-utils'
+import type { FlexAlignment } from 'utopia-api/core'
+import { FlexJustifyContent } from 'utopia-api/core'
+
+export interface AdvancedGridModalProps {
+  id: string
+  testId: string
+  popupOpen: boolean
+  closePopup: () => void
+  modalOffset: {
+    x: number
+    y: number
+  }
+}
+
+export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
+  const modalOffset = props.modalOffset ?? { x: 0, y: 0 }
+  const [dropdownOpen, setDropdownOpen] = React.useState({
+    justifyContent: false,
+    alignContent: false,
+  })
+  const toggleJustifyContentDropdown = React.useCallback((state: boolean) => {
+    setDropdownOpen((prev) => ({ ...prev, justifyContent: state }))
+  }, [])
+  const toggleAlignContentDropdown = React.useCallback((state: boolean) => {
+    setDropdownOpen((prev) => ({ ...prev, alignContent: state }))
+  }, [])
+  const closePopup = React.useCallback(() => {
+    if (!dropdownOpen.justifyContent && !dropdownOpen.alignContent) {
+      props.closePopup()
+    }
+  }, [dropdownOpen, props])
+
+  const alignItemsLayoutInfo = useInspectorLayoutInfo('alignItems')
+  const justifyItemsLayoutInfo = useInspectorLayoutInfo('justifyItems')
+  const alignContentLayoutInfo = useInspectorLayoutInfo('alignContent')
+  const justifyContentLayoutInfo = useInspectorLayoutInfo('justifyContent')
+
+  const currentJustifyContentValue = React.useMemo(
+    () => getLayoutInfoValue(justifyContentLayoutInfo),
+    [justifyContentLayoutInfo],
+  )
+
+  const currentAlignContentValue = React.useMemo(
+    () => getLayoutInfoValue(alignContentLayoutInfo),
+    [alignContentLayoutInfo],
+  )
+
+  const currentJustifyItemsValue = React.useMemo(
+    () => getValueOrUnset(justifyItemsLayoutInfo),
+    [justifyItemsLayoutInfo],
+  )
+
+  const currentAlignItemsValue = React.useMemo(
+    () => getValueOrUnset(alignItemsLayoutInfo),
+    [alignItemsLayoutInfo],
+  )
+
+  const contentOptions = [
+    unsetSelectOption,
+    separatorRadixSelectOption(),
+    ...Object.values(FlexJustifyContent).map(selectOption),
+  ]
+
+  const onSubmitJustifyContent = React.useCallback(
+    (value: string) => {
+      if (value === 'unset') {
+        justifyContentLayoutInfo.onUnsetValues()
+      } else {
+        justifyContentLayoutInfo.onSubmitValue(value as FlexJustifyContent)
+      }
+    },
+    [justifyContentLayoutInfo],
+  )
+
+  const onSubmitAlignContent = React.useCallback(
+    (value: string) => {
+      if (value === 'unset') {
+        alignContentLayoutInfo.onUnsetValues()
+      } else {
+        alignContentLayoutInfo.onSubmitValue(value as FlexJustifyContent)
+      }
+    },
+    [alignContentLayoutInfo],
+  )
+
+  const advancedGridModal = (
+    <InspectorModal
+      offsetX={modalOffset.x}
+      offsetY={modalOffset.y}
+      closePopup={closePopup}
+      closePopupOnUnmount={false}
+      outsideClickIgnoreClass={`ignore-react-onclickoutside-${props.id}`}
+      style={{
+        ...UtopiaStyles.popup,
+        minWidth: 230,
+      }}
+    >
+      <FlexColumn>
+        <UIGridRow padded variant='<--------auto-------->||22px|'>
+          <H1>
+            <span style={{ textTransform: 'capitalize', fontSize: '11px' }}>Grid Settings</span>
+          </H1>
+
+          <SquareButton highlight onMouseDown={props.closePopup}>
+            ×
+          </SquareButton>
+        </UIGridRow>
+        <UIGridRow padded variant='<-------------1fr------------->'>
+          <span style={{ fontWeight: 600 }}>Items</span>
+        </UIGridRow>
+
+        <UIGridRow padded variant={rowVariant}>
+          <span>Justify</span>
+          <OptionChainControl
+            id='grid.items.justifyItems'
+            key='grid.items.justifyItems'
+            testId='grid.items.justifyItems'
+            {...justifyItemsLayoutInfo}
+            value={currentJustifyItemsValue}
+            options={justifyItemsOptions}
+          />
+        </UIGridRow>
+        <UIGridRow padded variant={rowVariant}>
+          <span>Align</span>
+          <OptionChainControl
+            id='grid.items.alignItems'
+            key='grid.items.alignItems'
+            testId='grid.items.alignItems'
+            {...alignItemsLayoutInfo}
+            value={currentAlignItemsValue}
+            options={alignItemsOptions}
+          />
+        </UIGridRow>
+        <UIGridRow padded variant='<-------------1fr------------->'>
+          <span style={{ fontWeight: 600 }}>Entire Grid</span>
+        </UIGridRow>
+        <UIGridRow
+          padded
+          variant={rowVariant}
+          className={`ignore-react-onclickoutside-${props.id}`}
+        >
+          <span>Justify</span>
+          <RadixSelect
+            id='grid.justifyContent'
+            value={currentJustifyContentValue ?? unsetSelectOption}
+            options={contentOptions}
+            onValueChange={onSubmitJustifyContent}
+            contentClassName={`ignore-react-onclickoutside-${props.id}`}
+            contentStyle={{
+              zIndex: 1,
+            }}
+            onOpenChange={toggleJustifyContentDropdown}
+          />
+        </UIGridRow>
+        <UIGridRow
+          padded
+          variant={rowVariant}
+          className={`ignore-react-onclickoutside-${props.id}`}
+        >
+          <span>Align</span>
+          <RadixSelect
+            id='grid.alignContent'
+            value={currentAlignContentValue ?? unsetSelectOption}
+            options={contentOptions}
+            onValueChange={onSubmitAlignContent}
+            contentClassName={`ignore-react-onclickoutside-${props.id}`}
+            contentStyle={{
+              zIndex: 1,
+            }}
+            onOpenChange={toggleAlignContentDropdown}
+          />
+        </UIGridRow>
+      </FlexColumn>
+    </InspectorModal>
+  )
+
+  return (
+    <div
+      key={props.id}
+      id={`trigger-${props.id}`}
+      className={`ignore-react-onclickoutside-${props.id}`}
+      data-testid={props.testId}
+    >
+      {props.popupOpen ? advancedGridModal : null}
+    </div>
+  )
+})
+
+AdvancedGridModal.displayName = 'AdvancedGridModal'
+
+const itemsOptions = (alignOrJustify: 'align' | 'justify') =>
+  [
+    {
+      value: 'flex-start',
+      tooltip: PrettyLabel[alignOrJustify === 'justify' ? 'left' : 'top'],
+      icon: {
+        category: `inspector-element`,
+        type: `${alignOrJustify}Items-start`,
+        color: 'secondary',
+        width: 16,
+        height: 16,
+      },
+    },
+    {
+      value: 'center',
+      tooltip: 'Center',
+      icon: {
+        category: `inspector-element`,
+        type: `${alignOrJustify}Items-center`,
+        color: 'secondary',
+        width: 16,
+        height: 16,
+      },
+    },
+    {
+      value: 'flex-end',
+      tooltip: PrettyLabel[alignOrJustify === 'justify' ? 'right' : 'bottom'],
+      icon: {
+        category: `inspector-element`,
+        type: `${alignOrJustify}Items-end`,
+        color: 'secondary',
+        width: 16,
+        height: 16,
+      },
+    },
+    {
+      value: 'stretch',
+      tooltip: 'Stretch',
+      icon: {
+        category: `inspector-element`,
+        type: `${alignOrJustify}Items-stretch`,
+        color: 'secondary',
+        width: 16,
+        height: 16,
+      },
+    },
+  ] as Array<OptionChainOption<string | number>>
+
+const justifyItemsOptions = itemsOptions('justify')
+const alignItemsOptions = itemsOptions('align')
+const rowVariant: GridRowVariant = '|--67px--|<--------1fr-------->'
+
+function selectOption(value: FlexJustifyContent) {
+  return regularRadixSelectOption({
+    label: value.replace('-', ' '),
+    value: value,
+    placeholder: true,
+  })
+}
+
+const unsetSelectOption = regularRadixSelectOption({
+  label: 'unset',
+  value: 'unset',
+  placeholder: true,
+})
+
+const isUnset = (control: InspectorInfo<any>): boolean =>
+  control.controlStatus === 'detected' || control.controlStatus === 'unset'
+
+const getLayoutInfoValue = (control: InspectorInfo<FlexJustifyContent>) =>
+  isUnset(control) ? unsetSelectOption : optionalMap(selectOption, control.value) ?? undefined
+
+const getValueOrUnset = (control: InspectorInfo<FlexAlignment>): string =>
+  isUnset(control) ? 'unset' : control.value
diff --git a/editor/src/components/inspector/controls/control.ts b/editor/src/components/inspector/controls/control.ts
index 316cebc6cd34..7d02aca9defe 100644
--- a/editor/src/components/inspector/controls/control.ts
+++ b/editor/src/components/inspector/controls/control.ts
@@ -32,6 +32,7 @@ export interface DEPRECATEDControlProps<T> {
   readOnly?: boolean
   selected?: boolean
   options?: ReadonlyArray<SelectOption> | ReadonlyArray<OptionChainOption<T>>
+  onUnsetValues?: () => void
   DEPRECATED_controlOptions?:
     | DEPRECATEDGenericControlOptions
     | DEPRECATEDOptionControlOptions
diff --git a/editor/src/components/inspector/controls/option-chain-control.tsx b/editor/src/components/inspector/controls/option-chain-control.tsx
index b65cb235a863..cdcf1b84b9fa 100644
--- a/editor/src/components/inspector/controls/option-chain-control.tsx
+++ b/editor/src/components/inspector/controls/option-chain-control.tsx
@@ -92,9 +92,11 @@ export const OptionChainControl: React.FunctionComponent<
             }}
             value={props.value === option.value}
             // eslint-disable-next-line react/jsx-no-bind
-            onSubmitValue={(value: boolean) => {
-              if (value || option.forceCallOnSubmitValue) {
+            onSubmitValue={(isChecked: boolean) => {
+              if (isChecked || option.forceCallOnSubmitValue) {
                 props.onSubmitValue(option.value)
+              } else {
+                props.onUnsetValues?.()
               }
             }}
           />
diff --git a/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx b/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
index 12d47839dd42..ed42986db729 100644
--- a/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
+++ b/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
@@ -58,7 +58,7 @@ type prettyLabel =
   | 'Horizontal'
   | 'Vertical'
 
-const PrettyLabel: { [K in uglyLabel]: prettyLabel } = {
+export const PrettyLabel: { [K in uglyLabel]: prettyLabel } = {
   left: 'Left',
   center: 'Center',
   right: 'Right',
@@ -71,7 +71,7 @@ const PrettyLabel: { [K in uglyLabel]: prettyLabel } = {
   vertical: 'Vertical',
 }
 
-interface FlexFieldControlProps<T> {
+export interface FlexFieldControlProps<T> {
   value: T
   controlStatus: ControlStatus
   controlStyles: ControlStyles
diff --git a/editor/src/core/es-modules/package-manager/utopia-api-typings.ts b/editor/src/core/es-modules/package-manager/utopia-api-typings.ts
index 0ff2781b6c41..f8e666fc8fdf 100644
--- a/editor/src/core/es-modules/package-manager/utopia-api-typings.ts
+++ b/editor/src/core/es-modules/package-manager/utopia-api-typings.ts
@@ -106,7 +106,7 @@ declare module 'utopia-api/layout/flex' {
   export function getMarginProps(props: FlexElementProps, parentProps: FlexParentProps, index: number, siblingsCount: number): Partial<React.CSSProperties>;
   export interface FlexParentProps {
       flexDirection?: FlexDirection;
-      alignContent?: FlexAlignment;
+      alignContent?: FlexJustifyContent;
       alignItems?: FlexAlignment;
       justifyContent?: FlexJustifyContent;
       flexWrap?: FlexWrap;
@@ -253,7 +253,7 @@ declare module 'utopia-api/layout/layout' {
       flexGrow?: number;
       flexShrink?: number;
       flexDirection?: FlexDirection;
-      alignContent?: FlexAlignment;
+      alignContent?: FlexJustifyContent;
       alignItems?: FlexAlignment;
       justifyContent?: FlexJustifyContent;
       wrap?: FlexWrap;
diff --git a/editor/src/core/layout/layout-helpers-new.ts b/editor/src/core/layout/layout-helpers-new.ts
index de27ec709569..c3329258a2e6 100644
--- a/editor/src/core/layout/layout-helpers-new.ts
+++ b/editor/src/core/layout/layout-helpers-new.ts
@@ -77,6 +77,7 @@ export type StyleLayoutProp =
   | 'flexShrink'
   | 'gap'
   | 'alignItems'
+  | 'justifyItems'
   | 'alignContent'
   | 'justifyContent'
   | 'padding'
diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts
index e26e1e1496e1..63442cce8e72 100644
--- a/editor/src/core/shared/element-template.ts
+++ b/editor/src/core/shared/element-template.ts
@@ -2810,7 +2810,7 @@ export interface SpecialSizeMeasurements {
   gap: number | null
   flexDirection: FlexDirection | null
   justifyContent: FlexJustifyContent | null
-  alignContent: FlexAlignment | null
+  alignContent: FlexJustifyContent | null
   alignItems: FlexAlignment | null
   htmlElementName: string
   renderedChildrenCount: number
@@ -2860,7 +2860,7 @@ export function specialSizeMeasurements(
   gap: number | null,
   flexDirection: FlexDirection | null,
   justifyContent: FlexJustifyContent | null,
-  alignContent: FlexAlignment | null,
+  alignContent: FlexJustifyContent | null,
   alignItems: FlexAlignment | null,
   htmlElementName: string,
   renderedChildrenCount: number,
diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx
index b0baf300de1b..1e5e446bd83d 100644
--- a/editor/src/uuiui/radix-components.tsx
+++ b/editor/src/uuiui/radix-components.tsx
@@ -241,14 +241,21 @@ export const RadixSelect = React.memo(
     value: RegularRadixSelectOption | null
     options: RadixSelectOption[]
     style?: CSSProperties
+    contentStyle?: CSSProperties
     onValueChange?: (value: string) => void
+    contentClassName?: string
+    onOpenChange?: (open: boolean) => void
   }) => {
     const stopPropagation = React.useCallback((e: React.KeyboardEvent) => {
       e.stopPropagation()
     }, [])
 
     return (
-      <Select.Root value={props.value?.value} onValueChange={props.onValueChange}>
+      <Select.Root
+        value={props.value?.value}
+        onValueChange={props.onValueChange}
+        onOpenChange={props.onOpenChange}
+      >
         <Select.Trigger
           style={{
             background: 'transparent',
@@ -278,6 +285,7 @@ export const RadixSelect = React.memo(
         </Select.Trigger>
         <Select.Portal>
           <Select.Content
+            className={props.contentClassName}
             onKeyDown={stopPropagation}
             style={{
               background: colorTheme.black.value,
@@ -286,6 +294,7 @@ export const RadixSelect = React.memo(
               borderRadius: 6,
               color: 'white',
               boxShadow: UtopiaStyles.shadowStyles.high.boxShadow,
+              ...(props.contentStyle ?? {}),
             }}
           >
             <Select.ScrollUpButton>
diff --git a/editor/src/uuiui/styles/theme/utopia-theme.ts b/editor/src/uuiui/styles/theme/utopia-theme.ts
index 69b700155941..e89bafd1aad6 100644
--- a/editor/src/uuiui/styles/theme/utopia-theme.ts
+++ b/editor/src/uuiui/styles/theme/utopia-theme.ts
@@ -162,8 +162,7 @@ const fontStyles = {
 const popup: React.CSSProperties = {
   background: colorTheme.neutralBackground.value,
   boxShadow: shadowStyles.high.boxShadow,
-  paddingTop: 4,
-  paddingBottom: 4,
+  padding: '4px 0',
   borderRadius: 4,
 }
 
diff --git a/utopia-api/src/layout/flex.ts b/utopia-api/src/layout/flex.ts
index 2fd2d1504956..23a2a0df37a6 100644
--- a/utopia-api/src/layout/flex.ts
+++ b/utopia-api/src/layout/flex.ts
@@ -169,7 +169,7 @@ export function getMarginProps(
 
 export interface FlexParentProps {
   flexDirection?: FlexDirection
-  alignContent?: FlexAlignment
+  alignContent?: FlexJustifyContent
   alignItems?: FlexAlignment
   justifyContent?: FlexJustifyContent
   flexWrap?: FlexWrap
diff --git a/utopia-api/src/layout/layout.ts b/utopia-api/src/layout/layout.ts
index a543f34a1632..42dffb17abc6 100644
--- a/utopia-api/src/layout/layout.ts
+++ b/utopia-api/src/layout/layout.ts
@@ -41,7 +41,7 @@ export interface LayoutBaseProps {
   flexShrink?: number
   // flex parent
   flexDirection?: FlexDirection
-  alignContent?: FlexAlignment
+  alignContent?: FlexJustifyContent
   alignItems?: FlexAlignment
   justifyContent?: FlexJustifyContent
   wrap?: FlexWrap

From 043570d3d3a8d3f4409750a5d8f564a33f0f12ce Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Mon, 16 Sep 2024 18:13:47 +0200
Subject: [PATCH 027/272] Fix slider number control performance (#6374)

**Problem:**
When using the slider in the SliderNumber controls (such as the
PromiseCard's BorderRadius in my screenshot) in the component inspector
section, the displayed number updates unbearably slowly.
<img width="653" alt="image"
src="https://github.com/user-attachments/assets/159bac67-2bef-4e4f-bf5e-d5fcfc704687">

The reason is that the slider and number are actually two separate
controls, and the number control only gets its state updated in low
priority mode once the interaction is finished.

**Fix:**
Use a shared local state for the value we immediately set while using
the slider.

**Commit Details:**
- Use `usePropControlledStateV2` as shared local state for the transient
updates

**Bonus mini fixes:**
- wrap RemixNavigationBar in LowPriorityState
- speeding up Tooltip / tippy

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../src/components/editor/canvas-toolbar.tsx  |   5 +-
 .../property-control-controls.tsx             |  31 +++-
 ...performance-regression-tests.spec.tsx.snap | 160 +++++++++---------
 editor/src/uuiui/tooltip.tsx                  | 102 +++++------
 4 files changed, 154 insertions(+), 144 deletions(-)

diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
index d7c42dcc9670..9ebb819f7aa5 100644
--- a/editor/src/components/editor/canvas-toolbar.tsx
+++ b/editor/src/components/editor/canvas-toolbar.tsx
@@ -72,6 +72,7 @@ import {
   keyToString,
   shortcutDetailsWithDefaults,
 } from './shortcut-definitions'
+import { LowPriorityStoreProvider } from './store/store-context-providers'
 
 export const InsertMenuButtonTestId = 'insert-menu-button'
 export const InsertOrEditTextButtonTestId = 'insert-or-edit-text-button'
@@ -579,7 +580,9 @@ export const CanvasToolbar = React.memo(() => {
           )
         : null}
       {/* Live Mode */}
-      {showRemixNavBar ? wrapInSubmenu(<RemixNavigationBar />) : null}
+      <LowPriorityStoreProvider>
+        {showRemixNavBar ? wrapInSubmenu(<RemixNavigationBar />) : null}
+      </LowPriorityStoreProvider>
     </FlexColumn>
   )
 })
diff --git a/editor/src/components/inspector/sections/component-section/property-control-controls.tsx b/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
index 2925f9ba8ee3..3012824768e8 100644
--- a/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
+++ b/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
@@ -1,5 +1,6 @@
 import fastDeepEquals from 'fast-deep-equal'
 import React from 'react'
+import ReactDOM from 'react-dom'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { isRight } from '../../../../core/shared/either'
 import { isJSXElement } from '../../../../core/shared/element-template'
@@ -69,6 +70,7 @@ import type { DEPRECATEDSliderControlOptions } from '../../controls/slider-contr
 import { StringControl } from '../../controls/string-control'
 import { UIGridRow } from '../../widgets/ui-grid-row'
 import { HtmlPreview, ImagePreview } from './property-content-preview'
+import { usePropControlledStateV2 } from '../../common/inspector-utils'
 
 export interface ControlForPropProps<T extends RegularControlDescription> {
   propPath: PropertyPath
@@ -492,9 +494,26 @@ const NumberWithSliderControl = React.memo(
     },
   ) => {
     const { propName, propMetadata, controlDescription } = props
+    const { onTransientSubmitValue, onSubmitValue } = propMetadata
 
     const controlId = `${propName}-slider-property-control`
-    const value = getValueOrUndefinedFromPropMetadata(propMetadata) ?? 0
+    const valueComingFromProps = getValueOrUndefinedFromPropMetadata(propMetadata) ?? 0
+
+    const [valueToShow, setValueToShow] = usePropControlledStateV2(valueComingFromProps)
+
+    const onChangeValue = React.useCallback(
+      (value: any, transient: boolean = false) => {
+        ReactDOM.flushSync(() => {
+          setValueToShow(value)
+        })
+        if (transient) {
+          onTransientSubmitValue(value)
+        } else {
+          onSubmitValue(value, transient)
+        }
+      },
+      [setValueToShow, onTransientSubmitValue, onSubmitValue],
+    )
 
     return (
       <UIGridRow padded={false} variant={'<--------auto-------->|--45px--|'}>
@@ -502,10 +521,10 @@ const NumberWithSliderControl = React.memo(
           key={`${controlId}-slider`}
           id={`${controlId}-slider`}
           testId={`${controlId}-slider`}
-          value={value}
-          onTransientSubmitValue={propMetadata.onTransientSubmitValue}
-          onForcedSubmitValue={propMetadata.onSubmitValue}
-          onSubmitValue={propMetadata.onSubmitValue}
+          value={valueToShow}
+          onTransientSubmitValue={onChangeValue}
+          onForcedSubmitValue={onChangeValue}
+          onSubmitValue={onChangeValue}
           controlStatus={propMetadata.controlStatus}
           controlStyles={propMetadata.controlStyles}
           DEPRECATED_controlOptions={props.controlOptions}
@@ -514,7 +533,7 @@ const NumberWithSliderControl = React.memo(
           id={`${controlId}-number`}
           testId={`${controlId}-number`}
           key={`${controlId}-number`}
-          value={value}
+          value={valueToShow}
           onTransientSubmitValue={propMetadata.onTransientSubmitValue}
           onForcedSubmitValue={propMetadata.onSubmitValue}
           onSubmitValue={propMetadata.onSubmitValue}
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 0bd2ca37513e..911b3ef6a132 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -183,10 +183,10 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
-  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/Icon/img",
   "/div/div/ControlForProp/Symbol(react.memo)()",
@@ -206,11 +206,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
-  "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -232,7 +232,7 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div)):data-testid='editor-fix-problems-button'",
-  "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div)):data-testid='editor-contract-dropdown'",
   "/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div))/div:data-testid='editor-contract-dropdown'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -379,7 +379,7 @@ Array [
   "/div/div//Symbol(react.memo)()",
   "/div/div//Symbol(react.memo)()",
   "/div///Symbol(react.forward_ref)(Styled(div)):data-testid='radius-cycle-mode'",
-  "/div///UtopiaSpiedClass(Tooltip)",
+  "/div///UtopiaSpiedFunctionComponent(Tooltip)",
   "/div///Symbol(react.memo)()",
   "/div///div",
   "//div//Symbol(react.memo)(NumberInput)",
@@ -395,9 +395,9 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input)):data-testid='radius-one'",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input))/input:data-testid='radius-one'",
-  "//div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "//div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(Styled(div))/div:data-testid='radius-cycle-mode'",
   "/div/div//Symbol(react.memo)()",
@@ -462,10 +462,10 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
-  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/ControlForProp/Symbol(react.memo)()",
   "/div/div/ControlForProp/Symbol(react.memo)()",
@@ -484,11 +484,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
-  "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -596,7 +596,7 @@ Array [
   "/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -831,7 +831,7 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div)):data-testid='editor-fix-problems-button'",
-  "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(Styled(div))/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div)):data-testid='editor-contract-dropdown'",
   "/div/EditorContractDropdown/Symbol(react.forward_ref)(Styled(div))/div:data-testid='editor-contract-dropdown'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -978,7 +978,7 @@ Array [
   "/div/div//Symbol(react.memo)()",
   "/div/div//Symbol(react.memo)()",
   "/div///Symbol(react.forward_ref)(Styled(div)):data-testid='radius-cycle-mode'",
-  "/div///UtopiaSpiedClass(Tooltip)",
+  "/div///UtopiaSpiedFunctionComponent(Tooltip)",
   "/div///Symbol(react.memo)()",
   "/div///div",
   "//div//Symbol(react.memo)(NumberInput)",
@@ -994,9 +994,9 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input)):data-testid='radius-one'",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input))/input:data-testid='radius-one'",
-  "//div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "//div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(Styled(div))/div:data-testid='radius-cycle-mode'",
   "/div/div//Symbol(react.memo)()",
@@ -1137,7 +1137,7 @@ Array [
   "/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -1268,16 +1268,16 @@ Array [
   "////UtopiaSpiedExoticType(Symbol(react.provider))",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/UtopiaSpiedFunctionComponent()/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -1412,7 +1412,7 @@ Array [
   "/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -1602,10 +1602,10 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
-  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/ControlForProp/Symbol(react.memo)()",
   "/div/div/ControlForProp/Symbol(react.memo)()",
@@ -1624,11 +1624,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
-  "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -1735,16 +1735,16 @@ Array [
   "/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -1812,10 +1812,10 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
-  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/ControlForProp/Symbol(react.memo)()",
   "/div/div/ControlForProp/Symbol(react.memo)()",
@@ -1834,11 +1834,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
-  "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -1929,7 +1929,7 @@ Array [
   "/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -2041,10 +2041,10 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
-  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/ControlForProp/Symbol(react.memo)()",
   "/div/div/ControlForProp/Symbol(react.memo)()",
@@ -2063,11 +2063,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
-  "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -2132,10 +2132,10 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)",
-  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/ControlForProp/Symbol(react.memo)()",
   "/div/div/ControlForProp/Symbol(react.memo)()",
@@ -2154,11 +2154,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/span",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/UtopiaSpiedFunctionComponent(Tooltip)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/Symbol(react.forward_ref)()/div",
-  "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)()/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div",
@@ -2262,16 +2262,16 @@ Array [
   "////UtopiaSpiedExoticType(Symbol(react.provider))",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/UtopiaSpiedFunctionComponent()/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -2398,7 +2398,7 @@ Array [
   "/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
@@ -2657,16 +2657,16 @@ Array [
   "/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)",
   "/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
-  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
-  "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -2793,7 +2793,7 @@ Array [
   "/TextSubsection/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/TextSubsection/div//Symbol(react.forward_ref)(Styled(div))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedClass(Tooltip)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(Tooltip)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(TextAlignControl)/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
diff --git a/editor/src/uuiui/tooltip.tsx b/editor/src/uuiui/tooltip.tsx
index cd3e281da7f9..477c9f383391 100644
--- a/editor/src/uuiui/tooltip.tsx
+++ b/editor/src/uuiui/tooltip.tsx
@@ -17,63 +17,51 @@ export interface TooltipProps {
   textColor?: string
 }
 
-function tooltipPropsEqual(
-  a: React.PropsWithChildren<TooltipProps>,
-  b: React.PropsWithChildren<TooltipProps>,
-): boolean {
-  return (
-    a == b ||
-    (a.title === b.title &&
-      a.placement === b.placement &&
-      a.disabled === b.disabled &&
-      a.children === b.children)
-  )
-}
+export const Tooltip: React.FunctionComponent<React.PropsWithChildren<TooltipProps>> = (props) => {
+  const backgroundColor = props.backgroundColor ?? colorTheme.neutralInvertedBackground.value
+  const textColor = props.textColor ?? colorTheme.neutralInvertedForeground.value
 
-export class Tooltip extends React.Component<React.PropsWithChildren<TooltipProps>> {
-  shouldComponentUpdate(nextProps: React.PropsWithChildren<TooltipProps>): boolean {
-    return !tooltipPropsEqual(this.props, nextProps)
-  }
+  const css = React.useMemo(
+    () =>
+      ({
+        fontWeight: 400,
+        fontSize: 11,
+        textAlign: 'center',
+        fontFamily:
+          "utopian-inter, -apple-system, BlinkMacSystemFont, Helvetica, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        backgroundColor: `${backgroundColor} !important`,
+        color: `${textColor} !important`,
+        '& .tippy-content': {
+          padding: '4px 8px !important',
+        },
+        '&[data-placement^=top] .tippy-arrow::before': {
+          borderTopColor: `${backgroundColor} !important`,
+        },
+        '&[data-placement^=right] .tippy-arrow::before': {
+          borderRightColor: `${backgroundColor} !important`,
+        },
+        '&[data-placement^=bottom] .tippy-arrow::before': {
+          borderBottomColor: `${backgroundColor} !important`,
+        },
+        '&[data-placement^=left] .tippy-arrow::before': {
+          borderLeftColor: `${backgroundColor} !important`,
+        },
+      } as const),
+    [backgroundColor, textColor],
+  )
 
-  render() {
-    const backgroundColor = this.props.backgroundColor ?? colorTheme.neutralInvertedBackground.value
-    const textColor = this.props.textColor ?? colorTheme.neutralInvertedForeground.value
-    return (
-      <Tippy
-        css={{
-          fontWeight: 400,
-          fontSize: 11,
-          textAlign: 'center',
-          fontFamily:
-            "utopian-inter, -apple-system, BlinkMacSystemFont, Helvetica, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
-          backgroundColor: `${backgroundColor} !important`,
-          color: `${textColor} !important`,
-          '& .tippy-content': {
-            padding: '4px 8px !important',
-          },
-          '&[data-placement^=top] .tippy-arrow::before': {
-            borderTopColor: `${backgroundColor} !important`,
-          },
-          '&[data-placement^=right] .tippy-arrow::before': {
-            borderRightColor: `${backgroundColor} !important`,
-          },
-          '&[data-placement^=bottom] .tippy-arrow::before': {
-            borderBottomColor: `${backgroundColor} !important`,
-          },
-          '&[data-placement^=left] .tippy-arrow::before': {
-            borderLeftColor: `${backgroundColor} !important`,
-          },
-        }}
-        arrow
-        disabled={this.props.disabled}
-        content={this.props.title}
-        placement={this.props.placement ?? 'top'}
-        delay={[500, 0]} // [show, hide] milliseconds
-        animation='fade'
-        theme='material'
-      >
-        {this.props.children}
-      </Tippy>
-    )
-  }
+  return (
+    <Tippy
+      css={css} // TODO we should not use Emotion for this component
+      arrow
+      disabled={props.disabled}
+      content={props.title}
+      placement={props.placement ?? 'top'}
+      delay={[500, 0]} // [show, hide] milliseconds
+      animation='fade'
+      theme='material'
+    >
+      {props.children}
+    </Tippy>
+  )
 }

From b1d8588c65ac576bc9a81f2b1d4ed60f9161ca6b Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Tue, 17 Sep 2024 10:18:02 +0200
Subject: [PATCH 028/272] No dom query in grid element resize strategy (#6373)

**Problem:**
Another step to remove dom api dependency from grid strategies: the
grid-resize-element strategy uses the new `getGlobalFramesOfGridCells`
to detect the grid cell under the mouse.

**Commit Details:**

- Fixed `getGlobalFramesOfGridCells` problem: it calculated the local
frame not the global frame....
- Fixed and improved `getGlobalFramesOfGridCells` test to include
differend padding/row-padding/column-padding values
- Memoized `getGlobalFramesOfGridCells`: this is a quite fast function
so it wouldn't be important to memoize it, but in most cases we run it
for the same grid cell (because we are doing an interaction in it), so
it still makes sense to memoize. I just uses `memoize` with the default
config (which allows memoization of 5 values)
- Created a new `getGridCellUnderMouse` version called
`getGridCellUnderMouseFromMetadata`, and call that from the strategy
- I modified the strategy to use the canvas and not the window
coordinate system. Unfortunately,
`GridCustomStrategyState.targetCellData` uses the window coordinate
system, and that is used in multiple strategies, so I postponed to
change that too. I introduced a new type `TargetGridCellDataCanvas`
(similar to `TargetGridCellData`), I plan to migrate to this new type
everywhere.

**TODO:**

The strategy is still not the best. A downside of querying the grid
cells under the mouse is that the strategy is broken when the mouse is
not over the grid (even though the resize rectangle follows the mouse),
see https://screenshot.click/16-30-s1avn-hgu83.mp4

Using the metadata it is possible to implement a much better strategy
which can calculate where to resize to even when the mouse is not over
the grid. That can come in a subsequent PR.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../strategies/grid-cell-bounds.ts            |  38 +++++
 .../strategies/grid-helpers.spec.browser2.tsx | 143 +++++++++---------
 .../strategies/grid-helpers.ts                |  37 ++---
 .../grid-resize-element-strategy.ts           |  48 +++---
 editor/src/components/canvas/dom-lookup.ts    |  18 +++
 5 files changed, 173 insertions(+), 111 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
index 02e7bf3f1d81..621ff9332207 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -10,6 +10,12 @@ import {
 } from '../../../../core/shared/math-utils'
 import { canvasPointToWindowPoint } from '../../dom-lookup'
 import * as EP from '../../../../core/shared/element-path'
+import {
+  getGlobalFramesOfGridCells,
+  type GridCellGlobalFrames,
+  type TargetGridCellDataCanvas,
+} from './grid-helpers'
+import type { CanvasPoint } from '../../../../core/shared/math-utils'
 
 export type GridCellCoordinates = { row: number; column: number }
 
@@ -27,6 +33,38 @@ export function gridCellTargetId(
   return gridCellTargetIdPrefix + `${EP.toString(gridElementPath)}-${row}-${column}`
 }
 
+export function getGridCellUnderMouseFromMetadata(
+  grid: ElementInstanceMetadata,
+  canvasPoint: CanvasPoint,
+): TargetGridCellDataCanvas | null {
+  const gridCellGlobalFrames = getGlobalFramesOfGridCells(grid)
+
+  if (gridCellGlobalFrames == null) {
+    return null
+  }
+
+  return getGridCellUnderPoint(gridCellGlobalFrames, canvasPoint)
+}
+
+// TODO: we could optimize this with binary search, but huge grids are rare
+function getGridCellUnderPoint(
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  canvasPoint: CanvasPoint,
+): TargetGridCellDataCanvas | null {
+  for (let i = 0; i < gridCellGlobalFrames.length; i++) {
+    for (let j = 0; j < gridCellGlobalFrames[i].length; j++) {
+      if (rectContainsPoint(gridCellGlobalFrames[i][j], canvasPoint)) {
+        return {
+          gridCellCoordinates: gridCellCoordinates(i + 1, j + 1),
+          cellCanvasRectangle: gridCellGlobalFrames[i][j],
+        }
+      }
+    }
+  }
+  return null
+}
+
+// TODO: should be superseded by getGridCellUnderMouseFromMetadata
 export function getGridCellUnderMouse(mousePoint: WindowPoint) {
   return getGridCellAtPoint(mousePoint, false)
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.spec.browser2.tsx
index 9712f1d1fb76..c7232d1373e2 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.spec.browser2.tsx
@@ -1,7 +1,7 @@
 import { matchInlineSnapshotBrowser } from '../../../../../test/karma-snapshots'
 import { runDOMWalker } from '../../../editor/actions/action-creators'
 import { makeTestProjectCodeWithSnippet, renderTestEditorWithCode } from '../../ui-jsx.test-utils'
-import { getGlobalFramesOfGridCellsFromMetadata } from './grid-helpers'
+import { getGlobalFramesOfGridCells } from './grid-helpers'
 
 describe('Grids', () => {
   it('can calculate global frames of grid cells', async () => {
@@ -17,8 +17,9 @@ describe('Grids', () => {
         display: 'grid',
         gridTemplateColumns: '150px min-content 1fr 1fr',
         gridTemplateRows: 'min-content 1fr 1fr 1fr 1fr',
-        gridGap: 10,
-        padding: 10,
+        rowGap: 10,
+        columnGap: 20,
+        padding: 5,
       }}
       data-uid={'grid'}
     >
@@ -110,7 +111,7 @@ describe('Grids', () => {
 
     // non-grids don't have cell measurements:
     expect(
-      getGlobalFramesOfGridCellsFromMetadata(
+      getGlobalFramesOfGridCells(
         editor.getEditorState().editor.jsxMetadata[
           'utopia-storyboard-uid/scene-aaa/app-entity:grid/child'
         ],
@@ -119,7 +120,7 @@ describe('Grids', () => {
 
     // grids have cell measurements:
     matchInlineSnapshotBrowser(
-      getGlobalFramesOfGridCellsFromMetadata(
+      getGlobalFramesOfGridCells(
         editor.getEditorState().editor.jsxMetadata[
           'utopia-storyboard-uid/scene-aaa/app-entity:grid'
         ],
@@ -129,130 +130,130 @@ describe('Grids', () => {
     Object {
       \"height\": 50,
       \"width\": 150,
-      \"x\": 10,
-      \"y\": 10,
+      \"x\": 132,
+      \"y\": 89,
     },
     Object {
       \"height\": 50,
       \"width\": 80,
-      \"x\": 170,
-      \"y\": 10,
+      \"x\": 302,
+      \"y\": 89,
     },
     Object {
       \"height\": 50,
-      \"width\": 119.5,
-      \"x\": 260,
-      \"y\": 10,
+      \"width\": 109.5,
+      \"x\": 402,
+      \"y\": 89,
     },
     Object {
       \"height\": 50,
-      \"width\": 119.5,
-      \"x\": 389.5,
-      \"y\": 10,
+      \"width\": 109.5,
+      \"x\": 531.5,
+      \"y\": 89,
     },
   ],
   Array [
     Object {
-      \"height\": 83.25,
+      \"height\": 85.75,
       \"width\": 150,
-      \"x\": 10,
-      \"y\": 70,
+      \"x\": 132,
+      \"y\": 149,
     },
     Object {
-      \"height\": 83.25,
+      \"height\": 85.75,
       \"width\": 80,
-      \"x\": 170,
-      \"y\": 70,
+      \"x\": 302,
+      \"y\": 149,
     },
     Object {
-      \"height\": 83.25,
-      \"width\": 119.5,
-      \"x\": 260,
-      \"y\": 70,
+      \"height\": 85.75,
+      \"width\": 109.5,
+      \"x\": 402,
+      \"y\": 149,
     },
     Object {
-      \"height\": 83.25,
-      \"width\": 119.5,
-      \"x\": 389.5,
-      \"y\": 70,
+      \"height\": 85.75,
+      \"width\": 109.5,
+      \"x\": 531.5,
+      \"y\": 149,
     },
   ],
   Array [
     Object {
-      \"height\": 83.25,
+      \"height\": 85.75,
       \"width\": 150,
-      \"x\": 10,
-      \"y\": 163.25,
+      \"x\": 132,
+      \"y\": 244.75,
     },
     Object {
-      \"height\": 83.25,
+      \"height\": 85.75,
       \"width\": 80,
-      \"x\": 170,
-      \"y\": 163.25,
+      \"x\": 302,
+      \"y\": 244.75,
     },
     Object {
-      \"height\": 83.25,
-      \"width\": 119.5,
-      \"x\": 260,
-      \"y\": 163.25,
+      \"height\": 85.75,
+      \"width\": 109.5,
+      \"x\": 402,
+      \"y\": 244.75,
     },
     Object {
-      \"height\": 83.25,
-      \"width\": 119.5,
-      \"x\": 389.5,
-      \"y\": 163.25,
+      \"height\": 85.75,
+      \"width\": 109.5,
+      \"x\": 531.5,
+      \"y\": 244.75,
     },
   ],
   Array [
     Object {
-      \"height\": 83.25,
+      \"height\": 85.75,
       \"width\": 150,
-      \"x\": 10,
-      \"y\": 256.5,
+      \"x\": 132,
+      \"y\": 340.5,
     },
     Object {
-      \"height\": 83.25,
+      \"height\": 85.75,
       \"width\": 80,
-      \"x\": 170,
-      \"y\": 256.5,
+      \"x\": 302,
+      \"y\": 340.5,
     },
     Object {
-      \"height\": 83.25,
-      \"width\": 119.5,
-      \"x\": 260,
-      \"y\": 256.5,
+      \"height\": 85.75,
+      \"width\": 109.5,
+      \"x\": 402,
+      \"y\": 340.5,
     },
     Object {
-      \"height\": 83.25,
-      \"width\": 119.5,
-      \"x\": 389.5,
-      \"y\": 256.5,
+      \"height\": 85.75,
+      \"width\": 109.5,
+      \"x\": 531.5,
+      \"y\": 340.5,
     },
   ],
   Array [
     Object {
-      \"height\": 83.25,
+      \"height\": 85.75,
       \"width\": 150,
-      \"x\": 10,
-      \"y\": 349.75,
+      \"x\": 132,
+      \"y\": 436.25,
     },
     Object {
-      \"height\": 83.25,
+      \"height\": 85.75,
       \"width\": 80,
-      \"x\": 170,
-      \"y\": 349.75,
+      \"x\": 302,
+      \"y\": 436.25,
     },
     Object {
-      \"height\": 83.25,
-      \"width\": 119.5,
-      \"x\": 260,
-      \"y\": 349.75,
+      \"height\": 85.75,
+      \"width\": 109.5,
+      \"x\": 402,
+      \"y\": 436.25,
     },
     Object {
-      \"height\": 83.25,
-      \"width\": 119.5,
-      \"x\": 389.5,
-      \"y\": 349.75,
+      \"height\": 85.75,
+      \"width\": 109.5,
+      \"x\": 531.5,
+      \"y\": 436.25,
     },
   ],
 ]`,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index caff66fee4bd..fcf31f4ad7d0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -47,6 +47,7 @@ import {
   gridCellCoordinates,
 } from './grid-cell-bounds'
 import type { Sides } from 'utopia-api/core'
+import { memoize } from '../../../../core/shared/memoize'
 
 export function runGridRearrangeMove(
   targetElement: ElementPath,
@@ -350,6 +351,11 @@ export interface TargetGridCellData {
   cellWindowRectangle: WindowRectangle
 }
 
+export interface TargetGridCellDataCanvas {
+  gridCellCoordinates: GridCellCoordinates
+  cellCanvasRectangle: CanvasRectangle
+}
+
 export function getTargetCell(
   previousTargetCell: GridCellCoordinates | null,
   duplicating: boolean,
@@ -612,23 +618,18 @@ function getGridPositionIndex(props: {
   return (props.row - 1) * props.gridTemplateColumns + props.column - 1
 }
 
-export function getGlobalFramesOfGridCellsFromMetadata(
+export type GridCellGlobalFrames = Array<Array<CanvasRectangle>>
+
+function getGlobalFramesOfGridCellsInner(
   metadata: ElementInstanceMetadata,
-): Array<Array<CanvasRectangle>> | null {
-  return getGlobalFramesOfGridCells(metadata.specialSizeMeasurements)
-}
+): GridCellGlobalFrames | null {
+  const { globalFrame } = metadata
+  if (globalFrame == null || isInfinityRectangle(globalFrame)) {
+    return null
+  }
+
+  const { containerGridProperties, padding, rowGap, columnGap } = metadata.specialSizeMeasurements
 
-export function getGlobalFramesOfGridCells({
-  containerGridProperties,
-  rowGap,
-  columnGap,
-  padding,
-}: {
-  containerGridProperties: GridContainerProperties
-  rowGap: number | null
-  columnGap: number | null
-  padding: Sides
-}): Array<Array<CanvasRectangle>> | null {
   const columnWidths = gridTemplateToNumbers(containerGridProperties.gridTemplateColumns)
 
   const rowHeights = gridTemplateToNumbers(containerGridProperties.gridTemplateRows)
@@ -638,9 +639,9 @@ export function getGlobalFramesOfGridCells({
   }
 
   const cellRects: Array<Array<CanvasRectangle>> = []
-  let yOffset = padding.top ?? 0
+  let yOffset = globalFrame.y + (padding.top ?? 0)
   rowHeights.forEach((height) => {
-    let xOffset = padding.left ?? 0
+    let xOffset = globalFrame.x + (padding.left ?? 0)
     const rowRects: CanvasRectangle[] = []
     columnWidths.forEach((width) => {
       const rect = canvasRectangle({ x: xOffset, y: yOffset, width: width, height: height })
@@ -654,6 +655,8 @@ export function getGlobalFramesOfGridCells({
   return cellRects
 }
 
+export const getGlobalFramesOfGridCells = memoize(getGlobalFramesOfGridCellsInner)
+
 function gridTemplateToNumbers(gridTemplate: GridTemplate | null): Array<number> | null {
   if (gridTemplate?.type !== 'DIMENSIONS') {
     return null
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 7f2c358e3d1b..dc4a0e73a030 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -6,7 +6,7 @@ import { assertNever } from '../../../../core/shared/utils'
 import { isCSSKeyword } from '../../../inspector/common/css-utils'
 import { isFixedHugFillModeApplied } from '../../../inspector/inspector-common'
 import { controlsForGridPlaceholders, GridResizeControls } from '../../controls/grid-controls'
-import { canvasPointToWindowPoint } from '../../dom-lookup'
+import { canvasRectangleToWindowRectangle } from '../../dom-lookup'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { InteractionCanvasState } from '../canvas-strategy-types'
@@ -16,8 +16,7 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { getGridCellUnderMouse } from './grid-cell-bounds'
-import type { TargetGridCellData } from './grid-helpers'
+import { getGridCellUnderMouseFromMetadata } from './grid-cell-bounds'
 import { setGridPropsCommands } from './grid-helpers'
 
 export const gridResizeElementStrategy: CanvasStrategyFactory = (
@@ -78,26 +77,6 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
-      const mouseWindowPoint = canvasPointToWindowPoint(
-        offsetPoint(
-          interactionSession.interactionData.dragStart,
-          interactionSession.interactionData.drag,
-        ),
-        canvasState.scale,
-        canvasState.canvasOffset,
-      )
-
-      let targetCell: TargetGridCellData | null = customState.grid.targetCellData
-      const cellUnderMouse = getGridCellUnderMouse(mouseWindowPoint)
-      if (cellUnderMouse != null) {
-        const { cellWindowRectangle, coordinates: gridCellCoordinates } = cellUnderMouse
-        targetCell = { cellWindowRectangle, gridCellCoordinates }
-      }
-
-      if (targetCell == null) {
-        return emptyStrategyApplicationResult
-      }
-
       const container = MetadataUtils.findElementByElementPath(
         canvasState.startingMetadata,
         EP.parentPath(selectedElement),
@@ -105,6 +84,29 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
       if (container == null) {
         return emptyStrategyApplicationResult
       }
+
+      const mouseCanvasPoint = offsetPoint(
+        interactionSession.interactionData.dragStart,
+        interactionSession.interactionData.drag,
+      )
+
+      const cellUnderMouse = getGridCellUnderMouseFromMetadata(container, mouseCanvasPoint)
+      const targetCell =
+        cellUnderMouse == null
+          ? customState.grid.targetCellData
+          : {
+              ...cellUnderMouse,
+              cellWindowRectangle: canvasRectangleToWindowRectangle(
+                cellUnderMouse.cellCanvasRectangle,
+                canvasState.scale,
+                canvasState.canvasOffset,
+              ),
+            }
+
+      if (targetCell == null) {
+        return emptyStrategyApplicationResult
+      }
+
       const gridTemplate = container.specialSizeMeasurements.containerGridProperties
 
       let gridProps: GridElementProperties = MetadataUtils.findElementByElementPath(
diff --git a/editor/src/components/canvas/dom-lookup.ts b/editor/src/components/canvas/dom-lookup.ts
index 7ed972ace357..94047c78525b 100644
--- a/editor/src/components/canvas/dom-lookup.ts
+++ b/editor/src/components/canvas/dom-lookup.ts
@@ -6,6 +6,7 @@ import type {
   CanvasRectangle,
   CanvasVector,
   WindowPoint,
+  WindowRectangle,
 } from '../../core/shared/math-utils'
 import {
   boundingRectangleArray,
@@ -14,8 +15,10 @@ import {
   negate,
   offsetPoint,
   roundPointToNearestHalf,
+  scaleRect,
   scaleVector,
   windowPoint,
+  windowRectangle,
 } from '../../core/shared/math-utils'
 import type { ElementPath } from '../../core/shared/project-file-types'
 import * as EP from '../../core/shared/element-path'
@@ -636,3 +639,18 @@ export function canvasPointToWindowPoint(
     throw new Error('calling screenToElementCoordinates() before being mounted')
   }
 }
+
+export function canvasRectangleToWindowRectangle(
+  canvasRect: CanvasRectangle,
+  canvasScale: number,
+  canvasOffset: CanvasVector,
+): WindowRectangle {
+  const location = canvasPointToWindowPoint(canvasRect, canvasScale, canvasOffset)
+  const scaledRect = scaleRect(canvasRect, canvasScale)
+  return windowRectangle({
+    x: location.x,
+    y: location.y,
+    width: scaledRect.width,
+    height: scaledRect.height,
+  })
+}

From 1697de806e3e9a9459133f21ed0bbbf33eb79dbb Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Tue, 17 Sep 2024 13:34:22 +0200
Subject: [PATCH 029/272] Fix scrubbing performance of
 FrameUpdatingLayoutControl (#6375)

**Problem:**
When using the left label (such as **L**) to scrub a
FrameUpdatingLayoutControl, the performance was bad.
<img width="282" alt="image"
src="https://github.com/user-attachments/assets/9c44718d-a44d-41cc-845d-993ba515bdf9">

Turns out the problem is simply that the control was never using the
transient mode, for each scrub update it would fire a non-transient
action, rerendering the entire canvas, **creating a new undo step!!!**

**Fix:**
Make the control aware of transient updates.

**Commit Details:**

- `executeFirstApplicableStrategy` takes an array of elementsToRerender,
if it's a specific array of element paths, it automatically switches to
dispatching Transient Actions
- `NumberInput` now sets the transient flag for all onSubmit callbacks
when scrubbed
- `FrameUpdatingLayoutControl`'s onSubmitValue takes the transient
parameter and feeds it to updateFrame
- `updateFrame` calls `executeFirstApplicableStrategy` with the properly
set `elementsToRerender` array

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [ ] I could navigate to various routes in Preview mode
---
 .../components/inspector/controls/control.ts  |   5 +
 .../inspector-strategy.ts                     |  20 +++-
 .../frame-updating-layout-section.tsx         | 106 +++++++++++-------
 editor/src/uuiui/inputs/number-input.tsx      |  29 ++---
 4 files changed, 103 insertions(+), 57 deletions(-)

diff --git a/editor/src/components/inspector/controls/control.ts b/editor/src/components/inspector/controls/control.ts
index 7d02aca9defe..bd1104b68fb8 100644
--- a/editor/src/components/inspector/controls/control.ts
+++ b/editor/src/components/inspector/controls/control.ts
@@ -19,6 +19,11 @@ export type OnSubmitValueOrUnknownOrEmpty<T> = (
   transient?: boolean,
 ) => void
 
+export type OnSubmitValueOrUnknownOrEmptyMaybeTransient<T> = (
+  value: UnknownOrEmptyInput<T>,
+  transient: boolean,
+) => void
+
 export interface DEPRECATEDControlProps<T> {
   id: string
   testId: string
diff --git a/editor/src/components/inspector/inspector-strategies/inspector-strategy.ts b/editor/src/components/inspector/inspector-strategies/inspector-strategy.ts
index cdf7d85255cd..38af9cf837a9 100644
--- a/editor/src/components/inspector/inspector-strategies/inspector-strategy.ts
+++ b/editor/src/components/inspector/inspector-strategies/inspector-strategy.ts
@@ -1,6 +1,7 @@
 import type { CanvasCommand } from '../../canvas/commands/commands'
 import type { EditorDispatch } from '../../editor/action-types'
-import { applyCommandsAction } from '../../editor/actions/action-creators'
+import { applyCommandsAction, transientActions } from '../../editor/actions/action-creators'
+import type { ElementsToRerender } from '../../editor/store/editor-state'
 
 interface CustomInspectorStrategyResultBase {
   commands: Array<CanvasCommand>
@@ -47,11 +48,26 @@ export function commandsForFirstApplicableStrategy(
 
 export function executeFirstApplicableStrategy(
   dispatch: EditorDispatch,
+  strategies: InspectorStrategy[],
+): void {
+  return executeFirstApplicableStrategyForContinuousInteraction(
+    dispatch,
+    strategies,
+    'rerender-all-elements',
+  )
+}
 
+export function executeFirstApplicableStrategyForContinuousInteraction(
+  dispatch: EditorDispatch,
   strategies: InspectorStrategy[],
+  elementsToRerenderTransient: ElementsToRerender,
 ): void {
   const commands = commandsForFirstApplicableStrategy(strategies)
   if (commands != null) {
-    dispatch([applyCommandsAction(commands)])
+    if (elementsToRerenderTransient !== 'rerender-all-elements') {
+      dispatch([transientActions([applyCommandsAction(commands)], elementsToRerenderTransient)])
+    } else {
+      dispatch([applyCommandsAction(commands)])
+    }
   }
 }
diff --git a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
index 33c5d446267d..0c729df8b904 100644
--- a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
+++ b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
@@ -46,7 +46,10 @@ import {
   type UnknownOrEmptyInput,
 } from '../../../common/css-utils'
 import { useInspectorLayoutInfo } from '../../../common/property-path-hooks'
-import { executeFirstApplicableStrategy } from '../../../inspector-strategies/inspector-strategy'
+import {
+  executeFirstApplicableStrategy,
+  executeFirstApplicableStrategyForContinuousInteraction,
+} from '../../../inspector-strategies/inspector-strategy'
 import { UIGridRow } from '../../../widgets/ui-grid-row'
 import * as EP from '../../../../../core/shared/element-path'
 
@@ -201,32 +204,43 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
   )
 
   const updateFrame = React.useCallback(
-    (frameUpdate: FrameUpdate) => {
+    (frameUpdate: FrameUpdate, transient: boolean) => {
+      const elementsToRerenderTransient = transient
+        ? selectedViewsRef.current
+        : 'rerender-all-elements'
       switch (frameUpdate.type) {
         case 'DELTA_FRAME_UPDATE':
           if (
             frameUpdate.edgePosition === EdgePositionTop ||
             frameUpdate.edgePosition === EdgePositionLeft
           ) {
-            executeFirstApplicableStrategy(dispatch, [
-              moveInspectorStrategy(
-                metadataRef.current,
-                selectedViewsRef.current,
-                projectContentsRef.current,
-                frameUpdate.edgeMovement,
-              ),
-            ])
+            executeFirstApplicableStrategyForContinuousInteraction(
+              dispatch,
+              [
+                moveInspectorStrategy(
+                  metadataRef.current,
+                  selectedViewsRef.current,
+                  projectContentsRef.current,
+                  frameUpdate.edgeMovement,
+                ),
+              ],
+              elementsToRerenderTransient,
+            )
           } else {
-            executeFirstApplicableStrategy(dispatch, [
-              resizeInspectorStrategy(
-                metadataRef.current,
-                selectedViewsRef.current,
-                projectContentsRef.current,
-                originalGlobalFrame,
-                frameUpdate.edgePosition,
-                frameUpdate.edgeMovement,
-              ),
-            ])
+            executeFirstApplicableStrategyForContinuousInteraction(
+              dispatch,
+              [
+                resizeInspectorStrategy(
+                  metadataRef.current,
+                  selectedViewsRef.current,
+                  projectContentsRef.current,
+                  originalGlobalFrame,
+                  frameUpdate.edgePosition,
+                  frameUpdate.edgeMovement,
+                ),
+              ],
+              elementsToRerenderTransient,
+            )
           }
           break
         case 'DIRECT_FRAME_UPDATE':
@@ -235,27 +249,35 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
             frameUpdate.edgePosition === EdgePositionLeft
           ) {
             const leftOrTop = frameUpdate.edgePosition === EdgePositionLeft ? 'left' : 'top'
-            executeFirstApplicableStrategy(dispatch, [
-              directMoveInspectorStrategy(
-                metadataRef.current,
-                selectedViewsRef.current,
-                projectContentsRef.current,
-                leftOrTop,
-                frameUpdate.edgeValue,
-              ),
-            ])
+            executeFirstApplicableStrategyForContinuousInteraction(
+              dispatch,
+              [
+                directMoveInspectorStrategy(
+                  metadataRef.current,
+                  selectedViewsRef.current,
+                  projectContentsRef.current,
+                  leftOrTop,
+                  frameUpdate.edgeValue,
+                ),
+              ],
+              elementsToRerenderTransient,
+            )
           } else {
             const widthOrHeight =
               frameUpdate.edgePosition === EdgePositionRight ? 'width' : 'height'
-            executeFirstApplicableStrategy(dispatch, [
-              directResizeInspectorStrategy(
-                metadataRef.current,
-                selectedViewsRef.current,
-                projectContentsRef.current,
-                widthOrHeight,
-                frameUpdate.edgeValue,
-              ),
-            ])
+            executeFirstApplicableStrategyForContinuousInteraction(
+              dispatch,
+              [
+                directResizeInspectorStrategy(
+                  metadataRef.current,
+                  selectedViewsRef.current,
+                  projectContentsRef.current,
+                  widthOrHeight,
+                  frameUpdate.edgeValue,
+                ),
+              ],
+              elementsToRerenderTransient,
+            )
           }
           break
         default:
@@ -341,7 +363,7 @@ interface LayoutPinPropertyControlProps {
   label: string
   property: TLWH
   currentValues: Array<number>
-  updateFrame: (frameUpdate: FrameUpdate) => void
+  updateFrame: (frameUpdate: FrameUpdate, transient: boolean) => void
   invalid?: boolean
 }
 
@@ -378,7 +400,7 @@ const FrameUpdatingLayoutControl = React.memo((props: LayoutPinPropertyControlPr
   currentValuesRef.current = currentValues
 
   const onSubmitValue = React.useCallback(
-    (newValue: UnknownOrEmptyInput<CSSNumber>) => {
+    (newValue: UnknownOrEmptyInput<CSSNumber>, transient: boolean = false) => {
       const calculatedSingleCommonValue = getSingleCommonValue(currentValuesRef.current)
       if (isUnknownInputValue(newValue)) {
         // Ignore right now.
@@ -390,14 +412,14 @@ const FrameUpdatingLayoutControl = React.memo((props: LayoutPinPropertyControlPr
         if (newValue.unit == null || newValue.unit === 'px') {
           const edgePosition = getTLWHEdgePosition(property)
           if (calculatedSingleCommonValue == null) {
-            updateFrame(directFrameUpdate(edgePosition, newValue.value))
+            updateFrame(directFrameUpdate(edgePosition, newValue.value), transient)
           } else {
             const movement = getMovementFromValues(
               property,
               calculatedSingleCommonValue,
               newValue.value,
             )
-            updateFrame(deltaFrameUpdate(edgePosition, movement))
+            updateFrame(deltaFrameUpdate(edgePosition, movement), transient)
           }
         } else {
           console.error('Attempting to use a value with a unit, which is invalid.')
diff --git a/editor/src/uuiui/inputs/number-input.tsx b/editor/src/uuiui/inputs/number-input.tsx
index ba6d73773d6f..d0fcfc5ff9f3 100644
--- a/editor/src/uuiui/inputs/number-input.tsx
+++ b/editor/src/uuiui/inputs/number-input.tsx
@@ -32,6 +32,7 @@ import type {
   OnSubmitValue,
   OnSubmitValueOrEmpty,
   OnSubmitValueOrUnknownOrEmpty,
+  OnSubmitValueOrUnknownOrEmptyMaybeTransient,
 } from '../../components/inspector/controls/control'
 import type { Either } from '../../core/shared/either'
 import { isLeft, mapEither } from '../../core/shared/either'
@@ -151,9 +152,9 @@ export interface AbstractNumberInputProps<T extends CSSNumber | number>
 }
 
 export interface NumberInputProps extends AbstractNumberInputProps<CSSNumber> {
-  onSubmitValue?: OnSubmitValueOrUnknownOrEmpty<CSSNumber>
-  onTransientSubmitValue?: OnSubmitValueOrUnknownOrEmpty<CSSNumber>
-  onForcedSubmitValue?: OnSubmitValueOrUnknownOrEmpty<CSSNumber>
+  onSubmitValue?: OnSubmitValueOrUnknownOrEmptyMaybeTransient<CSSNumber>
+  onTransientSubmitValue?: OnSubmitValueOrUnknownOrEmptyMaybeTransient<CSSNumber>
+  onForcedSubmitValue?: OnSubmitValueOrUnknownOrEmptyMaybeTransient<CSSNumber>
   setGlobalCursor?: (cursor: CSSCursor | null) => void
   onMouseEnter?: MouseEventHandler
   onMouseLeave?: MouseEventHandler
@@ -282,15 +283,15 @@ export const NumberInput = React.memo<NumberInputProps>(
         const newValue = setCSSNumberValue(value, newNumericValue)
         if (transient) {
           if (onTransientSubmitValue != null) {
-            onTransientSubmitValue(newValue)
+            onTransientSubmitValue(newValue, transient)
           } else if (onSubmitValue != null) {
-            onSubmitValue(newValue)
+            onSubmitValue(newValue, transient)
           }
         } else {
           if (onForcedSubmitValue != null) {
-            onForcedSubmitValue(newValue)
+            onForcedSubmitValue(newValue, transient)
           } else if (onSubmitValue != null) {
-            onSubmitValue(newValue)
+            onSubmitValue(newValue, transient)
           }
         }
         repeatedValueRef.current = newValue
@@ -339,15 +340,15 @@ export const NumberInput = React.memo<NumberInputProps>(
 
           if (transient) {
             if (onTransientSubmitValue != null) {
-              onTransientSubmitValue(newValue)
+              onTransientSubmitValue(newValue, transient)
             } else if (onSubmitValue != null) {
-              onSubmitValue(newValue)
+              onSubmitValue(newValue, transient)
             }
           } else {
             if (onForcedSubmitValue != null) {
-              onForcedSubmitValue(newValue)
+              onForcedSubmitValue(newValue, transient)
             } else if (onSubmitValue != null) {
-              onSubmitValue(newValue)
+              onSubmitValue(newValue, transient)
             }
           }
           updateValue(newValue)
@@ -484,7 +485,7 @@ export const NumberInput = React.memo<NumberInputProps>(
         // todo make sure this isn't doubling up the value submit
         if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && onForcedSubmitValue != null) {
           if (value != null) {
-            onForcedSubmitValue(value)
+            onForcedSubmitValue(value, false)
           }
         }
       },
@@ -519,7 +520,7 @@ export const NumberInput = React.memo<NumberInputProps>(
         if (valueChangedSinceFocus) {
           setValueChangedSinceFocus(false)
           if (onSubmitValue != null) {
-            onSubmitValue(newValue)
+            onSubmitValue(newValue, false)
           }
         }
       },
@@ -565,6 +566,7 @@ export const NumberInput = React.memo<NumberInputProps>(
           repeatedValueRef.current != null
             ? repeatedValueRef.current
             : unknownInputValue(displayValue),
+          false,
         )
       }
 
@@ -611,6 +613,7 @@ export const NumberInput = React.memo<NumberInputProps>(
           repeatedValueRef.current != null
             ? repeatedValueRef.current
             : unknownInputValue(displayValue),
+          false,
         )
       }
 

From 57d569c35e7eddae400e4f380db3412d110c85ea Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Tue, 17 Sep 2024 16:30:33 +0200
Subject: [PATCH 030/272] Less dom queries in grid strategies (#6377)

Followup to https://github.com/concrete-utopia/utopia/pull/6373
I continued the work to
- remove dom api queries from strategies
- migrate from window points and rectangle to canvas ones.
- unify the cell query functions, because we have more than 5 functions
which basically do the same thing (return cell data under the a point)

**Fix:**
- Replaced all `TargetGridCellData` usage with the new
`TargetGridCellDataCanvas`, which contains canvas and not window bounds
(and renamed that back to `TargetGridCellData`)
- Deleted a bunch of similar query functions which returned cell data
under a certain point (`getTargetCell`, `getGridCellUnderMouse`,
`getGridCellUnderMouseRecursive`, `getTargetGridCellUnderCursor`, etc),
and replaced them all with `getGridCellUnderMouseFromMetadata `
- Updated grid-resize-element, grid-rearrange-move,
grid-rearrange-move-duplicate, grid-draw-to-insert to use
`getGridCellUnderMouseFromMetadata`
- I had some 1-pixel differences in draw-to-insert tests... not sure
why, maybe a rounding error in the canvas<->window conversions which I
removed. I updated the tests, I think draw to insert works fine.

**Next step:**
- [ ] Continue deleting/converting grid query functions to metadata:
`getGridCellBoundsFromCanvas`, `getGridCellAtPoint`, `getCellWindowRect`

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../draw-to-insert-strategy.spec.browser2.tsx |  8 +--
 .../strategies/grid-cell-bounds.ts            | 15 +----
 .../grid-draw-to-insert-strategy.tsx          | 45 +++-----------
 .../strategies/grid-helpers.ts                | 58 +++++--------------
 .../grid-rearrange-move-duplicate-strategy.ts |  1 -
 .../grid-rearrange-move-strategy.ts           |  1 -
 ...grid-reparent-strategies.spec.browser2.tsx |  8 ++-
 .../strategies/grid-reparent-strategy.tsx     | 54 +++++++----------
 .../grid-resize-element-strategy.ts           | 12 +---
 9 files changed, 59 insertions(+), 143 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
index b1d558488842..af5ab649508d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
@@ -324,9 +324,9 @@ export var storyboard = (
         gridColumn: '2',
         gridRow: '1',
         height: '60px',
-        left: '83px',
+        left: '84px',
         position: 'absolute',
-        top: '150px',
+        top: '151px',
         width: '40px',
       })
     })
@@ -371,9 +371,9 @@ export var storyboard = (
         gridColumn: '1',
         gridRow: '1',
         height: '30px',
-        left: '125px',
+        left: '126px',
         position: 'absolute',
-        top: '75px',
+        top: '76px',
         width: '20px',
       })
     })
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
index 621ff9332207..2439fb46efc6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -13,7 +13,7 @@ import * as EP from '../../../../core/shared/element-path'
 import {
   getGlobalFramesOfGridCells,
   type GridCellGlobalFrames,
-  type TargetGridCellDataCanvas,
+  type TargetGridCellData,
 } from './grid-helpers'
 import type { CanvasPoint } from '../../../../core/shared/math-utils'
 
@@ -36,7 +36,7 @@ export function gridCellTargetId(
 export function getGridCellUnderMouseFromMetadata(
   grid: ElementInstanceMetadata,
   canvasPoint: CanvasPoint,
-): TargetGridCellDataCanvas | null {
+): TargetGridCellData | null {
   const gridCellGlobalFrames = getGlobalFramesOfGridCells(grid)
 
   if (gridCellGlobalFrames == null) {
@@ -50,7 +50,7 @@ export function getGridCellUnderMouseFromMetadata(
 function getGridCellUnderPoint(
   gridCellGlobalFrames: GridCellGlobalFrames,
   canvasPoint: CanvasPoint,
-): TargetGridCellDataCanvas | null {
+): TargetGridCellData | null {
   for (let i = 0; i < gridCellGlobalFrames.length; i++) {
     for (let j = 0; j < gridCellGlobalFrames[i].length; j++) {
       if (rectContainsPoint(gridCellGlobalFrames[i][j], canvasPoint)) {
@@ -64,15 +64,6 @@ function getGridCellUnderPoint(
   return null
 }
 
-// TODO: should be superseded by getGridCellUnderMouseFromMetadata
-export function getGridCellUnderMouse(mousePoint: WindowPoint) {
-  return getGridCellAtPoint(mousePoint, false)
-}
-
-export function getGridCellUnderMouseRecursive(mousePoint: WindowPoint) {
-  return getGridCellAtPoint(mousePoint, true)
-}
-
 function isGridCellTargetId(id: string): boolean {
   return id.startsWith(gridCellTargetIdPrefix)
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index 7e4fac06a0b5..01c45b432ede 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -21,7 +21,7 @@ import { showGridControls } from '../../commands/show-grid-controls-command'
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { wildcardPatch } from '../../commands/wildcard-patch-command'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls'
-import { canvasPointToWindowPoint, windowToCanvasCoordinates } from '../../dom-lookup'
+import { canvasPointToWindowPoint } from '../../dom-lookup'
 import {
   getWrapperWithGeneratedUid,
   getWrappingCommands,
@@ -43,9 +43,10 @@ import {
   getStyleAttributesForFrameInAbsolutePosition,
   updateInsertionSubjectWithAttributes,
 } from './draw-to-insert-metastrategy'
-import { getTargetCell, setGridPropsCommands } from './grid-helpers'
+import { setGridPropsCommands } from './grid-helpers'
 import { newReparentSubjects } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentTargetUnified } from './reparent-helpers/reparent-strategy-parent-lookup'
+import { getGridCellUnderMouseFromMetadata } from './grid-cell-bounds'
 
 export const gridDrawToInsertText: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -150,11 +151,10 @@ const gridDrawToInsertStrategyInner =
       controlsToRender: [controlsForGridPlaceholders(targetParent)],
       fitness: 5,
       apply: (strategyLifecycle) => {
-        const newTargetCell = getGridCellUnderCursor(
-          interactionData,
-          canvasState,
-          customStrategyState,
-        )
+        const canvasPointToUse =
+          interactionData.type === 'DRAG' ? interactionData.dragStart : interactionData.point
+
+        const newTargetCell = getGridCellUnderMouseFromMetadata(parent, canvasPointToUse)
 
         if (strategyLifecycle === 'mid-interaction' && interactionData.type === 'HOVER') {
           return strategyApplicationResult(
@@ -182,13 +182,7 @@ const gridDrawToInsertStrategyInner =
           return emptyStrategyApplicationResult
         }
 
-        const { gridCellCoordinates, cellWindowRectangle } = newTargetCell
-
-        const cellCanvasOrigin = windowToCanvasCoordinates(
-          canvasState.scale,
-          canvasState.canvasOffset,
-          cellWindowRectangle,
-        ).canvasPositionRounded
+        const { gridCellCoordinates, cellCanvasRectangle } = newTargetCell
 
         const defaultSize =
           interactionData.type === 'DRAG' &&
@@ -200,7 +194,7 @@ const gridDrawToInsertStrategyInner =
         const insertionCommand = getInsertionCommand(
           targetParent,
           insertionSubject,
-          getFrameForInsertion(interactionData, defaultSize, cellCanvasOrigin),
+          getFrameForInsertion(interactionData, defaultSize, cellCanvasRectangle),
         )
 
         const gridTemplate = parent.specialSizeMeasurements.containerGridProperties
@@ -329,24 +323,3 @@ function getInsertionCommand(
 
   return insertElementInsertionSubject('always', updatedInsertionSubject, insertionPath)
 }
-
-function getGridCellUnderCursor(
-  interactionData: DragInteractionData | HoverInteractionData,
-  canvasState: InteractionCanvasState,
-  customStrategyState: CustomStrategyState,
-) {
-  const windowPointToUse =
-    interactionData.type === 'DRAG' ? interactionData.dragStart : interactionData.point
-
-  const mouseWindowPoint = canvasPointToWindowPoint(
-    windowPointToUse,
-    canvasState.scale,
-    canvasState.canvasOffset,
-  )
-
-  return getTargetCell(
-    customStrategyState.grid.targetCellData?.gridCellCoordinates ?? null,
-    false,
-    mouseWindowPoint,
-  )
-}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index fcf31f4ad7d0..4030c029d901 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -26,7 +26,6 @@ import {
   scaleVector,
   windowPoint,
   windowVector,
-  type WindowPoint,
 } from '../../../../core/shared/math-utils'
 import * as PP from '../../../../core/shared/property-path'
 import { absolute } from '../../../../utils/utils'
@@ -42,11 +41,9 @@ import type { DragInteractionData } from '../interaction-state'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 import {
   getCellWindowRect,
-  getGridCellUnderMouse,
-  getGridCellUnderMouseRecursive,
+  getGridCellUnderMouseFromMetadata,
   gridCellCoordinates,
 } from './grid-cell-bounds'
-import type { Sides } from 'utopia-api/core'
 import { memoize } from '../../../../core/shared/memoize'
 
 export function runGridRearrangeMove(
@@ -57,7 +54,6 @@ export function runGridRearrangeMove(
   canvasScale: number,
   canvasOffset: CanvasVector,
   customState: GridCustomStrategyState,
-  duplicating: boolean,
 ): {
   commands: CanvasCommand[]
   targetCell: TargetGridCellData | null
@@ -75,18 +71,23 @@ export function runGridRearrangeMove(
     }
   }
 
-  const mouseWindowPoint = canvasPointToWindowPoint(
-    offsetPoint(interactionData.dragStart, interactionData.drag),
-    canvasScale,
-    canvasOffset,
-  )
+  const parentGridPath = EP.parentPath(selectedElement)
+  const grid = MetadataUtils.findElementByElementPath(jsxMetadata, parentGridPath)
+
+  if (grid == null) {
+    return {
+      commands: [],
+      targetCell: null,
+      originalRootCell: null,
+      draggingFromCell: null,
+      targetRootCell: null,
+    }
+  }
+
+  const mousePos = offsetPoint(interactionData.dragStart, interactionData.drag)
 
   const targetCellData =
-    getTargetCell(
-      customState.targetCellData?.gridCellCoordinates ?? null,
-      duplicating,
-      mouseWindowPoint,
-    ) ?? customState.targetCellData
+    getGridCellUnderMouseFromMetadata(grid, mousePos) ?? customState.targetCellData
 
   if (targetCellData == null) {
     return {
@@ -347,37 +348,10 @@ export function setGridPropsCommands(
 }
 
 export interface TargetGridCellData {
-  gridCellCoordinates: GridCellCoordinates
-  cellWindowRectangle: WindowRectangle
-}
-
-export interface TargetGridCellDataCanvas {
   gridCellCoordinates: GridCellCoordinates
   cellCanvasRectangle: CanvasRectangle
 }
 
-export function getTargetCell(
-  previousTargetCell: GridCellCoordinates | null,
-  duplicating: boolean,
-  mouseWindowPoint: WindowPoint,
-): TargetGridCellData | null {
-  let cell = previousTargetCell ?? null
-  const cellUnderMouse = duplicating
-    ? getGridCellUnderMouseRecursive(mouseWindowPoint)
-    : getGridCellUnderMouse(mouseWindowPoint)
-  if (cellUnderMouse == null) {
-    return null
-  }
-  cell = cellUnderMouse.coordinates
-  if (cell.row < 1 || cell.column < 1) {
-    return null
-  }
-  return {
-    gridCellCoordinates: cell,
-    cellWindowRectangle: cellUnderMouse.cellWindowRectangle,
-  }
-}
-
 function getElementGridProperties(
   element: ElementInstanceMetadata,
   cellUnderMouse: { row: number; column: number },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
index ec44a5d3d40d..24b363140066 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
@@ -86,7 +86,6 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
         canvasState.scale,
         canvasState.canvasOffset,
         customState.grid,
-        true,
       )
       if (moveCommands.length === 0) {
         return emptyStrategyApplicationResult
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index 0e108b5dfb1a..1a1f9c02182f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -183,7 +183,6 @@ function getCommandsAndPatchForGridRearrange(
     canvasState.scale,
     canvasState.canvasOffset,
     customState.grid,
-    false,
   )
 
   return {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
index 1456ab0423f2..8b65e186af9c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
@@ -627,7 +627,7 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2200, y: 2500 })
+      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2200, y: 2200 })
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -804,7 +804,11 @@ async function dragOut(
   const sourceGridCell = renderResult.renderedDOM.getByTestId(GridCellTestId(cell))
   const sourceRect = sourceGridCell.getBoundingClientRect()
 
-  await mouseClickAtPoint(sourceGridCell, sourceRect, { modifiers: cmdModifier })
+  await mouseClickAtPoint(
+    sourceGridCell,
+    { x: sourceRect.x + 5, y: sourceRect.y + 5 },
+    { modifiers: cmdModifier },
+  )
   await mouseDragFromPointToPoint(sourceGridCell, sourceRect, endPoint, {
     modifiers: cmdModifier,
   })
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 24bb761a39f2..4249b4b699fa 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -23,13 +23,11 @@ import { controlsForGridPlaceholders } from '../../controls/grid-controls'
 import { ParentBounds } from '../../controls/parent-bounds'
 import { ParentOutlines } from '../../controls/parent-outlines'
 import { ZeroSizedElementControls } from '../../controls/zero-sized-element-controls'
-import { canvasPointToWindowPoint } from '../../dom-lookup'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import type {
   CanvasStrategy,
   ControlWithProps,
   CustomStrategyState,
-  GridCustomStrategyState,
   InteractionCanvasState,
 } from '../canvas-strategy-types'
 import {
@@ -41,14 +39,13 @@ import {
 import type { DragInteractionData, InteractionSession, UpdatedPathMap } from '../interaction-state'
 import { honoursPropsPosition, shouldKeepMovingDraggedGroupChildren } from './absolute-utils'
 import { replaceFragmentLikePathsWithTheirChildrenRecursive } from './fragment-like-helpers'
-import type { TargetGridCellData } from './grid-helpers'
-import { getTargetCell, setGridPropsCommands } from './grid-helpers'
+import { setGridPropsCommands } from './grid-helpers'
 import { ifAllowedToReparent, isAllowedToReparent } from './reparent-helpers/reparent-helpers'
 import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-property-changes'
 import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentOutcome, pathToReparent } from './reparent-utils'
 import { flattenSelection } from './shared-move-strategies-helpers'
-import type { GridCellCoordinates } from './grid-cell-bounds'
+import { getGridCellUnderMouseFromMetadata, type GridCellCoordinates } from './grid-cell-bounds'
 import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
 
 export function gridReparentStrategy(
@@ -142,27 +139,6 @@ export function controlsForGridReparent(reparentTarget: ReparentTarget): Control
   ]
 }
 
-function getTargetGridCellUnderCursor(
-  interactionData: DragInteractionData,
-  canvasScale: number,
-  canvasOffset: CanvasVector,
-  customState: GridCustomStrategyState,
-): TargetGridCellData | null {
-  const mouseWindowPoint = canvasPointToWindowPoint(
-    offsetPoint(interactionData.dragStart, interactionData.drag ?? canvasVector({ x: 0, y: 0 })),
-    canvasScale,
-    canvasOffset,
-  )
-
-  const targetCellUnderMouse = getTargetCell(
-    customState.targetCellData?.gridCellCoordinates ?? null,
-    false,
-    mouseWindowPoint,
-  )
-
-  return targetCellUnderMouse
-}
-
 export function applyGridReparent(
   canvasState: InteractionCanvasState,
   interactionData: DragInteractionData,
@@ -172,7 +148,7 @@ export function applyGridReparent(
   gridFrame: CanvasRectangle,
 ) {
   return () => {
-    if (interactionData.drag == null) {
+    if (interactionData.drag == null || selectedElements.length === 0) {
       return emptyStrategyApplicationResult
     }
 
@@ -184,7 +160,16 @@ export function applyGridReparent(
       selectedElements,
       newParent.intendedParentPath,
       () => {
-        if (interactionData.drag == null) {
+        if (interactionData.drag == null || selectedElements.length === 0) {
+          return emptyStrategyApplicationResult
+        }
+
+        const grid = MetadataUtils.findElementByElementPath(
+          canvasState.startingMetadata,
+          newParent.intendedParentPath,
+        )
+
+        if (grid == null) {
           return emptyStrategyApplicationResult
         }
 
@@ -201,13 +186,14 @@ export function applyGridReparent(
           return emptyStrategyApplicationResult
         }
 
+        const mousePos = offsetPoint(
+          interactionData.dragStart,
+          interactionData.drag ?? canvasVector({ x: 0, y: 0 }),
+        )
+
         const targetCellData =
-          getTargetGridCellUnderCursor(
-            interactionData,
-            canvasState.scale,
-            canvasState.canvasOffset,
-            customStrategyState.grid,
-          ) ?? customStrategyState.grid.targetCellData
+          getGridCellUnderMouseFromMetadata(grid, mousePos) ??
+          customStrategyState.grid.targetCellData
 
         if (targetCellData == null) {
           return emptyStrategyApplicationResult
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index dc4a0e73a030..64730c52ff48 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -91,17 +91,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
       )
 
       const cellUnderMouse = getGridCellUnderMouseFromMetadata(container, mouseCanvasPoint)
-      const targetCell =
-        cellUnderMouse == null
-          ? customState.grid.targetCellData
-          : {
-              ...cellUnderMouse,
-              cellWindowRectangle: canvasRectangleToWindowRectangle(
-                cellUnderMouse.cellCanvasRectangle,
-                canvasState.scale,
-                canvasState.canvasOffset,
-              ),
-            }
+      const targetCell = cellUnderMouse == null ? customState.grid.targetCellData : cellUnderMouse
 
       if (targetCell == null) {
         return emptyStrategyApplicationResult

From b75611c6ac26cf7816f7d87eb5e4ec2794df0dab Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Wed, 18 Sep 2024 12:17:32 +0200
Subject: [PATCH 031/272] DomWalkerObservers know about
 ElementsToRerenderGLOBAL (#6383)

**Problem:**
The dom-walker observers (now used for triggering the dom-sampler) fire
for continuous interactions that don't have
`editor.canvas.interactionSession`, such as scrubbing in the inspector.

**Fix:**
The mutation callback now checks if `ElementsToRerenderGLOBAL.current`
is in selective mode, and then it will behave similarly to when there is
an active interactionSession.

**Commit Details:**

- Renamed `selectCanvasInteractionHappening ` to
`isCanvasInteractionHappening`
- `isCanvasInteractionHappening` is aware of
ElementsToRerenderGLOBAL.current
---
 editor/src/components/canvas/dom-walker.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 0051199c8df8..475ff3c1295c 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -72,6 +72,7 @@ import { getFlexAlignment, getFlexJustifyContent, MaxContent } from '../inspecto
 import type { EditorDispatch } from '../editor/action-types'
 import { runDOMWalker } from '../editor/actions/action-creators'
 import { CanvasContainerOuterId } from './canvas-component-entry'
+import { ElementsToRerenderGLOBAL } from './ui-jsx-canvas'
 
 export const ResizeObserver =
   window.ResizeObserver ?? ResizeObserverSyntheticDefault.default ?? ResizeObserverSyntheticDefault
@@ -306,9 +307,9 @@ export function resubscribeObservers(domWalkerMutableState: {
   }
 }
 
-function selectCanvasInteractionHappening(store: EditorStorePatched): boolean {
+function isCanvasInteractionHappening(store: EditorStorePatched): boolean {
   const interactionSessionActive = store.editor.canvas.interactionSession != null
-  return interactionSessionActive
+  return interactionSessionActive || ElementsToRerenderGLOBAL.current !== 'rerender-all-elements'
 }
 
 export function initDomWalkerObservers(
@@ -329,7 +330,7 @@ export function initDomWalkerObservers(
   // adequately assess the performance impact of doing so, and ideally find a way to only do so when the observed
   // change was not triggered by a user interaction
   const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-    const canvasInteractionHappening = selectCanvasInteractionHappening(editorStore.getState())
+    const canvasInteractionHappening = isCanvasInteractionHappening(editorStore.getState())
     const selectedViews = editorStore.getState().editor.selectedViews
     if (canvasInteractionHappening) {
       // Warning this only adds the selected views instead of the observed element
@@ -352,7 +353,7 @@ export function initDomWalkerObservers(
   })
 
   const mutationObserver = new window.MutationObserver((mutations: MutationRecord[]) => {
-    const canvasInteractionHappening = selectCanvasInteractionHappening(editorStore.getState())
+    const canvasInteractionHappening = isCanvasInteractionHappening(editorStore.getState())
     const selectedViews = editorStore.getState().editor.selectedViews
 
     if (canvasInteractionHappening) {

From 8ab360fd6767b47872ced83d2454b28a6623612f Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 18 Sep 2024 15:29:32 +0200
Subject: [PATCH 032/272] Preserve repeats when resizing grids (#6380)

**Problem:**

When resizing a grid, if the template contains `repeat` functions they
will get denormalized to the calculated values, which is
confusing/wrong/etc.

**Fix:**

The goal is to:
1. preserve `repeat` keywords after resizes
2. if resizing a repeated col/row, update the repeated _value_
3. resize _all_ rows/cols generated by the same repeat if resizing any
of them

In order to achieve this, this PR does a bunch of things:
1. It scraps the old grid template parsing in favor of `csstree` AST
parsing, preserving `repeats`
2. It adds a new grid dimension type, `GridCSSRepeat` which contains the
values that will be repeated (and how many times)
3. It expands the repeats when displaying the rows/cols and for counting
them
4. It reworks the resize strategy so that it updates as per the goals
5. It updates the grid controls so that repeated cols/rows are
highlighted when resizing any of them


https://github.com/user-attachments/assets/7c4fe075-22db-4628-abba-0feb966f6d43

Fixes #6379
---
 .../resize-grid-strategy.spec.browser2.tsx    |   4 +-
 .../strategies/resize-grid-strategy.ts        | 107 ++++++++-
 .../canvas/controls/grid-controls.tsx         | 142 ++++++++++--
 .../store/store-deep-equality-instances.ts    |  42 +++-
 .../inspector/common/css-tree-utils.ts        |  50 -----
 .../inspector/common/css-utils.spec.ts        |  58 -----
 .../components/inspector/common/css-utils.ts  | 205 +++++++++++-------
 .../src/components/inspector/flex-section.tsx |  60 +++--
 8 files changed, 429 insertions(+), 239 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
index 67593bcedcee..c829dc823ae4 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
@@ -255,7 +255,7 @@ export var storyboard = (
         width: 600,
         height: 600,
         gridTemplateColumns: '2.4fr 1fr 1fr',
-        gridTemplateRows: '99px 129px 90px 0px',
+        gridTemplateRows: '99px 129px 90px',
         height: 'max-content',
       }}
     >
@@ -370,7 +370,7 @@ export var storyboard = (
         gap: 10,
         width: 600,
         height: 600,
-        gridTemplateColumns: '1fr 2fr 1fr',
+        gridTemplateColumns: 'repeat(3, 2fr)',
         gridTemplateRows: '99px 109px 90px',
         height: 'max-content',
       }}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index 57f261d4e10f..1489e1b20d2b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -23,13 +23,17 @@ import {
 import type { InteractionSession } from '../interaction-state'
 import type { GridDimension } from '../../../../components/inspector/common/css-utils'
 import {
+  cssNumber,
+  gridCSSNumber,
+  gridCSSRepeat,
   isGridCSSNumber,
-  printArrayGridDimension,
+  isGridCSSRepeat,
+  printArrayGridDimensions,
 } from '../../../../components/inspector/common/css-utils'
-import { modify, toFirst } from '../../../../core/shared/optics/optic-utilities'
+import { toFirst } from '../../../../core/shared/optics/optic-utilities'
 import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
 import type { Either } from '../../../../core/shared/either'
-import { foldEither, isRight } from '../../../../core/shared/either'
+import { foldEither, isLeft, isRight } from '../../../../core/shared/either'
 import { roundToNearestWhole } from '../../../../core/shared/math-utils'
 import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
 
@@ -112,11 +116,29 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
+      // Expanded representation of the original values, where repeated elements are serialized.
+      // Each element also contains the indexes information to be used later on to build the resized
+      // template string.
+      const expandedOriginalValues = originalValues.dimensions.reduce((acc, cur, index) => {
+        if (isGridCSSRepeat(cur)) {
+          const repeatGroup = cur.value.map((dim, repeatedIndex) =>
+            expandedGridDimension(dim, index, repeatedIndex),
+          )
+          let expanded: ExpandedGridDimension[] = []
+          for (let i = 0; i < cur.times; i++) {
+            expanded.push(...repeatGroup)
+          }
+          return [...acc, ...expanded]
+        } else {
+          return [...acc, expandedGridDimension(cur, index)]
+        }
+      }, [] as ExpandedGridDimension[])
+
       const mergedValues: GridAutoOrTemplateBase = {
         type: calculatedValues.type,
         dimensions: calculatedValues.dimensions.map((dim, index) => {
-          if (index < originalValues.dimensions.length) {
-            return originalValues.dimensions[index]
+          if (index < expandedOriginalValues.length) {
+            return expandedOriginalValues[index]
           }
           return dim
         }),
@@ -134,22 +156,38 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
 
       const calculatedValue = toFirst(valueOptic, calculatedValues.dimensions)
       const mergedValue = toFirst(valueOptic, mergedValues.dimensions)
+      if (isLeft(mergedValue)) {
+        return emptyStrategyApplicationResult
+      }
       const mergedUnit = toFirst(unitOptic, mergedValues.dimensions)
-      const isFractional = isRight(mergedUnit) && mergedUnit.value === 'fr'
+      if (isLeft(mergedUnit)) {
+        return emptyStrategyApplicationResult
+      }
+
+      const isFractional = mergedUnit.value === 'fr'
       const precision = modifiers.cmd ? 'coarse' : 'precise'
+      const areaName = mergedValues.dimensions[control.columnOrRow]?.areaName ?? null
 
-      const newSetting = modify(
-        valueOptic,
-        (current) =>
+      const newValue = gridCSSNumber(
+        cssNumber(
           newResizedValue(
-            current,
+            mergedValue.value,
             getNewDragValue(dragAmount, isFractional, calculatedValue, mergedValue),
             precision,
             isFractional,
           ),
-        mergedValues.dimensions,
+          mergedUnit.value,
+        ),
+        areaName,
       )
-      const propertyValueAsString = printArrayGridDimension(newSetting)
+
+      const newDimensions = buildResizedDimensions({
+        newValue: newValue,
+        originalValues: originalValues.dimensions,
+        target: expandedOriginalValues[control.columnOrRow],
+      })
+
+      const propertyValueAsString = printArrayGridDimensions(newDimensions)
 
       const commands = [
         setProperty(
@@ -169,6 +207,51 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
   }
 }
 
+type DimensionIndexes = {
+  originalIndex: number // the index of this element in the original values
+  repeatedIndex: number // the index of this element, if it's generated via a repeat, inside the repeated values array definition
+}
+
+function expandedGridDimension(
+  dim: GridDimension,
+  originalIndex: number,
+  repeatedIndex: number = 0,
+): ExpandedGridDimension {
+  return {
+    ...dim,
+    indexes: {
+      originalIndex: originalIndex,
+      repeatedIndex: repeatedIndex,
+    },
+  }
+}
+
+type ExpandedGridDimension = GridDimension & {
+  indexes: DimensionIndexes
+}
+
+function buildResizedDimensions(params: {
+  newValue: GridDimension
+  originalValues: GridDimension[]
+  target: ExpandedGridDimension
+}) {
+  return params.originalValues.map((dim, index) => {
+    if (index !== params.target.indexes.originalIndex) {
+      return dim
+    } else if (isGridCSSRepeat(dim)) {
+      const repeatedIndex = params.target.indexes.repeatedIndex ?? 0
+      const repeatGroup = [
+        ...dim.value.slice(0, repeatedIndex),
+        params.newValue,
+        ...dim.value.slice(repeatedIndex + 1),
+      ]
+      return gridCSSRepeat(dim.times, repeatGroup)
+    } else {
+      return params.newValue
+    }
+  })
+}
+
 function getNewDragValue(
   dragAmount: number,
   isFractional: boolean,
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 688df97ef115..5992931ef155 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -7,7 +7,10 @@ import type { CSSProperties } from 'react'
 import React from 'react'
 import type { Sides } from 'utopia-api/core'
 import type { ElementPath } from 'utopia-shared/src/types'
-import type { GridDimension } from '../../../components/inspector/common/css-utils'
+import type {
+  GridDimension,
+  GridDiscreteDimension,
+} from '../../../components/inspector/common/css-utils'
 import {
   isCSSKeyword,
   printGridAutoOrTemplateBase,
@@ -17,6 +20,7 @@ import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { mapDropNulls, stripNulls } from '../../../core/shared/array-utils'
 import { defaultEither } from '../../../core/shared/either'
 import * as EP from '../../../core/shared/element-path'
+import type { GridAutoOrTemplateDimensions } from '../../../core/shared/element-template'
 import {
   isGridAutoOrTemplateDimensions,
   type GridAutoOrTemplateBase,
@@ -97,7 +101,9 @@ function getCellsCount(template: GridAutoOrTemplateBase | null): number {
 
   switch (template.type) {
     case 'DIMENSIONS':
-      return template.dimensions.length
+      return template.dimensions.reduce((acc, cur) => {
+        return acc + (cur.type === 'REPEAT' ? cur.times : 1)
+      }, 0)
     case 'FALLBACK':
       return 0
     default:
@@ -129,7 +135,7 @@ function gridCSSNumberToLabel(gridCSSNumber: GridDimension): string {
 function getLabelForAxis(
   fromDOM: GridDimension,
   index: number,
-  fromProps: GridAutoOrTemplateBase | null,
+  fromProps: GridAutoOrTemplateDimensions | null,
 ): string {
   const fromPropsAtIndex = toFirst(getFromPropsOptic(index), fromProps)
   return gridCSSNumberToLabel(defaultEither(fromDOM, fromPropsAtIndex))
@@ -143,11 +149,15 @@ export interface GridResizingControlProps {
   dimensionIndex: number
   axis: Axis
   containingFrame: CanvasRectangle
-  fromPropsAxisValues: GridAutoOrTemplateBase | null
+  fromPropsAxisValues: GridAutoOrTemplateDimensions | null
   padding: number | null
+  resizing: 'resize-target' | 'resize-generated' | 'not-resizing'
+  setResizingIndex: (v: number | null) => void
 }
 
 export const GridResizingControl = React.memo((props: GridResizingControlProps) => {
+  const { setResizingIndex } = props
+
   const canvasOffset = useEditorState(
     Substores.canvasOffset,
     (store) => store.editor.canvas.roundedCanvasOffset,
@@ -161,12 +171,10 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
   const dispatch = useDispatch()
   const colorTheme = useColorTheme()
 
-  const [resizing, setResizing] = React.useState(false)
-
   const mouseDownHandler = React.useCallback(
     (event: React.MouseEvent): void => {
       function mouseUpHandler() {
-        setResizing(false)
+        setResizingIndex(null)
         window.removeEventListener('mouseup', mouseUpHandler)
       }
       window.addEventListener('mouseup', mouseUpHandler)
@@ -176,7 +184,7 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
         canvasOffset,
         windowPoint({ x: event.nativeEvent.x, y: event.nativeEvent.y }),
       )
-      setResizing(true)
+      setResizingIndex(props.dimensionIndex)
 
       dispatch([
         CanvasActions.createInteractionSession(
@@ -191,7 +199,7 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
       event.stopPropagation()
       event.preventDefault()
     },
-    [canvasOffset, dispatch, props.axis, props.dimensionIndex, scale],
+    [canvasOffset, dispatch, props.axis, props.dimensionIndex, scale, setResizingIndex],
   )
 
   const { maybeClearHighlightsOnHoverEnd } = useMaybeHighlightElement()
@@ -221,8 +229,8 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
         display: 'flex',
         alignItems: props.axis === 'column' ? 'flex-start' : 'center',
         justifyContent: props.axis === 'column' ? 'center' : 'flex-start',
-        height: props.axis === 'column' && resizing ? shadowSize : '100%',
-        width: props.axis === 'row' && resizing ? shadowSize : '100%',
+        height: props.axis === 'column' && props.resizing !== 'not-resizing' ? shadowSize : '100%',
+        width: props.axis === 'row' && props.resizing !== 'not-resizing' ? shadowSize : '100%',
         position: 'relative',
       }}
     >
@@ -245,7 +253,7 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
           pointerEvents: 'initial',
         }}
         css={{
-          opacity: resizing ? 1 : 0.5,
+          opacity: props.resizing !== 'not-resizing' ? 1 : 0.5,
           ':hover': {
             opacity: 1,
           },
@@ -260,7 +268,7 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
         )}
       </div>
       {when(
-        resizing,
+        props.resizing !== 'not-resizing',
         <div
           style={{
             position: 'absolute',
@@ -271,10 +279,17 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            border: `1px solid ${resizing ? colorTheme.brandNeonPink.value : 'transparent'}`,
-            ...(resizing
+            border: `1px solid ${
+              props.resizing === 'resize-target'
+                ? colorTheme.brandNeonPink.value
+                : colorTheme.brandNeonPink60.value
+            }`,
+            ...(props.resizing === 'resize-target'
               ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.brandNeonPink60.value, scale)
-              : {}),
+              : UtopiaStyles.backgrounds.stripedBackground(
+                  colorTheme.brandNeonPink10.value,
+                  scale,
+                )),
           }}
         >
           <CanvasLabel
@@ -284,7 +299,11 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
               props.fromPropsAxisValues,
             )}
             scale={scale}
-            color={colorTheme.brandNeonPink.value}
+            color={
+              props.resizing === 'resize-target'
+                ? colorTheme.brandNeonPink.value
+                : colorTheme.brandNeonPink60.value
+            }
             textColor={colorTheme.white.value}
           />
         </div>,
@@ -309,6 +328,85 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
     (store) => store.editor.canvas.scale,
     'GridResizing canvasScale',
   )
+
+  const fromProps = React.useMemo((): GridAutoOrTemplateDimensions | null => {
+    if (props.fromPropsAxisValues?.type !== 'DIMENSIONS') {
+      return null
+    }
+    return {
+      type: 'DIMENSIONS',
+      dimensions: props.fromPropsAxisValues.dimensions.reduce(
+        (acc, cur): GridDiscreteDimension[] => {
+          if (cur.type === 'REPEAT') {
+            let expanded: GridDiscreteDimension[] = []
+            for (let i = 0; i < cur.times; i++) {
+              expanded.push(...cur.value.filter((v) => v.type !== 'REPEAT'))
+            }
+            return acc.concat(...expanded)
+          } else {
+            return acc.concat(cur)
+          }
+        },
+        [] as GridDiscreteDimension[],
+      ),
+    }
+  }, [props.fromPropsAxisValues])
+
+  const [resizingIndex, setResizingIndex] = React.useState<number | null>(null)
+
+  // These are the indexes of the elements that will resize too alongside the one at the index of
+  // `resizingIndex`.
+  const coresizingIndexes: number[] = React.useMemo(() => {
+    if (props.fromPropsAxisValues?.type !== 'DIMENSIONS' || resizingIndex == null) {
+      return []
+    }
+
+    // Build an array of coresizing indexes per element.
+    let coresizeIndexes: number[][][] = [] // This looks scary but it's not! It's just a list of indexes, containing a list of the indexes *per group element*.
+    // For example, 1fr repeat(3, 10px 20px) 1fr, will be represented as:
+    /**
+     * [
+     * 	[ [0] ]
+     *  [ [1, 3] [2, 4]  ]
+     *  [ [5] ]
+     * ]
+     */
+    let elementCount = 0 // basically the expanded index
+    for (const dim of props.fromPropsAxisValues.dimensions) {
+      if (dim.type === 'REPEAT') {
+        let groupIndexes: number[][] = []
+        // for each value push the coresize indexes as many times as the repeats counter
+        for (let valueIndex = 0; valueIndex < dim.value.length; valueIndex++) {
+          let repeatedValueIndexes: number[] = []
+          for (let repeatIndex = 0; repeatIndex < dim.times; repeatIndex++) {
+            repeatedValueIndexes.push(elementCount + valueIndex + repeatIndex * dim.value.length)
+          }
+          groupIndexes.push(repeatedValueIndexes)
+        }
+        coresizeIndexes.push(groupIndexes)
+        elementCount += dim.value.length * dim.times // advance the counter as many times as the repeated values *combined*
+      } else {
+        coresizeIndexes.push([[elementCount]])
+        elementCount++
+      }
+    }
+
+    // Now, expand the indexes calculated above so they "flatten out" to match the generated values
+    let expandedCoresizeIndexes: number[][] = []
+    props.fromPropsAxisValues.dimensions.forEach((dim, dimIndex) => {
+      if (dim.type === 'REPEAT') {
+        for (let repeatIndex = 0; repeatIndex < dim.times * dim.value.length; repeatIndex++) {
+          const indexes = coresizeIndexes[dimIndex][repeatIndex % dim.value.length]
+          expandedCoresizeIndexes.push(indexes)
+        }
+      } else {
+        expandedCoresizeIndexes.push(coresizeIndexes[dimIndex][0])
+      }
+    })
+
+    return expandedCoresizeIndexes[resizingIndex] ?? []
+  }, [props.fromPropsAxisValues, resizingIndex])
+
   if (props.axisValues == null) {
     return null
   }
@@ -347,9 +445,17 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
                 key={`grid-resizing-control-${dimensionIndex}`}
                 dimensionIndex={dimensionIndex}
                 dimension={dimension}
-                fromPropsAxisValues={props.fromPropsAxisValues}
+                fromPropsAxisValues={fromProps}
                 axis={props.axis}
                 containingFrame={props.containingFrame}
+                resizing={
+                  resizingIndex === dimensionIndex
+                    ? 'resize-target'
+                    : coresizingIndexes.includes(dimensionIndex)
+                    ? 'resize-generated'
+                    : 'not-resizing'
+                }
+                setResizingIndex={setResizingIndex}
                 padding={
                   props.padding == null
                     ? 0
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index a360d4d1eeca..16385bd42779 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -265,7 +265,6 @@ import {
   combine9EqualityCalls,
   unionDeepEquality,
   combine11EqualityCalls,
-  combine16EqualityCalls,
   combine15EqualityCalls,
 } from '../../../utils/deep-equality'
 import {
@@ -567,15 +566,15 @@ import type {
   GridCSSNumber,
   GridDimension,
   GridAutoFlow,
+  GridCSSRepeat,
 } from '../../inspector/common/css-utils'
 import {
   cssNumber,
   fontSettings,
   gridCSSKeyword,
   gridCSSNumber,
+  gridCSSRepeat,
   isCSSKeyword,
-  isGridCSSKeyword,
-  isGridCSSNumber,
 } from '../../inspector/common/css-utils'
 import type { ElementPaste, ProjectListing } from '../action-types'
 import { projectListing } from '../action-types'
@@ -1993,15 +1992,40 @@ export const GridCSSKeywordKeepDeepEquality: KeepDeepEqualityCall<GridCSSKeyword
 export const GridDimensionKeepDeepEquality: KeepDeepEqualityCall<GridDimension> =
   combine1EqualityCall(
     (dimension) => dimension,
-    unionDeepEquality(
-      GridCSSNumberKeepDeepEquality,
-      GridCSSKeywordKeepDeepEquality,
-      isGridCSSNumber,
-      isGridCSSKeyword,
-    ),
+    (oldValue: GridDimension, newValue: GridDimension): KeepDeepEqualityResult<GridDimension> => {
+      switch (oldValue.type) {
+        case 'KEYWORD':
+          if (newValue.type === oldValue.type) {
+            return GridCSSKeywordKeepDeepEquality(oldValue, newValue)
+          }
+          break
+        case 'NUMBER':
+          if (newValue.type === oldValue.type) {
+            return GridCSSNumberKeepDeepEquality(oldValue, newValue)
+          }
+          break
+        case 'REPEAT':
+          if (newValue.type === oldValue.type) {
+            return GridCSSRepeatKeepDeepEquality(oldValue, newValue)
+          }
+          break
+        default:
+          assertNever(oldValue)
+      }
+      return keepDeepEqualityResult(newValue, false)
+    },
     (dimension) => dimension,
   )
 
+export const GridCSSRepeatKeepDeepEquality: KeepDeepEqualityCall<GridCSSRepeat> =
+  combine2EqualityCalls(
+    (p) => p.times,
+    NumberKeepDeepEquality,
+    (p) => p.value,
+    arrayDeepEquality(GridDimensionKeepDeepEquality),
+    gridCSSRepeat,
+  )
+
 export const GridAutoOrTemplateDimensionsKeepDeepEquality: KeepDeepEqualityCall<GridAutoOrTemplateDimensions> =
   combine1EqualityCall(
     (value) => value.dimensions,
diff --git a/editor/src/components/inspector/common/css-tree-utils.ts b/editor/src/components/inspector/common/css-tree-utils.ts
index 46f7ea72ce25..4fd6d4de0ef3 100644
--- a/editor/src/components/inspector/common/css-tree-utils.ts
+++ b/editor/src/components/inspector/common/css-tree-utils.ts
@@ -16,53 +16,3 @@ export function cssTreeNodeValue(children: csstree.List<csstree.CssNode>): csstr
     children: children,
   }
 }
-
-export function expandCssTreeNodeValue(node: csstree.CssNode): csstree.Value {
-  return cssTreeNodeValue(expandNode(node))
-}
-
-function expandNode(node: csstree.CssNode): csstree.List<csstree.CssNode> {
-  if (node.type === 'Function' && node.name === 'repeat') {
-    // specific expansion for repeat functions
-    return expandRepeatFunction(node)
-  } else if (node.type === 'Value') {
-    // recursively expand children of Value nodes
-    const children = node.children.toArray()
-    const expanded = children.flatMap((child) => expandNode(child).toArray())
-    return cssTreeNodeList(expanded)
-  } else {
-    // fallback to just the verbatim node
-    return cssTreeNodeList([node])
-  }
-}
-
-function expandRepeatFunction(fnNode: csstree.FunctionNode): csstree.List<csstree.CssNode> {
-  // The node should have 3+ children, because it should be [Number + Operator (,) + Value(s)]
-  // TODO this should be extended to support non-numeric, keyword repeaters
-  const children = fnNode.children.toArray()
-  if (children.length < 3) {
-    // just return the original children if the format is not supported
-    return fnNode.children
-  }
-
-  // 1. parse the repeat number
-  const repeatNumber = children[0]
-  if (repeatNumber.type !== 'Number') {
-    return fnNode.children
-  }
-  const times = parseInt(repeatNumber.value)
-
-  // 2. grab ALL the values to repeat (rightside of the comma), wrap them in a new Value node,
-  // and expand them so they support nested repeats
-  const valuesToRepeat = children.slice(2)
-  const nodeToRepeat = cssTreeNodeValue(cssTreeNodeList(valuesToRepeat))
-  const expandedValues = expandNode(nodeToRepeat)
-
-  // 3. append the expanded values N times, where N is the number of repeats parsed earlier
-  let result = new csstree.List<csstree.CssNode>()
-  for (let i = 0; i < times; i++) {
-    expandedValues.forEach((v) => result.appendData(v))
-  }
-
-  return result
-}
diff --git a/editor/src/components/inspector/common/css-utils.spec.ts b/editor/src/components/inspector/common/css-utils.spec.ts
index 139eb037d072..243f75f26ec2 100644
--- a/editor/src/components/inspector/common/css-utils.spec.ts
+++ b/editor/src/components/inspector/common/css-utils.spec.ts
@@ -31,7 +31,6 @@ import {
   cssNumber,
   cssPixelLength,
   cssPixelLengthZero,
-  CSSSolidColor,
   cssTransformRotate,
   cssTransformRotateX,
   cssTransformRotateY,
@@ -48,13 +47,11 @@ import {
   cssTransformTranslateY,
   cssTransformTranslateZ,
   cssUnitlessLength,
-  CSSUnknownArrayItem,
   defaultBGSize,
   defaultCSSGradientStops,
   defaultCSSRadialGradientSize,
   defaultCSSRadialOrConicGradientCenter,
   disabledFunctionName,
-  expandRepeatFunctions,
   parseBackgroundColor,
   parseBackgroundImage,
   parseBorderRadius,
@@ -72,7 +69,6 @@ import {
   RegExpLibrary,
   toggleSimple,
   toggleStylePropPath,
-  tokenizeGridTemplate,
 } from './css-utils'
 
 describe('toggleStyleProp', () => {
@@ -1809,57 +1805,3 @@ describe('printBackgroundSize', () => {
     `)
   })
 })
-
-describe('tokenizeGridTemplate', () => {
-  it('tokenizes the grid template strings (no units)', async () => {
-    expect(tokenizeGridTemplate('123 456 78 9')).toEqual(['123', '456', '78', '9'])
-  })
-  it('tokenizes the grid template strings (with units)', async () => {
-    expect(tokenizeGridTemplate('123 456px 78 9rem')).toEqual(['123', '456px', '78', '9rem'])
-  })
-  it('tokenizes the grid template strings (with some area names)', async () => {
-    expect(tokenizeGridTemplate('[foo] 123 456px 78 9rem')).toEqual([
-      '[foo] 123',
-      '456px',
-      '78',
-      '9rem',
-    ])
-    expect(tokenizeGridTemplate('123 [foo]456px 78 [bar]       9rem')).toEqual([
-      '123',
-      '[foo] 456px',
-      '78',
-      '[bar] 9rem',
-    ])
-  })
-  it('tokenizes the grid template strings (with all area names)', async () => {
-    expect(tokenizeGridTemplate('[foo] 123 [bar]456px [baz]       78  [QUX]9rem')).toEqual([
-      '[foo] 123',
-      '[bar] 456px',
-      '[baz] 78',
-      '[QUX] 9rem',
-    ])
-  })
-})
-
-describe('expandRepeatFunctions', () => {
-  it('expands repeat', async () => {
-    expect(expandRepeatFunctions('repeat(4, 1fr)')).toEqual('1fr 1fr 1fr 1fr')
-  })
-  it('expands repeat with multiple units', () => {
-    expect(expandRepeatFunctions('repeat(2, 1fr 2fr 3fr)')).toEqual('1fr 2fr 3fr 1fr 2fr 3fr')
-  })
-  it('expands repeat with spacing', () => {
-    expect(expandRepeatFunctions('repeat( 4       , 1fr )')).toEqual('1fr 1fr 1fr 1fr')
-  })
-  it('expands repeat with decimals', () => {
-    expect(expandRepeatFunctions('repeat(4, 1.5fr)')).toEqual('1.5fr 1.5fr 1.5fr 1.5fr')
-  })
-  it('expands nested', () => {
-    expect(expandRepeatFunctions('repeat(2, repeat(3, 1fr))')).toEqual('1fr 1fr 1fr 1fr 1fr 1fr')
-
-    // Note: crazytown, I'm not even sure this is valid CSS *but still*
-    expect(expandRepeatFunctions('repeat(2, repeat(2, 1fr repeat(3, 2fr 4em)))')).toEqual(
-      '1fr 2fr 4em 2fr 4em 2fr 4em 1fr 2fr 4em 2fr 4em 2fr 4em 1fr 2fr 4em 2fr 4em 2fr 4em 1fr 2fr 4em 2fr 4em 2fr 4em',
-    )
-  })
-})
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index 2b361ff8d03e..5bee0ef90a05 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -21,7 +21,6 @@ import {
   isLeft,
   isRight,
   left,
-  leftMapEither,
   mapEither,
   right,
   traverseEither,
@@ -46,7 +45,6 @@ import {
   jsExpressionValue,
   gridPositionValue,
   gridRange,
-  gridAutoOrTemplateDimensions,
 } from '../../../core/shared/element-template'
 import type { ModifiableAttribute } from '../../../core/shared/jsx-attributes'
 import {
@@ -83,11 +81,7 @@ import {
 } from '../../../printer-parsers/css/css-parser-margin'
 import { parseFlex, printFlexAsAttributeValue } from '../../../printer-parsers/css/css-parser-flex'
 import { memoize } from '../../../core/shared/memoize'
-import { parseCSSArray } from '../../../printer-parsers/css/css-parser-utils'
-import type { ParseError } from '../../../utils/value-parser-utils'
-import { descriptionParseError } from '../../../utils/value-parser-utils'
 import * as csstree from 'css-tree'
-import { expandCssTreeNodeValue, parseCssTreeNodeValue } from './css-tree-utils'
 import type { IcnProps } from '../../../uuiui'
 
 var combineRegExp = function (regexpList: Array<RegExp | string>, flags?: string) {
@@ -601,6 +595,13 @@ export type GridCSSKeyword = BaseGridDimension & {
   value: CSSKeyword<ValidGridDimensionKeyword>
 }
 
+export type GridCSSRepeat = {
+  type: 'REPEAT'
+  times: number
+  value: Array<GridDimension>
+  areaName: null
+}
+
 export function isGridCSSKeyword(dim: GridDimension): dim is GridCSSKeyword {
   return dim.type === 'KEYWORD'
 }
@@ -616,10 +617,23 @@ export function gridCSSKeyword(
   }
 }
 
+export function gridCSSRepeat(times: number, value: GridDimension[]): GridCSSRepeat {
+  return {
+    type: 'REPEAT',
+    times: times,
+    value: value,
+    areaName: null,
+  }
+}
+
 export function isGridCSSNumber(dim: GridDimension): dim is GridCSSNumber {
   return dim.type === 'NUMBER'
 }
 
+export function isGridCSSRepeat(dim: GridDimension): dim is GridCSSRepeat {
+  return dim.type === 'REPEAT'
+}
+
 export function gridCSSNumber(value: CSSNumber, areaName: string | null): GridCSSNumber {
   return {
     type: 'NUMBER',
@@ -628,13 +642,23 @@ export function gridCSSNumber(value: CSSNumber, areaName: string | null): GridCS
   }
 }
 
-export type GridDimension = GridCSSNumber | GridCSSKeyword
+export type GridDiscreteDimension = GridCSSNumber | GridCSSKeyword
+export type GridDimension = GridDiscreteDimension | GridCSSRepeat
 
 export function printGridCSSNumber(dim: GridDimension): string {
-  if (isGridCSSNumber(dim)) {
-    return `${dim.value.value}${dim.value.unit ?? ''}`
+  switch (dim.type) {
+    case 'KEYWORD':
+      return dim.value.value
+    case 'NUMBER':
+      return `${dim.value.value}${dim.value.unit ?? ''}`
+    case 'REPEAT':
+      if (dim.value.length === 0) {
+        return ''
+      }
+      return printGridCSSNumber(dim.value[0])
+    default:
+      assertNever(dim)
   }
-  return dim.value.value
 }
 
 export function cssNumber(value: number, unit: CSSNumberUnit | null = null): CSSNumber {
@@ -797,23 +821,29 @@ export function printCSSNumber(
   }
 }
 
-export function printArrayGridDimension(array: Array<GridDimension>): string {
-  return array
-    .map((dimension) => {
-      if (isGridCSSKeyword(dimension)) {
-        return dimension.value.value
-      }
+export function printGridDimension(dimension: GridDimension): string {
+  switch (dimension.type) {
+    case 'KEYWORD':
+      return dimension.value.value
+    case 'NUMBER':
       const printed = printCSSNumber(dimension.value, null)
       const areaName = dimension.areaName != null ? `[${dimension.areaName}] ` : ''
       return `${areaName}${printed}`
-    })
-    .join(' ')
+    case 'REPEAT':
+      return `repeat(${dimension.times}, ${printArrayGridDimensions(dimension.value)})`
+    default:
+      assertNever(dimension)
+  }
+}
+
+export function printArrayGridDimensions(array: Array<GridDimension>): string {
+  return array.map(printGridDimension).join(' ')
 }
 
 export function printGridAutoOrTemplateBase(input: GridAutoOrTemplateBase): string {
   switch (input.type) {
     case 'DIMENSIONS':
-      return printArrayGridDimension(input.dimensions)
+      return printArrayGridDimensions(input.dimensions)
     case 'FALLBACK':
       return input.value
     default:
@@ -926,8 +956,8 @@ export function parseToCSSGridDimension(input: unknown): Either<string, GridDime
   return mapEither((value) => {
     return {
       ...value,
-      areaName: areaName,
-    }
+      areaName: value.type === 'REPEAT' ? null : areaName,
+    } as GridDimension
   }, parseCSSGrid(inputToParse))
 }
 
@@ -1046,68 +1076,89 @@ export function parseGridRange(
   }
 }
 
-export function expandRepeatFunctions(str: string): string {
-  const node = parseCssTreeNodeValue(str)
-  const expanded = expandCssTreeNodeValue(node)
-  return csstree.generate(expanded)
-}
-
-const reGridAreaNameBrackets = /^\[.+\]$/
-
-function normalizeGridTemplate(template: string): string {
-  type normalizeFn = (s: string) => string
-
-  const normalizePasses: normalizeFn[] = [
-    // 1. expand repeat functions
-    expandRepeatFunctions,
-    // 2. normalize area names spacing
-    (s) => s.replace(/\]/g, '] ').replace(/\[/g, ' ['),
-  ]
-
-  return normalizePasses.reduce((working, normalize) => normalize(working), template).trim()
-}
-
-export function tokenizeGridTemplate(template: string): string[] {
-  let tokens: string[] = []
-  let parts = normalizeGridTemplate(template).split(/\s+/)
-  while (parts.length > 0) {
-    const part = parts.shift()?.trim()
-    if (part == null) {
-      break
-    }
-    if (part.match(reGridAreaNameBrackets) != null && parts.length > 0) {
-      const withAreaName = `${part} ${parts.shift()}`
-      tokens.push(withAreaName)
-    } else {
-      tokens.push(part)
-    }
-  }
-  return tokens
-}
-
 export function parseGridAutoOrTemplateBase(
   input: unknown,
 ): Either<string, GridAutoOrTemplateBase> {
-  function numberOrKeywordParse(inputToParse: unknown): Either<ParseError, GridDimension> {
-    const result = parseToCSSGridDimension(inputToParse)
-    return leftMapEither<string, ParseError, GridDimension>(descriptionParseError, result)
-  }
   if (typeof input === 'string') {
-    const parsedCSSArray = parseCSSArray([numberOrKeywordParse])(tokenizeGridTemplate(input))
-    return bimapEither(
-      (error) => {
-        if (error.type === 'DESCRIPTION_PARSE_ERROR') {
-          return error.description
-        } else {
-          return error.toString()
+    const parsed = csstree.parse(input, { context: 'value' })
+    if (parsed.type === 'Value') {
+      let nextAreaName: string | null = null
+      function getAreaName() {
+        const currentAreaName = nextAreaName != null ? `${nextAreaName}` : null
+        nextAreaName = null
+        return currentAreaName
+      }
+
+      function parseChildren(
+        children: csstree.List<csstree.CssNode>,
+      ): Either<string, GridDimension[]> {
+        let dimensions: GridDimension[] = []
+        for (const child of children) {
+          switch (child.type) {
+            case 'Dimension': {
+              const parsedDimension = parseCSSNumber(`${child.value}${child.unit}`, 'AnyValid')
+              if (isRight(parsedDimension)) {
+                dimensions.push(gridCSSNumber(parsedDimension.value, getAreaName()))
+              } else {
+                return left('Invalid grid CSS dimension.')
+              }
+              break
+            }
+            case 'Identifier': {
+              if (isValidGridDimensionKeyword(child.name)) {
+                dimensions.push(gridCSSKeyword(cssKeyword(child.name), getAreaName()))
+              } else {
+                return left('Invalid grid CSS keyword.')
+              }
+              break
+            }
+            case 'Function': {
+              if (child.name.toLowerCase() === 'repeat') {
+                const repeatChildren = child.children.toArray()
+                const times = parseInt(
+                  repeatChildren.find((c) => c.type === 'Number')?.value ?? '0',
+                )
+                const values = new csstree.List<csstree.CssNode>().fromArray(
+                  repeatChildren.filter(
+                    (c) =>
+                      c.type === 'Dimension' ||
+                      c.type === 'Identifier' ||
+                      // We want to support area names too, because they are valid CSS
+                      c.type === 'Brackets',
+                  ),
+                )
+                const parsedDimensions = parseChildren(values)
+                if (isRight(parsedDimensions)) {
+                  dimensions.push(gridCSSRepeat(times, parsedDimensions.value))
+                } else {
+                  return left('Invalid grid CSS repeat values.')
+                }
+              }
+              break
+            }
+            case 'Brackets': {
+              // The next child will get this area name
+              nextAreaName =
+                child.children.toArray().find((c) => c.type === 'Identifier')?.name ?? null
+              break
+            }
+            default:
+              return left(`invalid grid child type ${child.type}`)
+          }
         }
-      },
-      gridAutoOrTemplateDimensions,
-      parsedCSSArray,
-    )
-  } else {
-    return left('Unknown input.')
+        return right(dimensions)
+      }
+
+      const dimensions = parseChildren(parsed.children)
+      if (isRight(dimensions)) {
+        return right({ type: 'DIMENSIONS', dimensions: dimensions.value })
+      }
+
+      console.warn(`Invalid grid template, falling back: ${dimensions.value}.`)
+      return right({ type: 'FALLBACK', value: input })
+    }
   }
+  return left('Invalid grid template input.')
 }
 
 export function parseDisplay(input: unknown): Either<string, string> {
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index f158e65eebe1..87242505e12f 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -35,6 +35,7 @@ import type {
   CSSKeyword,
   CSSNumber,
   GridAutoFlow,
+  GridDiscreteDimension,
   UnknownOrEmptyInput,
   ValidGridDimensionKeyword,
 } from './common/css-utils'
@@ -151,12 +152,13 @@ export const FlexSection = React.memo(() => {
     'FlexSection grid',
   )
 
-  const columns = React.useMemo(() => {
+  const columns = React.useMemo((): GridDiscreteDimension[] => {
     const autoCols: GridDimension[] =
       grid?.specialSizeMeasurements.containerGridProperties.gridAutoColumns?.type === 'DIMENSIONS'
         ? grid.specialSizeMeasurements.containerGridProperties.gridAutoColumns.dimensions
         : []
-    return mergeGridTemplateValues({
+
+    const merged = mergeGridTemplateValues({
       autoValues: autoCols,
       ...getGridTemplateAxisValues({
         calculated:
@@ -166,14 +168,28 @@ export const FlexSection = React.memo(() => {
           null,
       }),
     })
+
+    const reduced = merged.reduce((acc, cur) => {
+      if (cur.type === 'REPEAT') {
+        let expanded: GridDiscreteDimension[] = []
+        for (let i = 0; i < cur.times; i++) {
+          expanded.push(...cur.value.filter((v) => v.type !== 'REPEAT'))
+        }
+        return acc.concat(...expanded)
+      }
+      return acc.concat(cur)
+    }, [] as GridDiscreteDimension[])
+
+    return reduced
   }, [grid])
 
-  const rows = React.useMemo(() => {
+  const rows = React.useMemo((): GridDiscreteDimension[] => {
     const autoRows: GridDimension[] =
       grid?.specialSizeMeasurements.containerGridProperties.gridAutoRows?.type === 'DIMENSIONS'
         ? grid.specialSizeMeasurements.containerGridProperties.gridAutoRows.dimensions
         : []
-    return mergeGridTemplateValues({
+
+    const merged = mergeGridTemplateValues({
       autoValues: autoRows,
       ...getGridTemplateAxisValues({
         calculated: grid?.specialSizeMeasurements.containerGridProperties.gridTemplateRows ?? null,
@@ -181,6 +197,15 @@ export const FlexSection = React.memo(() => {
           grid?.specialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateRows ?? null,
       }),
     })
+
+    const reduced = merged.reduce((acc, cur) => {
+      if (cur.type === 'REPEAT') {
+        return acc.concat(...cur.value.filter((v) => v.type !== 'REPEAT'))
+      }
+      return acc.concat(cur)
+    }, [] as GridDiscreteDimension[])
+
+    return reduced
   }, [grid])
 
   return (
@@ -246,7 +271,7 @@ const TemplateDimensionControl = React.memo(
     title,
   }: {
     grid: ElementInstanceMetadata
-    values: GridDimension[]
+    values: GridDiscreteDimension[]
     axis: 'column' | 'row'
     title: string
   }) => {
@@ -498,7 +523,7 @@ function AxisDimensionControl({
   onUpdate,
   opener,
 }: {
-  value: GridDimension
+  value: GridDiscreteDimension
   index: number
   items: DropdownMenuItem[]
   axis: 'column' | 'row'
@@ -594,9 +619,14 @@ function renameAreaInTemplateAtIndex(
   axis: 'column' | 'row',
   index: number,
   newAreaName: string | null,
-) {
-  function renameDimension(dimension: GridDimension, idx: number) {
-    return idx === index ? { ...dimension, areaName: newAreaName } : dimension
+): GridContainerProperties {
+  function renameDimension(dimension: GridDimension, idx: number): GridDimension {
+    return idx === index
+      ? ({
+          ...dimension,
+          areaName: dimension.type === 'REPEAT' ? null : newAreaName,
+        } as GridDimension)
+      : dimension
   }
 
   const gridTemplateRows =
@@ -622,14 +652,18 @@ function renameAreaInTemplateAtIndex(
   }
 }
 
-function gridNumbersToTemplateString(values: GridDimension[]) {
+function gridNumbersToTemplateString(values: GridDiscreteDimension[]) {
   return values
     .map((v) => {
       function getValue(): string {
-        if (isGridCSSKeyword(v)) {
-          return v.value.value
+        switch (v.type) {
+          case 'KEYWORD':
+            return v.value.value
+          case 'NUMBER':
+            return `${v.value.value}${v.value.unit != null ? `${v.value.unit}` : 'px'}`
+          default:
+            assertNever(v)
         }
-        return `${v.value.value}${v.value.unit != null ? `${v.value.unit}` : 'px'}`
       }
       const areaName = v.areaName != null ? `[${v.areaName}] ` : ''
       const value = getValue()

From 5b1cd242260eaa78246ca465aea7bcaa6a0ce876 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:12:20 +0200
Subject: [PATCH 033/272] More grid refactor (#6384)

**Problem:**
Replace more dom query based logic from grid strategies, and nuke grid
specific X behavior.

**Commit Details:** (< vv pls delete this section if's not relevant)

- Remove `getGridCellAtPoint` and replace its usage with
`getGridCellUnderMouseFromMetadata`
- Rewrite `getGridCellBoundsFromCanvas` to use metadata and canvas
coordinates.
- Nuke grid specific X behavior and all its helpers: let's just remove
the grid cell positioning props when converting to absolute.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../strategies/grid-cell-bounds.ts            |  94 ++-------
 .../grid-rearrange-keyboard-strategy.ts       |   6 +-
 .../editor/shortcuts.spec.browser2.tsx        | 188 +-----------------
 .../components/inspector/inspector-common.ts  | 145 ++------------
 4 files changed, 42 insertions(+), 391 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
index 2439fb46efc6..e70b9aef07f4 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -1,14 +1,13 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import type { ElementInstanceMetadata } from '../../../../core/shared/element-template'
-import type { CanvasVector, WindowPoint, WindowRectangle } from '../../../../core/shared/math-utils'
+import type { WindowPoint, WindowRectangle } from '../../../../core/shared/math-utils'
 import {
+  canvasPoint,
   isInfinityRectangle,
   offsetPoint,
   rectContainsPoint,
-  windowPoint,
   windowRectangle,
 } from '../../../../core/shared/math-utils'
-import { canvasPointToWindowPoint } from '../../dom-lookup'
 import * as EP from '../../../../core/shared/element-path'
 import {
   getGlobalFramesOfGridCells,
@@ -35,7 +34,7 @@ export function gridCellTargetId(
 
 export function getGridCellUnderMouseFromMetadata(
   grid: ElementInstanceMetadata,
-  canvasPoint: CanvasPoint,
+  point: CanvasPoint,
 ): TargetGridCellData | null {
   const gridCellGlobalFrames = getGlobalFramesOfGridCells(grid)
 
@@ -43,17 +42,17 @@ export function getGridCellUnderMouseFromMetadata(
     return null
   }
 
-  return getGridCellUnderPoint(gridCellGlobalFrames, canvasPoint)
+  return getGridCellUnderPoint(gridCellGlobalFrames, point)
 }
 
 // TODO: we could optimize this with binary search, but huge grids are rare
 function getGridCellUnderPoint(
   gridCellGlobalFrames: GridCellGlobalFrames,
-  canvasPoint: CanvasPoint,
+  point: CanvasPoint,
 ): TargetGridCellData | null {
   for (let i = 0; i < gridCellGlobalFrames.length; i++) {
     for (let j = 0; j < gridCellGlobalFrames[i].length; j++) {
-      if (rectContainsPoint(gridCellGlobalFrames[i][j], canvasPoint)) {
+      if (rectContainsPoint(gridCellGlobalFrames[i][j], point)) {
         return {
           gridCellCoordinates: gridCellCoordinates(i + 1, j + 1),
           cellCanvasRectangle: gridCellGlobalFrames[i][j],
@@ -64,97 +63,34 @@ function getGridCellUnderPoint(
   return null
 }
 
-function isGridCellTargetId(id: string): boolean {
-  return id.startsWith(gridCellTargetIdPrefix)
-}
-
-export function getGridCellAtPoint(
-  point: WindowPoint,
-  duplicating: boolean,
-): { id: string; coordinates: GridCellCoordinates; cellWindowRectangle: WindowRectangle } | null {
-  function maybeRecursivelyFindCellAtPoint(
-    elements: Element[],
-  ): { element: Element; cellWindowRectangle: WindowRectangle } | null {
-    // If this used during duplication, the canvas controls will be in the way and we need to traverse the children too.
-    for (const element of elements) {
-      if (isGridCellTargetId(element.id)) {
-        const domRect = element.getBoundingClientRect()
-        const windowRect = windowRectangle(domRect)
-        if (rectContainsPoint(windowRect, point)) {
-          return { element: element, cellWindowRectangle: windowRect }
-        }
-      }
-
-      if (duplicating) {
-        const child = maybeRecursivelyFindCellAtPoint(Array.from(element.children))
-        if (child != null) {
-          return child
-        }
-      }
-    }
-
-    return null
-  }
-
-  const cellUnderMouse = maybeRecursivelyFindCellAtPoint(
-    document.elementsFromPoint(point.x, point.y),
-  )
-  if (cellUnderMouse == null) {
-    return null
-  }
-
-  const { element, cellWindowRectangle } = cellUnderMouse
-  const row = element.getAttribute('data-grid-row')
-  const column = element.getAttribute('data-grid-column')
-
-  return {
-    id: element.id,
-    cellWindowRectangle: cellWindowRectangle,
-    coordinates: gridCellCoordinates(
-      row == null ? 0 : parseInt(row),
-      column == null ? 0 : parseInt(column),
-    ),
-  }
-}
-
-const GRID_BOUNDS_TOLERANCE = 5 // px
-
 export function getGridCellBoundsFromCanvas(
   cell: ElementInstanceMetadata,
-  canvasScale: number,
-  canvasOffset: CanvasVector,
+  grid: ElementInstanceMetadata,
 ) {
   const cellFrame = cell.globalFrame
   if (cellFrame == null || isInfinityRectangle(cellFrame)) {
     return null
   }
 
-  const canvasFrameWidth = cellFrame.width * canvasScale
-  const canvasFrameHeight = cellFrame.height * canvasScale
-
-  const cellOriginPoint = offsetPoint(
-    canvasPointToWindowPoint(cellFrame, canvasScale, canvasOffset),
-    windowPoint({ x: GRID_BOUNDS_TOLERANCE, y: GRID_BOUNDS_TOLERANCE }),
-  )
-  const cellOrigin = getGridCellAtPoint(cellOriginPoint, true)
+  const cellOrigin = getGridCellUnderMouseFromMetadata(grid, cellFrame)
   if (cellOrigin == null) {
     return null
   }
 
   const cellEndPoint = offsetPoint(
-    cellOriginPoint,
-    windowPoint({
-      x: canvasFrameWidth - GRID_BOUNDS_TOLERANCE,
-      y: canvasFrameHeight - GRID_BOUNDS_TOLERANCE,
+    cellFrame,
+    canvasPoint({
+      x: cellFrame.width,
+      y: cellFrame.height,
     }),
   )
-  const cellEnd = getGridCellAtPoint(cellEndPoint, true)
+  const cellEnd = getGridCellUnderMouseFromMetadata(grid, cellEndPoint)
   if (cellEnd == null) {
     return null
   }
 
-  const cellOriginCoords = cellOrigin.coordinates
-  const cellEndCoords = cellEnd.coordinates
+  const cellOriginCoords = cellOrigin.gridCellCoordinates
+  const cellEndCoords = cellEnd.gridCellCoordinates
 
   const cellWidth = cellEndCoords.column - cellOriginCoords.column + 1
   const cellHeight = cellEndCoords.row - cellOriginCoords.row + 1
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
index 3807c3d9b71d..ec4a6e55511f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
@@ -54,11 +54,7 @@ export function gridRearrangeResizeKeyboardStrategy(
   }
   const gridTemplate = grid.specialSizeMeasurements.containerGridProperties
 
-  const initialCellBounds = getGridCellBoundsFromCanvas(
-    cell,
-    canvasState.scale,
-    canvasState.canvasOffset,
-  )
+  const initialCellBounds = getGridCellBoundsFromCanvas(cell, grid)
   if (initialCellBounds == null) {
     return null
   }
diff --git a/editor/src/components/editor/shortcuts.spec.browser2.tsx b/editor/src/components/editor/shortcuts.spec.browser2.tsx
index 0e1342631ae7..f80afae9f7d1 100644
--- a/editor/src/components/editor/shortcuts.spec.browser2.tsx
+++ b/editor/src/components/editor/shortcuts.spec.browser2.tsx
@@ -301,11 +301,6 @@ export var storyboard = (
         data-testid='child'
           style={{
             backgroundColor: '#0162ff',
-            position: 'absolute',
-            left: 13,
-            top: 19,
-            width: 74,
-            height: 59,
             gridColumn: 3,
             gridRow: 3,
           }}
@@ -319,194 +314,33 @@ export var storyboard = (
         )
 
         await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
-        await pressKey('x')
+        await pressKey('x') // convert it to absolute
 
         {
           const { position, gridRow, gridColumn, width, height } =
             editor.renderedDOM.getByTestId('child').style
           expect({ position, gridRow, gridColumn, width, height }).toEqual({
-            gridColumn: '3',
-            gridRow: '3',
-            height: '',
-            position: '',
-            width: '',
-          })
-        }
-
-        await pressKey('x') // convert it back to absolute
-
-        {
-          const { position, gridRow, gridColumn, width, height, top, left } =
-            editor.renderedDOM.getByTestId('child').style
-          expect({ position, gridRow, gridColumn, width, height, top, left }).toEqual({
-            gridColumn: '3',
-            gridRow: '3',
-            height: '90.5px',
-            left: '0px',
+            gridColumn: '',
+            gridRow: '',
+            height: '91px',
             position: 'absolute',
-            top: '0px',
             width: '104px',
           })
         }
-      })
 
-      it('can place element spanning multiple grid cells into the grid and take it out', async () => {
-        const editor = await renderTestEditorWithCode(
-          `import { Scene, Storyboard } from 'utopia-api'
-
-export var storyboard = (
-  <Storyboard data-uid='sb'>
-    <Scene
-      id='playground-scene'
-      commentId='playground-scene'
-      style={{
-        width: 620,
-        height: 548,
-        position: 'absolute',
-        left: 212,
-        top: 103,
-      }}
-      data-label='Playground'
-      data-uid='scene'
-    >
-      <div
-      data-uid='grid'
-        style={{
-          backgroundColor: '#aaaaaa33',
-          width: 527,
-          height: 461,
-          display: 'grid',
-          gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
-          gridTemplateRows: '1fr 1fr 1fr 1fr 1fr',
-          contain: 'layout',
-          gridGap: 2,
-          position: 'absolute',
-          left: 46,
-          top: 43,
-        }}
-      >
-        <div
-        data-uid='child'
-        data-testid='child'
-          style={{
-            position: 'absolute',
-            left: 29,
-            top: 34,
-            width: 237,
-            height: 121,
-            gridColumn: 2,
-            gridRow: 2,
-            backgroundImage:
-              'linear-gradient(44deg, #BE3B5E 0%, #309212 100%)',
-          }}
-        />
-      </div>
-    </Scene>
-  </Storyboard>
-)
-`,
-          'await-first-dom-report',
-        )
-
-        await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
-        await pressKey('x')
-
-        {
-          const { position, gridRow, gridColumn, width, height } =
-            editor.renderedDOM.getByTestId('child').style
-          expect({ position, gridRow, gridColumn, width, height }).toEqual({
-            gridColumn: '2 / 5',
-            gridRow: '2 / 4',
-            height: '',
-            position: '',
-            width: '',
-          })
-        }
-
-        await pressKey('x') // convert it back to absolute
+        await pressKey('x') // convert it back to flow with size kept (but no gridColumn/Row or other grid specific prop is set yet)
 
         {
           const { position, gridRow, gridColumn, width, height, top, left } =
             editor.renderedDOM.getByTestId('child').style
           expect({ position, gridRow, gridColumn, width, height, top, left }).toEqual({
-            gridColumn: '2',
-            gridRow: '2',
-            height: '183px',
-            left: '0px',
-            position: 'absolute',
-            top: '0px',
-            width: '315.5px',
-          })
-        }
-      })
-
-      it('can place element with no grid positioning props set', async () => {
-        const editor = await renderTestEditorWithCode(
-          `import { Scene, Storyboard } from 'utopia-api'
-
-export var storyboard = (
-  <Storyboard data-uid='sb'>
-    <Scene
-      id='playground-scene'
-      commentId='playground-scene'
-      style={{
-        width: 620,
-        height: 548,
-        position: 'absolute',
-        left: 212,
-        top: 103,
-      }}
-      data-label='Playground'
-      data-uid='scene'
-    >
-      <div
-        data-uid='grid'
-        style={{
-          backgroundColor: '#aaaaaa33',
-          width: 527,
-          height: 461,
-          display: 'grid',
-          gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
-          gridTemplateRows: '1fr 1fr 1fr 1fr 1fr',
-          contain: 'layout',
-          gridGap: 2,
-          position: 'absolute',
-          left: 46,
-          top: 43,
-        }}
-      >
-        <div
-          data-uid='child'
-          data-testid='child'
-          style={{
-            backgroundColor: '#0162ff',
-            position: 'absolute',
-            left: 113,
-            top: 119,
-            width: 174,
-            height: 119,
-          }}
-        />
-      </div>
-    </Scene>
-  </Storyboard>
-)
-`,
-          'await-first-dom-report',
-        )
-
-        await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
-        await pressKey('x')
-
-        {
-          const { position, gridRow, gridColumn, width, height } =
-            editor.renderedDOM.getByTestId('child').style
-          expect({ position, gridRow, gridColumn, width, height }).toEqual({
-            gridColumn: '2 / 4',
-            gridRow: '2 / 4',
-            height: '',
+            gridColumn: '',
+            gridRow: '',
+            height: '91px',
+            left: '',
             position: '',
-            width: '',
+            top: '',
+            width: '104px',
           })
         }
       })
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index 69c4c92638b6..8718b4106c3f 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -34,12 +34,7 @@ import { optionalMap } from '../../core/shared/optional-utils'
 import type { CSSProperties } from 'react'
 import type { CanvasCommand } from '../canvas/commands/commands'
 import { deleteProperties } from '../canvas/commands/delete-properties-command'
-import {
-  propertyToDelete,
-  propertyToSet,
-  setProperty,
-  updateBulkProperties,
-} from '../canvas/commands/set-property-command'
+import { setProperty } from '../canvas/commands/set-property-command'
 import { addContainLayoutIfNeeded } from '../canvas/commands/add-contain-layout-if-needed-command'
 import {
   setCssLengthProperty,
@@ -617,6 +612,19 @@ export const nukeAllAbsolutePositioningPropsCommands = (
   ]
 }
 
+export const nukeGridCellPositioningPropsCommands = (path: ElementPath): Array<CanvasCommand> => {
+  return [
+    deleteProperties('always', path, [
+      PP.create('style', 'gridColumn'),
+      PP.create('style', 'gridColumnStart'),
+      PP.create('style', 'gridColumnEnd'),
+      PP.create('style', 'gridRow'),
+      PP.create('style', 'gridRowStart'),
+      PP.create('style', 'gridRowEnd'),
+    ]),
+  ]
+}
+
 export type FixedHugFill =
   | { type: 'fixed'; value: CSSNumber }
   | { type: 'fill'; value: CSSNumber }
@@ -1235,16 +1243,6 @@ export function toggleAbsolutePositioningCommands(
       return maybeGroupConversionCommands
     }
 
-    const maybeGridElementConversionCommands = gridChildAbsolutePositionConversionCommands(
-      jsxMetadata,
-      elementPathTree,
-      elementPath,
-      canvasContext,
-    )
-    if (maybeGridElementConversionCommands != null) {
-      return maybeGridElementConversionCommands
-    }
-
     const element = MetadataUtils.findElementByElementPath(jsxMetadata, elementPath)
     if (element == null) {
       return []
@@ -1327,6 +1325,7 @@ export function getConvertIndividualElementToAbsoluteCommands(
   // First round the frame so that we don't end up with half pixel values
   const roundedFrame = roundRectangleToNearestWhole(frame)
   return [
+    ...nukeGridCellPositioningPropsCommands(target),
     ...sizeToDimensionsFromFrame(jsxMetadata, elementPathTree, target, roundedFrame),
     ...addPositionAbsoluteTopLeft(target, roundedFrame, parentFlexDirection),
   ]
@@ -1417,117 +1416,3 @@ export function getConstraintsIncludingImplicitForElement(
 export function isHuggingParent(element: ElementInstanceMetadata, property: 'width' | 'height') {
   return element.specialSizeMeasurements.computedHugProperty[property] != null
 }
-
-interface ContainedGridPositioning {
-  type: 'contained'
-  gridRow: number
-  gridColumn: number
-}
-
-interface SpanningGridPositioning {
-  type: 'span'
-  gridRowStart: number
-  gridRowEnd: number
-  gridColumnStart: number
-  gridColumnEnd: number
-}
-
-type DetectedGridPositioning = ContainedGridPositioning | SpanningGridPositioning
-
-function getGridElementBounds(
-  cell: ElementInstanceMetadata,
-  canvasContext: { scale: number; offset: CanvasVector },
-): DetectedGridPositioning | null {
-  const initialCellBounds = getGridCellBoundsFromCanvas(
-    cell,
-    canvasContext.scale,
-    canvasContext.offset,
-  )
-
-  if (initialCellBounds == null) {
-    return null
-  }
-
-  if (initialCellBounds.height > 1 || initialCellBounds.width > 1) {
-    return {
-      type: 'span',
-      gridRowStart: initialCellBounds.row,
-      gridRowEnd: initialCellBounds.row + initialCellBounds.height,
-      gridColumnStart: initialCellBounds.column,
-      gridColumnEnd: initialCellBounds.column + initialCellBounds.width,
-    }
-  }
-
-  return {
-    type: 'contained',
-    gridRow: initialCellBounds.row,
-    gridColumn: initialCellBounds.column,
-  }
-}
-
-function gridChildAbsolutePositionConversionCommands(
-  jsxMetadata: ElementInstanceMetadataMap,
-  elementPathTree: ElementPathTrees,
-  elementPath: ElementPath,
-  canvasContext: { scale: number; offset: CanvasVector },
-): CanvasCommand[] | null {
-  if (!MetadataUtils.isGridCell(jsxMetadata, elementPath)) {
-    return null
-  }
-
-  const instance = MetadataUtils.findElementByElementPath(jsxMetadata, elementPath)
-  if (instance == null) {
-    return null
-  }
-
-  const cellBounds = getGridElementBounds(instance, canvasContext)
-  if (cellBounds == null) {
-    return null
-  }
-
-  if (MetadataUtils.isPositionAbsolute(instance)) {
-    const gridPositioningProps =
-      cellBounds.type === 'contained'
-        ? [
-            { prop: PP.create('style', 'gridRow'), value: cellBounds.gridRow },
-            { prop: PP.create('style', 'gridColumn'), value: cellBounds.gridColumn },
-          ]
-        : cellBounds.type === 'span'
-        ? [
-            { prop: PP.create('style', 'gridRowStart'), value: cellBounds.gridRowStart },
-            { prop: PP.create('style', 'gridRowEnd'), value: cellBounds.gridRowEnd },
-            { prop: PP.create('style', 'gridColumnStart'), value: cellBounds.gridColumnStart },
-            { prop: PP.create('style', 'gridColumnEnd'), value: cellBounds.gridColumnEnd },
-          ]
-        : assertNever(cellBounds)
-
-    return [
-      ...nukeAllAbsolutePositioningPropsCommands(elementPath),
-      updateBulkProperties('always', elementPath, [
-        propertyToDelete(PP.create('style', 'width')),
-        propertyToDelete(PP.create('style', 'height')),
-        ...gridElementProps.map(propertyToDelete),
-        ...gridPositioningProps.map(({ prop, value }) => propertyToSet(prop, value)),
-      ]),
-    ]
-  }
-
-  const { row, column } =
-    cellBounds.type === 'contained'
-      ? { row: cellBounds.gridRow, column: cellBounds.gridColumn }
-      : cellBounds.type === 'span'
-      ? { row: cellBounds.gridRowStart, column: cellBounds.gridColumnStart }
-      : assertNever(cellBounds)
-
-  return [
-    ...sizeToVisualDimensions(jsxMetadata, elementPathTree, elementPath),
-    updateBulkProperties('always', elementPath, [
-      ...gridElementProps.map(propertyToDelete),
-      propertyToSet(PP.create('style', 'gridRow'), row),
-      propertyToSet(PP.create('style', 'gridColumn'), column),
-      propertyToSet(PP.create('style', 'position'), 'absolute'),
-      propertyToSet(PP.create('style', 'top'), 0),
-      propertyToSet(PP.create('style', 'left'), 0),
-    ]),
-  ]
-}

From db198f6e84eff194e3310d65d47576bc55645f25 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 18 Sep 2024 17:48:54 +0200
Subject: [PATCH 034/272] Remove dom queries from grid rearrange move
 strategies (#6386)

**Problem:**
Followup to https://github.com/concrete-utopia/utopia/pull/6384
Rewrite `runGridRearrangeMove` and remove dom queries and calculation in
window rectangles.

**Commit Details:**
- `runGridRearrangeRemove` called `getCellWindowRect`, remove that
function and replace it with a new one working from the result of
`getGlobalFramesOfGridCells`.
- I removed plenty of canvas<->window conversions and could remove
canvasScale and canvasOffset parameters too.
- Some test results were changed by ~1 pixel, I believe this is a result
of the removed back and forth conversions between canvas and window.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../strategies/grid-cell-bounds.ts            | 11 ---
 .../strategies/grid-helpers.ts                | 85 +++++++------------
 .../grid-rearrange-move-duplicate-strategy.ts |  2 -
 ...-rearrange-move-strategy.spec.browser2.tsx | 16 ++--
 .../grid-rearrange-move-strategy.ts           |  2 -
 5 files changed, 37 insertions(+), 79 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
index e70b9aef07f4..1c7827d5d01a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -111,14 +111,3 @@ export function getGridPlaceholderDomElementFromCoordinates(params: {
     `[data-grid-row="${params.row}"]` + `[data-grid-column="${params.column}"]`,
   )
 }
-
-export function getCellWindowRect(coords: GridCellCoordinates): WindowRectangle | null {
-  const element = getGridPlaceholderDomElementFromCoordinates(coords)
-  if (element == null) {
-    return null
-  }
-
-  const domRect = element!.getBoundingClientRect()
-  const windowRect = windowRectangle(domRect)
-  return windowRect
-}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 4030c029d901..5b0aa20bad71 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -13,19 +13,14 @@ import {
   type GridElementProperties,
   type GridPosition,
 } from '../../../../core/shared/element-template'
-import type {
-  CanvasRectangle,
-  CanvasVector,
-  WindowRectangle,
-} from '../../../../core/shared/math-utils'
+import type { CanvasRectangle, CanvasVector } from '../../../../core/shared/math-utils'
 import {
   canvasPoint,
   canvasRectangle,
+  canvasVector,
   isInfinityRectangle,
   offsetPoint,
-  scaleVector,
   windowPoint,
-  windowVector,
 } from '../../../../core/shared/math-utils'
 import * as PP from '../../../../core/shared/property-path'
 import { absolute } from '../../../../utils/utils'
@@ -35,15 +30,10 @@ import { deleteProperties } from '../../commands/delete-properties-command'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { setCssLengthProperty } from '../../commands/set-css-length-command'
 import { setProperty } from '../../commands/set-property-command'
-import { canvasPointToWindowPoint } from '../../dom-lookup'
-import type { GridCustomStrategyState, InteractionCanvasState } from '../canvas-strategy-types'
+import type { GridCustomStrategyState } from '../canvas-strategy-types'
 import type { DragInteractionData } from '../interaction-state'
 import type { GridCellCoordinates } from './grid-cell-bounds'
-import {
-  getCellWindowRect,
-  getGridCellUnderMouseFromMetadata,
-  gridCellCoordinates,
-} from './grid-cell-bounds'
+import { getGridCellUnderMouseFromMetadata, gridCellCoordinates } from './grid-cell-bounds'
 import { memoize } from '../../../../core/shared/memoize'
 
 export function runGridRearrangeMove(
@@ -51,8 +41,6 @@ export function runGridRearrangeMove(
   selectedElement: ElementPath,
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
-  canvasScale: number,
-  canvasOffset: CanvasVector,
   customState: GridCustomStrategyState,
 ): {
   commands: CanvasCommand[]
@@ -209,15 +197,14 @@ export function runGridRearrangeMove(
   switch (moveType) {
     case 'rearrange': {
       const targetRootCell = gridCellCoordinates(row.start, column.start)
-      const windowRect = getCellWindowRect(targetRootCell)
+      const canvasRect = getGlobalFrameOfGridCell(containerMetadata, targetRootCell)
       const absoluteMoveCommands =
-        windowRect == null
+        canvasRect == null
           ? []
           : gridChildAbsoluteMoveCommands(
               MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
-              windowRect,
+              canvasRect,
               interactionData,
-              { scale: canvasScale, canvasOffset: canvasOffset },
             )
       return {
         commands: [
@@ -427,9 +414,8 @@ function asMaybeNamedAreaOrValue(
 
 function gridChildAbsoluteMoveCommands(
   targetMetadata: ElementInstanceMetadata | null,
-  targetCellWindowRect: WindowRectangle,
+  targetCellRect: CanvasRectangle,
   dragInteractionData: DragInteractionData,
-  canvasContext: Pick<InteractionCanvasState, 'scale' | 'canvasOffset'>,
 ): CanvasCommand[] {
   if (
     targetMetadata == null ||
@@ -440,45 +426,20 @@ function gridChildAbsoluteMoveCommands(
     return []
   }
 
-  const targetFrameWindow = canvasPointToWindowPoint(
-    canvasPoint({
-      x: targetMetadata.globalFrame.x,
-      y: targetMetadata.globalFrame.y,
-    }),
-    canvasContext.scale,
-    canvasContext.canvasOffset,
-  )
-
-  const dragStartWindow = canvasPointToWindowPoint(
-    canvasPoint({
-      x: dragInteractionData.originalDragStart.x,
-      y: dragInteractionData.originalDragStart.y,
-    }),
-    canvasContext.scale,
-    canvasContext.canvasOffset,
-  )
-
   const offsetInTarget = windowPoint({
-    x: dragStartWindow.x - targetFrameWindow.x,
-    y: dragStartWindow.y - targetFrameWindow.y,
+    x: dragInteractionData.originalDragStart.x - targetMetadata.globalFrame.x,
+    y: dragInteractionData.originalDragStart.y - targetMetadata.globalFrame.y,
   })
 
-  const dragWindowOffset = canvasPointToWindowPoint(
-    offsetPoint(
-      dragInteractionData.originalDragStart,
-      dragInteractionData.drag ?? canvasPoint({ x: 0, y: 0 }),
-    ),
-    canvasContext.scale,
-    canvasContext.canvasOffset,
+  const dragOffset = offsetPoint(
+    dragInteractionData.originalDragStart,
+    dragInteractionData.drag ?? canvasPoint({ x: 0, y: 0 }),
   )
 
-  const offset = scaleVector(
-    windowVector({
-      x: dragWindowOffset.x - targetCellWindowRect.x - offsetInTarget.x,
-      y: dragWindowOffset.y - targetCellWindowRect.y - offsetInTarget.y,
-    }),
-    1 / canvasContext.scale,
-  )
+  const offset = canvasVector({
+    x: dragOffset.x - targetCellRect.x - offsetInTarget.x,
+    y: dragOffset.y - targetCellRect.y - offsetInTarget.y,
+  })
 
   return [
     deleteProperties('always', targetMetadata.elementPath, [
@@ -631,6 +592,18 @@ function getGlobalFramesOfGridCellsInner(
 
 export const getGlobalFramesOfGridCells = memoize(getGlobalFramesOfGridCellsInner)
 
+export function getGlobalFrameOfGridCell(
+  grid: ElementInstanceMetadata,
+  coords: GridCellCoordinates,
+): CanvasRectangle | null {
+  const gridCellGlobalFrames = getGlobalFramesOfGridCells(grid)
+  if (gridCellGlobalFrames == null) {
+    return null
+  }
+
+  return gridCellGlobalFrames[coords.row - 1][coords.column - 1] ?? null
+}
+
 function gridTemplateToNumbers(gridTemplate: GridTemplate | null): Array<number> | null {
   if (gridTemplate?.type !== 'DIMENSIONS') {
     return null
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
index 24b363140066..8418611cdc88 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
@@ -83,8 +83,6 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
         selectedElement,
         canvasState.startingMetadata,
         interactionSession.interactionData,
-        canvasState.scale,
-        canvasState.canvasOffset,
         customState.grid,
       )
       if (moveCommands.length === 0) {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
index c942f983fa55..584a9eed36a3 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
@@ -287,8 +287,8 @@ export var storyboard = (
         expect({ top, left, gridColumn, gridRow }).toEqual({
           gridColumn: '1',
           gridRow: '1',
-          left: '36px',
-          top: '40px',
+          left: '37px',
+          top: '41px',
         })
       }
     })
@@ -329,8 +329,8 @@ export var storyboard = (
         expect({ top, left, gridColumn, gridRow }).toEqual({
           gridColumn: '1',
           gridRow: '1',
-          left: '136.5px',
-          top: '140.5px',
+          left: '137px',
+          top: '141px',
         })
       }
     })
@@ -369,8 +369,8 @@ export var storyboard = (
         expect({ top, left, gridColumn, gridRow }).toEqual({
           gridColumn: '2',
           gridRow: '2',
-          left: '25.5px',
-          top: '36px',
+          left: '26.5px',
+          top: '37px',
         })
       }
     })
@@ -452,8 +452,8 @@ export var storyboard = (
         expect({ top, left, gridColumn, gridRow }).toEqual({
           gridColumn: '1',
           gridRow: '1',
-          left: '60.5px',
-          top: '61px',
+          left: '61.5px',
+          top: '62px',
         })
       }
     })
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index 1a1f9c02182f..41a8396967b6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -180,8 +180,6 @@ function getCommandsAndPatchForGridRearrange(
     selectedElement,
     canvasState.startingMetadata,
     interactionData,
-    canvasState.scale,
-    canvasState.canvasOffset,
     customState.grid,
   )
 

From 96795b03477f987ed5f86e3b8af4c89d7dab57e0 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 19 Sep 2024 16:26:55 +0200
Subject: [PATCH 035/272] Grids: presetve repeat from inspector changes (#6388)

**Problem:**

As a followup to #6380 , we should preserve `repeat` functions & co.
when altering the grid template from the inspector inputs too.

**Fix:**

1. Factored out the logic to alter a table from the resize strategy to
helper functions in `grid-helpers.ts`
2. Adjusted the logic to support removing elements too
3. Refactored the callbacks in the inspector section to use the new
helpers

Fixes #6387
---
 .../strategies/grid-helpers.ts                | 180 ++++++++++++++++-
 .../strategies/resize-grid-strategy.ts        |  78 +-------
 .../canvas/controls/grid-controls.tsx         |  48 +----
 .../components/inspector/common/css-utils.ts  |  12 +-
 .../inspector/flex-section.spec.browser2.tsx  |  75 ++++++-
 .../src/components/inspector/flex-section.tsx | 184 ++++++++++--------
 6 files changed, 379 insertions(+), 198 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 5b0aa20bad71..a1651088f729 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -24,7 +24,13 @@ import {
 } from '../../../../core/shared/math-utils'
 import * as PP from '../../../../core/shared/property-path'
 import { absolute } from '../../../../utils/utils'
-import { cssNumber, isCSSKeyword } from '../../../inspector/common/css-utils'
+import type { GridDimension } from '../../../inspector/common/css-utils'
+import {
+  cssNumber,
+  gridCSSRepeat,
+  isCSSKeyword,
+  isGridCSSRepeat,
+} from '../../../inspector/common/css-utils'
 import type { CanvasCommand } from '../../commands/commands'
 import { deleteProperties } from '../../commands/delete-properties-command'
 import { reorderElement } from '../../commands/reorder-element-command'
@@ -35,6 +41,8 @@ import type { DragInteractionData } from '../interaction-state'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 import { getGridCellUnderMouseFromMetadata, gridCellCoordinates } from './grid-cell-bounds'
 import { memoize } from '../../../../core/shared/memoize'
+import { mapDropNulls } from '../../../../core/shared/array-utils'
+import { assertNever } from '../../../../core/shared/utils'
 
 export function runGridRearrangeMove(
   targetElement: ElementPath,
@@ -620,3 +628,173 @@ function gridTemplateToNumbers(gridTemplate: GridTemplate | null): Array<number>
 
   return result
 }
+
+type DimensionIndexes = {
+  originalIndex: number // the index of this element in the original values
+  repeatedIndex: number // the index of this element, if it's generated via a repeat, inside the repeated values array definition
+}
+
+export type ExpandedGridDimension = GridDimension & {
+  indexes: DimensionIndexes
+}
+
+function expandedGridDimension(
+  dim: GridDimension,
+  originalIndex: number,
+  repeatedIndex: number = 0,
+): ExpandedGridDimension {
+  return {
+    ...dim,
+    indexes: {
+      originalIndex: originalIndex,
+      repeatedIndex: repeatedIndex,
+    },
+  }
+}
+
+export function expandGridDimensions(template: GridDimension[]): ExpandedGridDimension[] {
+  // Expanded representation of the original values, where repeated elements are serialized.
+  // Each element also contains the indexes information to be used later on to build the resized
+  // template string.
+  return template.reduce((acc, cur, index) => {
+    if (isGridCSSRepeat(cur)) {
+      const repeatGroup = cur.value.map((dim, repeatedIndex) =>
+        expandedGridDimension(dim, index, repeatedIndex),
+      )
+      let expanded: ExpandedGridDimension[] = []
+      for (let i = 0; i < cur.times; i++) {
+        expanded.push(...repeatGroup)
+      }
+      return [...acc, ...expanded]
+    } else {
+      return [...acc, expandedGridDimension(cur, index)]
+    }
+  }, [] as ExpandedGridDimension[])
+}
+
+function alterGridTemplateDimensions(params: {
+  originalValues: GridDimension[]
+  target: ExpandedGridDimension
+  patch: AlterGridTemplateDimensionPatch
+}): GridDimension[] {
+  return mapDropNulls((dim, index) => {
+    if (index !== params.target.indexes.originalIndex) {
+      return dim
+    } else if (isGridCSSRepeat(dim)) {
+      const repeatedIndex = params.target.indexes.repeatedIndex ?? 0
+      const before = dim.value.slice(0, repeatedIndex)
+      const after = dim.value.slice(repeatedIndex + 1)
+      switch (params.patch.type) {
+        case 'REMOVE':
+          if (before.length + after.length === 0) {
+            return null
+          }
+          return gridCSSRepeat(dim.times, [...before, ...after])
+        case 'REPLACE':
+          return gridCSSRepeat(dim.times, [...before, params.patch.newValue, ...after])
+        default:
+          assertNever(params.patch)
+      }
+    } else {
+      switch (params.patch.type) {
+        case 'REPLACE':
+          return params.patch.newValue
+        case 'REMOVE':
+          return null
+        default:
+          assertNever(params.patch)
+      }
+    }
+  }, params.originalValues)
+}
+
+export type ReplaceGridDimensionPatch = {
+  type: 'REPLACE'
+  newValue: GridDimension
+}
+
+export type RemoveGridDimensionPatch = {
+  type: 'REMOVE'
+}
+
+export type AlterGridTemplateDimensionPatch = ReplaceGridDimensionPatch | RemoveGridDimensionPatch
+
+export function replaceGridTemplateDimensionAtIndex(
+  template: GridDimension[],
+  expanded: ExpandedGridDimension[],
+  index: number,
+  newValue: GridDimension,
+): GridDimension[] {
+  return alterGridTemplateDimensions({
+    originalValues: template,
+    target: expanded[index],
+    patch: {
+      type: 'REPLACE',
+      newValue: newValue,
+    },
+  })
+}
+
+export function removeGridTemplateDimensionAtIndex(
+  template: GridDimension[],
+  expanded: ExpandedGridDimension[],
+  index: number,
+): GridDimension[] {
+  return alterGridTemplateDimensions({
+    originalValues: template,
+    target: expanded[index],
+    patch: {
+      type: 'REMOVE',
+    },
+  })
+}
+
+// Return an array of related indexes to a given index inside a grid's template dimensions.
+export function getGridRelatedIndexes(params: {
+  template: GridDimension[]
+  index: number
+}): number[] {
+  let relatedIndexes: number[][][] = [] // This looks scary but it's not! It's just a list of indexes, containing a list of the indexes *per group element*.
+  // For example, 1fr repeat(3, 10px 20px) 1fr, will be represented as:
+  /**
+   * [
+   *  [ [0] ]
+   *  [ [1, 3] [2, 4]  ]
+   *  [ [5] ]
+   * ]
+   */
+  let elementCount = 0 // basically the expanded index
+  for (const dim of params.template) {
+    if (dim.type === 'REPEAT') {
+      let groupIndexes: number[][] = []
+      // for each value push the related indexes as many times as the repeats counter
+      for (let valueIndex = 0; valueIndex < dim.value.length; valueIndex++) {
+        let repeatedValueIndexes: number[] = []
+        for (let repeatIndex = 0; repeatIndex < dim.times; repeatIndex++) {
+          repeatedValueIndexes.push(elementCount + valueIndex + repeatIndex * dim.value.length)
+        }
+        groupIndexes.push(repeatedValueIndexes)
+      }
+      relatedIndexes.push(groupIndexes)
+      elementCount += dim.value.length * dim.times // advance the counter as many times as the repeated values *combined*
+    } else {
+      relatedIndexes.push([[elementCount]])
+      elementCount++
+    }
+  }
+
+  // Now, expand the indexes calculated above so they "flatten out" to match the generated values
+  let expandedRelatedIndexes: number[][] = []
+  params.template.forEach((dim, dimIndex) => {
+    if (dim.type === 'REPEAT') {
+      for (let repeatIndex = 0; repeatIndex < dim.times * dim.value.length; repeatIndex++) {
+        const indexes = relatedIndexes[dimIndex][repeatIndex % dim.value.length]
+        expandedRelatedIndexes.push(indexes)
+      }
+    } else {
+      expandedRelatedIndexes.push(relatedIndexes[dimIndex][0])
+    }
+  })
+
+  return expandedRelatedIndexes[params.index] ?? []
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index 1489e1b20d2b..b99bbaf32607 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -25,9 +25,7 @@ import type { GridDimension } from '../../../../components/inspector/common/css-
 import {
   cssNumber,
   gridCSSNumber,
-  gridCSSRepeat,
   isGridCSSNumber,
-  isGridCSSRepeat,
   printArrayGridDimensions,
 } from '../../../../components/inspector/common/css-utils'
 import { toFirst } from '../../../../core/shared/optics/optic-utilities'
@@ -36,6 +34,7 @@ import type { Either } from '../../../../core/shared/either'
 import { foldEither, isLeft, isRight } from '../../../../core/shared/either'
 import { roundToNearestWhole } from '../../../../core/shared/math-utils'
 import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
+import { expandGridDimensions, replaceGridTemplateDimensionAtIndex } from './grid-helpers'
 
 export const resizeGridStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -116,24 +115,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
-      // Expanded representation of the original values, where repeated elements are serialized.
-      // Each element also contains the indexes information to be used later on to build the resized
-      // template string.
-      const expandedOriginalValues = originalValues.dimensions.reduce((acc, cur, index) => {
-        if (isGridCSSRepeat(cur)) {
-          const repeatGroup = cur.value.map((dim, repeatedIndex) =>
-            expandedGridDimension(dim, index, repeatedIndex),
-          )
-          let expanded: ExpandedGridDimension[] = []
-          for (let i = 0; i < cur.times; i++) {
-            expanded.push(...repeatGroup)
-          }
-          return [...acc, ...expanded]
-        } else {
-          return [...acc, expandedGridDimension(cur, index)]
-        }
-      }, [] as ExpandedGridDimension[])
-
+      const expandedOriginalValues = expandGridDimensions(originalValues.dimensions)
       const mergedValues: GridAutoOrTemplateBase = {
         type: calculatedValues.type,
         dimensions: calculatedValues.dimensions.map((dim, index) => {
@@ -181,11 +163,12 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         areaName,
       )
 
-      const newDimensions = buildResizedDimensions({
-        newValue: newValue,
-        originalValues: originalValues.dimensions,
-        target: expandedOriginalValues[control.columnOrRow],
-      })
+      const newDimensions = replaceGridTemplateDimensionAtIndex(
+        originalValues.dimensions,
+        expandedOriginalValues,
+        control.columnOrRow,
+        newValue,
+      )
 
       const propertyValueAsString = printArrayGridDimensions(newDimensions)
 
@@ -207,51 +190,6 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
   }
 }
 
-type DimensionIndexes = {
-  originalIndex: number // the index of this element in the original values
-  repeatedIndex: number // the index of this element, if it's generated via a repeat, inside the repeated values array definition
-}
-
-function expandedGridDimension(
-  dim: GridDimension,
-  originalIndex: number,
-  repeatedIndex: number = 0,
-): ExpandedGridDimension {
-  return {
-    ...dim,
-    indexes: {
-      originalIndex: originalIndex,
-      repeatedIndex: repeatedIndex,
-    },
-  }
-}
-
-type ExpandedGridDimension = GridDimension & {
-  indexes: DimensionIndexes
-}
-
-function buildResizedDimensions(params: {
-  newValue: GridDimension
-  originalValues: GridDimension[]
-  target: ExpandedGridDimension
-}) {
-  return params.originalValues.map((dim, index) => {
-    if (index !== params.target.indexes.originalIndex) {
-      return dim
-    } else if (isGridCSSRepeat(dim)) {
-      const repeatedIndex = params.target.indexes.repeatedIndex ?? 0
-      const repeatGroup = [
-        ...dim.value.slice(0, repeatedIndex),
-        params.newValue,
-        ...dim.value.slice(repeatedIndex + 1),
-      ]
-      return gridCSSRepeat(dim.times, repeatGroup)
-    } else {
-      return params.newValue
-    }
-  })
-}
-
 function getNewDragValue(
   dragAmount: number,
   isFractional: boolean,
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 5992931ef155..3d64376a27f6 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -89,6 +89,7 @@ import {
   getGridPlaceholderDomElementFromCoordinates,
   gridCellTargetId,
 } from '../canvas-strategies/strategies/grid-cell-bounds'
+import { getGridRelatedIndexes } from '../canvas-strategies/strategies/grid-helpers'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -360,51 +361,10 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
     if (props.fromPropsAxisValues?.type !== 'DIMENSIONS' || resizingIndex == null) {
       return []
     }
-
-    // Build an array of coresizing indexes per element.
-    let coresizeIndexes: number[][][] = [] // This looks scary but it's not! It's just a list of indexes, containing a list of the indexes *per group element*.
-    // For example, 1fr repeat(3, 10px 20px) 1fr, will be represented as:
-    /**
-     * [
-     * 	[ [0] ]
-     *  [ [1, 3] [2, 4]  ]
-     *  [ [5] ]
-     * ]
-     */
-    let elementCount = 0 // basically the expanded index
-    for (const dim of props.fromPropsAxisValues.dimensions) {
-      if (dim.type === 'REPEAT') {
-        let groupIndexes: number[][] = []
-        // for each value push the coresize indexes as many times as the repeats counter
-        for (let valueIndex = 0; valueIndex < dim.value.length; valueIndex++) {
-          let repeatedValueIndexes: number[] = []
-          for (let repeatIndex = 0; repeatIndex < dim.times; repeatIndex++) {
-            repeatedValueIndexes.push(elementCount + valueIndex + repeatIndex * dim.value.length)
-          }
-          groupIndexes.push(repeatedValueIndexes)
-        }
-        coresizeIndexes.push(groupIndexes)
-        elementCount += dim.value.length * dim.times // advance the counter as many times as the repeated values *combined*
-      } else {
-        coresizeIndexes.push([[elementCount]])
-        elementCount++
-      }
-    }
-
-    // Now, expand the indexes calculated above so they "flatten out" to match the generated values
-    let expandedCoresizeIndexes: number[][] = []
-    props.fromPropsAxisValues.dimensions.forEach((dim, dimIndex) => {
-      if (dim.type === 'REPEAT') {
-        for (let repeatIndex = 0; repeatIndex < dim.times * dim.value.length; repeatIndex++) {
-          const indexes = coresizeIndexes[dimIndex][repeatIndex % dim.value.length]
-          expandedCoresizeIndexes.push(indexes)
-        }
-      } else {
-        expandedCoresizeIndexes.push(coresizeIndexes[dimIndex][0])
-      }
+    return getGridRelatedIndexes({
+      template: props.fromPropsAxisValues.dimensions,
+      index: resizingIndex,
     })
-
-    return expandedCoresizeIndexes[resizingIndex] ?? []
   }, [props.fromPropsAxisValues, resizingIndex])
 
   if (props.axisValues == null) {
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index 5bee0ef90a05..1140f4dd6c4d 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -823,14 +823,18 @@ export function printCSSNumber(
 
 export function printGridDimension(dimension: GridDimension): string {
   switch (dimension.type) {
-    case 'KEYWORD':
-      return dimension.value.value
-    case 'NUMBER':
+    case 'KEYWORD': {
+      const areaName = dimension.areaName != null ? `[${dimension.areaName}] ` : ''
+      return `${areaName}${dimension.value.value}`
+    }
+    case 'NUMBER': {
       const printed = printCSSNumber(dimension.value, null)
       const areaName = dimension.areaName != null ? `[${dimension.areaName}] ` : ''
       return `${areaName}${printed}`
-    case 'REPEAT':
+    }
+    case 'REPEAT': {
       return `repeat(${dimension.times}, ${printArrayGridDimensions(dimension.value)})`
+    }
     default:
       assertNever(dimension)
   }
diff --git a/editor/src/components/inspector/flex-section.spec.browser2.tsx b/editor/src/components/inspector/flex-section.spec.browser2.tsx
index 61e646a27eca..f8ad05c41e96 100644
--- a/editor/src/components/inspector/flex-section.spec.browser2.tsx
+++ b/editor/src/components/inspector/flex-section.spec.browser2.tsx
@@ -60,10 +60,24 @@ describe('flex section', () => {
       )
       await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
       const control = await screen.findByTestId('grid-dimension-column-0')
-      await typeIntoField(control, '100')
+      await typeIntoField(control, '100px')
       const grid = await renderResult.renderedDOM.findByTestId('grid')
       expect(grid.style.gridTemplateColumns).toEqual('100px auto auto')
     })
+    it('updates a repeated value', async () => {
+      const renderResult = await renderTestEditorWithCode(
+        gridProjectWithRepeat,
+        'await-first-dom-report',
+      )
+      await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
+      await typeIntoField(await screen.findByTestId('grid-dimension-column-2'), '42')
+
+      const grid = await renderResult.renderedDOM.findByTestId('grid')
+      expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr repeat(2, 10px 42px) 2fr')
+
+      await typeIntoField(await screen.findByTestId('grid-dimension-column-1'), '.5fr')
+      expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr repeat(2, 0.5fr 42px) 2fr')
+    })
   })
 })
 
@@ -190,3 +204,62 @@ export var storyboard = (
   </Storyboard>
 )
 `
+
+const gridProjectWithRepeat = `
+import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <div
+      data-uid='grid'
+      data-testid='grid'
+      style={{
+        display: 'grid',
+        gridTemplateRows: '80px 1fr 1fr',
+        gridTemplateColumns: '[area1] 1fr repeat(2, 10px 30px) 2fr',
+        gridGap: 10,
+        height: 322,
+        width: 364,
+        backgroundColor: '#FFFFFF',
+        padding: 20,
+      }}
+    >
+      <div
+        data-uid='foo'
+        data-testid='foo'
+        style={{
+          backgroundColor: '#aaaaaa33',
+          gridColumn: 3,
+          gridRow: 2,
+        }}
+      />
+      <div
+        data-uid='bar'
+        data-testid='bar'
+        style={{
+          width: 41,
+          height: 23,
+          border: '1px solid #000',
+          gridColumn: 'area1',
+          gridRow: 1,
+          backgroundColor: '#09f',
+        }}
+      />
+      <div
+        data-uid='baz'
+        data-testid='baz'
+        style={{
+          height: 53,
+          width: 'max-content',
+          gridColumn: 2,
+          gridRow: 2,
+          backgroundColor: '#0f9',
+        }}
+      >
+        a test
+      </div>
+    </div>
+  </Storyboard>
+)
+`
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 87242505e12f..6172d7d3d9cb 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -35,6 +35,7 @@ import type {
   CSSKeyword,
   CSSNumber,
   GridAutoFlow,
+  GridCSSKeyword,
   GridDiscreteDimension,
   UnknownOrEmptyInput,
   ValidGridDimensionKeyword,
@@ -51,7 +52,9 @@ import {
   isEmptyInputValue,
   isGridCSSKeyword,
   isGridCSSNumber,
+  isGridCSSRepeat,
   isValidGridDimensionKeyword,
+  printArrayGridDimensions,
   type GridDimension,
 } from './common/css-utils'
 import { applyCommandsAction, transientActions } from '../editor/actions/action-creators'
@@ -73,7 +76,12 @@ import {
   type ElementInstanceMetadata,
   type GridElementProperties,
 } from '../../core/shared/element-template'
-import { setGridPropsCommands } from '../canvas/canvas-strategies/strategies/grid-helpers'
+import {
+  expandGridDimensions,
+  removeGridTemplateDimensionAtIndex,
+  replaceGridTemplateDimensionAtIndex,
+  setGridPropsCommands,
+} from '../canvas/canvas-strategies/strategies/grid-helpers'
 import { type CanvasCommand } from '../canvas/commands/commands'
 import type { DropdownMenuItem } from '../../uuiui/radix-components'
 import {
@@ -169,18 +177,7 @@ export const FlexSection = React.memo(() => {
       }),
     })
 
-    const reduced = merged.reduce((acc, cur) => {
-      if (cur.type === 'REPEAT') {
-        let expanded: GridDiscreteDimension[] = []
-        for (let i = 0; i < cur.times; i++) {
-          expanded.push(...cur.value.filter((v) => v.type !== 'REPEAT'))
-        }
-        return acc.concat(...expanded)
-      }
-      return acc.concat(cur)
-    }, [] as GridDiscreteDimension[])
-
-    return reduced
+    return merged.filter((v) => v.type !== 'REPEAT')
   }, [grid])
 
   const rows = React.useMemo((): GridDiscreteDimension[] => {
@@ -198,14 +195,7 @@ export const FlexSection = React.memo(() => {
       }),
     })
 
-    const reduced = merged.reduce((acc, cur) => {
-      if (cur.type === 'REPEAT') {
-        return acc.concat(...cur.value.filter((v) => v.type !== 'REPEAT'))
-      }
-      return acc.concat(cur)
-    }, [] as GridDiscreteDimension[])
-
-    return reduced
+    return merged.filter((v) => v.type !== 'REPEAT')
   }, [grid])
 
   return (
@@ -279,22 +269,60 @@ const TemplateDimensionControl = React.memo(
 
     const metadataRef = useRefEditorState((store) => store.editor.jsxMetadata)
 
+    const template = React.useMemo(() => {
+      const fromProps =
+        axis === 'column'
+          ? grid.specialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateColumns
+          : grid.specialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateRows
+      if (fromProps?.type === 'DIMENSIONS' && fromProps.dimensions.length === 0) {
+        return { type: 'DIMENSIONS', dimensions: values }
+      }
+      return fromProps
+    }, [grid, axis, values])
+
+    const expandedTemplate = React.useMemo(() => {
+      if (template?.type !== 'DIMENSIONS') {
+        return []
+      }
+      return expandGridDimensions(template.dimensions)
+    }, [template])
+
     const onUpdate = React.useCallback(
       (index: number) =>
         (value: UnknownOrEmptyInput<CSSNumber | CSSKeyword<ValidGridDimensionKeyword>>) => {
-          const newValues = [...values]
-          const gridValueAtIndex = values[index]
-          if (isCSSNumber(value)) {
-            const maybeUnit = isGridCSSNumber(gridValueAtIndex) ? gridValueAtIndex.value.unit : null
-            newValues[index] = gridCSSNumber(
-              cssNumber(value.value, value.unit ?? maybeUnit),
-              gridValueAtIndex.areaName,
-            )
-          } else if (isCSSKeyword(value)) {
-            newValues[index] = gridCSSKeyword(value, gridValueAtIndex.areaName)
-          } else if (isEmptyInputValue(value)) {
-            newValues[index] = gridCSSKeyword(cssKeyword('auto'), gridValueAtIndex.areaName)
+          if (template?.type !== 'DIMENSIONS') {
+            return
+          }
+
+          function getNewValue() {
+            const gridValueAtIndex = values[index]
+            if (isCSSNumber(value)) {
+              const maybeUnit = isGridCSSNumber(gridValueAtIndex)
+                ? gridValueAtIndex.value.unit
+                : null
+              return gridCSSNumber(
+                cssNumber(value.value, value.unit ?? maybeUnit),
+                gridValueAtIndex.areaName,
+              )
+            } else if (isCSSKeyword(value)) {
+              return gridCSSKeyword(value, gridValueAtIndex.areaName)
+            } else if (isEmptyInputValue(value)) {
+              return gridCSSKeyword(cssKeyword('auto'), gridValueAtIndex.areaName)
+            } else {
+              return null
+            }
           }
+          const newValue = getNewValue()
+          if (newValue == null) {
+            return
+          }
+
+          const newDimensions = replaceGridTemplateDimensionAtIndex(
+            template.dimensions,
+            expandedTemplate,
+            index,
+            newValue,
+          )
 
           dispatch([
             applyCommandsAction([
@@ -302,24 +330,32 @@ const TemplateDimensionControl = React.memo(
                 'always',
                 grid.elementPath,
                 PP.create('style', axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows'),
-                gridNumbersToTemplateString(newValues),
+                printArrayGridDimensions(newDimensions),
               ),
             ]),
           ])
         },
-      [grid, values, dispatch, axis],
+      [grid, values, dispatch, axis, template, expandedTemplate],
     )
 
     const onRemove = React.useCallback(
       (index: number) => () => {
-        const newValues = values.filter((_, idx) => idx !== index)
+        if (template?.type !== 'DIMENSIONS') {
+          return
+        }
+
+        const newValues = removeGridTemplateDimensionAtIndex(
+          template.dimensions,
+          expandedTemplate,
+          index,
+        )
 
         let commands: CanvasCommand[] = [
           setProperty(
             'always',
             grid.elementPath,
             PP.create('style', axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows'),
-            gridNumbersToTemplateString(newValues),
+            printArrayGridDimensions(newValues),
           ),
         ]
 
@@ -373,25 +409,33 @@ const TemplateDimensionControl = React.memo(
 
         dispatch([applyCommandsAction(commands)])
       },
-      [grid, values, dispatch, axis, metadataRef],
+      [grid, dispatch, axis, metadataRef, template, expandedTemplate],
     )
 
-    const onAdd = React.useCallback(() => {
-      const newValues = values.concat(gridCSSNumber(cssNumber(1, 'fr'), null))
+    const onAppend = React.useCallback(() => {
+      if (template?.type !== 'DIMENSIONS') {
+        return
+      }
+
+      const newValues = [...template.dimensions, gridCSSNumber(cssNumber(1, 'fr'), null)]
+
       dispatch([
         applyCommandsAction([
           setProperty(
             'always',
             grid.elementPath,
             PP.create('style', axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows'),
-            gridNumbersToTemplateString(newValues),
+            printArrayGridDimensions(newValues),
           ),
         ]),
       ])
-    }, [dispatch, grid, axis, values])
+    }, [dispatch, grid, axis, template])
 
     const onRename = React.useCallback(
       (index: number) => () => {
+        if (template?.type !== 'DIMENSIONS') {
+          return
+        }
         const container = grid.specialSizeMeasurements.containerGridProperties
         const dimensions =
           axis === 'column' ? container.gridTemplateColumns : container.gridTemplateRows
@@ -408,22 +452,19 @@ const TemplateDimensionControl = React.memo(
         const newAreaName: string | null =
           rawNewAreaName.length === 0 ? null : sanitizeAreaName(rawNewAreaName)
 
-        const newValues = values.map((value, idx) => {
-          if (idx !== index) {
-            return value
-          }
-          return {
-            ...value,
-            areaName: newAreaName,
-          }
-        })
+        const newValues = replaceGridTemplateDimensionAtIndex(
+          template.dimensions,
+          expandedTemplate,
+          index,
+          { ...values[index], areaName: newAreaName },
+        )
 
         let commands: CanvasCommand[] = [
           setProperty(
             'always',
             grid.elementPath,
             PP.create('style', axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows'),
-            gridNumbersToTemplateString(newValues),
+            printArrayGridDimensions(newValues),
           ),
         ]
 
@@ -448,7 +489,7 @@ const TemplateDimensionControl = React.memo(
 
         dispatch([applyCommandsAction(commands)])
       },
-      [grid, axis, values, dispatch, metadataRef],
+      [grid, axis, values, dispatch, metadataRef, template, expandedTemplate],
     )
 
     const dropdownMenuItems = React.useCallback(
@@ -495,7 +536,7 @@ const TemplateDimensionControl = React.memo(
         <div style={{ fontWeight: 600, display: 'flex', alignItems: 'center' }}>
           <div style={{ flex: 1 }}>{title}</div>
           <SquareButton highlight>
-            <Icons.SmallPlus onClick={onAdd} />
+            <Icons.SmallPlus onClick={onAppend} />
           </SquareButton>
         </div>
         {values.map((value, index) => (
@@ -652,26 +693,6 @@ function renameAreaInTemplateAtIndex(
   }
 }
 
-function gridNumbersToTemplateString(values: GridDiscreteDimension[]) {
-  return values
-    .map((v) => {
-      function getValue(): string {
-        switch (v.type) {
-          case 'KEYWORD':
-            return v.value.value
-          case 'NUMBER':
-            return `${v.value.value}${v.value.unit != null ? `${v.value.unit}` : 'px'}`
-          default:
-            assertNever(v)
-        }
-      }
-      const areaName = v.areaName != null ? `[${v.areaName}] ` : ''
-      const value = getValue()
-      return `${areaName}${value}`
-    })
-    .join(' ')
-}
-
 function getGridTemplateAxisValues(template: {
   calculated: GridAutoOrTemplateBase | null
   fromProps: GridAutoOrTemplateBase | null
@@ -1065,13 +1086,17 @@ export function mergeGridTemplateValues({
   fromProps: GridDimension[]
   autoValues: GridDimension[]
 }): GridDimension[] {
+  const expanded = fromProps.flatMap((v) => {
+    return isGridCSSRepeat(v) ? Array(v.times).fill(v.value).flat() : v
+  })
+
   function getExplicitValue(dimension: GridDimension, index: number): GridDimension {
-    if (fromProps.length === 0) {
+    if (expanded.length === 0) {
       return gridCSSKeyword(cssKeyword('auto'), dimension.areaName)
-    } else if (fromProps[index] == null) {
+    } else if (expanded[index] == null) {
       return dimension
     } else {
-      return fromProps[index]
+      return expanded[index]
     }
   }
 
@@ -1082,7 +1107,10 @@ export function mergeGridTemplateValues({
     const autoValue = autoValues.at(autoValueIndex)
 
     if (isGridCSSKeyword(explicitValue) && explicitValue.value.value === 'auto') {
-      return autoValue ?? explicitValue
+      return {
+        ...(autoValue ?? explicitValue),
+        areaName: explicitValue.areaName ?? autoValue?.areaName ?? null,
+      } as GridCSSKeyword
     }
 
     return explicitValue

From 0a8440c28a42dfa32fa9e0ac7afeb796a920405e Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Thu, 19 Sep 2024 16:34:08 +0100
Subject: [PATCH 036/272] performance(editor) Dedupe `validPaths`. (#6376)

- Added `addAll` utility function for sets.
- `runDomSampler` now includes a test environment only check that there
are no duplicate entries in `validPaths`.
- `getValidElementPathsFromElement` now uses a `Set` instead of any
array for storing the paths as it builds up the result.
---
 editor/src/components/canvas/canvas-utils.ts  | 57 ++++++++++++-------
 editor/src/components/canvas/dom-sampler.tsx  | 10 ++++
 .../src/components/canvas/ui-jsx-canvas.tsx   |  2 +-
 editor/src/core/shared/set-utils.ts           |  6 ++
 4 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/editor/src/components/canvas/canvas-utils.ts b/editor/src/components/canvas/canvas-utils.ts
index 0b384a89ae13..de3d1b6857ea 100644
--- a/editor/src/components/canvas/canvas-utils.ts
+++ b/editor/src/components/canvas/canvas-utils.ts
@@ -168,6 +168,7 @@ import { getComponentDescriptorForTarget } from '../../core/property-controls/pr
 import type { PropertyControlsInfo } from '../custom-code/code-file'
 import { mapDropNulls } from '../../core/shared/array-utils'
 import { isFeatureEnabled } from '../../utils/feature-switches'
+import { addAll } from '../../core/shared/set-utils'
 
 function dragDeltaScaleForProp(prop: LayoutTargetableProp): number {
   switch (prop) {
@@ -1782,7 +1783,10 @@ function getValidElementPathsFromElement(
       ? EP.appendNewElementPath(parentPath, uid)
       : EP.appendToPath(parentPath, uid)
     : parentPath
-  let paths = includeElementInPath ? [path] : []
+  let paths: Set<ElementPath> = new Set()
+  if (includeElementInPath) {
+    paths.add(path)
+  }
   if (isJSXElementLike(element)) {
     const isRemixScene = isRemixSceneElement(element, filePath, projectContents)
     if (isRemixScene) {
@@ -1800,8 +1804,9 @@ function getValidElementPathsFromElement(
             return
           }
 
-          paths.push(
-            ...getValidElementPathsFromElement(
+          addAll(
+            paths,
+            getValidElementPathsFromElement(
               focusedElementPath,
               topLevelElement,
               parentPathInner,
@@ -1834,7 +1839,7 @@ function getValidElementPathsFromElement(
           }
         }
 
-        return paths
+        return Array.from(paths)
       }
     }
 
@@ -1866,7 +1871,7 @@ function getValidElementPathsFromElement(
         resolve,
         getRemixValidPathsGenerationContext,
       )
-      paths.push(...result)
+      addAll(paths, result)
     }
     matchingAutofocusedPathParts.forEach((autofocusedPathPart) => {
       const result = getValidElementPaths(
@@ -1879,13 +1884,14 @@ function getValidElementPathsFromElement(
         resolve,
         getRemixValidPathsGenerationContext,
       )
-      paths.push(...result)
+      addAll(paths, result)
     })
 
     // finally, add children elements
     fastForEach(element.children, (c) =>
-      paths.push(
-        ...getValidElementPathsFromElement(
+      addAll(
+        paths,
+        getValidElementPathsFromElement(
           focusedElementPath,
           c,
           path,
@@ -1907,8 +1913,9 @@ function getValidElementPathsFromElement(
         if (p.type === 'JSX_ATTRIBUTES_ENTRY') {
           const prop = p.value
           if (prop.type === 'JSX_ELEMENT') {
-            paths.push(
-              ...getValidElementPathsFromElement(
+            addAll(
+              paths,
+              getValidElementPathsFromElement(
                 focusedElementPath,
                 prop,
                 path,
@@ -1928,17 +1935,18 @@ function getValidElementPathsFromElement(
       })
     }
 
-    return paths
+    return Array.from(paths)
   } else if (
     (isJSXTextBlock(element) && isFeatureEnabled('Condensed Navigator Entries')) ||
     isJSIdentifier(element) ||
     isJSPropertyAccess(element) ||
     isJSElementAccess(element)
   ) {
-    return paths
+    return Array.from(paths)
   } else if (isJSXMapExpression(element)) {
-    paths.push(
-      ...getValidElementPathsFromElement(
+    addAll(
+      paths,
+      getValidElementPathsFromElement(
         focusedElementPath,
         element.valueToMap,
         path,
@@ -1952,7 +1960,10 @@ function getValidElementPathsFromElement(
         resolve,
         getRemixValidPathsGenerationContext,
       ),
-      ...getValidElementPathsFromElement(
+    )
+    addAll(
+      paths,
+      getValidElementPathsFromElement(
         focusedElementPath,
         element.mapFunction,
         path,
@@ -1967,7 +1978,7 @@ function getValidElementPathsFromElement(
         getRemixValidPathsGenerationContext,
       ),
     )
-    return paths
+    return Array.from(paths)
   } else if (isJSExpressionOtherJavaScript(element)) {
     // FIXME: From investigation of https://github.com/concrete-utopia/utopia/issues/1137
     // The paths this will generate will only be correct if the elements from `elementsWithin`
@@ -1988,8 +1999,9 @@ function getValidElementPathsFromElement(
       // We explicitly prevent auto-focusing generated elements here, because to support it would
       // require using the elementPathTree to determine how many children of a scene were actually
       // generated, creating a chicken and egg situation.
-      paths.push(
-        ...getValidElementPathsFromElement(
+      addAll(
+        paths,
+        getValidElementPathsFromElement(
           focusedElementPath,
           e,
           path,
@@ -2005,11 +2017,12 @@ function getValidElementPathsFromElement(
         ),
       ),
     )
-    return paths
+    return Array.from(paths)
   } else if (isJSXConditionalExpression(element)) {
     fastForEach([element.whenTrue, element.whenFalse], (e) => {
-      paths.push(
-        ...getValidElementPathsFromElement(
+      addAll(
+        paths,
+        getValidElementPathsFromElement(
           focusedElementPath,
           e,
           path,
@@ -2025,7 +2038,7 @@ function getValidElementPathsFromElement(
         ),
       )
     })
-    return paths
+    return Array.from(paths)
   } else {
     return []
   }
diff --git a/editor/src/components/canvas/dom-sampler.tsx b/editor/src/components/canvas/dom-sampler.tsx
index 7aefefa59b25..3bb9f3994f25 100644
--- a/editor/src/components/canvas/dom-sampler.tsx
+++ b/editor/src/components/canvas/dom-sampler.tsx
@@ -42,6 +42,7 @@ import {
   getAttributesComingFromStyleSheets,
 } from './dom-walker'
 import type { UiJsxCanvasContextData } from './ui-jsx-canvas'
+import { IS_TEST_ENVIRONMENT } from '../../common/env-vars'
 
 export function runDomSampler(options: {
   elementsToFocusOn: ElementsToRerender
@@ -67,6 +68,15 @@ export function runDomSampler(options: {
   }
 
   const validPaths = getValidPathsFromCanvasContainer(canvasRootContainer)
+  // Only perform this validation while in a test environment.
+  if (IS_TEST_ENVIRONMENT) {
+    const uniqueValidPaths = new Set(validPaths.map(EP.toString))
+    if (uniqueValidPaths.size !== validPaths.length) {
+      throw new Error(
+        `Duplicate paths in validPaths: ${JSON.stringify(validPaths.map(EP.toString), null, 2)}`,
+      )
+    }
+  }
 
   const spyPaths = Object.keys(options.spyCollector.current.spyValues.metadata)
   if (spyPaths.length === 0 && validPaths.length > 0) {
diff --git a/editor/src/components/canvas/ui-jsx-canvas.tsx b/editor/src/components/canvas/ui-jsx-canvas.tsx
index 19413a4462d6..03b2215fd10e 100644
--- a/editor/src/components/canvas/ui-jsx-canvas.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas.tsx
@@ -833,7 +833,7 @@ function useGetStoryboardRoot(
           getRemixValidPathsGenerationContext,
         )
   const storyboardRootElementPath = useKeepReferenceEqualityIfPossible(
-    validPaths[0] ?? EP.emptyElementPath,
+    validPaths.at(0) ?? EP.emptyElementPath,
   )
 
   const rootValidPathsArray = validPaths.map(EP.makeLastPartOfPathStatic)
diff --git a/editor/src/core/shared/set-utils.ts b/editor/src/core/shared/set-utils.ts
index 012c40b814f8..d4c7404c3d73 100644
--- a/editor/src/core/shared/set-utils.ts
+++ b/editor/src/core/shared/set-utils.ts
@@ -45,3 +45,9 @@ export function getSingleValueOnly<T>(set: Set<T>): T {
   }
   throw new Error(`Set had ${set.size} when it was expected to have just 1.`)
 }
+
+export function addAll<T>(set: Set<T>, values: Array<T>): void {
+  for (const value of values) {
+    set.add(value)
+  }
+}

From b2cf41f731d7d5dec821a4c6f41716beead2ee58 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Thu, 19 Sep 2024 16:34:38 +0100
Subject: [PATCH 037/272] performance(editor) Eliminate duplicate dom lookups
 (#6389)

- `collectMetadataForPaths` now caches the results of calls to
  `collectMetadataForElementPath` as there are two locations that
  make calls to it.
---
 editor/src/components/canvas/dom-sampler.tsx | 22 +++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/editor/src/components/canvas/dom-sampler.tsx b/editor/src/components/canvas/dom-sampler.tsx
index 3bb9f3994f25..7b1dca594dce 100644
--- a/editor/src/components/canvas/dom-sampler.tsx
+++ b/editor/src/components/canvas/dom-sampler.tsx
@@ -166,6 +166,8 @@ function collectMetadataForPaths({
     )
   })
 
+  let domMetadataCollected: { [key: string]: DomElementMetadata | null } = {}
+
   if (checkExistingMetadata === 'check-existing') {
     // delete all metadata which should be collected now and those which are not in the dom anymore
     Object.keys(metadataToUpdate_MUTATE).forEach((p) => {
@@ -185,19 +187,23 @@ function collectMetadataForPaths({
       if (domMetadata == null) {
         delete metadataToUpdate_MUTATE[p]
       }
+      domMetadataCollected[p] = domMetadata
     })
   }
 
   dynamicPathsToCollect.forEach((pathString) => {
     const path = EP.fromString(pathString)
-    const domMetadata = collectMetadataForElementPath(
-      path,
-      validPaths,
-      selectedViews,
-      scale,
-      containerRect,
-      elementCanvasRectangleCache,
-    )
+    const domMetadata =
+      pathString in domMetadataCollected
+        ? domMetadataCollected[pathString]
+        : collectMetadataForElementPath(
+            path,
+            validPaths,
+            selectedViews,
+            scale,
+            containerRect,
+            elementCanvasRectangleCache,
+          )
 
     const spyMetadata = spyCollector.current.spyValues.metadata[EP.toString(path)]
     if (spyMetadata == null) {

From 1e9b84e57c2af7b7b78eb35d122a0973c4f408ca Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Thu, 19 Sep 2024 17:40:38 +0200
Subject: [PATCH 038/272] Grid controls use metadata (#6390)

**Problem:**
Followup to https://github.com/concrete-utopia/utopia/pull/6386
Removed dom queries from grid and grid gap controls, and converted all
calculations to the canvas coordinate system.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../strategies/grid-cell-bounds.ts            | 11 ---
 .../strategies/grid-helpers.ts                |  6 +-
 .../canvas/controls/grid-controls.tsx         | 98 +++++--------------
 .../controls/select-mode/grid-gap-control.tsx | 13 +--
 .../select-mode/subdued-grid-gap-controls.tsx | 34 ++-----
 editor/src/components/canvas/gap-utils.ts     | 96 +++++++++---------
 6 files changed, 86 insertions(+), 172 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
index 1c7827d5d01a..f90d461ddae0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -1,12 +1,10 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import type { ElementInstanceMetadata } from '../../../../core/shared/element-template'
-import type { WindowPoint, WindowRectangle } from '../../../../core/shared/math-utils'
 import {
   canvasPoint,
   isInfinityRectangle,
   offsetPoint,
   rectContainsPoint,
-  windowRectangle,
 } from '../../../../core/shared/math-utils'
 import * as EP from '../../../../core/shared/element-path'
 import {
@@ -102,12 +100,3 @@ export function getGridCellBoundsFromCanvas(
     height: cellHeight,
   }
 }
-
-export function getGridPlaceholderDomElementFromCoordinates(params: {
-  row: number
-  column: number
-}): HTMLElement | null {
-  return document.querySelector(
-    `[data-grid-row="${params.row}"]` + `[data-grid-column="${params.column}"]`,
-  )
-}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index a1651088f729..50f1ae451df4 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -13,7 +13,7 @@ import {
   type GridElementProperties,
   type GridPosition,
 } from '../../../../core/shared/element-template'
-import type { CanvasRectangle, CanvasVector } from '../../../../core/shared/math-utils'
+import type { CanvasRectangle } from '../../../../core/shared/math-utils'
 import {
   canvasPoint,
   canvasRectangle,
@@ -434,7 +434,7 @@ function gridChildAbsoluteMoveCommands(
     return []
   }
 
-  const offsetInTarget = windowPoint({
+  const offsetInTarget = canvasPoint({
     x: dragInteractionData.originalDragStart.x - targetMetadata.globalFrame.x,
     y: dragInteractionData.originalDragStart.y - targetMetadata.globalFrame.y,
   })
@@ -609,7 +609,7 @@ export function getGlobalFrameOfGridCell(
     return null
   }
 
-  return gridCellGlobalFrames[coords.row - 1][coords.column - 1] ?? null
+  return gridCellGlobalFrames[coords.row - 1]?.[coords.column - 1] ?? null
 }
 
 function gridTemplateToNumbers(gridTemplate: GridTemplate | null): Array<number> | null {
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 3d64376a27f6..3936bf6dc5a0 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -20,7 +20,10 @@ import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { mapDropNulls, stripNulls } from '../../../core/shared/array-utils'
 import { defaultEither } from '../../../core/shared/either'
 import * as EP from '../../../core/shared/element-path'
-import type { GridAutoOrTemplateDimensions } from '../../../core/shared/element-template'
+import type {
+  ElementInstanceMetadata,
+  GridAutoOrTemplateDimensions,
+} from '../../../core/shared/element-template'
 import {
   isGridAutoOrTemplateDimensions,
   type GridAutoOrTemplateBase,
@@ -28,7 +31,6 @@ import {
 import type { CanvasPoint, CanvasRectangle } from '../../../core/shared/math-utils'
 import {
   canvasPoint,
-  canvasRectangle,
   isFiniteRectangle,
   isInfinityRectangle,
   nullIfInfinity,
@@ -85,11 +87,11 @@ import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
 import { CanvasLabel } from './select-mode/controls-common'
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
+import { gridCellTargetId } from '../canvas-strategies/strategies/grid-cell-bounds'
 import {
-  getGridPlaceholderDomElementFromCoordinates,
-  gridCellTargetId,
-} from '../canvas-strategies/strategies/grid-cell-bounds'
-import { getGridRelatedIndexes } from '../canvas-strategies/strategies/grid-helpers'
+  getGlobalFrameOfGridCell,
+  getGridRelatedIndexes,
+} from '../canvas-strategies/strategies/grid-helpers'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -452,6 +454,7 @@ export type GridData = {
   rows: number
   columns: number
   cells: number
+  metadata: ElementInstanceMetadata
 }
 export function useGridData(elementPaths: ElementPath[]): GridData[] {
   const grids = useEditorState(
@@ -495,6 +498,7 @@ export function useGridData(elementPaths: ElementPath[]): GridData[] {
 
         return {
           elementPath: targetGridContainer.elementPath,
+          metadata: targetGridContainer,
           frame: targetGridContainer.globalFrame,
           gridTemplateColumns: gridTemplateColumns,
           gridTemplateRows: gridTemplateRows,
@@ -912,8 +916,6 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
                       position: 'relative',
                       pointerEvents: 'initial',
                     }}
-                    data-grid-row={countedRow}
-                    data-grid-column={countedColumn}
                   >
                     {when(
                       features.Grid.dotgrid,
@@ -1052,61 +1054,31 @@ const AbsoluteDistanceIndicators = React.memo(
   (props: { targetRootCell: GridCellCoordinates | null }) => {
     const colorTheme = useColorTheme()
 
-    const cellFrame = useEditorState(
+    const gridMetadata = useEditorState(
       Substores.metadata,
       (store) => {
         if (store.editor.selectedViews.length !== 1) {
           return null
         }
 
-        const meta = MetadataUtils.findElementByElementPath(
+        return MetadataUtils.findElementByElementPath(
           store.editor.jsxMetadata,
           store.editor.selectedViews[0],
         )
-        if (!MetadataUtils.isPositionAbsolute(meta)) {
-          return null
-        }
-
-        return nullIfInfinity(meta?.globalFrame)
       },
       'AbsoluteDistanceIndicators cellFrame',
     )
-    const canvasScale = useEditorState(
-      Substores.canvasOffset,
-      (store) => store.editor.canvas.scale,
-      'AbsoluteDistanceIndicators canvasScale',
-    )
 
-    const canvasOffset = useEditorState(
-      Substores.canvasOffset,
-      (store) => store.editor.canvas.roundedCanvasOffset,
-      'AbsoluteDistanceIndicators canvasOffset',
-    )
+    const cellFrame = !MetadataUtils.isPositionAbsolute(gridMetadata)
+      ? null
+      : nullIfInfinity(gridMetadata?.globalFrame)
 
     const targetCellBoundingBox = React.useMemo(() => {
-      if (props.targetRootCell == null) {
+      if (gridMetadata == null || props.targetRootCell == null) {
         return null
       }
-      const element = getGridPlaceholderDomElementFromCoordinates(props.targetRootCell)
-      const boundingBox = element?.getBoundingClientRect()
-      if (boundingBox == null) {
-        return null
-      }
-
-      const canvasOrigin = windowToCanvasCoordinates(
-        canvasScale,
-        canvasOffset,
-        windowPoint({ x: boundingBox.left, y: boundingBox.top }),
-      ).canvasPositionRounded
-      const canvasRect = canvasRectangle({
-        x: canvasOrigin.x,
-        y: canvasOrigin.y,
-        width: boundingBox.width * canvasScale,
-        height: boundingBox.height * canvasScale,
-      })
-
-      return canvasRect
-    }, [props.targetRootCell, canvasScale, canvasOffset])
+      return getGlobalFrameOfGridCell(gridMetadata, props.targetRootCell)
+    }, [props.targetRootCell, gridMetadata])
 
     const distanceTop =
       targetCellBoundingBox == null || cellFrame == null ? 0 : cellFrame.y - targetCellBoundingBox.y
@@ -1397,16 +1369,10 @@ function useCellAnimation(params: {
 
   const animate = useCanvasAnimation(selectedViews)
 
-  const canvasScale = useEditorState(
-    Substores.canvasOffset,
-    (store) => store.editor.canvas.scale,
-    'useSnapAnimation canvasScale',
-  )
-
-  const canvasOffset = useEditorState(
-    Substores.canvasOffset,
-    (store) => store.editor.canvas.roundedCanvasOffset,
-    'useSnapAnimation canvasOffset',
+  const gridMetadata = useEditorState(
+    Substores.metadata,
+    (store) => MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, gridPath),
+    'useCellAnimation gridMetadata',
   )
 
   const moveFromPoint = React.useMemo(() => {
@@ -1414,22 +1380,12 @@ function useCellAnimation(params: {
   }, [lastSnapPoint, shadowFrame])
 
   const snapPoint = React.useMemo(() => {
-    if (gridPath == null || targetRootCell == null) {
+    if (gridMetadata == null || targetRootCell == null) {
       return null
     }
 
-    const element = document.getElementById(
-      gridCellTargetId(gridPath, targetRootCell.row, targetRootCell.column),
-    )
-    if (element == null) {
-      return null
-    }
-
-    const rect = element.getBoundingClientRect()
-    const point = windowPoint({ x: rect.x, y: rect.y })
-
-    return windowToCanvasCoordinates(canvasScale, canvasOffset, point).canvasPositionRounded
-  }, [canvasScale, canvasOffset, gridPath, targetRootCell])
+    return getGlobalFrameOfGridCell(gridMetadata, targetRootCell)
+  }, [gridMetadata, targetRootCell])
 
   React.useEffect(() => {
     if (disabled) {
@@ -1762,10 +1718,6 @@ function gridKeyFromPath(path: ElementPath): string {
   return `grid-${EP.toString(path)}`
 }
 
-export function getGridPlaceholderDomElement(elementPath: ElementPath): HTMLElement | null {
-  return document.getElementById(gridKeyFromPath(elementPath))
-}
-
 const gridPlaceholderBorder = (color: string) => `2px solid ${color}`
 
 export function controlsForGridPlaceholders(gridPath: ElementPath): ControlWithProps<any> {
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
index ccf0049b9037..5cf6af9f6779 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
@@ -154,15 +154,10 @@ export const GridGapControl = controlForStrategyMemoized<GridGapControlProps>((p
 
   const gridRowColumnInfo = useGridData([selectedElement])
 
-  const controlBounds = gridGapControlBoundsFromMetadata(
-    selectedElement,
-    gridRowColumnInfo[0],
-    {
-      row: fallbackEmptyValue(gridGapRow),
-      column: fallbackEmptyValue(gridGapColumn),
-    },
-    scale,
-  )
+  const controlBounds = gridGapControlBoundsFromMetadata(gridRowColumnInfo[0], {
+    row: fallbackEmptyValue(gridGapRow),
+    column: fallbackEmptyValue(gridGapColumn),
+  })
 
   return (
     <CanvasOffsetWrapper>
diff --git a/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx b/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
index 61f436cda21b..3ea911a32c89 100644
--- a/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
+++ b/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
@@ -23,11 +23,7 @@ export const SubduedGridGapControl = React.memo<SubduedGridGapControlProps>((pro
     (store) => store.editor.selectedViews,
     'SubduedGridGapControl selectedViews',
   )
-  const scale = useEditorState(
-    Substores.canvas,
-    (store) => store.editor.canvas.scale,
-    'GridGapControl scale',
-  )
+
   const metadata = useRefEditorState((store) => store.editor.jsxMetadata)
   const selectedElement = targets.at(0)
 
@@ -46,17 +42,12 @@ export const SubduedGridGapControl = React.memo<SubduedGridGapControlProps>((pro
     const gridGapRow = gridGap.row
     const gridGapColumn = gridGap.column
 
-    const controlBounds = gridGapControlBoundsFromMetadata(
-      selectedElement,
-      selectedGrid,
-      {
-        row: fallbackEmptyValue(gridGapRow),
-        column: fallbackEmptyValue(gridGapColumn),
-      },
-      scale,
-    )
+    const controlBounds = gridGapControlBoundsFromMetadata(selectedGrid, {
+      row: fallbackEmptyValue(gridGapRow),
+      column: fallbackEmptyValue(gridGapColumn),
+    })
     return controlBounds.gaps.filter((gap) => gap.axis === axis || axis === 'both')
-  }, [axis, metadata, scale, selectedElement, selectedGrid])
+  }, [axis, metadata, selectedElement, selectedGrid])
 
   if (filteredGaps.length === 0 || selectedElement == null) {
     return null
@@ -108,15 +99,10 @@ function GridGapControl({
       return
     }
 
-    const controlBounds = gridGapControlBoundsFromMetadata(
-      selectedElement,
-      selectedGrid,
-      {
-        row: fallbackEmptyValue(gridGap.row),
-        column: fallbackEmptyValue(gridGap.column),
-      },
-      scale,
-    )
+    const controlBounds = gridGapControlBoundsFromMetadata(selectedGrid, {
+      row: fallbackEmptyValue(gridGap.row),
+      column: fallbackEmptyValue(gridGap.column),
+    })
 
     const bound = controlBounds.gaps.find((updatedGap) => updatedGap.gapId === gap.gapId)
     if (bound == null) {
diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
index c30454a2afeb..cddd81efd7a6 100644
--- a/editor/src/components/canvas/gap-utils.ts
+++ b/editor/src/components/canvas/gap-utils.ts
@@ -32,10 +32,8 @@ import * as EP from '../../core/shared/element-path'
 import { treatElementAsFragmentLike } from './canvas-strategies/strategies/fragment-like-helpers'
 import type { AllElementProps } from '../editor/store/editor-state'
 import type { GridData } from './controls/grid-controls'
-import {
-  getGridPlaceholderDomElement,
-  getNullableAutoOrTemplateBaseString,
-} from './controls/grid-controls'
+import { getNullableAutoOrTemplateBaseString } from './controls/grid-controls'
+import { getGlobalFramesOfGridCells } from './canvas-strategies/strategies/grid-helpers'
 
 export interface PathWithBounds {
   bounds: CanvasRectangle
@@ -179,10 +177,8 @@ export function gapControlBoundsFromMetadata(
 }
 
 export function gridGapControlBoundsFromMetadata(
-  parentPath: ElementPath,
   gridRowColumnInfo: GridData,
   gapValues: { row: CSSNumber; column: CSSNumber },
-  scale: number,
 ): {
   gaps: Array<{
     bounds: CanvasRectangle
@@ -206,48 +202,56 @@ export function gridGapControlBoundsFromMetadata(
     gridTemplateRows: '1fr',
     gridTemplateColumns: '1fr',
   }
-  const parentGrid = getGridPlaceholderDomElement(parentPath)
-  if (parentGrid == null) {
+  const grid = gridRowColumnInfo.metadata
+
+  if (grid == null) {
+    return emptyResult
+  }
+
+  const parentGridBounds = grid.globalFrame
+
+  if (parentGridBounds == null || isInfinityRectangle(parentGridBounds)) {
     return emptyResult
   }
-  const parentGridBounds = parentGrid?.getBoundingClientRect()
+
   const gridRows = gridRowColumnInfo.rows
   const gridColumns = gridRowColumnInfo.columns
   const gridTemplateRows = getNullableAutoOrTemplateBaseString(gridRowColumnInfo.gridTemplateRows)
   const gridTemplateColumns = getNullableAutoOrTemplateBaseString(
     gridRowColumnInfo.gridTemplateColumns,
   )
-  const childrenArray = Array.from(parentGrid?.children ?? [])
-  if (childrenArray.length !== gridRows * gridColumns) {
+
+  const gridCellBounds = getGlobalFramesOfGridCells(grid)
+
+  if (gridCellBounds == null) {
     return emptyResult
   }
-  const cell = matrixGetter(childrenArray, gridColumns)
-  // the actual rectangle that surrounds the cell placeholders
-  const cellBounds = canvasRectangle({
-    x: cell(0, 0).getBoundingClientRect().x - parentGridBounds.x,
-    y: cell(0, 0).getBoundingClientRect().y - parentGridBounds.y,
+  const allCellsBound = canvasRectangle({
+    x: gridCellBounds[0][0].x - parentGridBounds.x,
+    y: gridCellBounds[0][0].y - parentGridBounds.y,
     width:
-      cell(0, gridColumns - 1).getBoundingClientRect().right - cell(0, 0).getBoundingClientRect().x,
+      gridCellBounds[0][gridColumns - 1].x +
+      gridCellBounds[0][gridColumns - 1].width -
+      gridCellBounds[0][0].x,
     height:
-      cell(gridRows - 1, 0).getBoundingClientRect().bottom - cell(0, 0).getBoundingClientRect().y,
+      gridCellBounds[gridRows - 1][0].y +
+      gridCellBounds[gridRows - 1][0].height -
+      gridCellBounds[0][0].y,
   })
 
   // row gaps array
   const rowGaps = createArrayWithLength(gridRows - 1, (i) => {
     // cell i represents the gap between child [i * gridColumns] and child [(i+1) * gridColumns]
-    const firstChildBounds = cell(i, 0).getBoundingClientRect()
-    const secondChildBounds = cell(i + 1, 0).getBoundingClientRect()
+    const firstChildBounds = gridCellBounds[i][0]
+    const secondChildBounds = gridCellBounds[i + 1][0]
     return {
-      gapId: `${EP.toString(parentPath)}-row-gap-${i}`,
-      bounds: adjustToScale(
-        canvasRectangle({
-          x: cellBounds.x,
-          y: firstChildBounds.bottom - parentGridBounds.y,
-          width: cellBounds.width,
-          height: secondChildBounds.top - firstChildBounds.bottom,
-        }),
-        scale,
-      ),
+      gapId: `${EP.toString(grid.elementPath)}-row-gap-${i}`,
+      bounds: canvasRectangle({
+        x: allCellsBound.x,
+        y: firstChildBounds.y + firstChildBounds.height - parentGridBounds.y,
+        width: allCellsBound.width,
+        height: secondChildBounds.y - firstChildBounds.y - firstChildBounds.height,
+      }),
       gap: gapValues.row,
       axis: 'row' as Axis,
     }
@@ -256,19 +260,16 @@ export function gridGapControlBoundsFromMetadata(
   // column gaps array
   const columnGaps = createArrayWithLength(gridColumns - 1, (i) => {
     // cell i represents the gap between child [i] and child [i + 1]
-    const firstChildBounds = cell(0, i).getBoundingClientRect()
-    const secondChildBounds = cell(0, i + 1).getBoundingClientRect()
+    const firstChildBounds = gridCellBounds[0][i]
+    const secondChildBounds = gridCellBounds[0][i + 1]
     return {
-      gapId: `${EP.toString(parentPath)}-column-gap-${i}`,
-      bounds: adjustToScale(
-        canvasRectangle({
-          x: firstChildBounds.right - parentGridBounds.x,
-          y: cellBounds.y,
-          width: secondChildBounds.left - firstChildBounds.right,
-          height: cellBounds.height,
-        }),
-        scale,
-      ),
+      gapId: `${EP.toString(grid.elementPath)}-column-gap-${i}`,
+      bounds: canvasRectangle({
+        x: firstChildBounds.x + firstChildBounds.width - parentGridBounds.x,
+        y: allCellsBound.y,
+        width: secondChildBounds.x - firstChildBounds.x - firstChildBounds.width,
+        height: allCellsBound.height,
+      }),
       gap: gapValues.column,
       axis: 'column' as Axis,
     }
@@ -280,20 +281,11 @@ export function gridGapControlBoundsFromMetadata(
     columns: gridColumns,
     gridTemplateRows: gridTemplateRows ?? '',
     gridTemplateColumns: gridTemplateColumns ?? '',
-    cellBounds: cellBounds,
+    cellBounds: allCellsBound,
     gapValues: gapValues,
   }
 }
 
-function adjustToScale(rectangle: CanvasRectangle, scale: number): CanvasRectangle {
-  return canvasRectangle({
-    x: rectangle.x / scale,
-    y: rectangle.y / scale,
-    width: rectangle.width / scale,
-    height: rectangle.height / scale,
-  })
-}
-
 export interface GridGapData {
   row: CSSNumberWithRenderedValue
   column: CSSNumberWithRenderedValue

From 6cb11b211e99a28c744b38acaa93e3be37d87418 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Thu, 19 Sep 2024 16:48:17 +0100
Subject: [PATCH 039/272] performance(editor) Switch Event Handlers (#6385)

- Switched lots of event handlers from `onClick` to `onMouseDown`, along
with updating the name of props if those use that naming.
---
 .../components/canvas/design-panel-root.tsx   | 42 +++++++++----------
 ...spector-end-to-end-tests.spec.browser2.tsx |  8 ++--
 .../components/inspector/section-header.tsx   |  2 +-
 .../component-section/component-section.tsx   |  4 +-
 .../header-section/target-selector.tsx        |  4 +-
 .../layout-section/list-source-cartouche.tsx  | 13 +++---
 .../components/navigator/left-pane/index.tsx  | 34 +++++++--------
 .../navigator-condensed-entry.tsx             | 12 +++---
 .../navigator-item-clickable-wrapper.tsx      | 14 +++----
 .../navigator-item-components.tsx             | 37 ++++++++--------
 .../navigator-item/navigator-item.tsx         | 29 +++++++------
 ...nent-picker-context-menu.spec.browser2.tsx |  9 ++--
 .../navigator/navigator.spec.browser2.tsx     |  9 ++--
 13 files changed, 112 insertions(+), 105 deletions(-)

diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
index 5852f12f0e23..82de4a3df8d6 100644
--- a/editor/src/components/canvas/design-panel-root.tsx
+++ b/editor/src/components/canvas/design-panel-root.tsx
@@ -136,7 +136,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
   )
   const dispatch = useDispatch()
 
-  const onClickTab = React.useCallback(
+  const onMouseDownTab = React.useCallback(
     (menuTab: RightMenuTab) => {
       const actions: Array<EditorAction> = [EditorActions.setRightMenuTab(menuTab)]
       if (isCommentMode(editorModeRef.current) && menuTab !== RightMenuTab.Comments) {
@@ -147,25 +147,25 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
     [dispatch, editorModeRef],
   )
 
-  const onClickInsertTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Insert)
-  }, [onClickTab])
+  const onMouseDownInsertTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Insert)
+  }, [onMouseDownTab])
 
-  const onClickCommentsTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Comments)
-  }, [onClickTab])
+  const onMouseDownCommentsTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Comments)
+  }, [onMouseDownTab])
 
-  const onClickInspectorTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Inspector)
-  }, [onClickTab])
+  const onMouseDownInspectorTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Inspector)
+  }, [onMouseDownTab])
 
-  const onClickSettingsTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Settings)
-  }, [onClickTab])
+  const onMouseDownSettingsTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Settings)
+  }, [onMouseDownTab])
 
-  const onClickRollYourOwnTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.RollYourOwn)
-  }, [onClickTab])
+  const onMouseDownRollYourOwnTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.RollYourOwn)
+  }, [onMouseDownTab])
 
   const canComment = useCanComment()
 
@@ -206,7 +206,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
           <MenuTab
             label={'Inspector'}
             selected={selectedTab === RightMenuTab.Inspector}
-            onClick={onClickInspectorTab}
+            onMouseDown={onMouseDownInspectorTab}
           />
           {when(
             allowedToEdit,
@@ -216,7 +216,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
                 <MenuTab
                   label={'Insert'}
                   selected={selectedTab === RightMenuTab.Insert}
-                  onClick={onClickInsertTab}
+                  onMouseDown={onMouseDownInsertTab}
                 />,
               )}
             </>,
@@ -227,20 +227,20 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
               testId='comments-tab'
               label={'Comments'}
               selected={selectedTab === RightMenuTab.Comments}
-              onClick={onClickCommentsTab}
+              onMouseDown={onMouseDownCommentsTab}
             />,
           )}
           <MenuTab
             label={'Settings'}
             selected={selectedTab === RightMenuTab.Settings}
-            onClick={onClickSettingsTab}
+            onMouseDown={onMouseDownSettingsTab}
           />
           {when(
             isFeatureEnabled('Roll Your Own'),
             <MenuTab
               label={'RYO'}
               selected={selectedTab === RightMenuTab.RollYourOwn}
-              onClick={onClickRollYourOwnTab}
+              onMouseDown={onMouseDownRollYourOwnTab}
             />,
           )}
         </FlexRow>
diff --git a/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx b/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
index 088a593c27be..2fabb7121bba 100644
--- a/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
+++ b/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
@@ -1459,12 +1459,12 @@ describe('inspector tests with real metadata', () => {
 
     await act(async () => {
       await screen.findByTestId('section-header-Advanced')
-      fireEvent.click(screen.getByTestId('section-header-Advanced'))
+      fireEvent.mouseDown(screen.getByTestId('section-header-Advanced'))
     })
 
     await act(async () => {
       await screen.findByTestId('target-selector-style')
-      fireEvent.click(screen.getByTestId('target-selector'))
+      fireEvent.mouseDown(screen.getByTestId('target-selector'))
     })
     await act(async () => {
       await screen.findByTestId('target-list-item-css')
@@ -1566,12 +1566,12 @@ describe('inspector tests with real metadata', () => {
 
     await act(async () => {
       await screen.findByTestId('section-header-Advanced')
-      fireEvent.click(screen.getByTestId('section-header-Advanced'))
+      fireEvent.mouseDown(screen.getByTestId('section-header-Advanced'))
     })
 
     await act(async () => {
       await screen.findByTestId('target-selector-style')
-      fireEvent.click(screen.getByTestId('target-selector'))
+      fireEvent.mouseDown(screen.getByTestId('target-selector'))
     })
     await act(async () => {
       await screen.findByTestId('target-list-item-css')
diff --git a/editor/src/components/inspector/section-header.tsx b/editor/src/components/inspector/section-header.tsx
index 1887359b8cd5..77719edac898 100644
--- a/editor/src/components/inspector/section-header.tsx
+++ b/editor/src/components/inspector/section-header.tsx
@@ -19,7 +19,7 @@ export function InspectorSectionHeader({
         padding: 8,
         cursor: 'pointer',
       }}
-      onClick={toggle}
+      onMouseDown={toggle}
       data-testid={`section-header-${title}`}
     >
       <div
diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
index 9fe1916b5d88..0db2eb8dd325 100644
--- a/editor/src/components/inspector/sections/component-section/component-section.tsx
+++ b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -1189,7 +1189,7 @@ interface ObjectIndicatorProps {
 const ObjectIndicator = (props: ObjectIndicatorProps) => {
   return (
     <div
-      onClick={props.toggle}
+      onMouseDown={props.toggle}
       style={{
         border: `1px solid ${colorTheme.bg3.value}`,
         paddingLeft: 2,
@@ -1579,7 +1579,7 @@ export const ComponentSectionInner = React.memo((props: ComponentSectionProps) =
             <span onClick={openInstanceFile}>Component</span>
           )}
         </FlexRow>
-        <SquareButton highlight onClick={toggleSection}>
+        <SquareButton highlight onMouseDown={toggleSection}>
           <ExpandableIndicator
             testId='component-section-expand'
             visible
diff --git a/editor/src/components/inspector/sections/header-section/target-selector.tsx b/editor/src/components/inspector/sections/header-section/target-selector.tsx
index 84a1e19dcc29..93115475a56b 100644
--- a/editor/src/components/inspector/sections/header-section/target-selector.tsx
+++ b/editor/src/components/inspector/sections/header-section/target-selector.tsx
@@ -408,10 +408,10 @@ const TargetListHeader = React.memo((props: TargetListHeaderProps) => {
         Target
       </H1>
       <SectionActionSheet className='actionsheet'>
-        <SquareButton highlight disabled={isAdding} onClick={startAdding}>
+        <SquareButton highlight disabled={isAdding} onMouseDown={startAdding}>
           <Icn category='semantic' type='cross' width={12} height={12} />
         </SquareButton>
-        <SquareButton highlight onClick={togglePathPanel}>
+        <SquareButton highlight onMouseDown={togglePathPanel}>
           <ExpandableIndicator
             testId='target-selector'
             visible
diff --git a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
index 831a8b20f88d..4771e65af340 100644
--- a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
+++ b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
@@ -100,11 +100,14 @@ const MapListSourceCartoucheInner = React.memo(
     const { popupIsOpen, DataPickerComponent, setReferenceElement, openPopup } =
       useDataPickerButton(variableNamesInScope, onPickMappedElement, pathToMappedExpression, target)
 
-    const onClick = React.useCallback(() => {
-      if (openOn === 'single-click') {
-        openPopup()
-      }
-    }, [openOn, openPopup])
+    const onClick = React.useCallback(
+      (e: React.MouseEvent) => {
+        if (openOn === 'single-click') {
+          openPopup()
+        }
+      },
+      [openOn, openPopup],
+    )
 
     const onDoubleClick = React.useCallback(() => {
       if (openOn === 'double-click') {
diff --git a/editor/src/components/navigator/left-pane/index.tsx b/editor/src/components/navigator/left-pane/index.tsx
index 286bf18cbbe5..8babed005899 100644
--- a/editor/src/components/navigator/left-pane/index.tsx
+++ b/editor/src/components/navigator/left-pane/index.tsx
@@ -48,7 +48,7 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
 
   const dispatch = useDispatch()
 
-  const onClickTab = React.useCallback(
+  const onMouseDownTab = React.useCallback(
     (menuTab: LeftMenuTab) => {
       let actions: Array<EditorAction> = []
       actions.push(setLeftMenuTab(menuTab))
@@ -57,21 +57,21 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
     [dispatch],
   )
 
-  const onClickPagesTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Pages)
-  }, [onClickTab])
+  const onMouseDownPagesTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Pages)
+  }, [onMouseDownTab])
 
-  const onClickProjectTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Project)
-  }, [onClickTab])
+  const onMouseDownProjectTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Project)
+  }, [onMouseDownTab])
 
-  const onClickNavigatorTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Navigator)
-  }, [onClickTab])
+  const onMouseDownNavigatorTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Navigator)
+  }, [onMouseDownTab])
 
-  const onClickGithubTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Github)
-  }, [onClickTab])
+  const onMouseDownGithubTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Github)
+  }, [onMouseDownTab])
 
   const isMyProject = useIsMyProject()
 
@@ -126,23 +126,23 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
                 <MenuTab
                   label={'Pages'}
                   selected={selectedTab === LeftMenuTab.Pages}
-                  onClick={onClickPagesTab}
+                  onMouseDown={onMouseDownPagesTab}
                 />,
               )}
               <MenuTab
                 label={'Navigator'}
                 selected={selectedTab === LeftMenuTab.Navigator}
-                onClick={onClickNavigatorTab}
+                onMouseDown={onMouseDownNavigatorTab}
               />
               <MenuTab
                 label={'Project'}
                 selected={selectedTab === LeftMenuTab.Project}
-                onClick={onClickProjectTab}
+                onMouseDown={onMouseDownProjectTab}
               />
               <MenuTab
                 label={'Github'}
                 selected={selectedTab === LeftMenuTab.Github}
-                onClick={onClickGithubTab}
+                onMouseDown={onMouseDownGithubTab}
               />
             </FlexRow>,
           )}
diff --git a/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx b/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
index 60f9e0afce4e..6f208b183679 100644
--- a/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
@@ -20,7 +20,7 @@ import { LayoutIcon } from './layout-icon'
 import { DataReferenceCartoucheControl } from '../../inspector/sections/component-section/data-reference-cartouche'
 import {
   NavigatorRowClickableWrapper,
-  useGetNavigatorClickActions,
+  useGetNavigatorMouseDownActions,
 } from './navigator-item-clickable-wrapper'
 import type { ThemeObject } from '../../../uuiui/styles/theme/theme-helpers'
 import { useNavigatorSelectionBoundsForEntry } from './use-navigator-selection-bounds-for-entry'
@@ -341,18 +341,18 @@ const CondensedEntryItemContent = React.memo(
       ])
     }, [props.entry, dispatch, highlightedViews])
 
-    const getClickActions = useGetNavigatorClickActions(
+    const getMouseDownActions = useGetNavigatorMouseDownActions(
       props.entry.elementPath,
       props.selected,
       condensedNavigatorRow([props.entry], 'leaf', props.indentation),
     )
 
-    const onClick = React.useCallback(
+    const onMouseDown = React.useCallback(
       (e: React.MouseEvent) => {
         e.stopPropagation()
-        dispatch(getClickActions(e))
+        dispatch(getMouseDownActions(e))
       },
-      [dispatch, getClickActions],
+      [dispatch, getMouseDownActions],
     )
 
     return (
@@ -374,7 +374,7 @@ const CondensedEntryItemContent = React.memo(
         }}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}
-        onClick={onClick}
+        onMouseDown={onMouseDown}
       >
         <div
           style={{
diff --git a/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx b/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
index 8b1deca408b7..c698a0f9014d 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
@@ -46,21 +46,21 @@ export const NavigatorRowClickableWrapper = React.memo(
       return selectedViews.current.some((view) => EP.pathsEqual(targetPath, view))
     }, [selectedViews, targetPath])
 
-    const getActions = useGetNavigatorClickActions(targetPath, selected, props.row)
+    const getMouseDownActions = useGetNavigatorMouseDownActions(targetPath, selected, props.row)
 
-    const onClick = React.useCallback(
+    const onMouseDown = React.useCallback(
       (e: React.MouseEvent) => {
         e.stopPropagation()
         e.preventDefault()
 
-        const actions = getActions(e)
+        const actions = getMouseDownActions(e)
         dispatch(actions)
       },
-      [dispatch, getActions],
+      [dispatch, getMouseDownActions],
     )
 
     return (
-      <div style={{ display: 'flex', alignItems: 'center', flex: 1 }} onClick={onClick}>
+      <div style={{ display: 'flex', alignItems: 'center', flex: 1 }} onMouseDown={onMouseDown}>
         {props.children}
       </div>
     )
@@ -68,11 +68,11 @@ export const NavigatorRowClickableWrapper = React.memo(
 )
 NavigatorRowClickableWrapper.displayName = 'NavigatorRowClickableWrapper'
 
-export function useGetNavigatorClickActions(
+export function useGetNavigatorMouseDownActions(
   targetPath: ElementPath,
   selected: boolean,
   row: NavigatorRow,
-) {
+): (event: React.MouseEvent) => Array<EditorAction> {
   const navigatorTargets = useRefEditorState(navigatorTargetsSelector)
   const selectedViews = useRefEditorState((store) => store.editor.selectedViews)
   const collapsedViews = useRefEditorState((store) => store.editor.navigator.collapsedViews)
diff --git a/editor/src/components/navigator/navigator-item/navigator-item-components.tsx b/editor/src/components/navigator/navigator-item/navigator-item-components.tsx
index 3fe002f4ea84..1686b791019d 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item-components.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item-components.tsx
@@ -180,7 +180,7 @@ interface VisiblityIndicatorProps {
   visibilityEnabled: boolean
   selected: boolean
   iconColor: IcnProps['color']
-  onClick: () => void
+  onMouseDown: () => void
 }
 
 export const VisibilityIndicator: React.FunctionComponent<
@@ -190,7 +190,7 @@ export const VisibilityIndicator: React.FunctionComponent<
 
   return (
     <Button
-      onClick={props.onClick}
+      onMouseDown={props.onMouseDown}
       style={{
         height: 12,
         width: 12,
@@ -228,7 +228,7 @@ const AddChildButton = React.memo((props: AddChildButtonProps) => {
     'AddChildButton supportsChildren',
   )
 
-  const onClick = useCreateCallbackToShowComponentPicker()(
+  const onMouseDown = useCreateCallbackToShowComponentPicker()(
     [target],
     EditorActions.insertAsChildTarget(),
   )
@@ -239,7 +239,7 @@ const AddChildButton = React.memo((props: AddChildButtonProps) => {
 
   return (
     <Button
-      onClick={onClick}
+      onMouseDown={onMouseDown}
       style={{
         height: 12,
         width: 12,
@@ -292,12 +292,12 @@ const ReplaceElementButton = React.memo((props: ReplaceElementButtonProps) => {
     }
   })()
 
-  const onClick = useCreateCallbackToShowComponentPicker()([realTarget], insertionTarget)
+  const onMouseDown = useCreateCallbackToShowComponentPicker()([realTarget], insertionTarget)
 
   return (
     <Button
       data-testid={ReplaceElementButtonTestId(target, prop)}
-      onClick={onClick}
+      onMouseDown={onMouseDown}
       style={{
         height: 12,
         width: 12,
@@ -320,37 +320,36 @@ interface SelectionLockedIndicatorProps {
   selected: boolean
   iconColor: IcnProps['color']
   isDescendantOfLocked: boolean
-  onClick: (value: SelectionLocked) => void
+  onMouseDown: (value: SelectionLocked) => void
 }
 
 export const SelectionLockedIndicator: React.FunctionComponent<
   React.PropsWithChildren<SelectionLockedIndicatorProps>
 > = React.memo((props) => {
-  const { shouldShow, value, selected, iconColor, isDescendantOfLocked, onClick } = props
+  const { shouldShow, value, iconColor, isDescendantOfLocked, onMouseDown } = props
   const color = iconColor
 
-  const handleClick = React.useCallback(
+  const handleMouseDown = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
       event.stopPropagation()
       switch (value) {
         case 'selectable':
-          onClick('locked-hierarchy')
+          onMouseDown('locked-hierarchy')
           break
         case 'locked-hierarchy':
-          onClick('locked')
+          onMouseDown('locked')
           break
         case 'locked':
         default:
-          onClick('selectable')
+          onMouseDown('selectable')
           break
       }
     },
-    [onClick, value],
+    [onMouseDown, value],
   )
   return (
     <Button
-      onClick={handleClick}
-      onMouseDown={stopPropagation}
+      onMouseDown={handleMouseDown}
       style={{
         height: 12,
         width: 12,
@@ -474,7 +473,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
     props.navigatorEntry.elementPath,
   )
 
-  const collapse = React.useCallback(
+  const toggleCollapse = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       event.stopPropagation()
       dispatch([EditorActions.toggleCollapse(navigatorEntry.elementPath)])
@@ -539,7 +538,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
             isDescendantOfLocked={isDescendantOfLocked}
             selected={props.selected}
             iconColor={props.iconColor}
-            onClick={toggleSelectable}
+            onMouseDown={toggleSelectable}
           />
           <VisibilityIndicator
             key={`visibility-indicator-${varSafeNavigatorEntryToKey(navigatorEntry)}`}
@@ -549,7 +548,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
             visibilityEnabled={props.isVisibleOnCanvas}
             selected={props.selected}
             iconColor={props.iconColor}
-            onClick={toggleHidden}
+            onMouseDown={toggleHidden}
           />
         </>,
       )}
@@ -560,7 +559,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
           visible={true}
           collapsed={props.collapsed}
           selected={props.selected}
-          onClick={collapse}
+          onMouseDown={toggleCollapse}
           style={{
             opacity: 'var(--paneHoverOpacity)',
           }}
diff --git a/editor/src/components/navigator/navigator-item/navigator-item.tsx b/editor/src/components/navigator/navigator-item/navigator-item.tsx
index bc951931c96a..76f254a79f37 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item.tsx
@@ -650,7 +650,7 @@ export const NavigatorItem: React.FunctionComponent<
     return elementWarnings.invalidGroup != null || elementWarnings.invalidGroupChild != null
   }, [elementWarnings])
 
-  const collapse = React.useCallback(
+  const toggleCollapse = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       collapseItem(dispatch, navigatorEntry.elementPath, event)
       event.stopPropagation()
@@ -744,13 +744,16 @@ export const NavigatorItem: React.FunctionComponent<
 
   const currentlyRenaming = EP.pathsEqual(props.renamingTarget, props.navigatorEntry.elementPath)
 
-  const onClick = React.useCallback(
+  const onMouseDown = React.useCallback(
     (e: React.MouseEvent) => {
-      if (isRenderPropNavigatorEntry(navigatorEntry)) {
-        e.stopPropagation()
-      }
+      // Avoid doing any of this for a right click.
+      if (e.button !== 2) {
+        if (isRenderPropNavigatorEntry(navigatorEntry)) {
+          e.stopPropagation()
+        }
 
-      contextMenu.hideAll()
+        contextMenu.hideAll()
+      }
     },
     [navigatorEntry],
   )
@@ -771,7 +774,7 @@ export const NavigatorItem: React.FunctionComponent<
       row={regularNavigatorRow(props.navigatorEntry, props.indentation)}
     >
       <div
-        onClick={onClick}
+        onMouseDown={onMouseDown}
         style={{
           flex: 1,
           borderRadius: 5,
@@ -859,7 +862,7 @@ export const NavigatorItem: React.FunctionComponent<
                     visible={canBeExpanded}
                     collapsed={collapsed}
                     selected={selected && !isInsideComponent}
-                    onClick={collapse}
+                    onMouseDown={toggleCollapse}
                     style={{
                       opacity: 'var(--paneHoverOpacity)',
                     }}
@@ -935,7 +938,7 @@ const RenderPropSlot = React.memo((props: RenderPropSlotProps) => {
       label={label}
       parentOutline={parentOutline}
       cursor={'pointer'}
-      onClick={showComponentPickerContextMenu}
+      onMouseDown={showComponentPickerContextMenu}
       testId={`toggle-render-prop-${NavigatorItemTestId(
         varSafeNavigatorEntryToKey(navigatorEntry),
       )}`}
@@ -964,7 +967,7 @@ const ConditionalBranchSlot = React.memo((props: ConditionalBranchSlotProps) =>
       label={label}
       parentOutline={parentOutline}
       cursor={'pointer'}
-      onClick={showComponentPickerContextMenu}
+      onMouseDown={showComponentPickerContextMenu}
       testId={`toggle-render-prop-${NavigatorItemTestId(
         varSafeNavigatorEntryToKey(navigatorEntry),
       )}`}
@@ -977,17 +980,17 @@ interface PlaceholderSlotProps {
   parentOutline: ParentOutline
   cursor?: 'pointer' | 'inherit'
   testId?: string
-  onClick?: React.MouseEventHandler
+  onMouseDown?: React.MouseEventHandler
 }
 
 const PlaceholderSlot = React.memo((props: PlaceholderSlotProps) => {
-  const { label, parentOutline, cursor, testId, onClick } = props
+  const { label, parentOutline, cursor, testId, onMouseDown } = props
   const colorTheme = useColorTheme()
 
   return (
     <div
       key={`label-${label}-slot`}
-      onClick={onClick}
+      onMouseDown={onMouseDown}
       style={{
         width: 140,
         height: 19,
diff --git a/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx b/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx
index 9ad51dcbb489..7571a2ad0090 100644
--- a/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx
@@ -19,6 +19,7 @@ import {
 import * as EP from '../../../core/shared/element-path'
 import {
   mouseClickAtPoint,
+  mouseDownAtPoint,
   mouseMoveToPoint,
   pressKey,
 } from '../../canvas/event-helpers.test-utils'
@@ -544,7 +545,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/card/prop_label_title',
     )
-    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
 
     const flexRowRow = editor.renderedDOM.queryByTestId(
       labelTestIdForComponentIcon('FlexRow', '/src/utils', 'row'),
@@ -718,7 +719,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/card/prop_label_title',
     )
-    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
 
     const menuButton = await waitFor(() => editor.renderedDOM.getByText('FlexCol'))
     await mouseClickAtPoint(menuButton, { x: 3, y: 3 })
@@ -897,7 +898,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/card/prop_label_title',
     )
-    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
 
     const submenuButton = await waitFor(() => editor.renderedDOM.getByText('FlexRow'))
     await mouseMoveToPoint(submenuButton, { x: 3, y: 3 })
@@ -1197,7 +1198,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:pg_root/card/prop_label_title',
     )
-    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
     await editor.getDispatchFollowUpActionsFinished()
 
     const menuButton = await waitFor(() => editor.renderedDOM.getByText('Flex Hello'))
diff --git a/editor/src/components/navigator/navigator.spec.browser2.tsx b/editor/src/components/navigator/navigator.spec.browser2.tsx
index e8911f87814c..fd27a18b0ebb 100644
--- a/editor/src/components/navigator/navigator.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator.spec.browser2.tsx
@@ -29,6 +29,7 @@ import {
   dragElementWithDNDEvents,
   mouseClickAtPoint,
   mouseDoubleClickAtPoint,
+  mouseDownAtPoint,
   pressKey,
 } from '../canvas/event-helpers.test-utils'
 import { NavigatorItemTestId } from './navigator-item/navigator-item'
@@ -5226,7 +5227,7 @@ describe('Navigator', () => {
         'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:dbc/78c/prop_label_header',
       )
 
-      await mouseClickAtPoint(slotElement, { x: 3, y: 3 })
+      await mouseDownAtPoint(slotElement, { x: 3, y: 3 })
 
       const renderPropOptionElement = await waitFor(() =>
         renderResult.renderedDOM.getByText('(empty)'),
@@ -5272,7 +5273,7 @@ describe('Navigator', () => {
         'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:dbc/78c/prop_label_header',
       )
 
-      await mouseClickAtPoint(slotElement, { x: 3, y: 3 })
+      await mouseDownAtPoint(slotElement, { x: 3, y: 3 })
 
       const renderPropOptionElement = await waitFor(() =>
         renderResult.renderedDOM.getByText('Span with Title'),
@@ -5308,7 +5309,7 @@ describe('Navigator', () => {
         'regular-sb/scene/pg:dbc/78c/d93',
       ])
     })
-    it('can insert an third-party component into render prop', async () => {
+    it('can insert a third-party component into render prop', async () => {
       const renderResult = await renderTestEditorWithModel(
         projectWithThirdPartyRenderProp(''), // <- no render prop
         'await-first-dom-report',
@@ -5318,7 +5319,7 @@ describe('Navigator', () => {
         'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:dbc/78c/prop_label_header',
       )
 
-      await mouseClickAtPoint(slotElement, { x: 3, y: 3 })
+      await mouseDownAtPoint(slotElement, { x: 3, y: 3 })
 
       const renderPropOptionElement = await waitFor(() =>
         renderResult.renderedDOM.getByText('Heading with Title'),

From e8c7341022093935401506ec17609b8da079ceba Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Thu, 19 Sep 2024 16:51:46 +0100
Subject: [PATCH 040/272] Execution Count Limiter (#6353)

- Added `limitExecutionCount`, which can wrap around a function and
prevent repeated execution with an exception being thrown.
- Wrapped `runDomSampler` with `limitExecutionCount`.
---
 editor/src/components/canvas/dom-sampler.tsx  | 23 ++++-
 .../canvas/editor-dispatch-flow.tsx           |  4 +-
 .../components/canvas/ui-jsx.test-utils.tsx   | 11 ++-
 .../src/core/shared/execution-count.spec.tsx  | 90 +++++++++++++++++++
 editor/src/core/shared/execution-count.tsx    | 62 +++++++++++++
 editor/src/templates/editor.tsx               |  8 +-
 6 files changed, 190 insertions(+), 8 deletions(-)
 create mode 100644 editor/src/core/shared/execution-count.spec.tsx
 create mode 100644 editor/src/core/shared/execution-count.tsx

diff --git a/editor/src/components/canvas/dom-sampler.tsx b/editor/src/components/canvas/dom-sampler.tsx
index 7b1dca594dce..0c14be8cd74f 100644
--- a/editor/src/components/canvas/dom-sampler.tsx
+++ b/editor/src/components/canvas/dom-sampler.tsx
@@ -42,9 +42,11 @@ import {
   getAttributesComingFromStyleSheets,
 } from './dom-walker'
 import type { UiJsxCanvasContextData } from './ui-jsx-canvas'
+import type { LimitExecutionCountReset } from '../../core/shared/execution-count'
+import { limitExecutionCount } from '../../core/shared/execution-count'
 import { IS_TEST_ENVIRONMENT } from '../../common/env-vars'
 
-export function runDomSampler(options: {
+export function runDomSamplerUnchecked(options: {
   elementsToFocusOn: ElementsToRerender
   domWalkerAdditionalElementsToFocusOn: Array<ElementPath>
   scale: number
@@ -126,6 +128,25 @@ export function runDomSampler(options: {
   return result
 }
 
+let domSamplerExecutionLimitResets: Array<LimitExecutionCountReset> = []
+
+export function resetDomSamplerExecutionCounts() {
+  for (const reset of domSamplerExecutionLimitResets) {
+    reset()
+  }
+}
+
+const wrappedRunDomSamplerRegular = limitExecutionCount(
+  { maximumExecutionCount: 1, addToResetArray: domSamplerExecutionLimitResets },
+  runDomSamplerUnchecked,
+)
+const wrappedRunDomSamplerGroups = limitExecutionCount(
+  { maximumExecutionCount: 1, addToResetArray: domSamplerExecutionLimitResets },
+  runDomSamplerUnchecked,
+)
+export const runDomSamplerRegular = wrappedRunDomSamplerRegular.wrappedFunction
+export const runDomSamplerGroups = wrappedRunDomSamplerGroups.wrappedFunction
+
 function collectMetadataForPaths({
   canvasRootContainer,
   pathsToCollect,
diff --git a/editor/src/components/canvas/editor-dispatch-flow.tsx b/editor/src/components/canvas/editor-dispatch-flow.tsx
index f74e035eaa3c..eadd05a9ed58 100644
--- a/editor/src/components/canvas/editor-dispatch-flow.tsx
+++ b/editor/src/components/canvas/editor-dispatch-flow.tsx
@@ -3,7 +3,7 @@ import { updateMetadataInEditorState } from '../editor/actions/action-creators'
 import type { DispatchResult } from '../editor/store/dispatch'
 import { editorDispatchActionRunner } from '../editor/store/dispatch'
 import type { EditorStoreFull } from '../editor/store/editor-state'
-import { runDomSampler } from './dom-sampler'
+import { runDomSamplerRegular } from './dom-sampler'
 import { resubscribeObservers } from './dom-walker'
 import { ElementsToRerenderGLOBAL, type UiJsxCanvasContextData } from './ui-jsx-canvas'
 
@@ -32,7 +32,7 @@ export function runDomSamplerAndSaveResults(
   },
   spyCollector: UiJsxCanvasContextData,
 ) {
-  const metadataResult = runDomSampler({
+  const metadataResult = runDomSamplerRegular({
     elementsToFocusOn: ElementsToRerenderGLOBAL.current,
     domWalkerAdditionalElementsToFocusOn:
       storedState.patchedEditor.canvas.domWalkerAdditionalElementsToUpdate,
diff --git a/editor/src/components/canvas/ui-jsx.test-utils.tsx b/editor/src/components/canvas/ui-jsx.test-utils.tsx
index f1866c8ece55..81e962474f39 100644
--- a/editor/src/components/canvas/ui-jsx.test-utils.tsx
+++ b/editor/src/components/canvas/ui-jsx.test-utils.tsx
@@ -156,7 +156,11 @@ import {
 import { uniqBy } from '../../core/shared/array-utils'
 import { InitialOnlineState } from '../editor/online-status'
 import { RadixComponentsPortalId } from '../../uuiui/radix-components'
-import { runDomSampler } from './dom-sampler'
+import {
+  resetDomSamplerExecutionCounts,
+  runDomSamplerGroups,
+  runDomSamplerRegular,
+} from './dom-sampler'
 import {
   ElementInstanceMetadataKeepDeepEquality,
   ElementInstanceMetadataMapKeepDeepEquality,
@@ -354,6 +358,7 @@ export async function renderTestEditorWithModel(
     waitForDispatchEntireUpdate = false,
     innerStrategiesToUse: Array<MetaCanvasStrategy> = strategiesToUse,
   ) => {
+    resetDomSamplerExecutionCounts()
     recordedActions.push(...actions)
     const originalEditorState = workingEditorState
     const result = editorDispatchActionRunner(
@@ -430,7 +435,7 @@ export async function renderTestEditorWithModel(
     {
       resubscribeObservers(domWalkerMutableState)
 
-      const metadataResult = runDomSampler({
+      const metadataResult = runDomSamplerRegular({
         elementsToFocusOn: workingEditorState.patchedEditor.canvas.elementsToRerender,
         domWalkerAdditionalElementsToFocusOn:
           workingEditorState.patchedEditor.canvas.domWalkerAdditionalElementsToUpdate,
@@ -502,7 +507,7 @@ export async function renderTestEditorWithModel(
         {
           resubscribeObservers(domWalkerMutableState)
 
-          const metadataResult = runDomSampler({
+          const metadataResult = runDomSamplerGroups({
             elementsToFocusOn: workingEditorState.patchedEditor.canvas.elementsToRerender,
             domWalkerAdditionalElementsToFocusOn:
               workingEditorState.patchedEditor.canvas.domWalkerAdditionalElementsToUpdate,
diff --git a/editor/src/core/shared/execution-count.spec.tsx b/editor/src/core/shared/execution-count.spec.tsx
new file mode 100644
index 000000000000..463dc10519a0
--- /dev/null
+++ b/editor/src/core/shared/execution-count.spec.tsx
@@ -0,0 +1,90 @@
+import type { LimitExecutionCountReset } from './execution-count'
+import { limitExecutionCount } from './execution-count'
+
+describe('limitExecutionCount', () => {
+  it('the wrapped function should retain its type', () => {
+    function putNumberOnString(str: string, num: number): string {
+      return `${str}-${num}`
+    }
+    const wrappedFunction = limitExecutionCount(
+      { maximumExecutionCount: 1 },
+      putNumberOnString,
+    ).wrappedFunction
+    expect(wrappedFunction('hello', 1)).toBe('hello-1')
+  })
+  it('should let a function be called the maximum number of times', () => {
+    const fn = jest.fn()
+    const { wrappedFunction } = limitExecutionCount({ maximumExecutionCount: 3 }, fn)
+    wrappedFunction()
+    wrappedFunction()
+    wrappedFunction()
+    expect(fn).toHaveBeenCalledTimes(3)
+  })
+  it('should let a function be called the maximum number of times, then reset and called the maximum number of times again', () => {
+    const fn = jest.fn()
+    const { wrappedFunction, resetCount } = limitExecutionCount({ maximumExecutionCount: 3 }, fn)
+    wrappedFunction()
+    wrappedFunction()
+    wrappedFunction()
+    expect(fn).toHaveBeenCalledTimes(3)
+    resetCount()
+    wrappedFunction()
+    wrappedFunction()
+    wrappedFunction()
+    expect(fn).toHaveBeenCalledTimes(6)
+  })
+  it('should let a function be called the maximum number of times, then reset via the reset array and called the maximum number of times again', () => {
+    const fn = jest.fn()
+    const resetArray: Array<LimitExecutionCountReset> = []
+    const { wrappedFunction } = limitExecutionCount(
+      { maximumExecutionCount: 3, addToResetArray: resetArray },
+      fn,
+    )
+    wrappedFunction()
+    wrappedFunction()
+    wrappedFunction()
+    expect(fn).toHaveBeenCalledTimes(3)
+    resetArray.forEach((reset) => reset())
+    wrappedFunction()
+    wrappedFunction()
+    wrappedFunction()
+    expect(fn).toHaveBeenCalledTimes(6)
+  })
+  it('should throw an exception if the function is called more than the maximum number of times', () => {
+    const fn = jest.fn()
+    const { wrappedFunction } = limitExecutionCount({ maximumExecutionCount: 2 }, fn)
+    wrappedFunction()
+    wrappedFunction()
+    expect(() => {
+      wrappedFunction()
+    }).toThrowErrorMatchingInlineSnapshot(`"Function exceeded maximum execution count of 2."`)
+  })
+  it('should throw an exception if the function is called more than the maximum number of times, after a reset', () => {
+    const fn = jest.fn()
+    const { wrappedFunction, resetCount } = limitExecutionCount({ maximumExecutionCount: 2 }, fn)
+    wrappedFunction()
+    wrappedFunction()
+    resetCount()
+    wrappedFunction()
+    wrappedFunction()
+    expect(() => {
+      wrappedFunction()
+    }).toThrowErrorMatchingInlineSnapshot(`"Function exceeded maximum execution count of 2."`)
+  })
+  it('should throw an exception if the function is called more than the maximum number of times, after a reset via the reset array', () => {
+    const fn = jest.fn()
+    const resetArray: Array<LimitExecutionCountReset> = []
+    const { wrappedFunction } = limitExecutionCount(
+      { maximumExecutionCount: 2, addToResetArray: resetArray },
+      fn,
+    )
+    wrappedFunction()
+    wrappedFunction()
+    resetArray.forEach((reset) => reset())
+    wrappedFunction()
+    wrappedFunction()
+    expect(() => {
+      wrappedFunction()
+    }).toThrowErrorMatchingInlineSnapshot(`"Function exceeded maximum execution count of 2."`)
+  })
+})
diff --git a/editor/src/core/shared/execution-count.tsx b/editor/src/core/shared/execution-count.tsx
new file mode 100644
index 000000000000..c7b2254df326
--- /dev/null
+++ b/editor/src/core/shared/execution-count.tsx
@@ -0,0 +1,62 @@
+export type LimitExecutionCountReset = () => void
+
+export interface LimitExecutionCountOptions {
+  maximumExecutionCount: number
+  addToResetArray: Array<LimitExecutionCountReset> | null
+}
+
+export interface LimitExecutionCountState {
+  executionCount: number
+}
+
+export interface LimitExecutionCountResult<Args extends ReadonlyArray<unknown>, Result> {
+  wrappedFunction: (...args: Args) => Result
+  resetCount: LimitExecutionCountReset
+}
+
+const defaultOptions: LimitExecutionCountOptions = {
+  maximumExecutionCount: 1,
+  addToResetArray: null,
+}
+
+export function limitExecutionCount<Args extends ReadonlyArray<unknown>, Result>(
+  options: Partial<LimitExecutionCountOptions>,
+  fn: (...args: Args) => Result,
+): LimitExecutionCountResult<Args, Result> {
+  // Setup the default and specified options and state.
+  const fullySpecifiedOptions: LimitExecutionCountOptions = {
+    ...defaultOptions,
+    ...options,
+  }
+  let state: LimitExecutionCountState = {
+    executionCount: 0,
+  }
+
+  // Wrap the function supplied by the user.
+  const wrappedFunction = (...args: Args): Result => {
+    if (state.executionCount >= fullySpecifiedOptions.maximumExecutionCount) {
+      throw new Error(
+        `Function exceeded maximum execution count of ${fullySpecifiedOptions.maximumExecutionCount}.`,
+      )
+    }
+
+    state.executionCount += 1
+    return fn(...args)
+  }
+
+  // Create the function for resetting the count.
+  const resetCount = (): void => {
+    state.executionCount = 0
+  }
+
+  // Add into the reset array.
+  if (options.addToResetArray != null) {
+    options.addToResetArray.push(resetCount)
+  }
+
+  // Build the result.
+  return {
+    wrappedFunction: wrappedFunction,
+    resetCount: resetCount,
+  }
+}
diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index 16a76450b160..f6bcba73af2a 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -136,7 +136,10 @@ import {
   traverseReadOnlyArray,
 } from '../core/shared/optics/optic-creators'
 import { keysEqualityExhaustive, shallowEqual } from '../core/shared/equality-utils'
-import { runDomSampler } from '../components/canvas/dom-sampler'
+import {
+  resetDomSamplerExecutionCounts,
+  runDomSamplerGroups,
+} from '../components/canvas/dom-sampler'
 import { omitWithPredicate } from '../core/shared/object-utils'
 
 if (PROBABLY_ELECTRON) {
@@ -431,6 +434,7 @@ export class Editor {
   ): {
     entireUpdateFinished: Promise<any>
   } => {
+    resetDomSamplerExecutionCounts()
     const Measure = createPerformanceMeasure()
     Measure.logActions(dispatchedActions)
 
@@ -543,7 +547,7 @@ export class Editor {
 
           // re-run the dom-sampler
           Measure.taskTime(`Dom walker re-run because of groups ${updateId}`, () => {
-            const metadataResult = runDomSampler({
+            const metadataResult = runDomSamplerGroups({
               elementsToFocusOn: ElementsToRerenderGLOBAL.current,
               domWalkerAdditionalElementsToFocusOn:
                 this.storedState.patchedEditor.canvas.domWalkerAdditionalElementsToUpdate,

From 0a6db9d5aceaa87741c4b6410cc54168eea67446 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 20 Sep 2024 12:25:30 +0200
Subject: [PATCH 041/272] Grids: basic `minmax` support (#6393)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Problem:**

We currently don't support `minmax` in grid templates.

**Fix:**

This PR adds initial support for `minmax` throughout the grid flows.

**Commit Details:**

Parse `minmax` functions and keep them in the grid template data, so
they correctly are kept while operating on the grid template itself.

**⚠️ Note:** there's ongoing work to support editing grid template
expressions as strings, so I did not include proper editing in this one
(there was a simple version [`3919cf7`
(#6393)](https://github.com/concrete-utopia/utopia/pull/6393/commits/3919cf7bc7d14ecad2b3e0195e24496fca0be188)
but I decided to remove it to not create stuttering code), see the two
important `TODO` comments left in the code.

Fixes #6392
---
 .../store/store-deep-equality-instances.ts    |  41 ++++
 .../components/inspector/common/css-utils.ts  | 203 +++++++++++-------
 .../src/components/inspector/flex-section.tsx |  65 +++---
 3 files changed, 208 insertions(+), 101 deletions(-)

diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 16385bd42779..cb10885c3b88 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -567,11 +567,13 @@ import type {
   GridDimension,
   GridAutoFlow,
   GridCSSRepeat,
+  GridCSSMinmax,
 } from '../../inspector/common/css-utils'
 import {
   cssNumber,
   fontSettings,
   gridCSSKeyword,
+  gridCSSMinmax,
   gridCSSNumber,
   gridCSSRepeat,
   isCSSKeyword,
@@ -2009,6 +2011,11 @@ export const GridDimensionKeepDeepEquality: KeepDeepEqualityCall<GridDimension>
             return GridCSSRepeatKeepDeepEquality(oldValue, newValue)
           }
           break
+        case 'MINMAX':
+          if (newValue.type === oldValue.type) {
+            return GridCSSMinmaxKeepDeepEquality(oldValue, newValue)
+          }
+          break
         default:
           assertNever(oldValue)
       }
@@ -2026,6 +2033,40 @@ export const GridCSSRepeatKeepDeepEquality: KeepDeepEqualityCall<GridCSSRepeat>
     gridCSSRepeat,
   )
 
+const GridCSSNumberOrKeywordKeepDeepEquality: KeepDeepEqualityCall<GridCSSNumber | GridCSSKeyword> =
+  combine1EqualityCall(
+    (dim) => dim,
+    (oldValue, newValue) => {
+      switch (oldValue.type) {
+        case 'KEYWORD':
+          if (newValue.type === oldValue.type) {
+            return GridCSSKeywordKeepDeepEquality(oldValue, newValue)
+          }
+          break
+        case 'NUMBER':
+          if (newValue.type === oldValue.type) {
+            return GridCSSNumberKeepDeepEquality(oldValue, newValue)
+          }
+          break
+        default:
+          assertNever(oldValue)
+      }
+      return keepDeepEqualityResult(newValue, false)
+    },
+    (dim) => dim,
+  )
+
+export const GridCSSMinmaxKeepDeepEquality: KeepDeepEqualityCall<GridCSSMinmax> =
+  combine3EqualityCalls(
+    (p) => p.min,
+    GridCSSNumberOrKeywordKeepDeepEquality,
+    (p) => p.max,
+    GridCSSNumberOrKeywordKeepDeepEquality,
+    (p) => p.areaName,
+    NullableStringKeepDeepEquality,
+    gridCSSMinmax,
+  )
+
 export const GridAutoOrTemplateDimensionsKeepDeepEquality: KeepDeepEqualityCall<GridAutoOrTemplateDimensions> =
   combine1EqualityCall(
     (value) => value.dimensions,
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index 1140f4dd6c4d..9e936cf0e386 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -602,6 +602,12 @@ export type GridCSSRepeat = {
   areaName: null
 }
 
+export type GridCSSMinmax = BaseGridDimension & {
+  type: 'MINMAX'
+  min: GridCSSNumber | GridCSSKeyword
+  max: GridCSSNumber | GridCSSKeyword
+}
+
 export function isGridCSSKeyword(dim: GridDimension): dim is GridCSSKeyword {
   return dim.type === 'KEYWORD'
 }
@@ -634,6 +640,23 @@ export function isGridCSSRepeat(dim: GridDimension): dim is GridCSSRepeat {
   return dim.type === 'REPEAT'
 }
 
+export function isGridCSSMinmax(dim: GridDimension): dim is GridCSSMinmax {
+  return dim.type === 'MINMAX'
+}
+
+export function gridCSSMinmax(
+  min: GridCSSNumber | GridCSSKeyword,
+  max: GridCSSNumber | GridCSSKeyword,
+  areaName: string | null,
+): GridCSSMinmax {
+  return {
+    type: 'MINMAX',
+    min: min,
+    max: max,
+    areaName: areaName,
+  }
+}
+
 export function gridCSSNumber(value: CSSNumber, areaName: string | null): GridCSSNumber {
   return {
     type: 'NUMBER',
@@ -642,7 +665,7 @@ export function gridCSSNumber(value: CSSNumber, areaName: string | null): GridCS
   }
 }
 
-export type GridDiscreteDimension = GridCSSNumber | GridCSSKeyword
+export type GridDiscreteDimension = GridCSSNumber | GridCSSKeyword | GridCSSMinmax
 export type GridDimension = GridDiscreteDimension | GridCSSRepeat
 
 export function printGridCSSNumber(dim: GridDimension): string {
@@ -655,7 +678,9 @@ export function printGridCSSNumber(dim: GridDimension): string {
       if (dim.value.length === 0) {
         return ''
       }
-      return printGridCSSNumber(dim.value[0])
+      return dim.value.map(printGridCSSNumber).join(' ')
+    case 'MINMAX':
+      return `minmax(${printGridCSSNumber(dim.min)}, ${printGridCSSNumber(dim.max)})`
     default:
       assertNever(dim)
   }
@@ -821,27 +846,33 @@ export function printCSSNumber(
   }
 }
 
-export function printGridDimension(dimension: GridDimension): string {
+export function printGridDimension(dimension: GridDimension, hideAreaName?: boolean): string {
+  const areaName =
+    dimension.areaName != null && hideAreaName !== true ? `[${dimension.areaName}] ` : ''
   switch (dimension.type) {
     case 'KEYWORD': {
-      const areaName = dimension.areaName != null ? `[${dimension.areaName}] ` : ''
       return `${areaName}${dimension.value.value}`
     }
     case 'NUMBER': {
       const printed = printCSSNumber(dimension.value, null)
-      const areaName = dimension.areaName != null ? `[${dimension.areaName}] ` : ''
       return `${areaName}${printed}`
     }
     case 'REPEAT': {
       return `repeat(${dimension.times}, ${printArrayGridDimensions(dimension.value)})`
     }
+    case 'MINMAX': {
+      return (
+        areaName +
+        `minmax(${printGridDimension(dimension.min)}, ${printGridDimension(dimension.max)})`
+      )
+    }
     default:
       assertNever(dimension)
   }
 }
 
 export function printArrayGridDimensions(array: Array<GridDimension>): string {
-  return array.map(printGridDimension).join(' ')
+  return array.map((v) => printGridDimension(v)).join(' ')
 }
 
 export function printGridAutoOrTemplateBase(input: GridAutoOrTemplateBase): string {
@@ -931,7 +962,7 @@ const validGridDimensionKeywords = [
   'subgrid',
   'auto-fit',
   'auto-fill',
-  // NOTE: function keywords are omitted as they are treated separately
+  'minmax', // TODO this should be removed once we have proper editing of grid template expressions!
 ] as const
 
 export type ValidGridDimensionKeyword = (typeof validGridDimensionKeywords)[number]
@@ -1086,83 +1117,109 @@ export function parseGridAutoOrTemplateBase(
   if (typeof input === 'string') {
     const parsed = csstree.parse(input, { context: 'value' })
     if (parsed.type === 'Value') {
-      let nextAreaName: string | null = null
-      function getAreaName() {
-        const currentAreaName = nextAreaName != null ? `${nextAreaName}` : null
-        nextAreaName = null
-        return currentAreaName
+      const dimensions = parseGridChildren(parsed.children)
+      if (isRight(dimensions)) {
+        return right({ type: 'DIMENSIONS', dimensions: dimensions.value })
       }
 
-      function parseChildren(
-        children: csstree.List<csstree.CssNode>,
-      ): Either<string, GridDimension[]> {
-        let dimensions: GridDimension[] = []
-        for (const child of children) {
-          switch (child.type) {
-            case 'Dimension': {
-              const parsedDimension = parseCSSNumber(`${child.value}${child.unit}`, 'AnyValid')
-              if (isRight(parsedDimension)) {
-                dimensions.push(gridCSSNumber(parsedDimension.value, getAreaName()))
-              } else {
-                return left('Invalid grid CSS dimension.')
-              }
-              break
-            }
-            case 'Identifier': {
-              if (isValidGridDimensionKeyword(child.name)) {
-                dimensions.push(gridCSSKeyword(cssKeyword(child.name), getAreaName()))
-              } else {
-                return left('Invalid grid CSS keyword.')
-              }
-              break
+      console.warn(`Invalid grid template, falling back: ${dimensions.value}.`)
+      return right({ type: 'FALLBACK', value: input })
+    }
+  }
+  return left('Invalid grid template input.')
+}
+
+export function parseGridChildren(
+  children: csstree.List<csstree.CssNode>,
+): Either<string, GridDimension[]> {
+  let nextAreaName: string | null = null
+
+  function getAreaName() {
+    const currentAreaName = nextAreaName != null ? `${nextAreaName}` : null
+    nextAreaName = null
+    return currentAreaName
+  }
+
+  let dimensions: GridDimension[] = []
+  for (const child of children) {
+    switch (child.type) {
+      case 'Dimension': {
+        const parsedDimension = parseCSSNumber(`${child.value}${child.unit}`, 'AnyValid')
+        if (isRight(parsedDimension)) {
+          dimensions.push(gridCSSNumber(parsedDimension.value, getAreaName()))
+        } else {
+          return left('Invalid grid CSS dimension.')
+        }
+        break
+      }
+      case 'Identifier': {
+        if (isValidGridDimensionKeyword(child.name)) {
+          dimensions.push(gridCSSKeyword(cssKeyword(child.name), getAreaName()))
+        } else {
+          return left('Invalid grid CSS keyword.')
+        }
+        break
+      }
+      case 'Function': {
+        const functionName = child.name.toLowerCase()
+        switch (functionName) {
+          case 'repeat': {
+            const repeatChildren = child.children.toArray()
+            const times = parseInt(repeatChildren.find((c) => c.type === 'Number')?.value ?? '0')
+            const values = new csstree.List<csstree.CssNode>().fromArray(
+              repeatChildren.filter(
+                (c) =>
+                  c.type === 'Dimension' ||
+                  c.type === 'Identifier' ||
+                  c.type === 'Brackets' ||
+                  c.type === 'Function',
+              ),
+            )
+            const parsedDimensions = parseGridChildren(values)
+            if (isRight(parsedDimensions)) {
+              dimensions.push(gridCSSRepeat(times, parsedDimensions.value))
+            } else {
+              return left('Invalid grid CSS repeat values.')
             }
-            case 'Function': {
-              if (child.name.toLowerCase() === 'repeat') {
-                const repeatChildren = child.children.toArray()
-                const times = parseInt(
-                  repeatChildren.find((c) => c.type === 'Number')?.value ?? '0',
-                )
-                const values = new csstree.List<csstree.CssNode>().fromArray(
-                  repeatChildren.filter(
-                    (c) =>
-                      c.type === 'Dimension' ||
-                      c.type === 'Identifier' ||
-                      // We want to support area names too, because they are valid CSS
-                      c.type === 'Brackets',
-                  ),
-                )
-                const parsedDimensions = parseChildren(values)
-                if (isRight(parsedDimensions)) {
-                  dimensions.push(gridCSSRepeat(times, parsedDimensions.value))
-                } else {
-                  return left('Invalid grid CSS repeat values.')
-                }
+            break
+          }
+          case 'minmax': {
+            const values = new csstree.List<csstree.CssNode>().fromArray(
+              child.children
+                .toArray()
+                .filter((c) => c.type === 'Dimension' || c.type === 'Identifier'),
+            )
+            const parsedDimensions = parseGridChildren(values)
+            if (isRight(parsedDimensions)) {
+              const min = parsedDimensions.value[0]
+              const max = parsedDimensions.value[1]
+              if (
+                min == null ||
+                !(min.type === 'NUMBER' || min.type === 'KEYWORD') ||
+                max == null ||
+                !(max.type === 'NUMBER' || max.type === 'KEYWORD')
+              ) {
+                return left('Invalid minmax arguments.')
               }
-              break
-            }
-            case 'Brackets': {
-              // The next child will get this area name
-              nextAreaName =
-                child.children.toArray().find((c) => c.type === 'Identifier')?.name ?? null
-              break
+              dimensions.push(gridCSSMinmax(min, max, getAreaName()))
             }
-            default:
-              return left(`invalid grid child type ${child.type}`)
+            break
           }
+          default:
+            console.warn(`unknown css grid function ${functionName}`)
         }
-        return right(dimensions)
+        break
       }
-
-      const dimensions = parseChildren(parsed.children)
-      if (isRight(dimensions)) {
-        return right({ type: 'DIMENSIONS', dimensions: dimensions.value })
+      case 'Brackets': {
+        // The next child will get this area name
+        nextAreaName = child.children.toArray().find((c) => c.type === 'Identifier')?.name ?? null
+        break
       }
-
-      console.warn(`Invalid grid template, falling back: ${dimensions.value}.`)
-      return right({ type: 'FALLBACK', value: input })
+      default:
+        return left(`invalid grid child type ${child.type}`)
     }
   }
-  return left('Invalid grid template input.')
+  return right(dimensions)
 }
 
 export function parseDisplay(input: unknown): Either<string, string> {
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 6172d7d3d9cb..e68e01ba7046 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -287,13 +287,35 @@ const TemplateDimensionControl = React.memo(
       return expandGridDimensions(template.dimensions)
     }, [template])
 
-    const onUpdate = React.useCallback(
+    const onUpdateDimension = React.useCallback(
+      (index: number) => (newValue: GridDimension) => {
+        if (template?.type !== 'DIMENSIONS') {
+          return
+        }
+        const newDimensions = replaceGridTemplateDimensionAtIndex(
+          template.dimensions,
+          expandedTemplate,
+          index,
+          newValue,
+        )
+
+        dispatch([
+          applyCommandsAction([
+            setProperty(
+              'always',
+              grid.elementPath,
+              PP.create('style', axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows'),
+              printArrayGridDimensions(newDimensions),
+            ),
+          ]),
+        ])
+      },
+      [template, expandedTemplate, dispatch, axis, grid],
+    )
+
+    const onUpdateNumberOrKeyword = React.useCallback(
       (index: number) =>
         (value: UnknownOrEmptyInput<CSSNumber | CSSKeyword<ValidGridDimensionKeyword>>) => {
-          if (template?.type !== 'DIMENSIONS') {
-            return
-          }
-
           function getNewValue() {
             const gridValueAtIndex = values[index]
             if (isCSSNumber(value)) {
@@ -317,25 +339,9 @@ const TemplateDimensionControl = React.memo(
             return
           }
 
-          const newDimensions = replaceGridTemplateDimensionAtIndex(
-            template.dimensions,
-            expandedTemplate,
-            index,
-            newValue,
-          )
-
-          dispatch([
-            applyCommandsAction([
-              setProperty(
-                'always',
-                grid.elementPath,
-                PP.create('style', axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows'),
-                printArrayGridDimensions(newDimensions),
-              ),
-            ]),
-          ])
+          onUpdateDimension(index)(newValue)
         },
-      [grid, values, dispatch, axis, template, expandedTemplate],
+      [values, onUpdateDimension],
     )
 
     const onRemove = React.useCallback(
@@ -545,7 +551,8 @@ const TemplateDimensionControl = React.memo(
             value={value}
             index={index}
             axis={axis}
-            onUpdate={onUpdate}
+            onUpdateNumberOrKeyword={onUpdateNumberOrKeyword}
+            onUpdateDimension={onUpdateDimension}
             items={dropdownMenuItems(index)}
             opener={openDropdown}
           />
@@ -561,16 +568,18 @@ function AxisDimensionControl({
   index,
   items,
   axis,
-  onUpdate,
+  onUpdateNumberOrKeyword,
+  onUpdateDimension,
   opener,
 }: {
   value: GridDiscreteDimension
   index: number
   items: DropdownMenuItem[]
   axis: 'column' | 'row'
-  onUpdate: (
+  onUpdateNumberOrKeyword: (
     index: number,
   ) => (value: UnknownOrEmptyInput<CSSNumber | CSSKeyword<ValidGridDimensionKeyword>>) => void
+  onUpdateDimension: (index: number) => (value: GridDimension) => void
   opener: (isOpen: boolean) => React.ReactElement
 }) {
   const testId = `grid-dimension-${axis}-${index}`
@@ -607,10 +616,10 @@ function AxisDimensionControl({
         </Subdued>
         <NumberOrKeywordControl
           testId={testId}
-          value={value.value}
+          value={value.type === 'MINMAX' ? cssKeyword('minmax') : value.value} // TODO: this is just a placeholder for real editing of expressions
           keywords={gridDimensionDropdownKeywords}
           keywordTypeCheck={isValidGridDimensionKeyword}
-          onSubmitValue={onUpdate(index)}
+          onSubmitValue={onUpdateNumberOrKeyword(index)}
           controlStatus={
             isGridCSSKeyword(value) && value.value.value === 'auto' ? 'off' : undefined
           }

From 4f2faf2326c76ecb6a05137c372b938831541639 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Mon, 23 Sep 2024 10:49:09 +0200
Subject: [PATCH 042/272] NumberInput: holding arrow up-down makes the updates
 transient (#6378)

**Problem:**
The `NumberInput` component which is used all over the inspector did not
properly handle when the arrow up/down keys were pressed and held.

**Fix:**
It _looks like_ this did not work in the last 4 years! Amazingly, all of
the proper handling _was_ wired in, but then instead of passing in a
true flag, the code passed in a false flag, which made every event
non-transient. Weird!

**Commit Details:**
- Just passing in `true` as `incrementBy`'s transient parameter
---
 editor/src/uuiui/inputs/number-input.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor/src/uuiui/inputs/number-input.tsx b/editor/src/uuiui/inputs/number-input.tsx
index d0fcfc5ff9f3..8f20d453a91d 100644
--- a/editor/src/uuiui/inputs/number-input.tsx
+++ b/editor/src/uuiui/inputs/number-input.tsx
@@ -467,10 +467,10 @@ export const NumberInput = React.memo<NumberInputProps>(
     const onKeyDown = React.useCallback(
       (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'ArrowUp') {
-          updateValue(incrementBy(stepSize, e.shiftKey, false))
+          updateValue(incrementBy(stepSize, e.shiftKey, true))
         } else if (e.key === 'ArrowDown') {
           e.preventDefault()
-          updateValue(incrementBy(-stepSize, e.shiftKey, false))
+          updateValue(incrementBy(-stepSize, e.shiftKey, true))
         } else if (e.key === 'Enter' || e.key === 'Escape') {
           e.nativeEvent.stopImmediatePropagation()
           e.preventDefault()

From 1d38e632f115c53cbf0b0b1f16c68685af94fecf Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Mon, 23 Sep 2024 15:43:42 +0200
Subject: [PATCH 043/272] Fix Scroll Jank (#6394)

**Problem:**
When scrolling the canvas in the hydrogen demo project, the canvas
intermittently freezes up for 100ms.

Turns out the reason is that the hydrogen Link component is mounting
elements to the screen when they become visible. And we use a
MutationObserver to listen to elements being mounted / unmounted to
trigger a dom-sampler re-run.
We disable the MutationObserver for continuous interactions with set
elementsToRerender, but the canvas scrolling interaction did not set
elementsToRerender.

`elementsToRerender` has been one of those editor state variables that
is always default value in the unpatchedEditorState, and we only set it
to an actual value in the patchedEditorState using patch commands from
the strategy codebase.
We talked about having some sort of safeguard in place that makes sure
that in the unpatchedEditorState these values are kept at their default.

**Fix:**
I think this PR solves both problems:
- a new `resetUnpatchedEditorTransientFields` function resets the
unpatchedEditorState's `elementsToRerender` field to
`rerender-all-elements`
- `SCROLL_CANVAS` sets unpatchedEditorState's `elementsToRerender` to
`[]` meaning the dom-walker will not interfere with the scroll
performance.
- because unpatchedEditorState elementsToRerender is reset at the end of
every dispatch, the change in SCROLL_CANVAS amounts to a transient
setting, very similar to how the editor state patches emitted by the
strategies work.

so we make sure that:
1. by the end of the dispatch, the UnpatchedEditorState's "transient"
fields are reset
2. non-strategy interactions can set these fields when they need to

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 editor/src/components/editor/store/dispatch.tsx | 13 ++++++++++++-
 editor/src/templates/editor-canvas.tsx          |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/editor/store/dispatch.tsx b/editor/src/components/editor/store/dispatch.tsx
index 5c7295c5ed17..b4c4b2153a6d 100644
--- a/editor/src/components/editor/store/dispatch.tsx
+++ b/editor/src/components/editor/store/dispatch.tsx
@@ -532,7 +532,7 @@ export function editorDispatchClosingOut(
   // START_CHECKPOINT_TIMER likely did.
   const transientOrNoChange = (allTransient || result.nothingChanged) && !anyFinishCheckpointTimer
 
-  const unpatchedEditorState = result.unpatchedEditor
+  const unpatchedEditorState = resetUnpatchedEditorTransientFields(result.unpatchedEditor)
   const patchedEditorState = result.patchedEditor
   const newStrategyState = result.strategyState
   const patchedDerivedState = result.patchedDerived
@@ -1072,3 +1072,14 @@ function filterEditorForFiles(editor: EditorState) {
     },
   }
 }
+
+function resetUnpatchedEditorTransientFields(editor: EditorState): EditorState {
+  // reset all parts of the state which is meant to be "empty" or "default", and mostly expect the non-default values to come from patchedEditor
+  return {
+    ...editor,
+    canvas: {
+      ...editor.canvas,
+      elementsToRerender: 'rerender-all-elements',
+    },
+  }
+}
diff --git a/editor/src/templates/editor-canvas.tsx b/editor/src/templates/editor-canvas.tsx
index 888acce8bc6f..6b3738bf00ef 100644
--- a/editor/src/templates/editor-canvas.tsx
+++ b/editor/src/templates/editor-canvas.tsx
@@ -362,7 +362,6 @@ export function runLocalCanvasAction(
   builtinDependencies: BuiltInDependencies,
   action: CanvasAction,
 ): EditorState {
-  // TODO BB horrorshow performance
   switch (action.action) {
     case 'SCROLL_CANVAS': {
       const newCanvasOffset = Utils.offsetPoint(
@@ -375,6 +374,7 @@ export function runLocalCanvasAction(
           ...model.canvas,
           realCanvasOffset: newCanvasOffset,
           roundedCanvasOffset: roundPointToNearestWhole(newCanvasOffset),
+          elementsToRerender: [], // we set this to [] to maximize the scroll performance, but it needs to be reset after the scroll! Ideally this would be in the patchedEditorState, but scrolling the canvas is not a continuous interaciton
         },
       }
     }

From 844f47e91e003acbf8f391f33fe108d59842bbc0 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Mon, 23 Sep 2024 15:07:58 +0100
Subject: [PATCH 044/272] performance(editor) Number Input Repeated Keypresses
 (#6395)

- Changed `NumberInput` `repeatThreshold` to 600 to match the canvas.
- `NumberInput.onKeyDown` now makes use of a timeout to fire the
non-transient
  update after a brief pause.
- Removed `NumberInput.onKeyUp`.
---
 ...spector-end-to-end-tests.spec.browser2.tsx |  21 +++
 .../inputs/number-input.spec.browser2.tsx     |  10 +-
 editor/src/uuiui/inputs/number-input.spec.ts  |  21 ---
 editor/src/uuiui/inputs/number-input.spec.tsx | 160 ++++++++++++++++++
 editor/src/uuiui/inputs/number-input.tsx      |  51 +++---
 5 files changed, 218 insertions(+), 45 deletions(-)
 delete mode 100644 editor/src/uuiui/inputs/number-input.spec.ts
 create mode 100644 editor/src/uuiui/inputs/number-input.spec.tsx

diff --git a/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx b/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
index 2fabb7121bba..bfbeb21cdc95 100644
--- a/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
+++ b/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
@@ -70,6 +70,8 @@ import { invalidGroupStateToString } from '../../canvas/canvas-strategies/strate
 import selectEvent from 'react-select-event'
 import { MixedPlaceholder } from '../../../uuiui/inputs/base-input'
 import { cmdModifier } from '../../../utils/modifiers'
+import type { SinonFakeTimers } from 'sinon'
+import sinon from 'sinon'
 
 async function getControl(
   controlTestId: string,
@@ -163,7 +165,25 @@ async function pressKeyTimes(
   })
 }
 
+function configureSinonSetupTeardown(): { clock: { current: SinonFakeTimers } } {
+  let clock: { current: SinonFakeTimers } = { current: null as any } // it will be non-null thanks to beforeEach
+  beforeEach(function () {
+    // TODO there is something wrong with sinon fake timers here that remotely break other tests that come after these. If your new browser tests are broken, this may be the reason.
+    clock.current = sinon.useFakeTimers({
+      // the timers will tick so the editor is not totally broken, but we can fast-forward time at will
+      // WARNING: the Sinon fake timers will advance in 20ms increments
+      shouldAdvanceTime: true,
+    })
+  })
+  afterEach(function () {
+    clock.current?.restore()
+  })
+  return { clock: clock }
+}
+
 describe('inspector tests with real metadata', () => {
+  const { clock } = configureSinonSetupTeardown()
+
   it('padding controls', async () => {
     const renderResult = await renderTestEditorWithCode(
       makeTestProjectCodeWithSnippet(`
@@ -1731,6 +1751,7 @@ describe('inspector tests with real metadata', () => {
     expect(widthControl.value).toBe('0')
 
     await pressKeyTimes(widthControl, renderResult, ['ArrowUp'])
+    clock.current.tick(700)
     expect(widthControl.value).toBe('1')
 
     await setControlValue('frame-width-number-input', '100', renderResult.renderedDOM)
diff --git a/editor/src/uuiui/inputs/number-input.spec.browser2.tsx b/editor/src/uuiui/inputs/number-input.spec.browser2.tsx
index d1e82f0c8c7b..c7c7f565e1f6 100644
--- a/editor/src/uuiui/inputs/number-input.spec.browser2.tsx
+++ b/editor/src/uuiui/inputs/number-input.spec.browser2.tsx
@@ -1,12 +1,20 @@
 /* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "checkPlaceholder"] }] */
 import type { RenderResult } from '@testing-library/react'
-import { render } from '@testing-library/react'
+import { act, fireEvent, render } from '@testing-library/react'
 import React from 'react'
 import {
   getStoreHook,
   TestInspectorContextProvider,
 } from '../../components/inspector/common/inspector.test-utils'
 import { NumberInput } from './number-input'
+import type { CSSNumber, UnknownOrEmptyInput } from '../../components/inspector/common/css-utils'
+import {
+  cssNumber,
+  isEmptyInputValue,
+  isUnknownInputValue,
+} from '../../components/inspector/common/css-utils'
+import keycode from 'keycode'
+import { wait } from '../../utils/utils.test-utils'
 
 describe('NumberInput', () => {
   function checkPlaceholder(renderResult: RenderResult, expectedPlaceholder: string | null): void {
diff --git a/editor/src/uuiui/inputs/number-input.spec.ts b/editor/src/uuiui/inputs/number-input.spec.ts
deleted file mode 100644
index dcebfff6f12b..000000000000
--- a/editor/src/uuiui/inputs/number-input.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { calculateDragDirectionDelta } from './number-input'
-
-describe('number input', () => {
-  it('calculateDragDirectionDelta should be able to invert its results', () => {
-    const testCases = [
-      [5, 2],
-      [2, 5],
-      [-5.5, 2],
-      [-2, 5],
-      [0, 4],
-      [3.2, 1],
-      [-6, 3],
-      [-3, 6],
-    ]
-
-    testCases.forEach(([delta, scaling]) => {
-      const { result, inverse } = calculateDragDirectionDelta(delta, scaling)
-      expect(inverse(result)).toEqual(delta)
-    })
-  })
-})
diff --git a/editor/src/uuiui/inputs/number-input.spec.tsx b/editor/src/uuiui/inputs/number-input.spec.tsx
new file mode 100644
index 000000000000..7ba590f42fef
--- /dev/null
+++ b/editor/src/uuiui/inputs/number-input.spec.tsx
@@ -0,0 +1,160 @@
+import React from 'react'
+import type { CSSNumber, UnknownOrEmptyInput } from '../../components/inspector/common/css-utils'
+import {
+  cssNumber,
+  isEmptyInputValue,
+  isUnknownInputValue,
+} from '../../components/inspector/common/css-utils'
+import { act, fireEvent, render } from '@testing-library/react'
+import {
+  getStoreHook,
+  TestInspectorContextProvider,
+} from '../../components/inspector/common/inspector.test-utils'
+import { calculateDragDirectionDelta, NumberInput } from './number-input'
+import keycode from 'keycode'
+
+jest.useFakeTimers()
+
+describe('NumberInput', () => {
+  it('calculateDragDirectionDelta should be able to invert its results', () => {
+    const testCases = [
+      [5, 2],
+      [2, 5],
+      [-5.5, 2],
+      [-2, 5],
+      [0, 4],
+      [3.2, 1],
+      [-6, 3],
+      [-3, 6],
+    ]
+
+    testCases.forEach(([delta, scaling]) => {
+      const { result, inverse } = calculateDragDirectionDelta(delta, scaling)
+      expect(inverse(result)).toEqual(delta)
+    })
+  })
+  it('triggers multiple transient updates and a single non-transient one when holding a key down and eventually releasing it', async () => {
+    const storeHookForTest = getStoreHook()
+    let value = cssNumber(100)
+    let transientUpdates: Array<UnknownOrEmptyInput<CSSNumber>> = []
+
+    function updateValue(number: UnknownOrEmptyInput<CSSNumber>): void {
+      if (isUnknownInputValue(number) || isEmptyInputValue(number)) {
+        throw new Error(`Unexpected value: ${number}`)
+      } else {
+        value = number
+      }
+      reRender()
+    }
+
+    function onTransientSubmitValue(number: UnknownOrEmptyInput<CSSNumber>): void {
+      transientUpdates.push(number)
+      updateValue(number)
+    }
+    let nonTransientUpdates: Array<UnknownOrEmptyInput<CSSNumber>> = []
+    function onSubmitValue(number: UnknownOrEmptyInput<CSSNumber>): void {
+      nonTransientUpdates.push(number)
+      updateValue(number)
+    }
+
+    function reRender() {
+      return render(
+        <TestInspectorContextProvider
+          selectedViews={storeHookForTest.getState().editor.selectedViews}
+          editorStoreData={storeHookForTest}
+        >
+          <NumberInput
+            testId='keydowntest'
+            controlStatus='simple'
+            value={value}
+            numberType={'AnyValid'}
+            defaultUnitToHide={null}
+            // eslint-disable-next-line react/jsx-no-bind
+            onTransientSubmitValue={onTransientSubmitValue}
+            // eslint-disable-next-line react/jsx-no-bind
+            onSubmitValue={onSubmitValue}
+          />
+        </TestInspectorContextProvider>,
+      )
+    }
+
+    const result = reRender()
+    const inputElement = result.getByTestId('keydowntest')
+    for (let count = 0; count < 10; count++) {
+      act(() => {
+        fireEvent(
+          inputElement,
+          new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            key: 'ArrowUp',
+            keyCode: keycode('ArrowUp'),
+          }),
+        )
+        fireEvent(
+          inputElement,
+          new KeyboardEvent('keyup', {
+            bubbles: true,
+            cancelable: true,
+            key: 'ArrowUp',
+            keyCode: keycode('ArrowUp'),
+          }),
+        )
+      })
+    }
+    // Need this for the delay that is in the `NumberInput`.
+    jest.runAllTimers()
+    expect(transientUpdates).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "unit": null,
+          "value": 101,
+        },
+        Object {
+          "unit": null,
+          "value": 102,
+        },
+        Object {
+          "unit": null,
+          "value": 103,
+        },
+        Object {
+          "unit": null,
+          "value": 104,
+        },
+        Object {
+          "unit": null,
+          "value": 105,
+        },
+        Object {
+          "unit": null,
+          "value": 106,
+        },
+        Object {
+          "unit": null,
+          "value": 107,
+        },
+        Object {
+          "unit": null,
+          "value": 108,
+        },
+        Object {
+          "unit": null,
+          "value": 109,
+        },
+        Object {
+          "unit": null,
+          "value": 110,
+        },
+      ]
+    `)
+    expect(nonTransientUpdates).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "unit": null,
+          "value": 110,
+        },
+      ]
+    `)
+  })
+})
diff --git a/editor/src/uuiui/inputs/number-input.tsx b/editor/src/uuiui/inputs/number-input.tsx
index 8f20d453a91d..41db6078d683 100644
--- a/editor/src/uuiui/inputs/number-input.tsx
+++ b/editor/src/uuiui/inputs/number-input.tsx
@@ -125,7 +125,7 @@ function calculateDragDelta(
 
 let incrementTimeout: number | undefined = undefined
 let incrementAnimationFrame: number | undefined = undefined
-const repeatThreshold: number = 500
+const repeatThreshold: number = 600
 
 export interface NumberInputOptions {
   innerLabel?: React.ReactChild
@@ -464,32 +464,39 @@ export const NumberInput = React.memo<NumberInputProps>(
       [inputProps],
     )
 
+    const clearIncrementTimeouts = React.useCallback(() => {
+      if (incrementTimeout != null) {
+        window.clearTimeout(incrementTimeout)
+        incrementTimeout = undefined
+      }
+      if (incrementAnimationFrame != null) {
+        window.cancelAnimationFrame(incrementAnimationFrame ?? 0)
+        incrementAnimationFrame = undefined
+      }
+    }, [])
+
     const onKeyDown = React.useCallback(
       (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'ArrowUp') {
-          updateValue(incrementBy(stepSize, e.shiftKey, true))
-        } else if (e.key === 'ArrowDown') {
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
           e.preventDefault()
-          updateValue(incrementBy(-stepSize, e.shiftKey, true))
+          const shiftKey = e.shiftKey
+          const changeBy = e.key === 'ArrowUp' ? stepSize : -stepSize
+          const newValue = incrementBy(changeBy, shiftKey, true)
+          clearIncrementTimeouts()
+          incrementTimeout = window.setTimeout(() => {
+            if (onSubmitValue != null) {
+              onSubmitValue(newValue, false)
+            } else if (onForcedSubmitValue != null) {
+              onForcedSubmitValue(newValue, false)
+            }
+          }, repeatThreshold)
         } else if (e.key === 'Enter' || e.key === 'Escape') {
           e.nativeEvent.stopImmediatePropagation()
           e.preventDefault()
           ref.current?.blur()
         }
       },
-      [updateValue, incrementBy, stepSize],
-    )
-
-    const onKeyUp = React.useCallback(
-      (e: React.KeyboardEvent<HTMLInputElement>) => {
-        // todo make sure this isn't doubling up the value submit
-        if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && onForcedSubmitValue != null) {
-          if (value != null) {
-            onForcedSubmitValue(value, false)
-          }
-        }
-      },
-      [onForcedSubmitValue, value],
+      [stepSize, incrementBy, clearIncrementTimeouts, onSubmitValue, onForcedSubmitValue],
     )
 
     const onBlur = React.useCallback(
@@ -633,10 +640,9 @@ export const NumberInput = React.memo<NumberInputProps>(
           window.addEventListener('mouseup', onDecrementMouseUp)
           const shiftKey = e.shiftKey
           const newValue = incrementBy(-stepSize, shiftKey, false)
-          incrementTimeout = window.setTimeout(
-            () => repeatIncrement(newValue, -stepSize, shiftKey, true),
-            repeatThreshold,
-          )
+          incrementTimeout = window.setTimeout(() => {
+            repeatIncrement(newValue, -stepSize, shiftKey, true)
+          }, repeatThreshold)
         }
       },
       [incrementBy, stepSize, repeatIncrement, onDecrementMouseUp, disabled],
@@ -879,7 +885,6 @@ export const NumberInput = React.memo<NumberInputProps>(
             placeholder={inputProps.placeholder ?? placeholder}
             onFocus={onFocus}
             onKeyDown={onKeyDown}
-            onKeyUp={onKeyUp}
             onBlur={onBlur}
             onChange={onChange}
             autoComplete='off'

From 627769a4872d3fd1986b9da822a1d4ae34157ee2 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 24 Sep 2024 15:31:26 +0200
Subject: [PATCH 045/272] Support parsing dynamic repeats (#6403)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Problem:**

Dynamic `repeat` functions in grid templates (e.g. `repeat(auto-fill,
...)` are not supported.

**Fix:**

1. Extend the repeat functions to allow supported keywords in the
`times` parsing, so they are preserved when serializing templates
2. …but disable resizing templates that show them, because it can be
impossible to derive their count from the computed style. We might
revisit this in the future, though.

Fixes #6402
---
 .../strategies/grid-helpers.ts                |  8 +-
 .../strategies/resize-grid-strategy.ts        | 11 +++
 .../canvas/controls/grid-controls.tsx         | 32 +++++--
 .../store/store-deep-equality-instances.ts    |  2 +-
 .../components/inspector/common/css-utils.ts  | 86 ++++++++++++++++---
 .../src/components/inspector/flex-section.tsx |  9 +-
 6 files changed, 125 insertions(+), 23 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 50f1ae451df4..0d00fba8aa57 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -20,7 +20,6 @@ import {
   canvasVector,
   isInfinityRectangle,
   offsetPoint,
-  windowPoint,
 } from '../../../../core/shared/math-utils'
 import * as PP from '../../../../core/shared/property-path'
 import { absolute } from '../../../../utils/utils'
@@ -30,6 +29,7 @@ import {
   gridCSSRepeat,
   isCSSKeyword,
   isGridCSSRepeat,
+  isStaticGridRepeat,
 } from '../../../inspector/common/css-utils'
 import type { CanvasCommand } from '../../commands/commands'
 import { deleteProperties } from '../../commands/delete-properties-command'
@@ -657,7 +657,7 @@ export function expandGridDimensions(template: GridDimension[]): ExpandedGridDim
   // Each element also contains the indexes information to be used later on to build the resized
   // template string.
   return template.reduce((acc, cur, index) => {
-    if (isGridCSSRepeat(cur)) {
+    if (isStaticGridRepeat(cur)) {
       const repeatGroup = cur.value.map((dim, repeatedIndex) =>
         expandedGridDimension(dim, index, repeatedIndex),
       )
@@ -765,7 +765,7 @@ export function getGridRelatedIndexes(params: {
    */
   let elementCount = 0 // basically the expanded index
   for (const dim of params.template) {
-    if (dim.type === 'REPEAT') {
+    if (isStaticGridRepeat(dim)) {
       let groupIndexes: number[][] = []
       // for each value push the related indexes as many times as the repeats counter
       for (let valueIndex = 0; valueIndex < dim.value.length; valueIndex++) {
@@ -786,7 +786,7 @@ export function getGridRelatedIndexes(params: {
   // Now, expand the indexes calculated above so they "flatten out" to match the generated values
   let expandedRelatedIndexes: number[][] = []
   params.template.forEach((dim, dimIndex) => {
-    if (dim.type === 'REPEAT') {
+    if (isStaticGridRepeat(dim)) {
       for (let repeatIndex = 0; repeatIndex < dim.times * dim.value.length; repeatIndex++) {
         const indexes = relatedIndexes[dimIndex][repeatIndex % dim.value.length]
         expandedRelatedIndexes.push(indexes)
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index b99bbaf32607..3b14208c101f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -25,6 +25,7 @@ import type { GridDimension } from '../../../../components/inspector/common/css-
 import {
   cssNumber,
   gridCSSNumber,
+  isDynamicGridRepeat,
   isGridCSSNumber,
   printArrayGridDimensions,
 } from '../../../../components/inspector/common/css-utils'
@@ -35,6 +36,8 @@ import { foldEither, isLeft, isRight } from '../../../../core/shared/either'
 import { roundToNearestWhole } from '../../../../core/shared/math-utils'
 import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
 import { expandGridDimensions, replaceGridTemplateDimensionAtIndex } from './grid-helpers'
+import { setCursorCommand } from '../../commands/set-cursor-command'
+import { CSSCursor } from '../../canvas-types'
 
 export const resizeGridStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -115,6 +118,10 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
+      if (!canResizeGridTemplate(originalValues)) {
+        return strategyApplicationResult([setCursorCommand(CSSCursor.NotPermitted)])
+      }
+
       const expandedOriginalValues = expandGridDimensions(originalValues.dimensions)
       const mergedValues: GridAutoOrTemplateBase = {
         type: calculatedValues.type,
@@ -233,3 +240,7 @@ function newResizedValue(
     return Math.round(newValue / 10) * 10
   }
 }
+
+export function canResizeGridTemplate(template: GridAutoOrTemplateBase): boolean {
+  return template.type === 'DIMENSIONS' && !template.dimensions.some(isDynamicGridRepeat)
+}
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 3936bf6dc5a0..b01d70f6bb99 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -13,6 +13,9 @@ import type {
 } from '../../../components/inspector/common/css-utils'
 import {
   isCSSKeyword,
+  isDynamicGridRepeat,
+  isGridCSSRepeat,
+  isStaticGridRepeat,
   printGridAutoOrTemplateBase,
   printGridCSSNumber,
 } from '../../../components/inspector/common/css-utils'
@@ -92,6 +95,7 @@ import {
   getGlobalFrameOfGridCell,
   getGridRelatedIndexes,
 } from '../canvas-strategies/strategies/grid-helpers'
+import { canResizeGridTemplate } from '../canvas-strategies/strategies/resize-grid-strategy'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -105,7 +109,7 @@ function getCellsCount(template: GridAutoOrTemplateBase | null): number {
   switch (template.type) {
     case 'DIMENSIONS':
       return template.dimensions.reduce((acc, cur) => {
-        return acc + (cur.type === 'REPEAT' ? cur.times : 1)
+        return acc + (isStaticGridRepeat(cur) ? cur.times : 1)
       }, 0)
     case 'FALLBACK':
       return 0
@@ -156,6 +160,7 @@ export interface GridResizingControlProps {
   padding: number | null
   resizing: 'resize-target' | 'resize-generated' | 'not-resizing'
   setResizingIndex: (v: number | null) => void
+  resizeLocked: boolean
 }
 
 export const GridResizingControl = React.memo((props: GridResizingControlProps) => {
@@ -283,11 +288,15 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
             alignItems: 'center',
             justifyContent: 'center',
             border: `1px solid ${
-              props.resizing === 'resize-target'
+              props.resizeLocked
+                ? colorTheme.brandNeonPink10.value
+                : props.resizing === 'resize-target'
                 ? colorTheme.brandNeonPink.value
                 : colorTheme.brandNeonPink60.value
             }`,
-            ...(props.resizing === 'resize-target'
+            ...(props.resizeLocked
+              ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.brandNeonPink10.value, scale)
+              : props.resizing === 'resize-target'
               ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.brandNeonPink60.value, scale)
               : UtopiaStyles.backgrounds.stripedBackground(
                   colorTheme.brandNeonPink10.value,
@@ -303,7 +312,9 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
             )}
             scale={scale}
             color={
-              props.resizing === 'resize-target'
+              props.resizeLocked
+                ? colorTheme.brandNeonPink10.value
+                : props.resizing === 'resize-target'
                 ? colorTheme.brandNeonPink.value
                 : colorTheme.brandNeonPink60.value
             }
@@ -336,11 +347,17 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
     if (props.fromPropsAxisValues?.type !== 'DIMENSIONS') {
       return null
     }
+    if (!canResizeGridTemplate(props.fromPropsAxisValues)) {
+      return null
+    }
     return {
       type: 'DIMENSIONS',
       dimensions: props.fromPropsAxisValues.dimensions.reduce(
         (acc, cur): GridDiscreteDimension[] => {
-          if (cur.type === 'REPEAT') {
+          if (isGridCSSRepeat(cur)) {
+            if (isDynamicGridRepeat(cur)) {
+              return acc
+            }
             let expanded: GridDiscreteDimension[] = []
             for (let i = 0; i < cur.times; i++) {
               expanded.push(...cur.value.filter((v) => v.type !== 'REPEAT'))
@@ -355,6 +372,10 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
     }
   }, [props.fromPropsAxisValues])
 
+  const resizeLocked = React.useMemo(() => {
+    return fromProps == null || !canResizeGridTemplate(fromProps)
+  }, [fromProps])
+
   const [resizingIndex, setResizingIndex] = React.useState<number | null>(null)
 
   // These are the indexes of the elements that will resize too alongside the one at the index of
@@ -417,6 +438,7 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
                     ? 'resize-generated'
                     : 'not-resizing'
                 }
+                resizeLocked={resizeLocked}
                 setResizingIndex={setResizingIndex}
                 padding={
                   props.padding == null
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index cb10885c3b88..805fe41df090 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -2027,7 +2027,7 @@ export const GridDimensionKeepDeepEquality: KeepDeepEqualityCall<GridDimension>
 export const GridCSSRepeatKeepDeepEquality: KeepDeepEqualityCall<GridCSSRepeat> =
   combine2EqualityCalls(
     (p) => p.times,
-    NumberKeepDeepEquality,
+    createCallWithTripleEquals(),
     (p) => p.value,
     arrayDeepEquality(GridDimensionKeepDeepEquality),
     gridCSSRepeat,
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index 9e936cf0e386..b48f81e170ca 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -595,13 +595,57 @@ export type GridCSSKeyword = BaseGridDimension & {
   value: CSSKeyword<ValidGridDimensionKeyword>
 }
 
-export type GridCSSRepeat = {
+type BaseGridCSSRepeat = {
   type: 'REPEAT'
-  times: number
   value: Array<GridDimension>
   areaName: null
 }
 
+function baseGridCSSRepeat(value: Array<GridDimension>): BaseGridCSSRepeat {
+  return {
+    type: 'REPEAT',
+    value: value,
+    areaName: null,
+  }
+}
+
+type GridCSSRepeatStatic = BaseGridCSSRepeat & {
+  times: number
+}
+
+function gridCSSRepeatStatic(times: number, value: Array<GridDimension>): GridCSSRepeatStatic {
+  return {
+    ...baseGridCSSRepeat(value),
+    times: times,
+  }
+}
+
+type GridCSSRepeatDynamic = BaseGridCSSRepeat & {
+  times: CSSKeyword<'auto-fill' | 'auto-fit'>
+}
+
+function gridCSSRepeatDynamic(
+  times: CSSKeyword<'auto-fill' | 'auto-fit'>,
+  value: Array<GridDimension>,
+): GridCSSRepeatDynamic {
+  return {
+    ...baseGridCSSRepeat(value),
+    times: times,
+  }
+}
+
+export type GridCSSRepeat = GridCSSRepeatStatic | GridCSSRepeatDynamic
+
+type GridCSSRepeatTimes = GridCSSRepeat['times']
+
+export function isStaticGridRepeat(dim: GridDimension): dim is GridCSSRepeatStatic {
+  return isGridCSSRepeat(dim) && !isCSSKeyword(dim.times)
+}
+
+export function isDynamicGridRepeat(dim: GridDimension): dim is GridCSSRepeatDynamic {
+  return isGridCSSRepeat(dim) && isCSSKeyword(dim.times)
+}
+
 export type GridCSSMinmax = BaseGridDimension & {
   type: 'MINMAX'
   min: GridCSSNumber | GridCSSKeyword
@@ -623,12 +667,11 @@ export function gridCSSKeyword(
   }
 }
 
-export function gridCSSRepeat(times: number, value: GridDimension[]): GridCSSRepeat {
-  return {
-    type: 'REPEAT',
-    times: times,
-    value: value,
-    areaName: null,
+export function gridCSSRepeat(times: GridCSSRepeatTimes, value: GridDimension[]): GridCSSRepeat {
+  if (typeof times === 'number') {
+    return gridCSSRepeatStatic(times, value)
+  } else {
+    return gridCSSRepeatDynamic(times, value)
   }
 }
 
@@ -858,7 +901,9 @@ export function printGridDimension(dimension: GridDimension, hideAreaName?: bool
       return `${areaName}${printed}`
     }
     case 'REPEAT': {
-      return `repeat(${dimension.times}, ${printArrayGridDimensions(dimension.value)})`
+      return `repeat(${
+        isCSSKeyword(dimension.times) ? dimension.times.value : dimension.times
+      }, ${printArrayGridDimensions(dimension.value)})`
     }
     case 'MINMAX': {
       return (
@@ -1164,10 +1209,14 @@ export function parseGridChildren(
         const functionName = child.name.toLowerCase()
         switch (functionName) {
           case 'repeat': {
-            const repeatChildren = child.children.toArray()
-            const times = parseInt(repeatChildren.find((c) => c.type === 'Number')?.value ?? '0')
+            const [firstChild, ...otherChildren] = child.children.toArray()
+            const times = parseRepeatTimes(firstChild)
+            if (times == null) {
+              return left('Invalid grid CSS repeat times.')
+            }
+
             const values = new csstree.List<csstree.CssNode>().fromArray(
-              repeatChildren.filter(
+              otherChildren.filter(
                 (c) =>
                   c.type === 'Dimension' ||
                   c.type === 'Identifier' ||
@@ -5765,3 +5814,16 @@ export function toggleShadowEnabled(oldValue: CSSBoxShadow): CSSBoxShadow {
   newValue.enabled = !newValue.enabled
   return newValue
 }
+
+function parseRepeatTimes(firstChild: csstree.CssNode) {
+  switch (firstChild.type) {
+    case 'Number':
+      return parseInt(firstChild.value) ?? '0'
+    case 'Identifier':
+      return firstChild.name === 'auto-fill' || firstChild.name === 'auto-fit'
+        ? cssKeyword(firstChild.name)
+        : null
+    default:
+      return null
+  }
+}
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index e68e01ba7046..1d94ebbd1ada 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -1096,7 +1096,14 @@ export function mergeGridTemplateValues({
   autoValues: GridDimension[]
 }): GridDimension[] {
   const expanded = fromProps.flatMap((v) => {
-    return isGridCSSRepeat(v) ? Array(v.times).fill(v.value).flat() : v
+    if (!isGridCSSRepeat(v)) {
+      return v
+    }
+    if (isCSSKeyword(v.times)) {
+      // NOTE: this will be removed soon with https://github.com/concrete-utopia/utopia/pull/6396, so no need to go in detail here
+      return v
+    }
+    return Array(v.times).fill(v.value).flat()
   })
 
   function getExplicitValue(dimension: GridDimension, index: number): GridDimension {

From 5c0b2938c8b0188b787dc15fd6770d7f2306f405 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Tue, 24 Sep 2024 14:33:09 +0100
Subject: [PATCH 046/272] Color Picker Responsiveness (#6397)

- Simplified `getDerivedStateFromProps` as it was setting a property
that was never used.
- Added `setIndicators` which moves the color circle and the sliders
based on the current state.
- Added optional trigger for `setIndicators` to `componentDidUpdate`.
- The various mouse move handlers in the color picker check
`mouseMoveHandled`.
- Added some utility functionality so that it is possible to check if an
event target is inside the color picker.
- Added call for `setIndicators` to `componentDidMount`.
- Made a slight refactor to `shouldIncludeVSCodeDecorations` that
radically improves its performance.
- Removed focusing of input in color picker that didn't appear to work
as it was causing a non-transient change to fire.
---
 .../components/editor/store/editor-update.tsx |  2 +
 .../inspector/controls/color-picker-utils.ts  | 18 ++++
 .../inspector/controls/color-picker.tsx       | 82 ++++++++++++++-----
 editor/src/core/model/project-file-utils.ts   |  2 +-
 editor/src/core/shared/project-file-types.ts  |  3 +-
 editor/src/core/vscode/vscode-bridge.ts       | 16 ++--
 editor/src/templates/editor-canvas.tsx        |  4 +
 7 files changed, 96 insertions(+), 31 deletions(-)
 create mode 100644 editor/src/components/inspector/controls/color-picker-utils.ts

diff --git a/editor/src/components/editor/store/editor-update.tsx b/editor/src/components/editor/store/editor-update.tsx
index 6b6cff5c9c4e..f2b5e82c80d0 100644
--- a/editor/src/components/editor/store/editor-update.tsx
+++ b/editor/src/components/editor/store/editor-update.tsx
@@ -443,6 +443,8 @@ export function runSimpleLocalEditorAction(
       return UPDATE_FNS.FORCE_PARSE_FILE(action, state)
     case 'RUN_ESCAPE_HATCH':
       return UPDATE_FNS.RUN_ESCAPE_HATCH(action, state, builtInDependencies)
+    case 'SET_ELEMENTS_TO_RERENDER':
+      return UPDATE_FNS.SET_ELEMENTS_TO_RERENDER(action, state)
     case 'TOGGLE_SELECTION_LOCK':
       return UPDATE_FNS.TOGGLE_SELECTION_LOCK(action, state)
     case 'UPDATE_AGAINST_GITHUB':
diff --git a/editor/src/components/inspector/controls/color-picker-utils.ts b/editor/src/components/inspector/controls/color-picker-utils.ts
new file mode 100644
index 000000000000..2be87ffa1bd8
--- /dev/null
+++ b/editor/src/components/inspector/controls/color-picker-utils.ts
@@ -0,0 +1,18 @@
+let colorPickerElement: Node | null = null
+
+export function setColorPickerElement(node: Node | null): void {
+  colorPickerElement = node
+}
+
+export function clearColorPickerElement(): void {
+  colorPickerElement = null
+}
+
+export function isInsideColorPicker(eventTarget: EventTarget | null): boolean {
+  return (
+    eventTarget != null &&
+    colorPickerElement != null &&
+    eventTarget instanceof Node &&
+    colorPickerElement.contains(eventTarget)
+  )
+}
diff --git a/editor/src/components/inspector/controls/color-picker.tsx b/editor/src/components/inspector/controls/color-picker.tsx
index cc86b918cce6..e08380c30df4 100644
--- a/editor/src/components/inspector/controls/color-picker.tsx
+++ b/editor/src/components/inspector/controls/color-picker.tsx
@@ -28,6 +28,8 @@ import {
 } from '../../../uuiui'
 import { pickColorWithEyeDropper } from '../../canvas/canvas-utils'
 import { ColorPickerSwatches } from './color-picker-swatches'
+import { didWeHandleMouseMoveForThisFrame, mouseMoveHandled } from '../../../components/mouse-move'
+import { clearColorPickerElement, setColorPickerElement } from './color-picker-utils'
 
 const checkerboardBackground = UtopiaStyles.backgrounds.checkerboardBackground
 
@@ -196,17 +198,18 @@ export class ColorPickerInner extends React.Component<
   ColorPickerInnerProps,
   ColorPickerInnerState
 > {
-  private RefFirstControl = React.createRef<HTMLInputElement>()
-
   private fullWidth = colorPickerWidth
   private fullHeight = MetadataEditorModalPreviewHeight
   private paddedWidth = this.fullWidth - inspectorEdgePadding * 2
 
   private SVControlRef = React.createRef<HTMLDivElement>()
+  private SVControlIndicatorRef = React.createRef<HTMLDivElement>()
   private SVOrigin: WindowPoint = { x: 0, y: 0 } as WindowPoint
   private HueControlRef = React.createRef<HTMLDivElement>()
+  private HueControlIndicatorRef = React.createRef<HTMLDivElement>()
   private HueOriginLeft: number = 0
   private AlphaControlRef = React.createRef<HTMLDivElement>()
+  private AlphaControlIndicatorRef = React.createRef<HTMLDivElement>()
   private AlphaOriginLeft: number = 0
 
   constructor(props: ColorPickerInnerProps) {
@@ -232,13 +235,12 @@ export class ColorPickerInner extends React.Component<
   componentDidMount() {
     setTimeout(() => {
       // wrapping in a setTimeout so we don't dispatch from inside React lifecycle
-      if (this.RefFirstControl.current != null) {
-        this.RefFirstControl.current.focus()
-      }
+      this.setIndicators()
     }, 0)
   }
 
   componentWillUnmount() {
+    clearColorPickerElement()
     document.removeEventListener('mousemove', this.onSVMouseMove)
     document.removeEventListener('mouseup', this.onSVMouseUp)
     document.removeEventListener('mousemove', this.onHueSliderMouseMove)
@@ -255,10 +257,12 @@ export class ColorPickerInner extends React.Component<
     return Chroma(h * 360, s, v, 'hsv')
       .alpha(a)
       .hex('auto')
-      .toUpperCase()
   }
 
-  static getDerivedStateFromProps(props: ColorPickerInnerProps, state: ColorPickerInnerState) {
+  static getDerivedStateFromProps(
+    props: ColorPickerInnerProps,
+    state: ColorPickerInnerState,
+  ): Partial<ColorPickerInnerState> | null {
     const chroma = cssColorToChromaColorOrDefault(props.value)
     if (state.dirty) {
       return {
@@ -267,19 +271,24 @@ export class ColorPickerInner extends React.Component<
       }
     } else {
       const controlStateHexa = ColorPickerInner.getHexaColorFromControlPositionState(state)
-      const newPropsHexa = chroma.hex('auto').toUpperCase()
+      const newPropsHexa = chroma.hex('auto')
       if (controlStateHexa === newPropsHexa) {
         return null
       } else {
         const newCalculatedState = deriveStateFromNewColor(chroma, state.normalisedHuePosition)
-        return { ...newCalculatedState, _propsHexa: chroma.hex('auto').toUpperCase() }
+        return newCalculatedState
       }
     }
   }
 
-  componentDidUpdate(prevProps: ColorPickerInnerProps) {
-    if (this.RefFirstControl.current != null && prevProps.id !== this.props.id) {
-      this.RefFirstControl.current.focus()
+  componentDidUpdate(prevProps: ColorPickerInnerProps, prevState: ColorPickerInnerState) {
+    if (
+      this.state.normalisedSaturationPosition !== prevState.normalisedSaturationPosition ||
+      this.state.normalisedValuePosition !== prevState.normalisedValuePosition ||
+      this.state.normalisedHuePosition !== prevState.normalisedHuePosition ||
+      this.state.normalisedAlphaPosition !== prevState.normalisedAlphaPosition
+    ) {
+      this.setIndicators()
     }
   }
 
@@ -366,7 +375,10 @@ export class ColorPickerInner extends React.Component<
 
   onSVMouseMove = (e: MouseEvent) => {
     e.stopPropagation()
-    this.setSVFromClientPosition(e.clientX, e.clientY, true)
+    if (!didWeHandleMouseMoveForThisFrame) {
+      mouseMoveHandled()
+      this.setSVFromClientPosition(e.clientX, e.clientY, true)
+    }
   }
 
   hexFromHue = (h: number, s: number, v: number, a: number): string => {
@@ -427,7 +439,10 @@ export class ColorPickerInner extends React.Component<
 
   onHueSliderMouseMove = (e: MouseEvent) => {
     e.stopPropagation()
-    this.setHueFromClientX(e.clientX, true)
+    if (!didWeHandleMouseMoveForThisFrame) {
+      mouseMoveHandled()
+      this.setHueFromClientX(e.clientX, true)
+    }
   }
 
   onHueSliderMouseUp = (e: MouseEvent) => {
@@ -468,7 +483,10 @@ export class ColorPickerInner extends React.Component<
 
   onAlphaSliderMouseMove = (e: MouseEvent) => {
     e.stopPropagation()
-    this.setAlphaFromClientX(e.clientX, true)
+    if (!didWeHandleMouseMoveForThisFrame) {
+      mouseMoveHandled()
+      this.setAlphaFromClientX(e.clientX, true)
+    }
   }
 
   onAlphaSliderMouseUp = (e: MouseEvent) => {
@@ -532,6 +550,25 @@ export class ColorPickerInner extends React.Component<
     this.setNewHex(newValue)
   }
 
+  setIndicators = () => {
+    if (this.SVControlIndicatorRef.current != null) {
+      this.SVControlIndicatorRef.current.style.left = `${
+        this.state.normalisedSaturationPosition * 100
+      }%`
+      this.SVControlIndicatorRef.current.style.top = `${
+        (1 - this.state.normalisedValuePosition) * 100
+      }%`
+    }
+    if (this.HueControlIndicatorRef.current != null) {
+      this.HueControlIndicatorRef.current.style.left = `${this.state.normalisedHuePosition * 100}%`
+    }
+    if (this.AlphaControlIndicatorRef.current != null) {
+      this.AlphaControlIndicatorRef.current.style.left = `${
+        this.state.normalisedAlphaPosition * 100
+      }%`
+    }
+  }
+
   render() {
     const h = this.state.normalisedHuePosition
     const s = this.state.normalisedSaturationPosition
@@ -553,7 +590,12 @@ export class ColorPickerInner extends React.Component<
       )`
 
     return (
-      <div style={{ position: 'relative' }}>
+      <div
+        style={{ position: 'relative' }}
+        ref={(node) => {
+          setColorPickerElement(node)
+        }}
+      >
         <div>
           <div
             className='colorPicker-saturation-and-value'
@@ -574,6 +616,7 @@ export class ColorPickerInner extends React.Component<
           >
             <div
               className='colorPicker-saturation-and-value-indicator'
+              ref={this.SVControlIndicatorRef}
               style={{
                 width: 8,
                 height: 8,
@@ -583,8 +626,6 @@ export class ColorPickerInner extends React.Component<
                   'inset 0 0 1px rgba(0, 0, 0, 0.24), 0 0 0 2px white, 0 0 2px 2px rgba(0, 0, 0, 0.24)',
                 position: 'absolute',
                 margin: -4,
-                left: `${this.state.normalisedSaturationPosition * 100}%`,
-                top: `${(1 - this.state.normalisedValuePosition) * 100}%`,
                 pointerEvents: 'none',
               }}
             />
@@ -610,6 +651,7 @@ export class ColorPickerInner extends React.Component<
               <div style={{ position: 'relative' }}>
                 <div
                   className='colorPicker-hue-indicator'
+                  ref={this.HueControlIndicatorRef}
                   style={{
                     width: 8,
                     height: 20,
@@ -618,7 +660,6 @@ export class ColorPickerInner extends React.Component<
                     boxShadow: `inset 0 0 1px rgba(0, 0, 0, 0.24), 0px 0px 0px 2px white, 0px 0px 2px 2px rgba(0, 0, 0, 0.239216)`,
                     position: 'absolute',
                     margin: '0 -4px',
-                    left: `${this.state.normalisedHuePosition * 100}%`,
                     top: 0,
                     pointerEvents: 'none',
                   }}
@@ -647,6 +688,7 @@ export class ColorPickerInner extends React.Component<
               <div style={{ position: 'relative' }}>
                 <div
                   className='colorPicker-alpha-indicator'
+                  ref={this.AlphaControlIndicatorRef}
                   style={{
                     width: 8,
                     height: 20,
@@ -660,7 +702,6 @@ export class ColorPickerInner extends React.Component<
                     boxShadow: `inset 0 0 1px rgba(0, 0, 0, 0.24), 0px 0px 0px 2px white, 0px 0px 2px 2px rgba(0, 0, 0, 0.239216)`,
                     position: 'absolute',
                     margin: '0 -4px',
-                    left: `${this.state.normalisedAlphaPosition * 100}%`,
                     top: 0,
                     pointerEvents: 'none',
                   }}
@@ -678,7 +719,6 @@ export class ColorPickerInner extends React.Component<
             }}
           >
             <StringControl
-              ref={this.RefFirstControl}
               key={this.props.id}
               value={chroma.hex('auto').toUpperCase()}
               onSubmitValue={this.onSubmitValueHex}
diff --git a/editor/src/core/model/project-file-utils.ts b/editor/src/core/model/project-file-utils.ts
index 64b59da1ac88..2b41567a1571 100644
--- a/editor/src/core/model/project-file-utils.ts
+++ b/editor/src/core/model/project-file-utils.ts
@@ -465,7 +465,7 @@ function getHighlightBoundsForProjectImpl(
       forEachParseSuccess((parsedFile) => {
         const fileHighlightBounds = parsedFile.highlightBounds
         forEachValue((bounds, uid) => {
-          allHighlightBounds[uid] = { ...bounds, filePath: fullPath }
+          allHighlightBounds[uid] = { bounds: bounds, filePath: fullPath }
         }, fileHighlightBounds)
       }, file.fileContents.parsed)
     }
diff --git a/editor/src/core/shared/project-file-types.ts b/editor/src/core/shared/project-file-types.ts
index 6b670a916d27..0d3550a2ee08 100644
--- a/editor/src/core/shared/project-file-types.ts
+++ b/editor/src/core/shared/project-file-types.ts
@@ -414,7 +414,8 @@ export function highlightBounds(
 
 export type HighlightBoundsForUids = { [uid: string]: HighlightBounds }
 
-export interface HighlightBoundsWithFile extends HighlightBounds {
+export interface HighlightBoundsWithFile {
+  bounds: HighlightBounds
   filePath: string
 }
 
diff --git a/editor/src/core/vscode/vscode-bridge.ts b/editor/src/core/vscode/vscode-bridge.ts
index 6da5daef90a4..b9bf4bf4e659 100644
--- a/editor/src/core/vscode/vscode-bridge.ts
+++ b/editor/src/core/vscode/vscode-bridge.ts
@@ -221,10 +221,10 @@ export function getCodeEditorDecorations(editorState: EditorState): UpdateDecora
         decorationRange(
           rangeType,
           highlightBounds.filePath,
-          highlightBounds.startLine,
-          highlightBounds.startCol,
-          highlightBounds.endLine,
-          highlightBounds.endCol,
+          highlightBounds.bounds.startLine,
+          highlightBounds.bounds.startCol,
+          highlightBounds.bounds.endLine,
+          highlightBounds.bounds.endCol,
         ),
       )
     }
@@ -267,10 +267,10 @@ export function selectedElementChangedMessageFromHighlightBounds(
   return selectedElementChanged(
     boundsInFile(
       highlightBounds.filePath,
-      highlightBounds.startLine,
-      highlightBounds.startCol,
-      highlightBounds.endLine,
-      highlightBounds.endCol,
+      highlightBounds.bounds.startLine,
+      highlightBounds.bounds.startCol,
+      highlightBounds.bounds.endLine,
+      highlightBounds.bounds.endCol,
     ),
     forceNavigation,
   )
diff --git a/editor/src/templates/editor-canvas.tsx b/editor/src/templates/editor-canvas.tsx
index 6b3738bf00ef..ccfe75e5a815 100644
--- a/editor/src/templates/editor-canvas.tsx
+++ b/editor/src/templates/editor-canvas.tsx
@@ -105,6 +105,7 @@ import { isFeatureEnabled } from '../utils/feature-switches'
 import { getCanvasViewportCenter } from './paste-helpers'
 import { DataPasteHandler, isPasteHandler } from '../utils/paste-handler'
 import { ResizeObserver } from '../components/canvas/dom-walker'
+import { isInsideColorPicker } from '../components/inspector/controls/color-picker-utils'
 
 const webFrame = PROBABLY_ELECTRON ? requireElectron().webFrame : null
 
@@ -1163,6 +1164,9 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
   }
 
   handleMouseMove = (event: MouseEvent) => {
+    if (isInsideColorPicker(event.target)) {
+      return
+    }
     let actions: Array<EditorAction> = []
     if (this.canvasSelected()) {
       const canvasPositions = this.getPosition(event)

From 342d61c44d748e5e2a154640ae2aa7992a550b28 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 24 Sep 2024 16:26:04 +0200
Subject: [PATCH 047/272] Grid move: absolute move without positioning (#6405)

**Problem:**

Grid elements with `position: absolute` are always moved relative to the
cell they appear in.

**Fix:**

For cell elements that don't have explicit grid positioning (`gridRow` /
`gridColumn`), move them relative to the grid itself instead, and don't
show the cell target outline during the move.

(Elements that have positioning will still be absolutely positioned
relatively to their cell, and the positioning will be kept).

Fixes #6404
---
 .../strategies/grid-helpers.ts                |  33 +-
 ...-rearrange-move-strategy.spec.browser2.tsx | 346 +++++++++++-------
 .../grid-rearrange-move-strategy.ts           |  14 +-
 ...range-grid-swap-strategy.spec.browser2.tsx |   2 +
 .../rearrange-grid-swap-strategy.ts           |   2 +-
 .../canvas/controls/grid-controls.tsx         |  16 +-
 .../src/core/model/element-metadata-utils.ts  |  17 +
 7 files changed, 290 insertions(+), 140 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 0d00fba8aa57..210964ae37dc 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -203,6 +203,20 @@ export function runGridRearrangeMove(
   })
 
   switch (moveType) {
+    case 'absolute': {
+      const absoluteMoveCommands = gridChildAbsoluteMoveCommands(
+        MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
+        MetadataUtils.getFrameOrZeroRectInCanvasCoords(grid.elementPath, jsxMetadata),
+        interactionData,
+      )
+      return {
+        commands: absoluteMoveCommands,
+        targetCell: targetCellData ?? customState.targetCellData,
+        originalRootCell: rootCell,
+        draggingFromCell: draggingFromCell,
+        targetRootCell: gridCellCoordinates(row.start, column.start),
+      }
+    }
     case 'rearrange': {
       const targetRootCell = gridCellCoordinates(row.start, column.start)
       const canvasRect = getGlobalFrameOfGridCell(containerMetadata, targetRootCell)
@@ -249,6 +263,8 @@ export function runGridRearrangeMove(
         targetRootCell: targetCellUnderMouse,
       }
     }
+    default:
+      assertNever(moveType)
   }
 }
 
@@ -422,7 +438,7 @@ function asMaybeNamedAreaOrValue(
 
 function gridChildAbsoluteMoveCommands(
   targetMetadata: ElementInstanceMetadata | null,
-  targetCellRect: CanvasRectangle,
+  containingRect: CanvasRectangle,
   dragInteractionData: DragInteractionData,
 ): CanvasCommand[] {
   if (
@@ -445,8 +461,8 @@ function gridChildAbsoluteMoveCommands(
   )
 
   const offset = canvasVector({
-    x: dragOffset.x - targetCellRect.x - offsetInTarget.x,
-    y: dragOffset.y - targetCellRect.y - offsetInTarget.y,
+    x: dragOffset.x - containingRect.x - offsetInTarget.x,
+    y: dragOffset.y - containingRect.y - offsetInTarget.y,
   })
 
   return [
@@ -500,23 +516,24 @@ function sortElementsByGridPosition(gridTemplateColumns: number) {
 type GridMoveType =
   | 'reorder' // reorder the element in the code based on the ascending position, and remove explicit positioning props
   | 'rearrange' // set explicit positioning props, and reorder based on the visual location
+  | 'absolute' // a regular absolute move, relative to the grid
 
 function getGridMoveType(params: {
   originalElementMetadata: ElementInstanceMetadata
   possiblyReorderIndex: number
   cellsSortedByPosition: SortableGridElementProperties[]
 }): GridMoveType {
-  // For absolute move, just use rearrange.
-  // TODO: maybe worth reconsidering in the future?
+  const specialSizeMeasurements = params.originalElementMetadata.specialSizeMeasurements
   if (MetadataUtils.isPositionAbsolute(params.originalElementMetadata)) {
-    return 'rearrange'
+    return MetadataUtils.hasNoGridCellPositioning(specialSizeMeasurements)
+      ? 'absolute'
+      : 'rearrange'
   }
   if (params.possiblyReorderIndex >= params.cellsSortedByPosition.length) {
     return 'rearrange'
   }
 
-  const elementGridProperties =
-    params.originalElementMetadata.specialSizeMeasurements.elementGridProperties
+  const elementGridProperties = specialSizeMeasurements.elementGridProperties
 
   // The first element is intrinsically in order, so try to adjust for that
   if (params.possiblyReorderIndex === 0) {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
index 584a9eed36a3..2a84da3a561e 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
@@ -202,7 +202,8 @@ export var storyboard = (
   })
 
   describe('absolute move within grid', () => {
-    const ProjectCode = `import { Scene, Storyboard } from 'utopia-api'
+    describe('when the cell has positioning', () => {
+      const ProjectCode = `import { Scene, Storyboard } from 'utopia-api'
 export var storyboard = (
   <Storyboard data-uid='sb'>
     <Scene
@@ -253,131 +254,131 @@ export var storyboard = (
   </Storyboard>
 )
 `
-    it('can move absolute element inside a grid cell', async () => {
-      const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
-
-      const child = editor.renderedDOM.getByTestId('child')
-
-      {
-        const { top, left, gridColumn, gridRow } = child.style
-        expect({ top, left, gridColumn, gridRow }).toEqual({
-          gridColumn: '1',
-          gridRow: '1',
-          left: '12px',
-          top: '16px',
-        })
-      }
+      it('can move absolute element inside a grid cell', async () => {
+        const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+        const child = editor.renderedDOM.getByTestId('child')
 
-      const childBounds = child.getBoundingClientRect()
-      const childCenter = windowPoint({
-        x: Math.floor(childBounds.left + childBounds.width / 2),
-        y: Math.floor(childBounds.top + childBounds.height / 2),
-      })
+        {
+          const { top, left, gridColumn, gridRow } = child.style
+          expect({ top, left, gridColumn, gridRow }).toEqual({
+            gridColumn: '1',
+            gridRow: '1',
+            left: '12px',
+            top: '16px',
+          })
+        }
+
+        await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+
+        const childBounds = child.getBoundingClientRect()
+        const childCenter = windowPoint({
+          x: Math.floor(childBounds.left + childBounds.width / 2),
+          y: Math.floor(childBounds.top + childBounds.height / 2),
+        })
 
-      await mouseDragFromPointToPoint(
-        editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
-        childCenter,
-        offsetPoint(childCenter, windowPoint({ x: 20, y: 20 })),
-      )
+        await mouseDragFromPointToPoint(
+          editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
+          childCenter,
+          offsetPoint(childCenter, windowPoint({ x: 20, y: 20 })),
+        )
 
-      {
-        const { top, left, gridColumn, gridRow } = child.style
-        expect({ top, left, gridColumn, gridRow }).toEqual({
-          gridColumn: '1',
-          gridRow: '1',
-          left: '37px',
-          top: '41px',
-        })
-      }
-    })
+        {
+          const { top, left, gridColumn, gridRow } = child.style
+          expect({ top, left, gridColumn, gridRow }).toEqual({
+            gridColumn: '1',
+            gridRow: '1',
+            left: '37px',
+            top: '41px',
+          })
+        }
+      })
 
-    it('can move absolute element inside a grid cell, zoomed in', async () => {
-      const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+      it('can move absolute element inside a grid cell, zoomed in', async () => {
+        const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
-      await editor.dispatch([CanvasActions.zoom(2)], true)
+        await editor.dispatch([CanvasActions.zoom(2)], true)
 
-      const child = editor.renderedDOM.getByTestId('child')
+        const child = editor.renderedDOM.getByTestId('child')
 
-      {
-        const { top, left, gridColumn, gridRow } = child.style
-        expect({ top, left, gridColumn, gridRow }).toEqual({
-          gridColumn: '1',
-          gridRow: '1',
-          left: '12px',
-          top: '16px',
+        {
+          const { top, left, gridColumn, gridRow } = child.style
+          expect({ top, left, gridColumn, gridRow }).toEqual({
+            gridColumn: '1',
+            gridRow: '1',
+            left: '12px',
+            top: '16px',
+          })
+        }
+
+        await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+
+        const childBounds = child.getBoundingClientRect()
+        const childCenter = windowPoint({
+          x: Math.floor(childBounds.left + childBounds.width / 2),
+          y: Math.floor(childBounds.top + childBounds.height / 2),
         })
-      }
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+        await mouseDragFromPointToPoint(
+          editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
+          childCenter,
+          offsetPoint(childCenter, windowPoint({ x: 240, y: 240 })),
+        )
 
-      const childBounds = child.getBoundingClientRect()
-      const childCenter = windowPoint({
-        x: Math.floor(childBounds.left + childBounds.width / 2),
-        y: Math.floor(childBounds.top + childBounds.height / 2),
+        {
+          const { top, left, gridColumn, gridRow } = child.style
+          expect({ top, left, gridColumn, gridRow }).toEqual({
+            gridColumn: '1',
+            gridRow: '1',
+            left: '137px',
+            top: '141px',
+          })
+        }
       })
 
-      await mouseDragFromPointToPoint(
-        editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
-        childCenter,
-        offsetPoint(childCenter, windowPoint({ x: 240, y: 240 })),
-      )
-
-      {
-        const { top, left, gridColumn, gridRow } = child.style
-        expect({ top, left, gridColumn, gridRow }).toEqual({
-          gridColumn: '1',
-          gridRow: '1',
-          left: '137px',
-          top: '141px',
-        })
-      }
-    })
-
-    it('can move absolute element among grid cells', async () => {
-      const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+      it('can move absolute element among grid cells', async () => {
+        const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
-      const child = editor.renderedDOM.getByTestId('child')
+        const child = editor.renderedDOM.getByTestId('child')
 
-      {
-        const { top, left, gridColumn, gridRow } = child.style
-        expect({ top, left, gridColumn, gridRow }).toEqual({
-          gridColumn: '1',
-          gridRow: '1',
-          left: '12px',
-          top: '16px',
+        {
+          const { top, left, gridColumn, gridRow } = child.style
+          expect({ top, left, gridColumn, gridRow }).toEqual({
+            gridColumn: '1',
+            gridRow: '1',
+            left: '12px',
+            top: '16px',
+          })
+        }
+
+        await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+
+        const childBounds = child.getBoundingClientRect()
+        const childCenter = windowPoint({
+          x: Math.floor(childBounds.left + childBounds.width / 2),
+          y: Math.floor(childBounds.top + childBounds.height / 2),
         })
-      }
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+        await mouseDragFromPointToPoint(
+          editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
+          childCenter,
+          offsetPoint(childCenter, windowPoint({ x: 240, y: 240 })),
+        )
 
-      const childBounds = child.getBoundingClientRect()
-      const childCenter = windowPoint({
-        x: Math.floor(childBounds.left + childBounds.width / 2),
-        y: Math.floor(childBounds.top + childBounds.height / 2),
+        {
+          const { top, left, gridColumn, gridRow } = child.style
+          expect({ top, left, gridColumn, gridRow }).toEqual({
+            gridColumn: '2',
+            gridRow: '2',
+            left: '26.5px',
+            top: '37px',
+          })
+        }
       })
 
-      await mouseDragFromPointToPoint(
-        editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
-        childCenter,
-        offsetPoint(childCenter, windowPoint({ x: 240, y: 240 })),
-      )
-
-      {
-        const { top, left, gridColumn, gridRow } = child.style
-        expect({ top, left, gridColumn, gridRow }).toEqual({
-          gridColumn: '2',
-          gridRow: '2',
-          left: '26.5px',
-          top: '37px',
-        })
-      }
-    })
-
-    it("can move element spanning multiple cell by a cell that isn't the root cell", async () => {
-      const editor = await renderTestEditorWithCode(
-        `import { Scene, Storyboard } from 'utopia-api'
+      it("can move element spanning multiple cell by a cell that isn't the root cell", async () => {
+        const editor = await renderTestEditorWithCode(
+          `import { Scene, Storyboard } from 'utopia-api'
 export var storyboard = (
   <Storyboard data-uid='sb'>
     <Scene
@@ -429,33 +430,124 @@ export var storyboard = (
   </Storyboard>
 )
 `,
-        'await-first-dom-report',
-      )
+          'await-first-dom-report',
+        )
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+        await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
 
-      const child = editor.renderedDOM.getByTestId('child')
-      const childBounds = child.getBoundingClientRect()
-      const startPoint = windowPoint({
-        x: Math.floor(childBounds.left + childBounds.width - 3),
-        y: Math.floor(childBounds.top + childBounds.height - 3),
+        const child = editor.renderedDOM.getByTestId('child')
+        const childBounds = child.getBoundingClientRect()
+        const startPoint = windowPoint({
+          x: Math.floor(childBounds.left + childBounds.width - 3),
+          y: Math.floor(childBounds.top + childBounds.height - 3),
+        })
+
+        await mouseDragFromPointToPoint(
+          editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
+          startPoint,
+          offsetPoint(startPoint, windowPoint({ x: -100, y: -100 })),
+        )
+
+        {
+          const { top, left, gridColumn, gridRow } = child.style
+          expect({ top, left, gridColumn, gridRow }).toEqual({
+            gridColumn: '1',
+            gridRow: '1',
+            left: '61.5px',
+            top: '62px',
+          })
+        }
       })
+    })
+    describe('when the cell has no positioning', () => {
+      const ProjectCode = `import { Scene, Storyboard } from 'utopia-api'
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 700,
+        height: 759,
+        position: 'absolute',
+        left: 212,
+        top: 128,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        data-uid='grid'
+        style={{
+          backgroundColor: '#fefefe',
+          position: 'absolute',
+          left: 123,
+          top: 133,
+          width: 461,
+          height: 448,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gridTemplateRows: '1fr 1fr',
+          border: '5px solid #000',
+          gridGap: 10,
+        }}
+      >
+        <div
+          data-uid='child'
+          data-testid='child'
+          style={{
+            backgroundColor: '#59a6ed',
+            position: 'absolute',
+            left: 12,
+            top: 16,
+            width: 144,
+            height: 134,
+          }}
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`
+      it('performs an absolute move relative to the grid', async () => {
+        const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
-      await mouseDragFromPointToPoint(
-        editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
-        startPoint,
-        offsetPoint(startPoint, windowPoint({ x: -100, y: -100 })),
-      )
+        const child = editor.renderedDOM.getByTestId('child')
 
-      {
-        const { top, left, gridColumn, gridRow } = child.style
-        expect({ top, left, gridColumn, gridRow }).toEqual({
-          gridColumn: '1',
-          gridRow: '1',
-          left: '61.5px',
-          top: '62px',
+        {
+          const { top, left, gridColumn, gridRow } = child.style
+          expect({ top, left, gridColumn, gridRow }).toEqual({
+            gridColumn: '',
+            gridRow: '',
+            left: '12px',
+            top: '16px',
+          })
+        }
+
+        await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+
+        const childBounds = child.getBoundingClientRect()
+        const childCenter = windowPoint({
+          x: Math.floor(childBounds.left + childBounds.width / 2),
+          y: Math.floor(childBounds.top + childBounds.height / 2),
         })
-      }
+
+        await mouseDragFromPointToPoint(
+          editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
+          childCenter,
+          offsetPoint(childCenter, windowPoint({ x: 280, y: 120 })),
+        )
+
+        {
+          const { top, left, gridColumn, gridRow } = child.style
+          expect({ top, left, gridColumn, gridRow }).toEqual({
+            gridColumn: '',
+            gridRow: '',
+            left: '297px',
+            top: '141px',
+          })
+        }
+      })
     })
   })
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index 41a8396967b6..9a9fe23d1c81 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -80,6 +80,8 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
     canvasState,
     interactionSession.interactionData,
     parentGridPath,
+    canvasState.startingMetadata,
+    selectedElement,
   )
   if (strategyToApply == null) {
     return null
@@ -358,6 +360,8 @@ function getStrategyToApply(
   canvasState: InteractionCanvasState,
   interactionData: DragInteractionData,
   parentGridPath: ElementPath,
+  jsxMetadata: ElementInstanceMetadataMap,
+  cell: ElementPath,
 ): StrategyToApply | null {
   if (interactionData.drag == null) {
     return null
@@ -403,9 +407,17 @@ function getStrategyToApply(
     }
   }
 
+  const element = MetadataUtils.findElementByElementPath(jsxMetadata, cell)
+
+  const name =
+    MetadataUtils.isPositionAbsolute(element) &&
+    !MetadataUtils.isGridCellWithPositioning(jsxMetadata, cell)
+      ? 'Grid Move (Abs)'
+      : 'Rearrange Grid (Move)'
+
   return {
     type: 'GRID_REARRANGE',
-    name: 'Rearrange Grid (Move)',
+    name: name,
     controlsToRender: [controlsForGridPlaceholders(parentGridPath)],
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.spec.browser2.tsx
index ed0edd56ee70..087d8deea658 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.spec.browser2.tsx
@@ -55,6 +55,8 @@ export var storyboard = (
         data-testid='row-1-column-2'
         style={{
           backgroundColor: 'green',
+		  gridRow: 'auto',
+		  gridColumn: 'auto',
         }}
       />
       <div
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
index 54971c1429bf..fdfcb3eb6574 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
@@ -46,7 +46,7 @@ export const rearrangeGridSwapStrategy: CanvasStrategyFactory = (
 
   const selectedElement = selectedElements[0]
 
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+  if (!MetadataUtils.isGridCellWithPositioning(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index b01d70f6bb99..2b47c4e806b1 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -728,6 +728,15 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
     'GridControls anyTargetAbsolute',
   )
 
+  const targetsAreCellsWithPositioning = useEditorState(
+    Substores.metadata,
+    (store) =>
+      store.editor.selectedViews.every((elementPath) =>
+        MetadataUtils.isGridCellWithPositioning(store.editor.jsxMetadata, elementPath),
+      ),
+    'GridControls anyTargetAbsolute',
+  )
+
   const gridPath = optionalMap(EP.parentPath, shadow?.elementPath)
 
   const gridFrame = React.useMemo(() => {
@@ -911,9 +920,10 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
                   countedColumn === currentHoveredCell?.column &&
                   countedRow === currentHoveredCell?.row
 
-                const borderColor = isActiveCell
-                  ? colorTheme.brandNeonPink.value
-                  : features.Grid.inactiveGridColor
+                const borderColor =
+                  isActiveCell && targetsAreCellsWithPositioning
+                    ? colorTheme.brandNeonPink.value
+                    : features.Grid.inactiveGridColor
 
                 return (
                   <div
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index 6c089afe8b5f..af022ad5a6e8 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -46,6 +46,7 @@ import type {
   ConditionValue,
   JSXElementLike,
   JSPropertyAccess,
+  SpecialSizeMeasurements,
 } from '../shared/element-template'
 import {
   getJSXElementNameLastPart,
@@ -391,6 +392,22 @@ export const MetadataUtils = {
       MetadataUtils.isGridLayoutedContainer(parent)
     )
   },
+  isGridCellWithPositioning(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
+    const element = MetadataUtils.findElementByElementPath(metadata, path)
+    return (
+      MetadataUtils.isGridCell(metadata, path) &&
+      element != null &&
+      !MetadataUtils.hasNoGridCellPositioning(element.specialSizeMeasurements)
+    )
+  },
+  hasNoGridCellPositioning(specialSizeMeasurements: SpecialSizeMeasurements): boolean {
+    return (
+      specialSizeMeasurements.elementGridPropertiesFromProps.gridColumnStart == null &&
+      specialSizeMeasurements.elementGridPropertiesFromProps.gridColumnEnd == null &&
+      specialSizeMeasurements.elementGridPropertiesFromProps.gridRowStart == null &&
+      specialSizeMeasurements.elementGridPropertiesFromProps.gridRowEnd == null
+    )
+  },
   isComponentInstanceFromMetadata(
     metadata: ElementInstanceMetadataMap,
     path: ElementPath,

From c9494254f97d18ec721a09a81ee395ddbddbf7d2 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 24 Sep 2024 17:53:16 +0200
Subject: [PATCH 048/272] Don't allow negative values when resizing grids
 (#6407)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Problem:**

Resizing a grid col/row can lead to setting negative values.

**Fix:**

Clamp post-drag values to be ≥ 0.

Fixes #6406
---
 .../strategies/resize-grid-strategy.ts        | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index 3b14208c101f..f78da315415b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -157,24 +157,21 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       const precision = modifiers.cmd ? 'coarse' : 'precise'
       const areaName = mergedValues.dimensions[control.columnOrRow]?.areaName ?? null
 
-      const newValue = gridCSSNumber(
-        cssNumber(
-          newResizedValue(
-            mergedValue.value,
-            getNewDragValue(dragAmount, isFractional, calculatedValue, mergedValue),
-            precision,
-            isFractional,
-          ),
-          mergedUnit.value,
+      const newValue = Math.max(
+        0,
+        newResizedValue(
+          mergedValue.value,
+          getNewDragValue(dragAmount, isFractional, calculatedValue, mergedValue),
+          precision,
+          isFractional,
         ),
-        areaName,
       )
 
       const newDimensions = replaceGridTemplateDimensionAtIndex(
         originalValues.dimensions,
         expandedOriginalValues,
         control.columnOrRow,
-        newValue,
+        gridCSSNumber(cssNumber(newValue, mergedUnit.value), areaName),
       )
 
       const propertyValueAsString = printArrayGridDimensions(newDimensions)
@@ -202,7 +199,7 @@ function getNewDragValue(
   isFractional: boolean,
   possibleCalculatedValue: Either<string, number>,
   mergedValue: Either<string, number>,
-) {
+): number {
   if (!isFractional) {
     return dragAmount
   }
@@ -219,8 +216,7 @@ function getNewDragValue(
   const calculatedValue = possibleCalculatedValue.value
   const perPointOne =
     mergedFractionalValue == 0 ? 10 : (calculatedValue / mergedFractionalValue) * 0.1
-  const newValue = roundToNearestWhole((dragAmount / perPointOne) * 10) / 10
-  return newValue
+  return roundToNearestWhole((dragAmount / perPointOne) * 10) / 10
 }
 
 function newResizedValue(

From ca31e209bdec018353e340fc275f34712e1500ae Mon Sep 17 00:00:00 2001
From: McKayla Lankau <lankaukk@yahoo.com>
Date: Tue, 24 Sep 2024 18:32:29 -0400
Subject: [PATCH 049/272] AlignSelf, JustifySelf, And Distribute Evenly Icons
 (#6409)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Uploading icons to be used for `alignSelf` and `justifySelf`, as well as
distributing selected elements evenly on the canvas

<img width="494" alt="Screenshot 2024-09-24 at 5 40 44 PM"
src="https://github.com/user-attachments/assets/e970fa51-ef36-4399-932b-021017d84f89">

<img width="252" alt="Screenshot 2024-09-24 at 5 41 51 PM"
src="https://github.com/user-attachments/assets/1535f775-be37-41d3-ab83-d22c14e244d8">
---
 .../inspector/alignSelf-center-black-16x16@2x.png | Bin 0 -> 698 bytes
 .../inspector/alignSelf-center-blue-16x16@2x.png  | Bin 0 -> 695 bytes
 .../alignSelf-center-darkgray-16x16@2x.png        | Bin 0 -> 684 bytes
 .../inspector/alignSelf-center-gray-16x16@2x.png  | Bin 0 -> 661 bytes
 .../alignSelf-center-lightblue-16x16@2x.png       | Bin 0 -> 687 bytes
 .../alignSelf-center-lightgray-16x16@2x.png       | Bin 0 -> 693 bytes
 .../inspector/alignSelf-center-white-16x16@2x.png | Bin 0 -> 643 bytes
 .../inspector/alignSelf-end-black-16x16@2x.png    | Bin 0 -> 608 bytes
 .../inspector/alignSelf-end-blue-16x16@2x.png     | Bin 0 -> 613 bytes
 .../inspector/alignSelf-end-darkgray-16x16@2x.png | Bin 0 -> 617 bytes
 .../inspector/alignSelf-end-gray-16x16@2x.png     | Bin 0 -> 604 bytes
 .../alignSelf-end-lightblue-16x16@2x.png          | Bin 0 -> 609 bytes
 .../alignSelf-end-lightgray-16x16@2x.png          | Bin 0 -> 618 bytes
 .../inspector/alignSelf-end-white-16x16@2x.png    | Bin 0 -> 580 bytes
 .../inspector/alignSelf-start-black-16x16@2x.png  | Bin 0 -> 608 bytes
 .../inspector/alignSelf-start-blue-16x16@2x.png   | Bin 0 -> 612 bytes
 .../alignSelf-start-darkgray-16x16@2x.png         | Bin 0 -> 618 bytes
 .../inspector/alignSelf-start-gray-16x16@2x.png   | Bin 0 -> 608 bytes
 .../alignSelf-start-lightblue-16x16@2x.png        | Bin 0 -> 611 bytes
 .../alignSelf-start-lightgray-16x16@2x.png        | Bin 0 -> 621 bytes
 .../inspector/alignSelf-start-white-16x16@2x.png  | Bin 0 -> 579 bytes
 .../distribute-horizontal-black-16x16@2x.png      | Bin 0 -> 593 bytes
 .../distribute-horizontal-blue-16x16@2x.png       | Bin 0 -> 595 bytes
 .../distribute-horizontal-darkgray-16x16@2x.png   | Bin 0 -> 601 bytes
 .../distribute-horizontal-gray-16x16@2x.png       | Bin 0 -> 591 bytes
 .../distribute-horizontal-lightblue-16x16@2x.png  | Bin 0 -> 595 bytes
 .../distribute-horizontal-lightgray-16x16@2x.png  | Bin 0 -> 608 bytes
 .../distribute-horizontal-white-16x16@2x.png      | Bin 0 -> 574 bytes
 .../distribute-vertical-black-16x16@2x.png        | Bin 0 -> 580 bytes
 .../distribute-vertical-blue-16x16@2x.png         | Bin 0 -> 582 bytes
 .../distribute-vertical-darkgray-16x16@2x.png     | Bin 0 -> 586 bytes
 .../distribute-vertical-gray-16x16@2x.png         | Bin 0 -> 576 bytes
 .../distribute-vertical-lightblue-16x16@2x.png    | Bin 0 -> 582 bytes
 .../distribute-vertical-lightgray-16x16@2x.png    | Bin 0 -> 591 bytes
 .../distribute-vertical-white-16x16@2x.png        | Bin 0 -> 565 bytes
 .../justifySelf-center-black-16x16@2x.png         | Bin 0 -> 619 bytes
 .../justifySelf-center-blue-16x16@2x.png          | Bin 0 -> 624 bytes
 .../justifySelf-center-darkgray-16x16@2x.png      | Bin 0 -> 629 bytes
 .../justifySelf-center-gray-16x16@2x.png          | Bin 0 -> 616 bytes
 .../justifySelf-center-lightblue-16x16@2x.png     | Bin 0 -> 621 bytes
 .../justifySelf-center-lightgray-16x16@2x.png     | Bin 0 -> 635 bytes
 .../justifySelf-center-white-16x16@2x.png         | Bin 0 -> 613 bytes
 .../inspector/justifySelf-end-black-16x16@2x.png  | Bin 0 -> 618 bytes
 .../inspector/justifySelf-end-blue-16x16@2x.png   | Bin 0 -> 613 bytes
 .../justifySelf-end-darkgray-16x16@2x.png         | Bin 0 -> 633 bytes
 .../inspector/justifySelf-end-gray-16x16@2x.png   | Bin 0 -> 623 bytes
 .../justifySelf-end-lightblue-16x16@2x.png        | Bin 0 -> 613 bytes
 .../justifySelf-end-lightgray-16x16@2x.png        | Bin 0 -> 625 bytes
 .../inspector/justifySelf-end-white-16x16@2x.png  | Bin 0 -> 605 bytes
 .../justifySelf-start-black-16x16@2x.png          | Bin 0 -> 614 bytes
 .../inspector/justifySelf-start-blue-16x16@2x.png | Bin 0 -> 615 bytes
 .../justifySelf-start-darkgray-16x16@2x.png       | Bin 0 -> 628 bytes
 .../inspector/justifySelf-start-gray-16x16@2x.png | Bin 0 -> 619 bytes
 .../justifySelf-start-lightblue-16x16@2x.png      | Bin 0 -> 614 bytes
 .../justifySelf-start-lightgray-16x16@2x.png      | Bin 0 -> 625 bytes
 .../justifySelf-start-white-16x16@2x.png          | Bin 0 -> 604 bytes
 56 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-center-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-center-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-center-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-center-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-center-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-center-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-center-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-end-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-end-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-end-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-end-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-end-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-end-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-end-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-start-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-start-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-start-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-start-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-start-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-start-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/alignSelf-start-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-horizontal-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-horizontal-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-horizontal-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-horizontal-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-horizontal-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-horizontal-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-horizontal-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-vertical-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-vertical-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-vertical-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-vertical-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-vertical-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-vertical-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/distribute-vertical-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-center-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-center-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-center-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-center-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-center-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-center-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-center-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-end-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-end-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-end-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-end-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-end-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-end-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-end-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-start-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-start-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-start-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-start-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-start-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-start-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justifySelf-start-white-16x16@2x.png

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..93f2170de29e3333756e7823b7213f1a677a2a94
GIT binary patch
literal 698
zcmV;r0!96aP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0QX5mK~#7F?Uu_8gD?z+ohsZJp?5eiLc0N-pxvZ&
zk}?7#bOa7??+6^Yfs~r6L~0dq8#zTn`7Tk6E&s&M1HiK|0+>jWB<#BGB!mcuxl-yL
z1VK@jWiuBifr-BFuQ;TbSldw05r_R;+y<Dy#Hqo&Bf|Iu*g}@Twzg~nY-{^1WC?6*
z%O=1zUcll4^idqgab|MBCOjJhg}B)GjZ{^Yy$Oh-NWmYe>-w2np951$U9Eur4g^yx
zGycJ^exLYV;02HZu#0a7TLDav*RhoHfY)z|Nw>osw_DS;Z4OM30$vY~92~KpCbaDp
gwr9EPUh%A#2ixFr{p)i)wEzGB07*qoM6N<$g5Vi7(EtDd

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..1bcf7fa8881bd343318d4143ca0856d852528d92
GIT binary patch
literal 695
zcmV;o0!aOdP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0Q5;jK~#7F?Uqdrf-n$;-w+84HXOmD=ne1$dI{Z%
zTitjAIRZ!UC?0`@BqE8GG!hd2TALvn(r?ucZ{X3HrUfiNhQLK60^IWr917%I&<(zu
zAfj|AZ3Zr~=LJL|L=`9pS+On$%b_#}e1z?gSU>@%0VC8UFsv<~0mItrqEiB++Hx8g
z6>H#+w&5<1Iu)WPv#HnBRUADTug`*Q-uH@eIC=8h^$HLUokD?qXS}J`)wLe0=v$f3
zAAGHAV0VEvpkaWn?GO?$p+1facLnzmf}FXWzeEb(i@}82z*$~AVvNL;n$WCQ_^#z6
d_ljk@yaCi=N?nm;z~%q|002ovPDHLkV1j~DF2Mi*

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..b398eeccaa7d8a890eb9c4e212ac79ea5a94c204
GIT binary patch
literal 684
zcmV;d0#p5oP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0O?6YK~#7F?UqpvgCGos>w@ndVMp0+z!KlLn@mqK
z58#7G@F+Wi?~t&D$U;aEM#@YK-xD^i{L)GbP}rFYh~S(zjIjqU8~x&{dJ7>YWZ8;i
zKtx^FFQpVW&$tE@bjRg&EA9kD*qd8i0%3FlQVFIYHMe8}Qga(iFa@c(B@>XFB4Bp`
z->bN7+s@<j^w|4EKg~Ffohv}WA3*_nZ~GqTJ-%5^z!2<)zLPOu@T;Fo`3s7G7y+|u
zz?M7#5y5sWrMzKF=GYa_t7*Y`U;rY50@lG}fJ_{!2xr$2Q!8X+dG1;%9G4IGcUmeq
Se%vYm0000<MNUMnLSTYBVJL$D

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..b65c9547424158ac655682c3920d8c3247517ed4
GIT binary patch
literal 661
zcmV;G0&4w<P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0MbcBK~#7F?Us!Vf-n$;55oYA;3&EQPN17uCeaZX
zfl(a64fKp?Lerzi@dydIFS!t2uI)>&e?-p86a*rKQ1R!&QT5V;qh<X$)~+NRH;y{e
z&K$?FMmxe$C$s})KpHTSErGSRFau<)trkrQOtnQCSQIy~x`F>u%-bpmIafh%jCq6c
zN<{|}+I%T5#0Hv)9n6}6AKBZGXX+*Bg(WY>cYzzw80ZpOOCU7Y@rk}S;=cd?yaVn8
vLh~Sj4j8kkMc5^@>{>xS%NJcM&USeNae6I|6tk|j00000NkvXXu0mjfaONLc

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa7bf50773590aec8fa6d0f584a20d49bd9d679e
GIT binary patch
literal 687
zcmV;g0#N;lP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0PIObK~#7F?Uu0(!Y~j;zat{rjKB&s(82~`0@wsI
z2^k?Hq=kkR7$GfC7>mS2BsezKnMjdek>Ygc`|+La0|EoXKm@;t1UKyDib=il6)|!?
zXJud91XSE{M1=Ii_P|zt*L`6Ts9>$+6)PB^6X1xk1g^Cu6X04~Tg)YJtSy}Y&jbO3
z3wU3}{3N)>WB=7IaB%Wd`Id}VVajk80)K=r*eiE)4``J7+JPp_fNp2hAN=aqCY*vG
zz(zpPu?XZK!u%Y^*vRKMl}TrH@)A>IAi_M5RD(wbPmHPwi;l&jSLnua&%F{DFHhd*
VLANOmg@FJ7002ovPDHLkV1jmUEv^6n

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..c82864bf183e22c9e3d5acd1589f9434c798ad4a
GIT binary patch
literal 693
zcmV;m0!safP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0P;yhK~#7F?UwBggCG!w4`cvG=n5wKzumx2&~8#Y
zNgcrv{I7{CbOZ-bDK<*d28EKNCWa>=fj3-y<&F;k&&CiyqG_72>$<DxhU1u0`V_5*
zqNrVqV}L~8_YXoyI*&Q$qjnM9(^?z_JW_>r1Pz!5tk9;wHn(U7Y;$XhNeZlTi)p|q
z-oWMt<WXEzRi>Ok$W5h--Eg;=H<Khu_F<r|YYu-Tj^p>Y<vFnA)YS^eIMA@PGV>q&
zI`1353%mgn1EoSM0154N90b967=~1|!z8tgu^f=l8kim)IXGfhMOZ2{ZLOd^%U#!s
bXTQ7vb{S!e7F!in00000NkvXXu0mjfhO8~b

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..6da6b2deff5ac6a890f1069716dfad4118337edb
GIT binary patch
literal 643
zcmV-}0(||6P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0KiE^K~#7F?U#!QgfI+-lj8<(gd6Eba1(VCH_#1q
z6i0A_7)8NHYpMhvkPm_oQvI=iN(x}y41y9w6!9bGh{jaIQ6gdsSHJ=a+EPjDH2(lO
zKfvs*`@qe7rGnS&EqRdMFM1$!Z(r*H6Y!iiWDliqfY5qh9eZ=g<E&6@8BM0{m>)!$
zr#A8Avy*j8As}GqfC+elfZCBOL5Ywq=;wex$8Svab3neH2hMhZjbxevYDZ4=iuS!g
d^on7u=>RXZk01vy4+;PP002ovPDHLkV1kY$7YYCX

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..20a0e5313c70c1d24c0fbc6d083406579abd0cad
GIT binary patch
literal 608
zcmV-m0-ybfP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0G&xhK~#7F?U&IBfFKZt&uD-~@ZF)Bp$%$-R%j^S
z8=(#CiiiRs)60nd4}3We??d!dqQ9fA5{xmmQmS{(Ra<D}(OPQ<5}*jkX%EF0G>@Ky
z2ocbpSVb8H9t8prC`pLeej&L6QT;+vKzm}B{Q{d10uX=z1U?}!d17Ni-fe;AI1yjD
uOQ9|y51iP4M*O02lo5U@t+ii21z-lkY$!QR*+X6c0000<MNUMnLSTX<jR5Na

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..42abb635ecd153d6cd351a0471db6fd1e1faaf37
GIT binary patch
literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HR4mK~#7F?UzXkgfI|Af4YU<dIWFQXXr({)~#;5
zf;aOBZUr?C2#yd8r6T^f3Pq86WT+6}=_q4{Uw)yhq#e0KB!hYfh@2Dxyo?#T3MR!n
zyg^6=vp`pHjf)cn4ut{~a3F<czmQu2%YGrb1>Q!?*e`epDL?@VP~a8<`6{B?m(D(K
zuR#4<Oq8RnL;E~3XZ#uc3ym|0KYi`XZvkll?prGzs@!G-00000NkvXXu0mjfb?yWi

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4285f1ebc378e0b9eff7297660057a5d8c9386f
GIT binary patch
literal 617
zcmV-v0+#)WP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H#SqK~#7F?Uzvsgdh-x$7K)D5j>Rmx@XuM)D5~q
zui~LPLMPBHss{-yn~LcFAgEz-K14?(dOISOptb%v=j!lUj6Vp`hNm>fG{nFsmEgTE
z=i<}1oP=1|A|O}71u>BnI2#B+;7d&8_6xQd$n6)L0&*ps>=#&s5P$##An*u*E)EPQ
z-GRJ)0%4GUG|*6}%FP2Y%gsnB<>^AKwPWqucLC@DY8g5${X|^A00000NkvXXu0mjf
D1`rF#

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b2f29bbb090bfa90abf0627c9e1d2ca16c783fa
GIT binary patch
literal 604
zcmV-i0;BzjP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0GUZdK~#7F?U(HdfFKZt&uD-~XtQQ$0?!Rvq0Jhh
z4NN1VLXh+_qWAd~$I<)X$ALtDN5vY9F`cz`aG%Xqnv_zkwH`@;D%Rk_`4H}DHz5(C
z0zNQMYp9^Wqd))xH3^YAFT_?LbzVqrK^v$==LHTS1Rwwb2z)|d4%DWMzS{!*<wriq
qWb}a(`^$)#EfvJ&t=X^N0<ZuQ(Jn3CdyTFD0000<MNUMnLSTYa;RR{{

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..44372410e880c39a91f19c9aabe1f7d2ea23e464
GIT binary patch
literal 609
zcmV-n0-pVeP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0G>%iK~#7F?U(HhKrj%7uVMfr7(%RL1{0_atY956
zgb_@jR78*_jrLT;`}~s2#rvcmmz3!52wOwlt3plGET73%8bn00%0x>HM7D+{Tpq$T
z=_bU2RX_(CY6%4tcoYagASNbU=LOpexXugCEl3SD>%71rga8B}0D(^kjE36a(RW**
vy!=Q9)gFD|#Qrjpol+DKnTs|1^;-aDZU`tX^0&cV00000NkvXXu0mjfV6Oux

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..d65bbc55a9ace2eaad9619cdb9e07fc252004c89
GIT binary patch
literal 618
zcmV-w0+s!VP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H;YrK~#7F?U&IFgCG!w57Ge~p(~KEPiN=`c7v|q
zJ|wK*2rd99MtvYAL_9Ud|9c|jxcfrj2t-du<N~a<ALrbE7*^u~AzCSAt(0nr0htT%
z-q&;SNC@FQ39*nBhy_=sD`Fxma5NBrz>AnD?H6o2P}(op1WNk_4j}{}009WxLZC}0
z;!C$9Zkxc6<eMalg?^=RAZ7U(8Dj#Sh}L?nefcc_J+~b?Av39V-T(jq07*qoM6N<$
Ef_a$*n*aa+

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..79c3ae8993d655df898fbe03c266a760f0c53666
GIT binary patch
literal 580
zcmV-K0=xZ*P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0D(zFK~#7F?Uqprz#t4myIpkN+}*(4pi__yN=4Sy
z$siB>kx28QiA10SGjDk%zKLazzM>A4BywWu3Cc9}V1^u6X)-VX18xR}<pnoTbkUL*
zZaHAh3tU1NfB_hQfnOLnl)e3h?ismbf@r!@xxuOflB=s*eLie({U=O+1>gi&@3jUj
SJzQJ>0000<MNUMnLSTZon)q@6

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..960a86d1bad1d2df04ab3f619df269ea7524760b
GIT binary patch
literal 608
zcmV-m0-ybfP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0G&xhK~#7F?UwBcfFKZt@0y?y`tMN9&<3?ZD>Rh<
z8=(#Cih>Bi&y47OK#=3q2R!kJ{tllLrIew9Xs!3ND*`XWt^}!#mYGLmOnroA8NJ-$
z6q9$yrw01VrW=inF(EHlps~d2guGyZM}YtYAOHaf<P=yev6%`Abk_srYu<zg*CL;O
uz}hRGJzXj&LI`|9AnJYR6o`7?z?T(104z3LX50z@0000<MNUMnLSTXuf(TIn

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..d38daf6327d76402e1ff19d7c09d7b24f460797b
GIT binary patch
literal 612
zcmV-q0-ODbP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HH}lK~#7F?UqdrKrj$Sr$}ra!Ofh(f;C$<uHa^l
zU@JlWq!A%fsw(1ptEQRGyv0m9M1O}Zr>Nm%lH8qZTLfN)Nh9JmAl?<@$rCpfF*~8m
zDV5?j$a{cy$tvlDFAAx}T^5)U?eT8JT^4v02tWV=5P*PAfqHkt#vjp~Kp$=j*3|Z?
y?3H{UINBA(PInhHAp|}lpfuka1=QvnoMix%87>+cHiS+90000<MNUMnLSTX$tp#=f

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5bd477faab5d9c8bc5785412c841ec3513e2341
GIT binary patch
literal 618
zcmV-w0+s!VP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H;YrK~#7F?Ul_9gdh+`hs_pX2^K}TZVlUkc3=s5
z1&Xo+D*(~xg_xid)EK{)5PmYlyaN-6-i}xoQc6!3Vy&HPe+b-+NChaRe$KfjEQ>io
zh(3%;Yu$0;Vv=vbdta@WF8gvR#ERnxlpDtdH}0^&*+2jS5P$##ataLb!So}hlClYe
zV*jY%BvhyJzLW`LOdF<_4uVGrfkz0i`a7Edx4*$&MgmVgZo7n|%>V!Z07*qoM6N<$
Eg4%5ehX4Qo

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..43d57b22c49d9801915f704ea54a00e46c5917df
GIT binary patch
literal 608
zcmV-m0-ybfP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0G&xhK~#7F?UvCAg)j_7lgAst5!}ofoS^9jj-Z=4
zf*aIS6hwsDS{3o0pO%m&=Ocj<eH~sdBI4*qwBOYGN8n*Nlwhr`oO6v{i#gOYvlwH#
zl)Np$8PKA#D(WfcMoD?m0>02rtT>SuEpRCifB*y_0D+tW!%nQH8wKi3LoZ}QkN%Vi
u{o}QIv=j-35CX3dNZRk50!jM~jxqv98ZhmisZrzr0000<MNUMnLSTa6YX=Mf

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..126b17b52b431686d2614f2567ddffcf654115cc
GIT binary patch
literal 611
zcmV-p0-XJcP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H8@kK~#7F?UwBgKtK$JTN4<;5MmuOn84Y<3f2)r
z7{LUN6A}?}?!$?ApI?`z*FHbmq(py*w})t@q=1Nwm);S9mtkE()yZ6rRL{?N4fPz6
zC{u21@{VX{U@j_lMHR`~$STiRKovTP#SVGK0*?X#2tWV=5b!B5oWyzxC{P?4DxpgE
xNqY}m-HO{y=L&`p0-q4D+Hao%R{IU^G657^EGi&-$cX>|002ovPDHLkV1f@y0@?ro

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4590d23077054516a6aea488edf5bd2ca73c0829
GIT binary patch
literal 621
zcmV-z0+RiSP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0IEquK~#7F?UvCEgCG!wfe9R;E0C~HXXplYgRanh
zNLZmGbOAsy@<KGHCu)rU_e98l-1h+Cgt$90FRZmu9EdSy=&b}e8A%14b5HO6r(ZTh
zfs{X`RI9cAa&jf)9S9+``Orj+@i8`H<yH%%gC@2cZf>=}-ar5X5P$##Y6|?zjr1c@
zMb!lQX0M`Q5_*$$RA6pa%ro6qa0wxB2?5sot|q{J-(V>nU->>B-j-FW00000NkvXX
Hu0mjfvHuK(

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad454f10a5f7a5b815f5862a2ce98ac97fb93685
GIT binary patch
literal 579
zcmV-J0=)f+P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0DwtEK~#7F?UmgMfFKNoXD^y>Zf{_3u;zsXX0(?5
z;rT$6G32}0VMM*-@`D9>5GSO2An<i$G)6g*S3;^;`z!*1w?u1SiBkwv(~+n6Y+uRi
zDS!Y3AOHafv=o>twTZ66J5>67u@Td1_DBCW+lE#!gb?_Jz&-iaV$C<uvH$>owFW0u
R>5u>b002ovPDHLkV1lJX{80b^

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-horizontal-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-horizontal-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb95baab2754c958ae45e98a1db4b13e7ded0256
GIT binary patch
literal 593
zcmV-X0<QguP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0FFsSK~#7F?Uu0(fFKY>KgIzZ!JeU<!3}f+N6?|@
z9l;IoNUR7UIfBsqms}{W_%A^50rFw3^<nTcan69wP+)`-dB4RNb9nEkXm!hM&bbQ;
zN^W3Fga>As14>E+=FDzF1A(egfC3bt00k&Off9iyv%AqiU`+){O$%Z>l&CwQbiPxL
f6P4g6>@GlFz-b%&4v3%g00000NkvXXu0mjflCS<T

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-horizontal-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-horizontal-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa22295ff2d942eef61b2ecf940c901437ded78c
GIT binary patch
literal 595
zcmV-Z0<8UsP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0FX&UK~#7F?Up|dKrk4^pFfMu5!}of49u)7j=;?v
z!74$Oun3Y*XqWd(+BA8?`=#yh0puVZ)V2)wxUdWbd`QX07;38ZDLf?|94|-dw-6w|
z0X5|p<tx!HCgRN#L=RaA0|K8y0SZun0u-PC1>Oksw~3>tqW=Zv<ff>{I2RBip9!m=
h(R+iB;3u>$Ko)=<AGe)u%1{6R002ovPDHLkV1k>p|1|&r

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-horizontal-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-horizontal-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c0431b180987d764e6d988d543f807d06bc3e76
GIT binary patch
literal 601
zcmV-f0;c_mP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0G3HaK~#7F?Uu0#fG`k6f5ZVC!J$H0XK(}Ez!9`f
zmU09qNK7Dw2nr{LH2=Yoa98|CNO1tkXstsk6y~1OpfVI_A;cInc<+~Z?XG>L)E;ZH
z)@~3Wet{6ebPvz{K8uO?BGA8#JCqjq8wyZ>0u-PC1t{=E;CLFOtq7$BV#xRql*DET
n5$}Y~xiuaueuAH{x&S!=AxtJ@s#fa^00000NkvXXu0mjfhX((=

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-horizontal-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-horizontal-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7531010a7ed713c5f64d2f54747ba1ae04e7d54
GIT binary patch
literal 591
zcmV-V0<iswP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0E|gQK~#7F?Uum}fFKYA7h?gIU}x4~1sok%f_7#J
zc7TxhB1&=u;j@zvNcOQ4;Bf$X5D_02ekSc1&>0GhP~x0hy!Tr;PDykcW5il}K!N%O
zLb<$@N9IRNMadJ)nQTG>fvQk|0u-PC1t>s)5`im|ooFDieiTJ92PNv6FwFFO*mhKc
dpRl_Cxd9uGA@fe8pRE7@002ovPDHLkV1g5`_{9JK

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-horizontal-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-horizontal-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..0fe8a80f9315352ffb092cb5c5327de06a66bf59
GIT binary patch
literal 595
zcmV-Z0<8UsP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0FX&UK~#7F?UvCAfFKk_uh9UF&=Ao&&Cmqd28~eb
zL_;(}6J!c~MF~$#f9?TMxF7eRemsEO=+zjv@H5Yz0-2#e2_fTVI&)&O$LbO7s(>CE
zwLpOQ25h;0DR<Pjn23-ks6APQ1Oic^00k&O0SZun0wDs2C)<%gp#LaxVk3lzXF}bo
h*={o;!B3c7fLs|}Ax@i7DSiL|002ovPDHLkV1n-o{F?v(

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-horizontal-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-horizontal-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..d53c4bab49eab017ea2e73462f401016ce780972
GIT binary patch
literal 608
zcmV-m0-ybfP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0G&xhK~#7F?Uum_gfI|Af5H}E3EM(QL0iLi;C8Sj
zXg`6pU<o#m#0+>4L1Dz;<v$1snZth!a~OcEgb<1xG-jV;@h}v4K}n49lT!NEXSe+~
z#!S}Q-Z?iyfw}`Z=YAh9lv3WSm<qLk1f7&Sv=+D<3Q&Lo6rcbFC~!q!J}Ssogw_Hz
u<a-b#Vm~NR?}Xm_p<V-Sf<ySY09gR9k1Cd&IS4!e0000<MNUMnLSTZ#r~)DY

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-horizontal-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-horizontal-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..b5a8b35fc2576be2712e8116a6da053a683cbc7f
GIT binary patch
literal 574
zcmV-E0>S->P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0DDP9K~#7F?U&ICfFKM-Z~bWgdHsR?foUv=O52Pm
z;U4hCId{N4On?YMz{?!#^!OMGm<8hV4RQH!W=t{EqHRJcl*3!=bo;=%5xKjd6xZf&
z=h%c4pa2CZKmiIgDKHme6KXL`L@qNGr7_JZ@~`V?1)jox!S4jf0zNCMQf37I1poj5
M07*qoM6N<$f)>m8nE(I)

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-vertical-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-vertical-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4bebd133b87de2ed15a6380c9c03235b7562169
GIT binary patch
literal 580
zcmV-K0=xZ*P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0D(zFK~#7F?bpE#fFKM7(AEhU!8=1agB#!mtl&`G
z8Nm%|G4Up7kl?}pk|rcg({i8*M1RNU!CEWSQ3&DaJrDrE$2gbJ%{Vc$7ZF46L=C5#
zZ@o&EHlb_KJQ+27E;-y3wqj}q=mG<j2H2>bNEHLjrNXE5DW{7p1OSkMpAqa~xEdI4
SP0M}&0000<MNUMnLSTZAB>2Gq

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-vertical-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-vertical-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..5227d874e854b882c1cbcdffec02bc3762db91e6
GIT binary patch
literal 582
zcmV-M0=fN(P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0E0<HK~#7F?bk65Krj>r;J-+$j^Jj_U|?otaRoPX
z1giw4A|`E8ni~Ay^pcmC_jhQM0)Hp2s+c5vYU5*f03xD~32mpGGsvaes|4>15MhNT
z>hGHRmryR1gXKzk9t3s))Sx@blK@^YfGNNTSHyl3>;tU1Y0$!md96W2q`{vNZTVXo
U3bIiKRR91007*qoM6N<$g1e6T`v3p{

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-vertical-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-vertical-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..23201445ddfdbc5a3284261e70e2dd807d94a3bd
GIT binary patch
literal 586
zcmV-Q0=4~#P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0EbCLK~#7F?bpExfFKwJ;AaywLPLqyW@v-jpcT4`
zLp4GZXcl%$K@>amJ`e=a|NRFAfxi>aL`vz<kTK@2-GPYcV<NVolp3wItDp8LDImn|
z$E>y9-qxcpp>u97EgsGpLL<lxFrc13J3uQ8kP2|1lItcQH-O(Xr8Z``8d*R@6v3Yn
Yoy|@o5+&W#Q~&?~07*qoM6N<$f`#DwuK)l5

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-vertical-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-vertical-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..b888a4b176e7464bfd79819b5a3ab7cdd325dd4b
GIT binary patch
literal 576
zcmV-G0>Ax<P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0DVbBK~#7F?bpE#fFKM7&|fET1UGXAC!lQL3U0;-
zZh&C)CL|!iga4hHG);dmBmjRWccH2t9ff`8?g2zZACpwWT0491*HDgl$BBp<W45Pe
z@+Az*wZZaex(-26fH;VD#+m?KFhDNAj&>X>0xY?~0`U+FBBBKTjOYLZGaVAz9`iK-
O0000<MNUMnLSTY|1M{o^

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-vertical-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-vertical-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..0fcffa7864387550176095d82b9f2e4b3d70a037
GIT binary patch
literal 582
zcmV-M0=fN(P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0E0<HK~#7F?bksKfG`XN&|efF0TBc{Xg~qO0T!@B
z5P<{~Fg5}=wq#=&2mU)XX`23CmJIkixeGOGjf_+y=k5YTL?07ZV_0;ncZ{Yi@y;p*
zRA0;V)O5atX1PkR+^Via5EQ@;BAqfOKo$((3$P)b6%heC-(UcH$N(ZD2mXxc09QR4
U5_`FvQ2+n{07*qoM6N<$g5o;xIRF3v

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-vertical-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-vertical-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..a14dac6e08955b5db4aaf658f7bc268b0ee93981
GIT binary patch
literal 591
zcmV-V0<iswP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0E|gQK~#7F?bp!>fFKkF(5n+PLMsUF(+q7;8?-|E
z2(HiwEufZBe;G((AKmjMJRa}94+Vk06W75Q6Ht-X`j{<2MD#I{Dp+ef=iIa(8@w4H
z#3H2}lv49uJ^2!P?}xX;qYy%SE`qE8u@U7o*#T-{fTsW}3W+xXxdHa3{;4rTTx0|h
dQ38KPv;jd9BMj<4iemr(002ovPDHLkV1i_Q`GWue

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/distribute-vertical-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/distribute-vertical-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac38e63e74841bd6e885e6ee00681b11974a97f7
GIT binary patch
literal 565
zcmV-50?Pe~P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0CGu0K~#7F?bpE#fFKM7&|f!j12=O9M{rWyKsLbk
zz{P|nXrm_nmk_uBpGzBnzmvKs3J(%x^8g~EuhPOe>)6YE$<AusBTj&%(}WmVEANQT
z0HM91*8a2CdjSJ@0W#ujxDa6RHg>RwtRNz4;LnH-ghgZJ_GZXS00000NkvXXu0mjf
DTBP<9

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..da0d7558fae256128c0ca19d5ac451facbc04e1d
GIT binary patch
literal 619
zcmV-x0+juUP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H{esK~#7F?Ulg|fFKYA7b~y?{uE^mc7Pq&f<^JC
z1Uo?PEyhKIMst(gZvzu@Spek*&bcIm8+3RX6;J`ggz}~j#+W&!)Pp1D@gaoeEXclq
zuee;Wd1fZa3Ru)b34dk@SJV@k5GydU2MT#%MR-DM^e^~@z^(}|v>r=Dp&d&v;2T^n
zSQOf^I|#O-X9OOlBygqmSRx34s@7v^(vI4MD)0*dWdl4oEj49v_W=L^002ovPDHLk
FV1i}G1!n*N

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4efe18981c87346777cf3a52f8d47220786c1b6e
GIT binary patch
literal 624
zcmV-$0+0QPP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0If+xK~#7F?UlU=gg_8RzxA#FOR%%6;exwZQzKij
zGfOZP)b$552mA(IMVSYJ!Jv=b<t<?B;n(>2*+GPhF#!{B)YQNIz<0&?7K5XLd!@+V
z<<=m#0=`QXKc7ez;Z4{rNT7!jzRe-5p~a2o;5dQ)%YJa7M%!lyj@<=M5LlN`Up*GF
zj_VcBSC2)kV<ZlSBW46nMH0|gk41=?AfT=uOMp6B2~FS$0>%IonKq~S6P?5W0000<
KMNUMnLSTaOViG3+

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ad9e2a3f03ea7f2880744ba3a5e355796c2bbe6
GIT binary patch
literal 629
zcmV-*0*d{KP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0J2F$K~#7F?UmgLfFKlwuT9Vh4kf-eLmSivt<bAe
zH9`|;3ch7{F8xv54+I|$`XQGik#GWIOh}7P(9p|>fCwlgWUcMI_fy=qNM0$m#5FkQ
z=2{kdfe^xgUY_$h3s*q}H1UCiKQn|YF-dcP<RF1~SdSi<Nx~!Djr;|_5ZE;#xAowQ
z4%%_|0^HU^Icmp}fTsIss{&6`5@5F;N~z46LWtXXDA%{6G@%ImLO|F6s*geo@4YFk
P00000NkvXXu0mjfPS+5q

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcb1ba165a417bacf357503bc5ce01fabdc42be4
GIT binary patch
literal 616
zcmV-u0+;=XP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HsMpK~#7F?UmgLfFKk`KbxQt+^iXz!0QIB&}NR%
z2A0rULZ9|Wat{POT=JlC1e6PiNK6kd(BWfLKm`ml<h>tajMMhogCiJY#5p&g4N^O>
zEiMI%C+seK3VQ?=<xs-E`3V=46PO`ZU}QhIlY~8<M(=_q1P&#vs2)qUj)xtns2)qU
zj=3YSc#fVCc$J($P4!p;2!Yb-vD{xrEujiDA)u^!%{e3PznTO90000<MNUMnLSTX|
CMF$4}

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..dd851c79a36e8544f721e602d36332e6219b51f9
GIT binary patch
literal 621
zcmV-z0+RiSP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0IEquK~#7F?UmgLfFKk`KbxQt9HM=ip$W1LTA_8K
zAsnFzvV`6e`m{fidm!lHk_U|=AY8zV&iMxyDDW{NAOeaR>Lypa1^xC~g2So;rmfU)
zHc0Kjwz!E{+@p8lQ`jTWh=&sX%}+QZ9?J}|0uB4Y9WUJBY2+@*Lf}xsgzB*b>v-6K
zgzB*b>liu$jpryCfmaC$q*RZ^f)I$U9?Si8loE<S76QTw=<+w&08=YZ00000NkvXX
Hu0mjfojDIb

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b8a9dc091e8c6c52a90978052e4a32e5d7e9078
GIT binary patch
literal 635
zcmV->0)+jEP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0Jup+K~#7F?UmaJ#2^qw$EhGCYztPjHEajj4z`8u
zN3ex0VH;4Bf&9hb9r7Y!4hVi+#)HU}$XG!Lp~#{YFrADEn1Dk<F~(;~=`(ISB=4O2
zF>~*||F*Kw4dk4A^l+h+@|c91Kmsz5^gzOwd4zvbBJTjnK?38j7dmi4gx|C`_7~hj
zVAh1%)`JgPXvf(NXj>0usU5i%r2Xic0!LF5P`4gRt<1O*(zYJT_U&j*XactoFa}(?
VN^dRaPIUkP002ovPDHLkV1j@57gqoP

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8acc3f050c1c312ffda386a05d5433809bebbe9
GIT binary patch
literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HR4mK~#7F?Uca{fFKM-KW^X#ZsrV*;H0>LZh$r6
zU<if}XhhSO5Dt{)9oi2l6*vzn=<qTspaPVD4EiW%bpfaM5PST=UHFE%tW0mi6qW9}
z5mGgu8Nv<uEKCtAFtH6ihwzN23AdpH4Wjl0u2L_?=?{Z-k#sZ>0V~&lXV@g0dL#s@
zraDEKj!h0>N$RmIAOvz#kLCV!)Ff1aUkE5WZvE<N0(IOe00000NkvXXu0mjfD!T>8

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..66b91617ff3930847145ec7b03ddc80d5fe012bd
GIT binary patch
literal 618
zcmV-w0+s!VP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H;YrK~#7F?Ul(5#2^esKcguiC2*&xsbM-G9i)X6
z#hnt;0f9quh_cug*(5*72ZX>+$oc@v#W?3uscHSe&8UD1e8D77@Xr|2rIZ@tk(kSe
z5c;)E$qRT!^McLQZEZ>fEci4v1*#$u7{Di@qQHOe!X<fNi*Splpnt*R1m+|ZBpj6p
zViNijninjHNoa8%??^&P!cmDJ2(S{4iYDO^Dxd<&2w8+JJN>v1Pyhe`07*qoM6N<$
Ef<U7R*Z=?k

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..587fbe287d8668d6b727a2b6639c4109184dcebf
GIT binary patch
literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HR4mK~#7F?UlO;fG`wAub%-N!Ofh(LThcUT*1v8
z!B$Y?2f;?<U5Ogu9T0?&<PgFMpuA1io9)~2@i8i(0wGxPA%Pj|<u4M>XyF9~s<1g5
z<WIni1+n=`ybHsQz`7t$WK+N@cLX}Hc*{MoCorW~3!cznm`XT<z6Guc93|unCq-C7
zzHm~+C5-VL|0p3}I4QCc(uI?vCA>rhR6v;l2{tyZ1>1xK00000NkvXXu0mjf1&Ie#

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..32094c00018b3863dd6d30f20878838af42acb88
GIT binary patch
literal 633
zcmV-<0*3vGP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0Jcd)K~#7F?Ud08gD@0DZ%PMn1cwUw?F`+(ZqO0z
zZ?aTJ=mbd<uz$AP7ampN9SAB3@gU{^#-H)tmo`4nCv1!fn7|oALI{_f^S#~<%zEeC
zvyLgo_*k14e}PiU#J+r4KQ6-15*Q(8P!rImN8kk^?LUB)K;7*6Yr_?q@a@~A_!Oj+
z=6ac-goS87C6pG9g)X7Aa4d8QI}68hj1r0q$3m5`qi`%-3AGEyVj(ht%>|4%&{ROL
TO)FRD00000NkvXXu0mjf?++C6

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4b114f7ba039ddf566d7a6d5b068ab680a45e59
GIT binary patch
literal 623
zcmV-#0+9WQP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0IW$wK~#7F?Ud~a!yptzucZTIglyIsI)Tp(Izqac
zBXk3+(Edxpee&`J??6a`s0YCVI6EUEr9J=u8xF<=T;L8RDWyj#<yAiia!L*%NR074
zH>f^=y16JeZ;U@-m<Y55p=YoZFr`P}13ejr0?)MtXK2D{X;6I&YR9MgnqY*7=sYFt
zC>#q{!j8hR&?OwP9oHyfPvKZH2mx*3Shx~e7mme4<N}8aI9~@RG_`-RI|~2+002ov
JPDHLkV1f`~2S@+_

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..42ec86ee68ae888082d851442562a688a4f63fb3
GIT binary patch
literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HR4mK~#7F?Um69fFKk_Z_xma&=Bp@3{8-2&<d>+
z4dDn)kSSDOBJYWn!8;Hnq8|J>0>aCv#TfTp;}Rbu0wPd>$+()%?3nCtO<baj5^89R
z**D3)0eiS&9PVgNVI&c78-h=rQXnZY0vq^fBoydF8+vfUBXU9Bg6stD5=In`3ax|@
zg`+|)VT0%RM+svJM@54mz%3jVDPa&15CP!;+ITnLq1yUI00000NkvXXu0mjf*4zVI

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b9f5fad1a9baf6dbc69ca189b8b5319a813dafc
GIT binary patch
literal 625
zcmV-%0*?KOP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0Io?yK~#7F?Un5bgD@0DZ$bxfgszZ@Izu<G8+3*4
z6UYi3p$jCb4_beT+!ul$@D2!y@;roa0vH<;W2|!hpFMWQ1We!pB`Kv_&iOgr4$Sw?
zxwrRz3?aOh-m6!jlrpkE7iz87pD?-z$Ux{Bx(W2AMc@M^vJcQpU>bH`8@PZ7KX4T6
zEI6FNTtaQ(Sm+XJ3&%p2u(5C~=P04Na4b{_8w$r_C0xY>Ou+a832#bukQbC|00000
LNkvXXu0mjfvib`Z

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4fcd7ab13bdb10dc044d21a2f308b4c51f246715
GIT binary patch
literal 605
zcmV-j0;2tiP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0GdfeK~#7F?UmsPfFKY?Kii-U+N>EGp-F9n+Q2R_
zI3eUttQ77+gg?&S4|@W}$Arke9`G|JU;=6ZI>0kMdywO=8Pp<fsAXsK$#3YOgb!<Q
z1fRdxT^_;%dNx!PSaKUaa0#zy1-lE{6(}g26dy7rbWFh0Yr;Dm)SWSYCkYW3C@P$k
rE=pKZI4K(h0@}h!u@Yu60TVDzA^8qr)Y?1>00000NkvXXu0mjfR`&eG

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f8de1d9823038b018d32c8d2c73562683f6fc44
GIT binary patch
literal 614
zcmV-s0-61ZP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HaAnK~#7F?Uk_&fFKY>KgIzZ!JeU<!3}f+S8ynL
zMsNd!#KK0rZwMCLORh4(7XlAJxv<uTG^k96pHTr7=$}5s8!;JUwh+Pq89vV9oZCT=
z+ku7nd18#Sfuws`kcAO`6{tc^-~f*YNlsv97K{fr39tByz6H$+lq{hXk6STImQc!w
zTQN(QP|6??s6y!yO7Rc~P$iV|SWGRU3N$OAoRQEiJFfpdRR91007*qoM6N<$f<~7E
A-~a#s

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..27dc3fd271a80c1efa11fe84c4cf56d2553cb5b1
GIT binary patch
literal 615
zcmV-t0+{`YP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HjGoK~#7F?UlU=fG`k7KYs>r1UGXA3$3-aas@YY
z1Y1FkKPYGsy^|vr-h)6OkUT<o0hEKRH`{QGkB?CS6$q^>`H;Yj^)ib<qlFg~sKN#e
z>^ES>f^qmtybH7NZ#U$_5q=bK!ks_|F5dDE<OHUaxnYN4D)Acq3;rq~Swbq8VoH{f
z%B7gnC8QEj1e_pSLMo@gNtTd`rI=bm75J-wG6Ry}Hmyz#vC{wm002ovPDHLkV1mOH
B1@!;`

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..e967e31bae2a6a904bdd7a6fa1b91b2babd6f1d6
GIT binary patch
literal 628
zcmV-)0*n2LP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0I^9#K~#7F?Ud08!yptzub~5EgbXGAc7|?{ZqO0Z
zUtOvrbONn{A5B2>9vB1R9gqYP^dNcwA)~bpX`nL$PDTVo;8yxzjJbR7U-5MW0j1O@
zj@erK27}@bgb-%x;`#q63$v&ROyENn-WBLYP2dYA=^TK`P?_w(oG=ML!K8Q#oO4Tj
zEI1em(RE5lWn0W<C8V+~X6q7C8FvMG(X@nA{sY&tgj80=loE=72nau3SwOGv*`LY)
O0000<MNUMnLSTa9?G5$-

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..1889700e7d471e0a7de95e956121bbfbf48b6198
GIT binary patch
literal 619
zcmV-x0+juUP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H{esK~#7F?Um69!yptzucZTIglyIsI)Tp(Izqac
zBXk3+kRLxZ?}9N9-hq%nKo5#Xz}OLyR31#`fr~K#6L_|Mgb-dSrBD7`pd&ix#C!h*
zL30K2<U&kdSa)HH-WIIjVT2C_rqC1kfhU5bC-5c*EW!aK%~O!?g)P4}oQ#F&RwdL@
z6?0?>wN%9%T|zC3Mqmn~OQ<D6A;6YUOI1uOp$V9P@dwORG_~)MT2BA~002ovPDHLk
FV1o8u2Z#Uw

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a96b95451387c4f10c6f3b5600e9c9112738979
GIT binary patch
literal 614
zcmV-s0-61ZP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HaAnK~#7F?bYE4KtLGA@rMjx1Vh-z3?^_ku!41D
zh#SEKjw@dj=Y4dY58huXrT9lZ0Cg~vbN)bLIX<QV8c^I_=x5is6~lg7LdIq}Ojl<k
z2)A!wf4CtY?o~%HCG-g@@R;DofFwcz3wRc!P(VxG&<FQ;OaBGG4T!mfQm4g?xr9=u
z#f-g#Ql%syiP%dhWg!S)mr&|@F?9(w;I{#418QG4-xLk@-~a#s07*qoM6N<$f;n>r
Avj6}9

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..a90100c0fe42433912faf4c06d3989565a540544
GIT binary patch
literal 625
zcmV-%0*?KOP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0Io?yK~#7F?UmsP!yphwKaUQO5xRmCb%t(`ZqOCF
zkKhU&p$n+3kRK%^<}MuONA5u&Ae;}8Ctys35K8^f8N$JsfC*gI7GjLIl+yF}JAi?6
z?oC9a_x=R|t0$0i9=V%WN-5V#SOm2OLJnJaQ=k_ufe(b#djKKS7<Ly9tiliM#omI`
z3aFKk%e<IsCFC+MrgjOr44VSIP%R;s|G;UMkjrv0t%N3US^?t=BKAsktzZiE00000
LNkvXXu0mjf8r%%`

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9bfd13e0ea7f00924f62e51443ab3d2856c159b
GIT binary patch
literal 604
zcmV-i0;BzjP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0GUZdK~#7F?bP83fFKYB;8z>8L7O#0BQ&XPP#f44
z1|ns5f);ikL=>p+hxY*GSO<l*c$o&!0Ji~XAO?CC%V+jANEMEu+fZtOP~!(Ueh~j#
zyrEmq_32BvLT-joEWjw-a1T5oRd@+Y(ITp<3Av2*8Z%ZzhF(4LSm~JVDL~eVIM1oB
q3Atu40!W*X>$)+u2{piP1E>vFQx0JwOblZH0000<MNUMnLSTXx4gc@}

literal 0
HcmV?d00001


From 26dcb89ead497c60e206ab4e958b479cb75afb06 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 25 Sep 2024 11:34:11 +0200
Subject: [PATCH 050/272] Expression editing in grid row/column controls
 (#6396)

**Problem:**
Instead of showing the generated rows/columns in the inspector, show the
values from templates directly, and allow expression editing there.
This means `repeat` expression affect multiple generated rows, and this
is displayed in the row's label:

<img width="268" alt="image"
src="https://github.com/user-attachments/assets/72fc8932-5191-4df4-b2bc-92ba7575aac9">

**Commit Details:** (< vv pls delete this section if's not relevant)

- the logic is much simpler this way, because one control is directly
paired with one value from gridTemplateRows/Columns
- I could delete `mergeGridTemplateValues`, because the only source of
information now are the template row/col values from props
- New GridExpressionInput component
- Some logic to calculate the control label, because now the generated
row/col index can be different from the index of the control itself
- changed how rename/delete works, because the index affects the
template row/col from the props, not the generated row/col
- deleted flex-section.spec.tsx, because it only tested the removed
`mergeGridTemplateValues`
- Renamed Rows and Columns label to "Template Rows" and "Template
Columns"
- Removed the ... menu when the input is focused so we have bigger space
to edit the expression:

![25-50-i20ib-aftoa](https://github.com/user-attachments/assets/9082bd92-1964-42d0-851f-773aea6e796b)


**TODO:**
- we don't take gridAutoRows and gridAutoColumns into account at all
(needs design)
- the control is just an input, we don't show a dropdown to choose from
allowed keywords

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../components/inspector/common/css-utils.ts  |  16 +-
 .../inspector/flex-section.spec.browser2.tsx  |  20 +-
 .../inspector/flex-section.spec.tsx           | 156 ---------
 .../src/components/inspector/flex-section.tsx | 297 +++++++-----------
 .../uuiui/inputs/grid-expression-input.tsx    |  87 +++++
 editor/src/uuiui/inputs/string-input.tsx      |   3 +-
 6 files changed, 231 insertions(+), 348 deletions(-)
 delete mode 100644 editor/src/components/inspector/flex-section.spec.tsx
 create mode 100644 editor/src/uuiui/inputs/grid-expression-input.tsx

diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index b48f81e170ca..feec3148dc00 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -652,6 +652,21 @@ export type GridCSSMinmax = BaseGridDimension & {
   max: GridCSSNumber | GridCSSKeyword
 }
 
+export function parseGridCSSMinmaxOrRepeat(input: string): GridCSSMinmax | GridCSSRepeat | null {
+  const parsed = csstree.parse(input, { context: 'value' })
+  if (parsed.type === 'Value') {
+    const parsedDimensions = parseGridChildren(parsed.children)
+    if (
+      isRight(parsedDimensions) &&
+      parsedDimensions.value.length === 1 &&
+      (isGridCSSMinmax(parsedDimensions.value[0]) || isGridCSSRepeat(parsedDimensions.value[0]))
+    ) {
+      return parsedDimensions.value[0]
+    }
+  }
+  return null
+}
+
 export function isGridCSSKeyword(dim: GridDimension): dim is GridCSSKeyword {
   return dim.type === 'KEYWORD'
 }
@@ -1007,7 +1022,6 @@ const validGridDimensionKeywords = [
   'subgrid',
   'auto-fit',
   'auto-fill',
-  'minmax', // TODO this should be removed once we have proper editing of grid template expressions!
 ] as const
 
 export type ValidGridDimensionKeyword = (typeof validGridDimensionKeywords)[number]
diff --git a/editor/src/components/inspector/flex-section.spec.browser2.tsx b/editor/src/components/inspector/flex-section.spec.browser2.tsx
index f8ad05c41e96..1cdcc970fb6d 100644
--- a/editor/src/components/inspector/flex-section.spec.browser2.tsx
+++ b/editor/src/components/inspector/flex-section.spec.browser2.tsx
@@ -53,29 +53,19 @@ describe('flex section', () => {
       const grid = await renderResult.renderedDOM.findByTestId('grid')
       expect(grid.style.gridTemplateColumns).toEqual('[area1] auto 1fr 1fr 1fr 1fr')
     })
-    it('uses auto for defaults when empty', async () => {
-      const renderResult = await renderTestEditorWithCode(
-        gridProjectWithoutTemplate,
-        'await-first-dom-report',
-      )
-      await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
-      const control = await screen.findByTestId('grid-dimension-column-0')
-      await typeIntoField(control, '100px')
-      const grid = await renderResult.renderedDOM.findByTestId('grid')
-      expect(grid.style.gridTemplateColumns).toEqual('100px auto auto')
-    })
-    it('updates a repeated value', async () => {
+    it('updates a repeat expression', async () => {
       const renderResult = await renderTestEditorWithCode(
         gridProjectWithRepeat,
         'await-first-dom-report',
       )
       await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
-      await typeIntoField(await screen.findByTestId('grid-dimension-column-2'), '42')
 
       const grid = await renderResult.renderedDOM.findByTestId('grid')
-      expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr repeat(2, 10px 42px) 2fr')
 
-      await typeIntoField(await screen.findByTestId('grid-dimension-column-1'), '.5fr')
+      await typeIntoField(
+        await screen.findByTestId('grid-dimension-column-1'),
+        'repeat(2, 0.5fr 42px)',
+      )
       expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr repeat(2, 0.5fr 42px) 2fr')
     })
   })
diff --git a/editor/src/components/inspector/flex-section.spec.tsx b/editor/src/components/inspector/flex-section.spec.tsx
deleted file mode 100644
index a2ffdf898ef5..000000000000
--- a/editor/src/components/inspector/flex-section.spec.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { cssKeyword, cssNumber, gridCSSKeyword, gridCSSNumber } from './common/css-utils'
-import { mergeGridTemplateValues } from './flex-section'
-
-describe('mergeGridTemplateValues', () => {
-  it('empty values', async () => {
-    expect(
-      mergeGridTemplateValues({
-        calculated: [],
-        fromProps: [],
-        autoValues: [],
-      }),
-    ).toEqual([])
-  })
-
-  it('only calculated', async () => {
-    expect(
-      mergeGridTemplateValues({
-        calculated: [gridCSSNumber(cssNumber(1), null)],
-        fromProps: [],
-        autoValues: [],
-      }),
-    ).toEqual([gridCSSKeyword(cssKeyword('auto'), null)])
-  })
-
-  it('competing calculated and from props', async () => {
-    expect(
-      mergeGridTemplateValues({
-        calculated: [gridCSSNumber(cssNumber(1), null)],
-        fromProps: [gridCSSNumber(cssNumber(2), null)],
-        autoValues: [],
-      }),
-    ).toEqual([gridCSSNumber(cssNumber(2), null)])
-  })
-
-  it('multiple elements, empty from props', async () => {
-    expect(
-      mergeGridTemplateValues({
-        calculated: [gridCSSNumber(cssNumber(1), null), gridCSSNumber(cssNumber(2), null)],
-        fromProps: [gridCSSNumber(cssNumber(2), null)],
-        autoValues: [],
-      }),
-    ).toEqual([gridCSSNumber(cssNumber(2), null), gridCSSNumber(cssNumber(2), null)])
-  })
-
-  it('multiple elements, competing', async () => {
-    expect(
-      mergeGridTemplateValues({
-        calculated: [gridCSSNumber(cssNumber(1), null), gridCSSNumber(cssNumber(2), null)],
-        fromProps: [gridCSSNumber(cssNumber(2), null), gridCSSKeyword(cssKeyword('auto'), null)],
-        autoValues: [],
-      }),
-    ).toEqual([gridCSSNumber(cssNumber(2), null), gridCSSKeyword(cssKeyword('auto'), null)])
-  })
-
-  it('one auto value, auto calculated', async () => {
-    expect(
-      mergeGridTemplateValues({
-        calculated: [gridCSSKeyword(cssKeyword('auto'), null)],
-        fromProps: [],
-        autoValues: [gridCSSNumber(cssNumber(42), null)],
-      }),
-    ).toEqual([gridCSSNumber(cssNumber(42), null)])
-  })
-
-  it('one auto value, multiple auto calculated', async () => {
-    expect(
-      mergeGridTemplateValues({
-        calculated: [
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-        ],
-        fromProps: [],
-        autoValues: [gridCSSNumber(cssNumber(42), null)],
-      }),
-    ).toEqual([
-      gridCSSNumber(cssNumber(42), null),
-      gridCSSNumber(cssNumber(42), null),
-      gridCSSNumber(cssNumber(42), null),
-    ])
-  })
-
-  it('multiple auto values, multiple auto calculated', async () => {
-    expect(
-      mergeGridTemplateValues({
-        calculated: [
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-        ],
-        fromProps: [],
-        autoValues: [
-          gridCSSNumber(cssNumber(1), null),
-          gridCSSNumber(cssNumber(2), null),
-          gridCSSNumber(cssNumber(3), null),
-        ],
-      }),
-    ).toEqual([
-      gridCSSNumber(cssNumber(1), null),
-      gridCSSNumber(cssNumber(2), null),
-      gridCSSNumber(cssNumber(3), null),
-      gridCSSNumber(cssNumber(1), null),
-      gridCSSNumber(cssNumber(2), null),
-    ])
-  })
-
-  it('one auto value, multiple auto calculated, but values from props', async () => {
-    expect(
-      mergeGridTemplateValues({
-        calculated: [
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-        ],
-        fromProps: [gridCSSNumber(cssNumber(42), null)],
-        autoValues: [gridCSSNumber(cssNumber(1), null)],
-      }),
-    ).toEqual([
-      gridCSSNumber(cssNumber(42), null),
-      gridCSSNumber(cssNumber(1), null),
-      gridCSSNumber(cssNumber(1), null),
-      gridCSSNumber(cssNumber(1), null),
-      gridCSSNumber(cssNumber(1), null),
-    ])
-  })
-
-  it('multiple auto values, multiple auto calculated, but values from props', async () => {
-    expect(
-      mergeGridTemplateValues({
-        calculated: [
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-        ],
-        fromProps: [
-          gridCSSNumber(cssNumber(42), null),
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSNumber(cssNumber(23), null),
-        ],
-        autoValues: [gridCSSNumber(cssNumber(1), null), gridCSSNumber(cssNumber(2), null)],
-      }),
-    ).toEqual([
-      gridCSSNumber(cssNumber(42), null),
-      gridCSSNumber(cssNumber(2), null),
-      gridCSSNumber(cssNumber(23), null),
-      gridCSSNumber(cssNumber(2), null),
-      gridCSSNumber(cssNumber(1), null),
-    ])
-  })
-})
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 1d94ebbd1ada..3ff686593e13 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -4,7 +4,7 @@
 import { jsx } from '@emotion/react'
 import React from 'react'
 import { createSelector } from 'reselect'
-import { when } from '../../utils/react-conditionals'
+import { unless, when } from '../../utils/react-conditionals'
 import { Substores, useEditorState, useRefEditorState } from '../editor/store/store-hook'
 import { AddRemoveLayoutSystemControl } from './add-remove-layout-system-control'
 import { FlexDirectionToggle } from './flex-direction-control'
@@ -35,8 +35,6 @@ import type {
   CSSKeyword,
   CSSNumber,
   GridAutoFlow,
-  GridCSSKeyword,
-  GridDiscreteDimension,
   UnknownOrEmptyInput,
   ValidGridDimensionKeyword,
 } from './common/css-utils'
@@ -50,10 +48,7 @@ import {
   isCSSKeyword,
   isCSSNumber,
   isEmptyInputValue,
-  isGridCSSKeyword,
   isGridCSSNumber,
-  isGridCSSRepeat,
-  isValidGridDimensionKeyword,
   printArrayGridDimensions,
   type GridDimension,
 } from './common/css-utils'
@@ -66,22 +61,13 @@ import {
   setProperty,
 } from '../canvas/commands/set-property-command'
 import * as PP from '../../core/shared/property-path'
-import type {
-  GridAutoOrTemplateBase,
-  GridContainerProperties,
-  GridPosition,
-} from '../../core/shared/element-template'
+import type { GridContainerProperties, GridPosition } from '../../core/shared/element-template'
 import {
   gridPositionValue,
   type ElementInstanceMetadata,
   type GridElementProperties,
 } from '../../core/shared/element-template'
-import {
-  expandGridDimensions,
-  removeGridTemplateDimensionAtIndex,
-  replaceGridTemplateDimensionAtIndex,
-  setGridPropsCommands,
-} from '../canvas/canvas-strategies/strategies/grid-helpers'
+import { setGridPropsCommands } from '../canvas/canvas-strategies/strategies/grid-helpers'
 import { type CanvasCommand } from '../canvas/commands/commands'
 import type { DropdownMenuItem } from '../../uuiui/radix-components'
 import {
@@ -92,7 +78,6 @@ import {
   separatorRadixSelectOption,
 } from '../../uuiui/radix-components'
 import { useInspectorLayoutInfo, useInspectorStyleInfo } from './common/property-path-hooks'
-import { NumberOrKeywordControl } from '../../uuiui/inputs/number-or-keyword-control'
 import { optionalMap } from '../../core/shared/optional-utils'
 import { cssNumberEqual } from '../canvas/controls/select-mode/controls-common'
 import type { EditorAction } from '../editor/action-types'
@@ -104,6 +89,7 @@ import {
   useSetHoveredControlsHandlers,
 } from '../canvas/controls/select-mode/select-mode-hooks'
 import type { Axis } from '../canvas/gap-utils'
+import { GridExpressionInput } from '../../uuiui/inputs/grid-expression-input'
 
 const axisDropdownMenuButton = 'axisDropdownMenuButton'
 
@@ -160,44 +146,6 @@ export const FlexSection = React.memo(() => {
     'FlexSection grid',
   )
 
-  const columns = React.useMemo((): GridDiscreteDimension[] => {
-    const autoCols: GridDimension[] =
-      grid?.specialSizeMeasurements.containerGridProperties.gridAutoColumns?.type === 'DIMENSIONS'
-        ? grid.specialSizeMeasurements.containerGridProperties.gridAutoColumns.dimensions
-        : []
-
-    const merged = mergeGridTemplateValues({
-      autoValues: autoCols,
-      ...getGridTemplateAxisValues({
-        calculated:
-          grid?.specialSizeMeasurements.containerGridProperties.gridTemplateColumns ?? null,
-        fromProps:
-          grid?.specialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateColumns ??
-          null,
-      }),
-    })
-
-    return merged.filter((v) => v.type !== 'REPEAT')
-  }, [grid])
-
-  const rows = React.useMemo((): GridDiscreteDimension[] => {
-    const autoRows: GridDimension[] =
-      grid?.specialSizeMeasurements.containerGridProperties.gridAutoRows?.type === 'DIMENSIONS'
-        ? grid.specialSizeMeasurements.containerGridProperties.gridAutoRows.dimensions
-        : []
-
-    const merged = mergeGridTemplateValues({
-      autoValues: autoRows,
-      ...getGridTemplateAxisValues({
-        calculated: grid?.specialSizeMeasurements.containerGridProperties.gridTemplateRows ?? null,
-        fromProps:
-          grid?.specialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateRows ?? null,
-      }),
-    })
-
-    return merged.filter((v) => v.type !== 'REPEAT')
-  }, [grid])
-
   return (
     <div>
       <AddRemoveLayoutSystemControl />
@@ -211,13 +159,8 @@ export const FlexSection = React.memo(() => {
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                   <GapRowColumnControl />
                   <AutoFlowControl />
-                  <TemplateDimensionControl
-                    axis={'column'}
-                    grid={grid}
-                    values={columns}
-                    title='Columns'
-                  />
-                  <TemplateDimensionControl axis={'row'} grid={grid} values={rows} title='Rows' />
+                  <TemplateDimensionControl axis={'column'} grid={grid} title='Template Columns' />
+                  <TemplateDimensionControl axis={'row'} grid={grid} title='Template Rows' />
                 </div>
               ) : null}
             </UIGridRow>,
@@ -247,21 +190,13 @@ export const FlexSection = React.memo(() => {
   )
 })
 
-const gridDimensionDropdownKeywords = [
-  { label: 'Auto', value: cssKeyword('auto') },
-  { label: 'Min-Content', value: cssKeyword('min-content') },
-  { label: 'Max-Content', value: cssKeyword('max-content') },
-]
-
 const TemplateDimensionControl = React.memo(
   ({
     grid,
-    values,
     axis,
     title,
   }: {
     grid: ElementInstanceMetadata
-    values: GridDiscreteDimension[]
     axis: 'column' | 'row'
     title: string
   }) => {
@@ -269,6 +204,25 @@ const TemplateDimensionControl = React.memo(
 
     const metadataRef = useRefEditorState((store) => store.editor.jsxMetadata)
 
+    const values = React.useMemo((): GridDimension[] => {
+      // TODO: handle gridAutoRows/Cols too
+      switch (axis) {
+        case 'row': {
+          const { gridTemplateRows } = grid.specialSizeMeasurements.containerGridPropertiesFromProps
+
+          return gridTemplateRows?.type === 'DIMENSIONS' ? gridTemplateRows.dimensions : []
+        }
+        case 'column': {
+          const { gridTemplateColumns } =
+            grid.specialSizeMeasurements.containerGridPropertiesFromProps
+
+          return gridTemplateColumns?.type === 'DIMENSIONS' ? gridTemplateColumns.dimensions : []
+        }
+        default:
+          assertNever(axis)
+      }
+    }, [grid, axis])
+
     const template = React.useMemo(() => {
       const fromProps =
         axis === 'column'
@@ -280,24 +234,15 @@ const TemplateDimensionControl = React.memo(
       return fromProps
     }, [grid, axis, values])
 
-    const expandedTemplate = React.useMemo(() => {
-      if (template?.type !== 'DIMENSIONS') {
-        return []
-      }
-      return expandGridDimensions(template.dimensions)
-    }, [template])
-
     const onUpdateDimension = React.useCallback(
       (index: number) => (newValue: GridDimension) => {
         if (template?.type !== 'DIMENSIONS') {
           return
         }
-        const newDimensions = replaceGridTemplateDimensionAtIndex(
-          template.dimensions,
-          expandedTemplate,
-          index,
-          newValue,
-        )
+        const left = template.dimensions.slice(0, index)
+        const right = template.dimensions.slice(index + 1)
+
+        const newDimensions = [...left, newValue, ...right]
 
         dispatch([
           applyCommandsAction([
@@ -310,7 +255,7 @@ const TemplateDimensionControl = React.memo(
           ]),
         ])
       },
-      [template, expandedTemplate, dispatch, axis, grid],
+      [template, dispatch, axis, grid],
     )
 
     const onUpdateNumberOrKeyword = React.useCallback(
@@ -350,11 +295,10 @@ const TemplateDimensionControl = React.memo(
           return
         }
 
-        const newValues = removeGridTemplateDimensionAtIndex(
-          template.dimensions,
-          expandedTemplate,
-          index,
-        )
+        const left = template.dimensions.slice(0, index)
+        const right = template.dimensions.slice(index + 1)
+
+        const newValues = [...left, ...right]
 
         let commands: CanvasCommand[] = [
           setProperty(
@@ -367,7 +311,7 @@ const TemplateDimensionControl = React.memo(
 
         // adjust the position of the elements if they need to be moved
         const adjustedGridTemplate = removeTemplateValueAtIndex(
-          grid.specialSizeMeasurements.containerGridProperties,
+          grid.specialSizeMeasurements.containerGridPropertiesFromProps,
           axis,
           index,
         )
@@ -377,7 +321,7 @@ const TemplateDimensionControl = React.memo(
         const children = MetadataUtils.getChildrenUnordered(metadataRef.current, grid.elementPath)
         for (const child of children) {
           let updated: Partial<GridElementProperties> = {
-            ...child.specialSizeMeasurements.elementGridProperties,
+            ...child.specialSizeMeasurements.elementGridPropertiesFromProps,
           }
 
           function needsAdjusting(pos: GridPosition | null, bound: number) {
@@ -389,7 +333,7 @@ const TemplateDimensionControl = React.memo(
               : null
           }
 
-          const position = child.specialSizeMeasurements.elementGridProperties
+          const position = child.specialSizeMeasurements.elementGridPropertiesFromProps
           if (axis === 'column') {
             const adjustColumnStart = needsAdjusting(position.gridColumnStart, gridIndex)
             const adjustColumnEnd = needsAdjusting(position.gridColumnEnd, gridIndex + 1)
@@ -415,7 +359,7 @@ const TemplateDimensionControl = React.memo(
 
         dispatch([applyCommandsAction(commands)])
       },
-      [grid, dispatch, axis, metadataRef, template, expandedTemplate],
+      [grid, dispatch, axis, metadataRef, template],
     )
 
     const onAppend = React.useCallback(() => {
@@ -442,7 +386,7 @@ const TemplateDimensionControl = React.memo(
         if (template?.type !== 'DIMENSIONS') {
           return
         }
-        const container = grid.specialSizeMeasurements.containerGridProperties
+        const container = grid.specialSizeMeasurements.containerGridPropertiesFromProps
         const dimensions =
           axis === 'column' ? container.gridTemplateColumns : container.gridTemplateRows
         if (dimensions?.type !== 'DIMENSIONS') {
@@ -458,12 +402,14 @@ const TemplateDimensionControl = React.memo(
         const newAreaName: string | null =
           rawNewAreaName.length === 0 ? null : sanitizeAreaName(rawNewAreaName)
 
-        const newValues = replaceGridTemplateDimensionAtIndex(
-          template.dimensions,
-          expandedTemplate,
-          index,
-          { ...values[index], areaName: newAreaName },
-        )
+        const left = template.dimensions.slice(0, index)
+        const right = template.dimensions.slice(index + 1)
+
+        const newValues = [
+          ...left,
+          { ...values[index], areaName: newAreaName } as GridDimension,
+          ...right,
+        ]
 
         let commands: CanvasCommand[] = [
           setProperty(
@@ -488,14 +434,14 @@ const TemplateDimensionControl = React.memo(
             ...setGridPropsCommands(
               child.elementPath,
               adjustedGridTemplate,
-              child.specialSizeMeasurements.elementGridProperties,
+              child.specialSizeMeasurements.elementGridPropertiesFromProps,
             ),
           )
         }
 
         dispatch([applyCommandsAction(commands)])
       },
-      [grid, axis, values, dispatch, metadataRef, template, expandedTemplate],
+      [grid, axis, values, dispatch, metadataRef, template],
     )
 
     const dropdownMenuItems = React.useCallback(
@@ -531,6 +477,8 @@ const TemplateDimensionControl = React.memo(
       [],
     )
 
+    const dimensionsWithGeneratedIndexes = useGeneratedIndexesFromGridDimensions(values)
+
     return (
       <div
         style={{
@@ -545,11 +493,13 @@ const TemplateDimensionControl = React.memo(
             <Icons.SmallPlus onClick={onAppend} />
           </SquareButton>
         </div>
-        {values.map((value, index) => (
+        {dimensionsWithGeneratedIndexes.map((value, index) => (
           <AxisDimensionControl
             key={index}
-            value={value}
+            value={value.dimension}
             index={index}
+            generatedIndexFrom={value.generatedIndexFrom}
+            generatedIndexTo={value.generatedIndexTo}
             axis={axis}
             onUpdateNumberOrKeyword={onUpdateNumberOrKeyword}
             onUpdateDimension={onUpdateDimension}
@@ -566,14 +516,18 @@ TemplateDimensionControl.displayName = 'TemplateDimensionControl'
 function AxisDimensionControl({
   value,
   index,
+  generatedIndexFrom: indexFrom,
+  generatedIndexTo: indexTo,
   items,
   axis,
   onUpdateNumberOrKeyword,
   onUpdateDimension,
   opener,
 }: {
-  value: GridDiscreteDimension
+  value: GridDimension
   index: number
+  generatedIndexFrom: number
+  generatedIndexTo: number
   items: DropdownMenuItem[]
   axis: 'column' | 'row'
   onUpdateNumberOrKeyword: (
@@ -587,6 +541,16 @@ function AxisDimensionControl({
   const onOpenChange = React.useCallback((isDropdownOpen: boolean) => {
     setIsOpen(isDropdownOpen)
   }, [])
+
+  const title = React.useMemo(() => {
+    if (indexFrom === indexTo) {
+      return value.areaName ?? indexFrom
+    }
+    return value.areaName ?? `${indexFrom} → ${indexTo}`
+  }, [value, indexFrom, indexTo])
+
+  const gridExpressionInputFocused = useGridExpressionInputFocused()
+
   return (
     <div
       key={`col-${value}-${index}`}
@@ -612,22 +576,23 @@ function AxisDimensionControl({
           }}
           title={value.areaName ?? undefined}
         >
-          {value.areaName ?? index + 1}
+          {title}
         </Subdued>
-        <NumberOrKeywordControl
+        <GridExpressionInput
           testId={testId}
-          value={value.type === 'MINMAX' ? cssKeyword('minmax') : value.value} // TODO: this is just a placeholder for real editing of expressions
-          keywords={gridDimensionDropdownKeywords}
-          keywordTypeCheck={isValidGridDimensionKeyword}
-          onSubmitValue={onUpdateNumberOrKeyword(index)}
-          controlStatus={
-            isGridCSSKeyword(value) && value.value.value === 'auto' ? 'off' : undefined
-          }
+          value={value}
+          onUpdateNumberOrKeyword={onUpdateNumberOrKeyword(index)}
+          onUpdateDimension={onUpdateDimension(index)}
+          onFocus={gridExpressionInputFocused.onFocus}
+          onBlur={gridExpressionInputFocused.onBlur}
         />
       </div>
-      <SquareButton className={axisDropdownMenuButton}>
-        <DropdownMenu align='end' items={items} opener={opener} onOpenChange={onOpenChange} />
-      </SquareButton>
+      {unless(
+        gridExpressionInputFocused.focused,
+        <SquareButton className={axisDropdownMenuButton}>
+          <DropdownMenu align='end' items={items} opener={opener} onOpenChange={onOpenChange} />
+        </SquareButton>,
+      )}
     </div>
   )
 }
@@ -702,20 +667,6 @@ function renameAreaInTemplateAtIndex(
   }
 }
 
-function getGridTemplateAxisValues(template: {
-  calculated: GridAutoOrTemplateBase | null
-  fromProps: GridAutoOrTemplateBase | null
-}): { calculated: GridDimension[]; fromProps: GridDimension[] } {
-  const { calculated, fromProps } = template
-  if (fromProps?.type !== 'DIMENSIONS' && calculated?.type !== 'DIMENSIONS') {
-    return { calculated: [], fromProps: [] }
-  }
-
-  const calculatedDimensions = calculated?.type === 'DIMENSIONS' ? calculated.dimensions : []
-  const fromPropsDimensions = fromProps?.type === 'DIMENSIONS' ? fromProps.dimensions : []
-  return { calculated: calculatedDimensions, fromProps: fromPropsDimensions }
-}
-
 const reAlphanumericDashUnderscore = /[^0-9a-z\-_]+/gi
 
 function sanitizeAreaName(areaName: string): string {
@@ -1086,49 +1037,45 @@ const AutoFlowControl = React.memo(() => {
 })
 AutoFlowControl.displayName = 'AutoFlowControl'
 
-export function mergeGridTemplateValues({
-  calculated,
-  fromProps,
-  autoValues,
-}: {
-  calculated: GridDimension[]
-  fromProps: GridDimension[]
-  autoValues: GridDimension[]
-}): GridDimension[] {
-  const expanded = fromProps.flatMap((v) => {
-    if (!isGridCSSRepeat(v)) {
-      return v
-    }
-    if (isCSSKeyword(v.times)) {
-      // NOTE: this will be removed soon with https://github.com/concrete-utopia/utopia/pull/6396, so no need to go in detail here
-      return v
-    }
-    return Array(v.times).fill(v.value).flat()
-  })
-
-  function getExplicitValue(dimension: GridDimension, index: number): GridDimension {
-    if (expanded.length === 0) {
-      return gridCSSKeyword(cssKeyword('auto'), dimension.areaName)
-    } else if (expanded[index] == null) {
-      return dimension
-    } else {
-      return expanded[index]
-    }
-  }
-
-  return calculated.map((c, index) => {
-    const explicitValue = getExplicitValue(c, index)
-
-    const autoValueIndex = index % autoValues.length // wrap around
-    const autoValue = autoValues.at(autoValueIndex)
+interface GridDimensionWithGeneratedIndexes {
+  generatedIndexFrom: number
+  generatedIndexTo: number
+  dimension: GridDimension
+}
 
-    if (isGridCSSKeyword(explicitValue) && explicitValue.value.value === 'auto') {
-      return {
-        ...(autoValue ?? explicitValue),
-        areaName: explicitValue.areaName ?? autoValue?.areaName ?? null,
-      } as GridCSSKeyword
-    }
+function useGeneratedIndexesFromGridDimensions(
+  dimensions: Array<GridDimension>,
+): Array<GridDimensionWithGeneratedIndexes> {
+  return React.useMemo(() => {
+    let nextIndexFrom = 1
+    let result: Array<GridDimensionWithGeneratedIndexes> = []
+
+    dimensions.forEach((dim) => {
+      if (dim.type !== 'REPEAT') {
+        result.push({
+          generatedIndexFrom: nextIndexFrom,
+          generatedIndexTo: nextIndexFrom,
+          dimension: dim,
+        })
+        nextIndexFrom += 1
+      } else {
+        // TODO: handle auto-fill and auto-fit in value.times
+        const shift = !isCSSKeyword(dim.times) ? dim.times * dim.value.length : dim.value.length
+        result.push({
+          generatedIndexFrom: nextIndexFrom,
+          generatedIndexTo: nextIndexFrom + shift - 1,
+          dimension: dim,
+        })
+        nextIndexFrom += shift
+      }
+    })
+    return result
+  }, [dimensions])
+}
 
-    return explicitValue
-  })
+const useGridExpressionInputFocused = () => {
+  const [focused, setFocused] = React.useState(false)
+  const onFocus = React.useCallback(() => setFocused(true), [])
+  const onBlur = React.useCallback(() => setFocused(false), [])
+  return { focused, onFocus, onBlur }
 }
diff --git a/editor/src/uuiui/inputs/grid-expression-input.tsx b/editor/src/uuiui/inputs/grid-expression-input.tsx
new file mode 100644
index 000000000000..d3c0217663f9
--- /dev/null
+++ b/editor/src/uuiui/inputs/grid-expression-input.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import {
+  cssKeyword,
+  isGridCSSNumber,
+  isValidGridDimensionKeyword,
+  parseCSSNumber,
+  parseGridCSSMinmaxOrRepeat,
+  printGridDimension,
+  type CSSKeyword,
+  type CSSNumber,
+  type GridDimension,
+  type ValidGridDimensionKeyword,
+} from '../../components/inspector/common/css-utils'
+import { isRight } from '../../core/shared/either'
+import { StringInput } from './string-input'
+
+interface GridExpressionInputProps {
+  testId: string
+  value: GridDimension
+  onUpdateNumberOrKeyword: (v: CSSNumber | CSSKeyword<ValidGridDimensionKeyword>) => void
+  onUpdateDimension: (v: GridDimension) => void
+  onFocus: () => void
+  onBlur: () => void
+}
+
+export const GridExpressionInput = React.memo(
+  ({
+    testId,
+    value,
+    onUpdateNumberOrKeyword,
+    onUpdateDimension,
+    onFocus,
+    onBlur,
+  }: GridExpressionInputProps) => {
+    const [printValue, setPrintValue] = React.useState<string>(printGridDimension(value))
+    React.useEffect(() => setPrintValue(printGridDimension(value)), [value])
+
+    const onChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+      setPrintValue(e.target.value)
+    }, [])
+
+    const onKeyDown = React.useCallback(
+      (e: React.KeyboardEvent) => {
+        if (e.key !== 'Enter') {
+          return
+        }
+        if (isValidGridDimensionKeyword(printValue)) {
+          return onUpdateNumberOrKeyword(cssKeyword(printValue))
+        }
+
+        const defaultUnit = isGridCSSNumber(value) ? value.value.unit : 'px'
+        const maybeNumber = parseCSSNumber(printValue, 'AnyValid', defaultUnit)
+        if (isRight(maybeNumber)) {
+          return onUpdateNumberOrKeyword(maybeNumber.value)
+        }
+
+        const maybeMinmax = parseGridCSSMinmaxOrRepeat(printValue)
+        if (maybeMinmax != null) {
+          return onUpdateDimension({
+            ...maybeMinmax,
+            areaName: value.areaName,
+          } as GridDimension)
+        }
+
+        if (printValue === '') {
+          return onUpdateNumberOrKeyword(cssKeyword('auto'))
+        }
+
+        setPrintValue(printGridDimension(value))
+      },
+      [printValue, onUpdateNumberOrKeyword, onUpdateDimension, value],
+    )
+
+    return (
+      <StringInput
+        style={{ width: '100%' }}
+        testId={testId}
+        value={printValue}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+    )
+  },
+)
+GridExpressionInput.displayName = 'GridExpressionInput'
diff --git a/editor/src/uuiui/inputs/string-input.tsx b/editor/src/uuiui/inputs/string-input.tsx
index e6f0b3b2b23e..c38c162bb491 100644
--- a/editor/src/uuiui/inputs/string-input.tsx
+++ b/editor/src/uuiui/inputs/string-input.tsx
@@ -183,7 +183,7 @@ export const HeadlessStringInput = React.forwardRef<HTMLInputElement, HeadlessSt
       pasteHandler,
       ...otherProps
     } = props
-    const { disabled, onKeyDown, onFocus } = otherProps
+    const { disabled, onKeyDown, onFocus, onBlur } = otherProps
 
     const ref = React.useRef<HTMLInputElement>(null)
 
@@ -237,6 +237,7 @@ export const HeadlessStringInput = React.forwardRef<HTMLInputElement, HeadlessSt
         disabled={disabled}
         onKeyDown={handleOnKeyDown}
         onFocus={handleOnFocus}
+        onBlur={onBlur}
         onChange={onChange}
         style={{
           ...style,

From cb8c0f2239320e8275ebdcd054b74b40140b3b1c Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 26 Sep 2024 17:30:08 +0200
Subject: [PATCH 051/272] Grid alignment buttons (#6413)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Problem:**

The alignment buttons at the top of the inspector could be repurposed to
also be useful when dealing with self align/justify for grids and flex.

**Fix:**

This PR does a bunch of things:

1. Rename the `T` and `L` labels in the frame positioning to `X` and `Y`
2. Move the alignment buttons from the top of the editor to above the
`X` and `Y` controls, splitting them into two chain controls
3. Make those buttons control the positioning for flow elements, as well
as controlling justify self/align self for flex or grid children
4. Make those buttons display the current state of the property they're
controlling
5. Make those buttons unset the property if they are clicked again while
active
6. Add a context menu to the right of the buttons to unset the values
(the entry will only show if there _are_ set values) as well as
distribute horizontally/vertically
7. Adjust the radix dropdown menu items so that they are less opaque
when disabled



https://github.com/user-attachments/assets/e749df9a-a94c-4844-ad0e-cbfecf81d08e

## 👀 For the kind reviewers 👀
The actual meat of this PR is in
`editor/src/components/editor/actions/actions.tsx` and
`editor/src/components/inspector/alignment-buttons.tsx`.

Fixes #6412
---
 .../ui-jsx-canvas-bugs.spec.tsx.snap          |   4 +
 .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 514 ++++++++++++++++++
 editor/src/components/canvas/dom-walker.ts    |  11 +-
 editor/src/components/editor/action-types.ts  |  20 +
 .../src/components/editor/actions/actions.tsx | 183 +++++--
 .../store-deep-equality-instances-3.spec.ts   |  14 +
 .../store/store-deep-equality-instances.ts    |   9 +-
 .../inspector/alignment-buttons.tsx           | 379 +++++++++++++
 .../controls/option-chain-control.tsx         |   4 +
 .../components/inspector/inspector-common.ts  |  12 +
 editor/src/components/inspector/inspector.tsx | 143 +----
 .../frame-updating-layout-section.tsx         |   6 +-
 .../simplified-layout-subsection.tsx          |  38 +-
 .../src/core/model/element-metadata-utils.ts  |  18 +
 ...performance-regression-tests.spec.tsx.snap | 512 ++++++++++++++++-
 .../performance-regression-tests.spec.tsx     |   8 +-
 editor/src/core/shared/element-template.ts    |  14 +-
 editor/src/uuiui/radix-components.tsx         |   1 +
 18 files changed, 1678 insertions(+), 212 deletions(-)
 create mode 100644 editor/src/components/inspector/alignment-buttons.tsx

diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
index 8e7cd5aa4f45..c0e3d91a1384 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
@@ -160,6 +160,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -219,6 +220,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -307,6 +309,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -366,6 +369,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
index e57bf2a7375e..0e6854cbdb80 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
@@ -201,6 +201,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -260,6 +261,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -371,6 +373,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -430,6 +433,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -836,6 +840,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -895,6 +900,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -1150,6 +1156,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -1209,6 +1216,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -1319,6 +1327,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -1378,6 +1387,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -1488,6 +1498,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -1547,6 +1558,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -1657,6 +1669,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -1716,6 +1729,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -1931,6 +1945,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -1990,6 +2005,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -2101,6 +2117,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -2160,6 +2177,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -2377,6 +2395,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -2436,6 +2455,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -2650,6 +2670,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -2709,6 +2730,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -2820,6 +2842,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -2879,6 +2902,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -2970,6 +2994,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -3029,6 +3054,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -3261,6 +3287,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -3320,6 +3347,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -3431,6 +3459,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -3490,6 +3519,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -3808,6 +3838,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -3867,6 +3898,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -4151,6 +4183,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -4210,6 +4243,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -4349,6 +4383,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -4408,6 +4443,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -4513,6 +4549,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -4572,6 +4609,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -4711,6 +4749,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -4770,6 +4809,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -4875,6 +4915,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -4934,6 +4975,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -5073,6 +5115,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -5132,6 +5175,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -5237,6 +5281,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -5296,6 +5341,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -5579,6 +5625,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -5638,6 +5685,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -5749,6 +5797,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -5808,6 +5857,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -6347,6 +6397,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -6406,6 +6457,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -6911,6 +6963,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -6970,6 +7023,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -7315,6 +7369,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -7374,6 +7429,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -7685,6 +7741,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -7744,6 +7801,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -7903,6 +7961,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -7962,6 +8021,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -8087,6 +8147,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -8146,6 +8207,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -8305,6 +8367,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -8364,6 +8427,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -8489,6 +8553,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -8548,6 +8613,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -8707,6 +8773,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -8766,6 +8833,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -8891,6 +8959,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -8950,6 +9019,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -9295,6 +9365,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -9354,6 +9425,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -9665,6 +9737,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -9724,6 +9797,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -9883,6 +9957,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -9942,6 +10017,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -10067,6 +10143,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -10126,6 +10203,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -10285,6 +10363,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -10344,6 +10423,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -10469,6 +10549,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -10528,6 +10609,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -10687,6 +10769,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -10746,6 +10829,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -10871,6 +10955,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -10930,6 +11015,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -11275,6 +11361,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -11334,6 +11421,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -11645,6 +11733,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -11704,6 +11793,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -11863,6 +11953,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -11922,6 +12013,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -12047,6 +12139,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -12106,6 +12199,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -12265,6 +12359,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -12324,6 +12419,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -12449,6 +12545,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -12508,6 +12605,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -12667,6 +12765,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -12726,6 +12825,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -12851,6 +12951,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -12910,6 +13011,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -13136,6 +13238,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -13195,6 +13298,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -13306,6 +13410,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -13365,6 +13470,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -13517,6 +13623,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -13576,6 +13683,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -13668,6 +13776,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -13727,6 +13836,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -13819,6 +13929,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -13878,6 +13989,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -14092,6 +14204,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -14151,6 +14264,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -14262,6 +14376,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -14321,6 +14436,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -14525,6 +14641,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -14584,6 +14701,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -14816,6 +14934,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -14875,6 +14994,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -14986,6 +15106,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -15045,6 +15166,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -15380,6 +15502,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -15439,6 +15562,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -15739,6 +15863,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -15798,6 +15923,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -15957,6 +16083,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -16016,6 +16143,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -16175,6 +16303,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -16234,6 +16363,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -16393,6 +16523,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -16452,6 +16583,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -16684,6 +16816,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -16743,6 +16876,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -16854,6 +16988,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -16913,6 +17048,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -17248,6 +17384,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -17307,6 +17444,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -17607,6 +17745,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -17666,6 +17805,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -17825,6 +17965,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -17884,6 +18025,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -18043,6 +18185,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -18102,6 +18245,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -18261,6 +18405,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -18320,6 +18465,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -18546,6 +18692,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -18605,6 +18752,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -18716,6 +18864,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -18775,6 +18924,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -18927,6 +19077,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -18986,6 +19137,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -19078,6 +19230,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -19137,6 +19290,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -19229,6 +19383,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -19288,6 +19443,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -19514,6 +19670,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -19573,6 +19730,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -19684,6 +19842,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -19743,6 +19902,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -20000,6 +20160,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -20059,6 +20220,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -20282,6 +20444,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -20341,6 +20504,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -20434,6 +20598,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -20493,6 +20658,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -20586,6 +20752,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -20645,6 +20812,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -20887,6 +21055,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -20946,6 +21115,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -21072,6 +21242,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -21131,6 +21302,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -21536,6 +21708,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -21595,6 +21768,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -21819,6 +21993,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -21878,6 +22053,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -22119,6 +22295,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -22178,6 +22355,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -22304,6 +22482,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -22363,6 +22542,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -22768,6 +22948,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -22827,6 +23008,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -23051,6 +23233,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -23110,6 +23293,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -23352,6 +23536,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -23411,6 +23596,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -23537,6 +23723,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -23596,6 +23783,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -24052,6 +24240,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -24111,6 +24300,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -24386,6 +24576,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -24445,6 +24636,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -24687,6 +24879,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -24746,6 +24939,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -24872,6 +25066,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -24931,6 +25126,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -25387,6 +25583,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -25446,6 +25643,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -25721,6 +25919,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -25780,6 +25979,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -25993,6 +26193,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -26052,6 +26253,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -26163,6 +26365,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -26222,6 +26425,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -26313,6 +26517,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -26372,6 +26577,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -26708,6 +26914,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -26767,6 +26974,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -26878,6 +27086,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -26937,6 +27146,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -28806,6 +29016,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -28865,6 +29076,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -30280,6 +30492,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -30339,6 +30552,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -31720,6 +31934,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -31779,6 +31994,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -32342,6 +32558,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -32401,6 +32618,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -32692,6 +32910,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -32751,6 +32970,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -33314,6 +33534,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -33373,6 +33594,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -33664,6 +33886,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -33723,6 +33946,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -34286,6 +34510,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -34345,6 +34570,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -34636,6 +34862,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -34695,6 +34922,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -35296,6 +35524,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -35355,6 +35584,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -35688,6 +35918,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -35747,6 +35978,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -36348,6 +36580,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -36407,6 +36640,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -36740,6 +36974,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -36799,6 +37034,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -37400,6 +37636,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -37459,6 +37696,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -37792,6 +38030,7 @@ export var storyboard = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -37851,6 +38090,7 @@ export var storyboard = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -38087,6 +38327,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -38146,6 +38387,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -38257,6 +38499,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -38316,6 +38559,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -38502,6 +38746,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -38561,6 +38806,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -38670,6 +38916,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -38729,6 +38976,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -38838,6 +39086,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -38897,6 +39146,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -39112,6 +39362,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -39171,6 +39422,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -39282,6 +39534,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -39341,6 +39594,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -39499,6 +39753,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -39558,6 +39813,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -39772,6 +40028,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -39831,6 +40088,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -39942,6 +40200,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -40001,6 +40260,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -40263,6 +40523,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -40322,6 +40583,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -40582,6 +40844,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -40641,6 +40904,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -40752,6 +41016,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -40811,6 +41076,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -41030,6 +41296,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -41089,6 +41356,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -41257,6 +41525,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -41316,6 +41585,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -41433,6 +41703,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -41492,6 +41763,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -41734,6 +42006,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -41793,6 +42066,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -41919,6 +42193,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -41978,6 +42253,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -42274,6 +42550,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -42333,6 +42610,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -42451,6 +42729,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -42510,6 +42789,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -42905,6 +43185,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -42964,6 +43245,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -43090,6 +43372,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -43149,6 +43432,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -43447,6 +43731,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -43506,6 +43791,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -43624,6 +43910,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -43683,6 +43970,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -44009,6 +44297,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -44068,6 +44357,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -44178,6 +44468,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -44237,6 +44528,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -44972,6 +45264,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -45031,6 +45324,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -45124,6 +45418,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -45183,6 +45478,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -45276,6 +45572,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -45335,6 +45632,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -45428,6 +45726,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -45487,6 +45786,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -45582,6 +45882,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -45641,6 +45942,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -45734,6 +46036,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -45793,6 +46096,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -45886,6 +46190,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -45945,6 +46250,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -46038,6 +46344,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -46097,6 +46404,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -46258,6 +46566,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -46317,6 +46626,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -46439,6 +46749,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -46498,6 +46809,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -46593,6 +46905,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -46652,6 +46965,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -46745,6 +47059,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -46804,6 +47119,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -46897,6 +47213,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -46956,6 +47273,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -47049,6 +47367,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -47108,6 +47427,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -47201,6 +47521,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -47260,6 +47581,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -47353,6 +47675,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -47412,6 +47735,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -47505,6 +47829,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -47564,6 +47889,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -47657,6 +47983,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -47716,6 +48043,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -47809,6 +48137,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -47868,6 +48197,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -47961,6 +48291,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -48020,6 +48351,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -48113,6 +48445,7 @@ export var App = (props) => {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -48172,6 +48505,7 @@ export var App = (props) => {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -48404,6 +48738,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -48463,6 +48798,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -48574,6 +48910,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -48633,6 +48970,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -48968,6 +49306,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -49027,6 +49366,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -49327,6 +49667,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -49386,6 +49727,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -49545,6 +49887,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -49604,6 +49947,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -49763,6 +50107,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -49822,6 +50167,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -49981,6 +50327,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -50040,6 +50387,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -50272,6 +50620,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -50331,6 +50680,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -50442,6 +50792,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -50501,6 +50852,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -50835,6 +51187,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -50894,6 +51247,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -51193,6 +51547,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -51252,6 +51607,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -51411,6 +51767,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -51470,6 +51827,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -51629,6 +51987,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -51688,6 +52047,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -51847,6 +52207,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -51906,6 +52267,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -52138,6 +52500,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -52197,6 +52560,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -52308,6 +52672,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -52367,6 +52732,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -52745,6 +53111,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -52804,6 +53171,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -53147,6 +53515,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -53206,6 +53575,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -53365,6 +53735,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -53424,6 +53795,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -53583,6 +53955,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -53642,6 +54015,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -53801,6 +54175,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -53860,6 +54235,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -54098,6 +54474,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -54157,6 +54534,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -54283,6 +54661,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -54342,6 +54721,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -54547,6 +54927,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -54606,6 +54987,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -54724,6 +55106,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -54783,6 +55166,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -54999,6 +55383,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -55058,6 +55443,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -55146,6 +55532,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -55205,6 +55592,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -55341,6 +55729,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -55400,6 +55789,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -55498,6 +55888,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -55557,6 +55948,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -55655,6 +56047,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -55714,6 +56107,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -55917,6 +56311,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -55976,6 +56371,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -56064,6 +56460,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -56123,6 +56520,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -56317,6 +56715,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -56376,6 +56775,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -56512,6 +56912,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -56571,6 +56972,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -56670,6 +57072,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -56729,6 +57132,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -56920,6 +57324,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -56979,6 +57384,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -57067,6 +57473,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -57126,6 +57533,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -57330,6 +57738,7 @@ export var storyboard = (
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -57389,6 +57798,7 @@ export var storyboard = (
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -57502,6 +57912,7 @@ export var storyboard = (
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -57561,6 +57972,7 @@ export var storyboard = (
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -57752,6 +58164,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -57811,6 +58224,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -57899,6 +58313,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -57958,6 +58373,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -58049,6 +58465,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -58108,6 +58525,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -58307,6 +58725,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -58366,6 +58785,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -58454,6 +58874,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -58513,6 +58934,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -58682,6 +59104,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -58741,6 +59164,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -58859,6 +59283,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -58918,6 +59343,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -59111,6 +59537,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -59170,6 +59597,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -59258,6 +59686,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -59317,6 +59746,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -59583,6 +60013,7 @@ export var storyboard = (
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -59642,6 +60073,7 @@ export var storyboard = (
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -59774,6 +60206,7 @@ export var storyboard = (
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -59833,6 +60266,7 @@ export var storyboard = (
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -59965,6 +60399,7 @@ export var storyboard = (
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -60024,6 +60459,7 @@ export var storyboard = (
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -60216,6 +60652,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -60275,6 +60712,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -60363,6 +60801,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -60422,6 +60861,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -60530,6 +60970,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -60589,6 +61030,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -60826,6 +61268,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -60885,6 +61328,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -60996,6 +61440,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -61055,6 +61500,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -61503,6 +61949,7 @@ export var storyboard = (
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -61562,6 +62009,7 @@ export var storyboard = (
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -61660,6 +62108,7 @@ export var storyboard = (
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -61719,6 +62168,7 @@ export var storyboard = (
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -61931,6 +62381,7 @@ export var storyboard = (
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -61990,6 +62441,7 @@ export var storyboard = (
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -62200,6 +62652,7 @@ export var storyboard = (
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -62259,6 +62712,7 @@ export var storyboard = (
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -62393,6 +62847,7 @@ export var storyboard = (
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -62452,6 +62907,7 @@ export var storyboard = (
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -62584,6 +63040,7 @@ export var storyboard = (
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -62643,6 +63100,7 @@ export var storyboard = (
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -62862,6 +63320,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -62921,6 +63380,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -63032,6 +63492,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -63091,6 +63552,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -63231,6 +63693,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -63290,6 +63753,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -63399,6 +63863,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -63458,6 +63923,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -63675,6 +64141,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -63734,6 +64201,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -63845,6 +64313,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -63904,6 +64373,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -63995,6 +64465,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -64054,6 +64525,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -64301,6 +64773,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -64360,6 +64833,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -64471,6 +64945,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -64530,6 +65005,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -64890,6 +65366,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -64949,6 +65426,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -65274,6 +65752,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -65333,6 +65812,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -65506,6 +65986,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -65565,6 +66046,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -65708,6 +66190,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -65767,6 +66250,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -65876,6 +66360,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -65935,6 +66420,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -66108,6 +66594,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -66167,6 +66654,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -66310,6 +66798,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -66369,6 +66858,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -66478,6 +66968,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -66537,6 +67028,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -66710,6 +67202,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -66769,6 +67262,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -66912,6 +67406,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -66971,6 +67466,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -67080,6 +67576,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -67139,6 +67636,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -67355,6 +67853,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -67414,6 +67913,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -67525,6 +68025,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -67584,6 +68085,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -67675,6 +68177,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -67734,6 +68237,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -67960,6 +68464,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -68019,6 +68524,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -68130,6 +68636,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -68189,6 +68696,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -68348,6 +68856,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -68407,6 +68916,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -68536,6 +69046,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -68595,6 +69106,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
@@ -68694,6 +69206,7 @@ Object {
     "specialSizeMeasurements": Object {
       "alignContent": null,
       "alignItems": null,
+      "alignSelf": null,
       "borderRadius": null,
       "clientHeight": 0,
       "clientWidth": 0,
@@ -68753,6 +69266,7 @@ Object {
       },
       "immediateParentProvidesLayout": true,
       "justifyContent": null,
+      "justifySelf": null,
       "layoutSystemForChildren": null,
       "margin": Object {},
       "naturalHeight": null,
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 475ff3c1295c..50c273f01bb7 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -68,7 +68,12 @@ import { fastForEach } from '../../core/shared/utils'
 import type { EditorState, EditorStorePatched } from '../editor/store/editor-state'
 import { shallowEqual } from '../../core/shared/equality-utils'
 import { pick } from '../../core/shared/object-utils'
-import { getFlexAlignment, getFlexJustifyContent, MaxContent } from '../inspector/inspector-common'
+import {
+  getFlexAlignment,
+  getFlexJustifyContent,
+  getSelfAlignment,
+  MaxContent,
+} from '../inspector/inspector-common'
 import type { EditorDispatch } from '../editor/action-types'
 import { runDOMWalker } from '../editor/actions/action-creators'
 import { CanvasContainerOuterId } from './canvas-component-entry'
@@ -684,6 +689,8 @@ function getSpecialMeasurements(
   const justifyContent = getFlexJustifyContent(elementStyle.justifyContent)
   const alignContent = getFlexJustifyContent(elementStyle.alignContent)
   const alignItems = getFlexAlignment(elementStyle.alignItems)
+  const alignSelf = getSelfAlignment(elementStyle.alignSelf)
+  const justifySelf = getSelfAlignment(elementStyle.justifySelf)
 
   const margin = applicative4Either(
     applicativeSidesPxTransform,
@@ -901,6 +908,8 @@ function getSpecialMeasurements(
     containerElementPropertiesFromProps,
     rowGap,
     columnGap,
+    justifySelf,
+    alignSelf,
   )
 }
 
diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts
index 54ac5bcb998c..9ad3c9a4ac96 100644
--- a/editor/src/components/editor/action-types.ts
+++ b/editor/src/components/editor/action-types.ts
@@ -86,6 +86,7 @@ import type { Bounds } from 'utopia-vscode-common'
 import type { Optic } from '../../core/shared/optics/optics'
 import { makeOptic } from '../../core/shared/optics/optics'
 import type { ElementPathTrees } from '../../core/shared/element-path-tree'
+import { assertNever } from '../../core/shared/utils'
 export { isLoggedIn, loggedInUser, notLoggedIn } from '../../common/user'
 export type { LoginState, UserDetails } from '../../common/user'
 
@@ -1472,3 +1473,22 @@ export const usingDispatch = (
 
 export type Alignment = 'left' | 'hcenter' | 'right' | 'top' | 'vcenter' | 'bottom'
 export type Distribution = 'horizontal' | 'vertical'
+
+export function isAlignment(
+  alignmentOrDistribution: Alignment | Distribution,
+): alignmentOrDistribution is Alignment {
+  switch (alignmentOrDistribution) {
+    case 'bottom':
+    case 'hcenter':
+    case 'left':
+    case 'right':
+    case 'top':
+    case 'vcenter':
+      return true
+    case 'horizontal':
+    case 'vertical':
+      return false
+    default:
+      assertNever(alignmentOrDistribution)
+  }
+}
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index d2fe43d86b6f..a1c4cea4ef20 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -350,7 +350,7 @@ import type {
   UpdateMetadataInEditorState,
   SetErrorBoundaryHandling,
 } from '../action-types'
-import { isLoggedIn } from '../action-types'
+import { isAlignment, isLoggedIn } from '../action-types'
 import type { Mode } from '../editor-modes'
 import { isCommentMode, isFollowMode, isTextEditMode } from '../editor-modes'
 import { EditorModes, isLiveMode, isSelectMode } from '../editor-modes'
@@ -624,6 +624,7 @@ import { getDefaultedRemixRootDir, getRemixRootDir } from '../store/remix-derive
 import { isReplaceKeepChildrenAndStyleTarget } from '../../navigator/navigator-item/component-picker-context-menu'
 import { canCondenseJSXElementChild } from '../../../utils/can-condense'
 import { getNavigatorTargetsFromEditorState } from '../../navigator/navigator-utils'
+import { applyValuesAtPath } from '../../canvas/commands/adjust-number-command'
 
 export const MIN_CODE_PANE_REOPEN_WIDTH = 100
 
@@ -6180,59 +6181,32 @@ export function alignOrDistributeSelectedViews(
       .map(trueUpGroupElementChanged),
   ]
 
-  if (selectedViews.length > 0) {
-    // this array of canvasFrames excludes the non-layoutables. it means in a multiselect, they will not be considered
-    const canvasFrames: Array<{
-      target: ElementPath
-      frame: CanvasRectangle
-    }> = Utils.stripNulls(
-      selectedViews.map((target) => {
-        const instanceGlobalFrame = MetadataUtils.getFrameInCanvasCoords(target, editor.jsxMetadata)
-        if (instanceGlobalFrame == null || isInfinityRectangle(instanceGlobalFrame)) {
-          return null
-        } else {
-          return {
-            target: target,
-            frame: instanceGlobalFrame,
-          }
-        }
-      }),
-    )
+  let workingEditorState = { ...editor }
 
-    if (canvasFrames.length > 0) {
-      const parentPath = EP.parentPath(selectedViews[0])
-      const sourceIsParent = selectedViews.length === 1 && parentPath != null
-      let source: CanvasRectangle
-      if (sourceIsParent) {
-        const parentFrame = MetadataUtils.getFrameInCanvasCoords(parentPath, editor.jsxMetadata)
+  const targetAlignment = isAlignment(alignmentOrDistribution)
+  if (targetAlignment) {
+    workingEditorState = alignFlexOrGridChildren(
+      workingEditorState,
+      selectedViews.filter((v) =>
+        MetadataUtils.isFlexOrGridChild(workingEditorState.jsxMetadata, v),
+      ),
+      alignmentOrDistribution,
+    )
+  }
 
-        // if the parent frame is null, that means we probably ran into some error state,
-        // as it means the child's globalFrame should also be null, so we shouldn't be in this branch
-        const maybeSource = Utils.forceNotNull(
-          `found no parent global frame for ${EP.toComponentId(parentPath!)}`,
-          parentFrame,
-        )
+  workingEditorState = alignFlowChildren(
+    workingEditorState,
+    selectedViews.filter(
+      (v) =>
+        !targetAlignment || !MetadataUtils.isFlexOrGridChild(workingEditorState.jsxMetadata, v),
+    ),
+    alignmentOrDistribution,
+  )
 
-        // If the parent frame is infinite, fall back to using the selected element's frame
-        source = isInfinityRectangle(maybeSource) ? canvasFrames[0].frame : maybeSource
-      } else {
-        source = Utils.boundingRectangleArray(Utils.pluck(canvasFrames, 'frame'))! // I know this can't be null because we checked the canvasFrames array is non-empty
-      }
-      const updatedCanvasFrames = alignOrDistributeCanvasRects(
-        editor.jsxMetadata,
-        canvasFrames,
-        source,
-        alignmentOrDistribution,
-        sourceIsParent,
-      )
-      return {
-        ...setCanvasFramesInnerNew(editor, updatedCanvasFrames, null),
-        trueUpElementsAfterDomWalkerRuns: groupTrueUps,
-      }
-    }
+  return {
+    ...workingEditorState,
+    trueUpElementsAfterDomWalkerRuns: groupTrueUps,
   }
-
-  return editor
 }
 
 function alignOrDistributeCanvasRects(
@@ -6342,8 +6316,7 @@ function alignOrDistributeCanvasRects(
       break
     }
     default:
-      const _exhaustiveCheck: never = alignmentOrDistribution
-      throw new Error('Something went really wrong.')
+      assertNever(alignmentOrDistribution)
   }
 
   return results
@@ -6607,3 +6580,109 @@ function removeErrorMessagesForFile(editor: EditorState, filename: string): Edit
     ),
   )
 }
+
+function alignFlexOrGridChildren(editor: EditorState, views: ElementPath[], alignment: Alignment) {
+  let workingEditorState = { ...editor }
+  for (const view of views) {
+    function apply(prop: 'alignSelf' | 'justifySelf', value: string) {
+      return applyValuesAtPath(workingEditorState, view, [
+        { path: PP.create('style', prop), value: jsExpressionValue(value, emptyComments) },
+      ]).editorStateWithChanges
+    }
+
+    const { align, justify } = MetadataUtils.getRelativeAlignJustify(
+      workingEditorState.jsxMetadata,
+      view,
+    )
+
+    switch (alignment) {
+      case 'bottom':
+        workingEditorState = apply(align, 'end')
+        break
+      case 'top':
+        workingEditorState = apply(align, 'start')
+        break
+      case 'vcenter':
+        workingEditorState = apply(align, 'center')
+        break
+      case 'hcenter':
+        workingEditorState = apply(justify, 'center')
+        break
+      case 'left':
+        workingEditorState = apply(justify, 'start')
+        break
+      case 'right':
+        workingEditorState = apply(justify, 'end')
+        break
+      default:
+        assertNever(alignment)
+    }
+  }
+  return workingEditorState
+}
+
+function alignFlowChildren(
+  editor: EditorState,
+  views: ElementPath[],
+  alignmentOrDistribution: Alignment | Distribution,
+) {
+  let workingEditorState = { ...editor }
+
+  if (views.length > 0) {
+    // this array of canvasFrames excludes the non-layoutables. it means in a multiselect, they will not be considered
+    const canvasFrames: Array<{
+      target: ElementPath
+      frame: CanvasRectangle
+    }> = Utils.stripNulls(
+      views.map((target) => {
+        const instanceGlobalFrame = MetadataUtils.getFrameInCanvasCoords(
+          target,
+          workingEditorState.jsxMetadata,
+        )
+        if (instanceGlobalFrame == null || isInfinityRectangle(instanceGlobalFrame)) {
+          return null
+        } else {
+          return {
+            target: target,
+            frame: instanceGlobalFrame,
+          }
+        }
+      }),
+    )
+
+    if (canvasFrames.length > 0) {
+      const parentPath = EP.parentPath(views[0])
+      const sourceIsParent = views.length === 1 && parentPath != null
+      let source: CanvasRectangle
+      if (sourceIsParent) {
+        const parentFrame = MetadataUtils.getFrameInCanvasCoords(
+          parentPath,
+          workingEditorState.jsxMetadata,
+        )
+
+        // if the parent frame is null, that means we probably ran into some error state,
+        // as it means the child's globalFrame should also be null, so we shouldn't be in this branch
+        const maybeSource = Utils.forceNotNull(
+          `found no parent global frame for ${EP.toComponentId(parentPath!)}`,
+          parentFrame,
+        )
+
+        // If the parent frame is infinite, fall back to using the selected element's frame
+        source = isInfinityRectangle(maybeSource) ? canvasFrames[0].frame : maybeSource
+      } else {
+        source = Utils.boundingRectangleArray(Utils.pluck(canvasFrames, 'frame'))! // I know this can't be null because we checked the canvasFrames array is non-empty
+      }
+      const updatedCanvasFrames = alignOrDistributeCanvasRects(
+        workingEditorState.jsxMetadata,
+        canvasFrames,
+        source,
+        alignmentOrDistribution,
+        sourceIsParent,
+      )
+      workingEditorState = {
+        ...setCanvasFramesInnerNew(workingEditorState, updatedCanvasFrames, null),
+      }
+    }
+  }
+  return workingEditorState
+}
diff --git a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
index 30b51566aba5..cd020e303e72 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
@@ -322,6 +322,8 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     },
     rowGap: null,
     columnGap: null,
+    justifySelf: null,
+    alignSelf: null,
   }
 
   const newDifferentValue: SpecialSizeMeasurements = {
@@ -441,6 +443,8 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     },
     rowGap: null,
     columnGap: null,
+    justifySelf: null,
+    alignSelf: null,
   }
 
   it('same reference returns the same reference', () => {
@@ -615,6 +619,8 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       },
       rowGap: null,
       columnGap: null,
+      justifySelf: null,
+      alignSelf: null,
     },
     computedStyle: {
       a: 'a',
@@ -766,6 +772,8 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       },
       rowGap: null,
       columnGap: null,
+      justifySelf: null,
+      alignSelf: null,
     },
     computedStyle: {
       a: 'a',
@@ -942,6 +950,8 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         },
         rowGap: null,
         columnGap: null,
+        justifySelf: null,
+        alignSelf: null,
       },
       computedStyle: {
         a: 'a',
@@ -1095,6 +1105,8 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         },
         rowGap: null,
         columnGap: null,
+        justifySelf: null,
+        alignSelf: null,
       },
       computedStyle: {
         a: 'a',
@@ -1248,6 +1260,8 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         },
         rowGap: null,
         columnGap: null,
+        justifySelf: null,
+        alignSelf: null,
       },
       computedStyle: {
         a: 'a',
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 805fe41df090..f379de57390f 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -2263,6 +2263,9 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
       newSize.columnGap,
     ).areEqual
 
+    const justifySelfEquals = oldSize.justifySelf === newSize.justifySelf
+    const alignSelfEquals = oldSize.alignSelf === newSize.alignSelf
+
     const areEqual =
       offsetResult.areEqual &&
       coordinateSystemBoundsResult.areEqual &&
@@ -2310,7 +2313,9 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
       gridContainerPropertiesFromPropsEqual &&
       gridElementPropertiesFromPropsEqual &&
       rowGapEquals &&
-      columnGapEquals
+      columnGapEquals &&
+      justifySelfEquals &&
+      alignSelfEquals
     if (areEqual) {
       return keepDeepEqualityResult(oldSize, true)
     } else {
@@ -2363,6 +2368,8 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
         newSize.elementGridPropertiesFromProps,
         newSize.rowGap,
         newSize.columnGap,
+        newSize.justifySelf,
+        newSize.alignSelf,
       )
       return keepDeepEqualityResult(sizeMeasurements, false)
     }
diff --git a/editor/src/components/inspector/alignment-buttons.tsx b/editor/src/components/inspector/alignment-buttons.tsx
new file mode 100644
index 000000000000..e34735130ae2
--- /dev/null
+++ b/editor/src/components/inspector/alignment-buttons.tsx
@@ -0,0 +1,379 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import React from 'react'
+import { MetadataUtils } from '../../core/model/element-metadata-utils'
+import { mapDropNulls } from '../../core/shared/array-utils'
+import * as EP from '../../core/shared/element-path'
+import { zeroRectangle, zeroRectIfNullOrInfinity } from '../../core/shared/math-utils'
+import * as PP from '../../core/shared/property-path'
+import { assertNever } from '../../core/shared/utils'
+import { Button, Icn, Icons } from '../../uuiui'
+import type { DropdownMenuItem } from '../../uuiui/radix-components'
+import {
+  DropdownMenu,
+  regularDropdownMenuItem,
+  separatorDropdownMenuItem,
+} from '../../uuiui/radix-components'
+import type { Alignment, Distribution, EditorAction } from '../editor/action-types'
+import {
+  alignSelectedViews,
+  distributeSelectedViews,
+  unsetProperty,
+} from '../editor/actions/action-creators'
+import { useDispatch } from '../editor/store/dispatch-context'
+import { Substores, useEditorState, useRefEditorState } from '../editor/store/store-hook'
+import { getControlStyles } from './common/control-styles'
+import { OptionChainControl } from './controls/option-chain-control'
+import { UIGridRow } from './widgets/ui-grid-row'
+
+type ActiveAlignments = { [key in Alignment]: boolean }
+
+export const AlignmentButtons = React.memo(() => {
+  const dispatch = useDispatch()
+
+  const selectedViews = useRefEditorState((store) => store.editor.selectedViews)
+
+  const disableAlign = selectedViews.current.length === 0
+  const disableDistribute = selectedViews.current.length < 3
+
+  const activeAlignments = useActiveAlignments()
+  const hasActiveAlignments = React.useMemo(() => {
+    return (
+      activeAlignments.bottom ||
+      activeAlignments.left ||
+      activeAlignments.right ||
+      activeAlignments.vcenter ||
+      activeAlignments.hcenter ||
+      activeAlignments.top
+    )
+  }, [activeAlignments])
+
+  const getUnsetAlignmentsActions = useGetUnsetAlignmentsActions(activeAlignments)
+
+  const unsetAllAlignments = React.useCallback(() => {
+    const actions = getUnsetAlignmentsActions().map((a) => a.action)
+    dispatch(actions)
+  }, [dispatch, getUnsetAlignmentsActions])
+
+  const distributeSelected = React.useCallback(
+    (distribution: Distribution) => {
+      dispatch([distributeSelectedViews(distribution)], 'everyone')
+    },
+    [dispatch],
+  )
+
+  const distributeHorizontal = React.useCallback(
+    () => distributeSelected('horizontal'),
+    [distributeSelected],
+  )
+
+  const distributeVertical = React.useCallback(
+    () => distributeSelected('vertical'),
+    [distributeSelected],
+  )
+
+  const dropdownOpener = React.useCallback(() => {
+    return (
+      <Button highlight>
+        <Icons.Threedots color='main' />
+      </Button>
+    )
+  }, [])
+
+  const alignSelected = React.useCallback(
+    (alignment: Alignment) => {
+      if (activeAlignments[alignment]) {
+        const unsetAlignment = getUnsetAlignmentsActions()
+          .filter((a) => a.alignments.includes(alignment))
+          .map((a) => a.action)
+        dispatch(unsetAlignment)
+      } else {
+        dispatch([alignSelectedViews(alignment)], 'everyone')
+      }
+    },
+    [dispatch, activeAlignments, getUnsetAlignmentsActions],
+  )
+
+  const dropdownItems = React.useMemo(() => {
+    let items: DropdownMenuItem[] = []
+
+    if (hasActiveAlignments) {
+      items.push(
+        regularDropdownMenuItem({
+          id: 'unset',
+          label: 'Unset',
+          onSelect: unsetAllAlignments,
+        }),
+        separatorDropdownMenuItem('sep'),
+      )
+    }
+
+    items.push(
+      regularDropdownMenuItem({
+        id: 'distribute-horizontal',
+        label: 'Distribute Horizontal',
+        onSelect: distributeHorizontal,
+        disabled: disableDistribute,
+        icon: (
+          <Icn
+            category='inspector'
+            type={'distribute-horizontal'}
+            width={16}
+            height={16}
+            color='white'
+          />
+        ),
+      }),
+      regularDropdownMenuItem({
+        id: 'distribute-vertical',
+        label: 'Distribute Vertical',
+        onSelect: distributeVertical,
+        disabled: disableDistribute,
+        icon: (
+          <Icn
+            category='inspector'
+            type={'distribute-vertical'}
+            width={16}
+            height={16}
+            color='white'
+          />
+        ),
+      }),
+    )
+
+    return items
+  }, [
+    disableDistribute,
+    distributeHorizontal,
+    distributeVertical,
+    hasActiveAlignments,
+    unsetAllAlignments,
+  ])
+
+  const chainValueJustify = React.useMemo(() => {
+    return activeAlignments.left
+      ? 'left'
+      : activeAlignments.hcenter
+      ? 'hcenter'
+      : activeAlignments.right
+      ? 'right'
+      : null
+  }, [activeAlignments])
+
+  const chainValueAlign = React.useMemo(() => {
+    return activeAlignments.top
+      ? 'top'
+      : activeAlignments.vcenter
+      ? 'vcenter'
+      : activeAlignments.bottom
+      ? 'bottom'
+      : null
+  }, [activeAlignments])
+
+  return (
+    <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
+      <OptionChainControl
+        id='left'
+        testId='left'
+        key='left'
+        onSubmitValue={alignSelected}
+        value={chainValueJustify}
+        controlStatus='controlled'
+        controlStyles={getControlStyles('controlled')}
+        options={[
+          {
+            value: 'left',
+            icon: { category: 'inspector', type: 'justifySelf-start' },
+            forceCallOnSubmitValue: true,
+            disabled: disableAlign,
+          },
+          {
+            value: 'hcenter',
+            icon: { category: 'inspector', type: 'justifySelf-center' },
+            forceCallOnSubmitValue: true,
+            disabled: disableAlign,
+          },
+          {
+            value: 'right',
+            icon: { category: 'inspector', type: 'justifySelf-end' },
+            forceCallOnSubmitValue: true,
+            disabled: disableAlign,
+          },
+        ]}
+      />
+      <OptionChainControl
+        id='left'
+        testId='left'
+        key='left'
+        onSubmitValue={alignSelected}
+        value={chainValueAlign}
+        controlStatus='controlled'
+        controlStyles={getControlStyles('controlled')}
+        options={[
+          {
+            value: 'top',
+            icon: { category: 'inspector', type: 'alignSelf-start' },
+            forceCallOnSubmitValue: true,
+            disabled: disableAlign,
+          },
+          {
+            value: 'vcenter',
+            icon: { category: 'inspector', type: 'alignSelf-center' },
+            forceCallOnSubmitValue: true,
+            disabled: disableAlign,
+          },
+          {
+            value: 'bottom',
+            icon: { category: 'inspector', type: 'alignSelf-end' },
+            forceCallOnSubmitValue: true,
+            disabled: disableAlign,
+          },
+        ]}
+      />
+
+      <DropdownMenu align='end' items={dropdownItems} opener={dropdownOpener} />
+    </UIGridRow>
+  )
+})
+AlignmentButtons.displayName = 'AlignmentButtons'
+
+function useActiveAlignments(): ActiveAlignments {
+  const selectedViews = useRefEditorState((store) => store.editor.selectedViews)
+
+  const jsxMetadata = useEditorState(
+    Substores.metadata,
+    (store) => store.editor.jsxMetadata,
+    'useActiveAlignments jsxMetadata',
+  )
+
+  const isActive = React.useCallback(
+    (alignment: Alignment) => {
+      if (selectedViews.current.length === 0) {
+        return false
+      }
+      return selectedViews.current.every((view) => {
+        const isFlexOrGridChild = MetadataUtils.isFlexOrGridChild(jsxMetadata, view)
+        const { align, justify } = MetadataUtils.getRelativeAlignJustify(jsxMetadata, view)
+
+        const meta = MetadataUtils.findElementByElementPath(jsxMetadata, view)
+        if (meta == null) {
+          return false
+        }
+
+        const parent = MetadataUtils.findElementByElementPath(jsxMetadata, EP.parentPath(view))
+        const parentFrame =
+          parent != null ? zeroRectIfNullOrInfinity(parent.globalFrame) : zeroRectangle
+
+        switch (alignment) {
+          case 'top':
+            return isFlexOrGridChild
+              ? meta.specialSizeMeasurements[align] === 'flex-start' ||
+                  meta.specialSizeMeasurements[align] === 'start'
+              : meta.specialSizeMeasurements.offset.y === 0
+          case 'bottom':
+            return isFlexOrGridChild
+              ? meta.specialSizeMeasurements[align] === 'flex-end' ||
+                  meta.specialSizeMeasurements[align] === 'end'
+              : parent != null &&
+                  meta.specialSizeMeasurements.offset.y ===
+                    parentFrame.height - meta.specialSizeMeasurements.clientHeight
+          case 'vcenter':
+            return isFlexOrGridChild
+              ? meta.specialSizeMeasurements[align] === 'center'
+              : parent != null &&
+                  meta.specialSizeMeasurements.offset.y ===
+                    Math.ceil(
+                      parentFrame.height / 2 - meta.specialSizeMeasurements.clientHeight / 2,
+                    )
+          case 'left':
+            return isFlexOrGridChild
+              ? meta.specialSizeMeasurements[justify] === 'flex-start' ||
+                  meta.specialSizeMeasurements[justify] === 'start'
+              : meta.specialSizeMeasurements.offset.x === 0
+          case 'right':
+            return isFlexOrGridChild
+              ? meta.specialSizeMeasurements[justify] === 'flex-end' ||
+                  meta.specialSizeMeasurements[justify] === 'end'
+              : parent != null &&
+                  meta.specialSizeMeasurements.offset.x ===
+                    parentFrame.width - meta.specialSizeMeasurements.clientWidth
+          case 'hcenter':
+            return isFlexOrGridChild
+              ? meta.specialSizeMeasurements[justify] === 'center'
+              : parent != null &&
+                  meta.specialSizeMeasurements.offset.x ===
+                    Math.ceil(parentFrame.width / 2 - meta.specialSizeMeasurements.clientWidth / 2)
+          default:
+            assertNever(alignment)
+            return false
+        }
+      })
+    },
+    [jsxMetadata, selectedViews],
+  )
+
+  return React.useMemo(() => {
+    return {
+      left: isActive('left'),
+      hcenter: isActive('hcenter'),
+      right: isActive('right'),
+      top: isActive('top'),
+      vcenter: isActive('vcenter'),
+      bottom: isActive('bottom'),
+    }
+  }, [isActive])
+}
+
+type UnsetAlignment = {
+  alignments: Alignment[]
+  action: EditorAction
+}
+
+function useGetUnsetAlignmentsActions(activeAlignments: ActiveAlignments) {
+  const selectedViews = useRefEditorState((store) => store.editor.selectedViews)
+
+  const jsxMetadata = useEditorState(
+    Substores.metadata,
+    (store) => store.editor.jsxMetadata,
+    'useGetUnsetAlignmentsActions jsxMetadata',
+  )
+
+  return React.useCallback((): UnsetAlignment[] => {
+    const activeAlignmentsList = Object.entries(activeAlignments).reduce((acc, [key, set]) => {
+      if (set) {
+        return acc.concat(key as Alignment)
+      }
+      return acc
+    }, [] as Alignment[])
+
+    return mapDropNulls((path) => {
+      let actions: UnsetAlignment[] = []
+
+      const isFlexOrGridChild = MetadataUtils.isFlexOrGridChild(jsxMetadata, path)
+      const { align, justify } = MetadataUtils.getRelativeAlignJustify(jsxMetadata, path)
+
+      if (activeAlignments.left || activeAlignments.hcenter || activeAlignments.right) {
+        const alignments: Alignment[] = activeAlignmentsList.filter(
+          (alignment) => alignment === 'left' || alignment === 'hcenter' || alignment === 'right',
+        )
+        actions.push({
+          action: unsetProperty(path, PP.create('style', isFlexOrGridChild ? justify : 'left')),
+          alignments: alignments,
+        })
+      }
+
+      if (activeAlignments.top || activeAlignments.vcenter || activeAlignments.bottom) {
+        const alignments: Alignment[] = activeAlignmentsList.filter(
+          (alignment) => alignment === 'top' || alignment === 'vcenter' || alignment === 'bottom',
+        )
+        actions.push({
+          action: unsetProperty(path, PP.create('style', isFlexOrGridChild ? align : 'top')),
+          alignments: alignments,
+        })
+      }
+
+      return actions
+    }, selectedViews.current).flat()
+  }, [activeAlignments, selectedViews, jsxMetadata])
+}
diff --git a/editor/src/components/inspector/controls/option-chain-control.tsx b/editor/src/components/inspector/controls/option-chain-control.tsx
index cdcf1b84b9fa..a0000f4fb299 100644
--- a/editor/src/components/inspector/controls/option-chain-control.tsx
+++ b/editor/src/components/inspector/controls/option-chain-control.tsx
@@ -16,6 +16,7 @@ export interface OptionChainOption<T> {
   label?: string
   tooltip?: string
   forceCallOnSubmitValue?: boolean // Call the onSubmitValue again even when the control is already on that value
+  disabled?: boolean
 }
 
 export function getOptionControlTestId(testIdPrefix: string, postfix: string): string {
@@ -93,6 +94,9 @@ export const OptionChainControl: React.FunctionComponent<
             value={props.value === option.value}
             // eslint-disable-next-line react/jsx-no-bind
             onSubmitValue={(isChecked: boolean) => {
+              if (option.disabled === true) {
+                return
+              }
               if (isChecked || option.forceCallOnSubmitValue) {
                 props.onSubmitValue(option.value)
               } else {
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index 8718b4106c3f..e51e2fecd4fd 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -101,6 +101,7 @@ export function getFlexJustifyContent(value: string | null): FlexJustifyContent
 }
 
 export type FlexAlignment = StartCenterEnd | 'auto' | 'stretch'
+export type SelfAlignment = FlexAlignment | 'end' | 'start'
 
 export function getFlexAlignment(value: string | null): FlexAlignment | null {
   switch (value) {
@@ -119,6 +120,17 @@ export function getFlexAlignment(value: string | null): FlexAlignment | null {
   }
 }
 
+export function getSelfAlignment(value: string | null): SelfAlignment | null {
+  switch (value) {
+    case 'end':
+      return 'end'
+    case 'start':
+      return 'start'
+    default:
+      return getFlexAlignment(value)
+  }
+}
+
 function stringToFlexDirection(str: string | null): FlexDirection | null {
   switch (str) {
     case 'row':
diff --git a/editor/src/components/inspector/inspector.tsx b/editor/src/components/inspector/inspector.tsx
index ead15872c320..e4ea5d8d688c 100644
--- a/editor/src/components/inspector/inspector.tsx
+++ b/editor/src/components/inspector/inspector.tsx
@@ -14,15 +14,9 @@ import * as PP from '../../core/shared/property-path'
 import * as EP from '../../core/shared/element-path'
 import Utils from '../../utils/utils'
 import { setFocus } from '../common/actions'
-import type { Alignment, Distribution, EditorAction } from '../editor/action-types'
+import type { EditorAction } from '../editor/action-types'
 import * as EditorActions from '../editor/actions/action-creators'
-import {
-  alignSelectedViews,
-  distributeSelectedViews,
-  setProp_UNSAFE,
-  transientActions,
-  unsetProperty,
-} from '../editor/actions/action-creators'
+import { setProp_UNSAFE, transientActions, unsetProperty } from '../editor/actions/action-creators'
 
 import type { ElementsToRerender } from '../editor/store/editor-state'
 import {
@@ -51,7 +45,6 @@ import {
   useKeepReferenceEqualityIfPossible,
   useKeepShallowReferenceEquality,
 } from '../../utils/react-performance'
-import { Icn, useColorTheme, UtopiaTheme, FlexRow, Button, SquareButton } from '../../uuiui'
 import { getElementsToTarget } from './common/inspector-utils'
 import type { ElementPath, PropertyPath } from '../../core/shared/project-file-types'
 import { unless, when } from '../../utils/react-conditionals'
@@ -112,128 +105,6 @@ export interface InspectorProps extends TargetSelectorSectionProps {
   selectedViews: Array<ElementPath>
 }
 
-interface AlignDistributeButtonProps {
-  onMouseUp: () => void
-  toolTip: string
-  iconType: string
-  disabled: boolean
-}
-
-const AlignDistributeButton = React.memo<AlignDistributeButtonProps>(
-  (props: AlignDistributeButtonProps) => {
-    return (
-      <SquareButton highlight disabled={props.disabled} onMouseUp={props.onMouseUp}>
-        <Icn
-          tooltipText={props.toolTip}
-          category='layout/commands'
-          type={props.iconType}
-          width={16}
-          height={16}
-        />
-      </SquareButton>
-    )
-  },
-)
-AlignDistributeButton.displayName = 'AlignDistributeButton'
-
-const AlignmentButtons = React.memo((props: { numberOfTargets: number }) => {
-  const colorTheme = useColorTheme()
-  const dispatch = useDispatch()
-  const alignSelected = React.useCallback(
-    (alignment: Alignment) => {
-      dispatch([alignSelectedViews(alignment)], 'everyone')
-    },
-    [dispatch],
-  )
-
-  const distributeSelected = React.useCallback(
-    (distribution: Distribution) => {
-      dispatch([distributeSelectedViews(distribution)], 'everyone')
-    },
-    [dispatch],
-  )
-  const disableAlign = props.numberOfTargets === 0
-  const disableDistribute = props.numberOfTargets < 3
-  const multipleTargets = props.numberOfTargets > 1
-
-  const alignLeft = React.useCallback(() => alignSelected('left'), [alignSelected])
-  const alignHCenter = React.useCallback(() => alignSelected('hcenter'), [alignSelected])
-  const alignRight = React.useCallback(() => alignSelected('right'), [alignSelected])
-  const alignTop = React.useCallback(() => alignSelected('top'), [alignSelected])
-  const alignVCenter = React.useCallback(() => alignSelected('vcenter'), [alignSelected])
-  const alignBottom = React.useCallback(() => alignSelected('bottom'), [alignSelected])
-  const distributeHorizontal = React.useCallback(
-    () => distributeSelected('horizontal'),
-    [distributeSelected],
-  )
-  const distributeVertical = React.useCallback(
-    () => distributeSelected('vertical'),
-    [distributeSelected],
-  )
-
-  return (
-    <FlexRow
-      style={{
-        justifyContent: 'space-around',
-        alignItems: 'center',
-        height: UtopiaTheme.layout.rowHeight.normal,
-        padding: '8px 0px',
-        flexShrink: 0,
-      }}
-    >
-      <AlignDistributeButton
-        onMouseUp={alignLeft}
-        toolTip={`Align to left of ${multipleTargets ? 'selection' : 'parent'}`}
-        iconType='alignLeft'
-        disabled={disableAlign}
-      />
-      <AlignDistributeButton
-        onMouseUp={alignHCenter}
-        toolTip={`Align to horizontal center of ${multipleTargets ? 'selection' : 'parent'}`}
-        iconType='alignHorizontalCenter'
-        disabled={disableAlign}
-      />
-      <AlignDistributeButton
-        onMouseUp={alignRight}
-        toolTip={`Align to right of ${multipleTargets ? 'selection' : 'parent'}`}
-        iconType='alignRight'
-        disabled={disableAlign}
-      />
-      <AlignDistributeButton
-        onMouseUp={alignTop}
-        toolTip={`Align to top of ${multipleTargets ? 'selection' : 'parent'}`}
-        iconType='alignTop'
-        disabled={disableAlign}
-      />
-      <AlignDistributeButton
-        onMouseUp={alignVCenter}
-        toolTip={`Align to vertical center of ${multipleTargets ? 'selection' : 'parent'}`}
-        iconType='alignVerticalCenter'
-        disabled={disableAlign}
-      />
-      <AlignDistributeButton
-        onMouseUp={alignBottom}
-        toolTip={`Align to bottom of ${multipleTargets ? 'selection' : 'parent'}`}
-        iconType='alignBottom'
-        disabled={disableAlign}
-      />
-      <AlignDistributeButton
-        onMouseUp={distributeHorizontal}
-        toolTip={`Distribute horizontally ↔`}
-        iconType='distributeHorizontal'
-        disabled={disableDistribute}
-      />
-      <AlignDistributeButton
-        onMouseUp={distributeVertical}
-        toolTip={`Distribute vertically ↕️`}
-        iconType='distributeVertical'
-        disabled={disableDistribute}
-      />
-    </FlexRow>
-  )
-})
-AlignmentButtons.displayName = 'AlignmentButtons'
-
 function buildNonDefaultPositionPaths(propertyTarget: Array<string>): Array<PropertyPath> {
   return [
     stylePropPathMappingFn('right', propertyTarget),
@@ -415,7 +286,6 @@ export const Inspector = React.memo<InspectorProps>((props: InspectorProps) => {
   const shouldShowStyleSectionContents = styleSectionOpen && !shouldHideInspectorSections
   const shouldShowAdvancedSectionContents = advancedSectionOpen && !shouldHideInspectorSections
 
-  const shouldShowAlignmentButtons = !isCodeElement && inspectorPreferences.includes('layout')
   const shouldShowClassNameSubsection = isTwindEnabled() && inspectorPreferences.includes('visual')
   const shouldShowTargetSelectorSection = canEdit && inspectorPreferences.includes('visual')
   const shouldShowFlexSection =
@@ -475,14 +345,7 @@ export const Inspector = React.memo<InspectorProps>((props: InspectorProps) => {
                   paddingBottom: 50,
                 }}
               >
-                {rootElementIsSelected ? (
-                  <RootElementIndicator />
-                ) : (
-                  when(
-                    shouldShowAlignmentButtons,
-                    <AlignmentButtons numberOfTargets={selectedViews.length} />,
-                  )
-                )}
+                {when(rootElementIsSelected, <RootElementIndicator />)}
                 {anyComponents || multiselectedContract === 'fragment' ? (
                   <ComponentSection isScene={false} />
                 ) : null}
diff --git a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
index 0c729df8b904..794b24cbe1d9 100644
--- a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
+++ b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
@@ -93,8 +93,6 @@ interface LTWHPixelValues {
 export const FrameUpdatingLayoutSection = React.memo(() => {
   const dispatch = useDispatch()
   const metadataRef = useRefEditorState(metadataSelector)
-  const allElementsPropsRef = useRefEditorState((store) => store.editor.allElementProps)
-  const pathTreesRef = useRefEditorState((store) => store.editor.elementPathTree)
   const selectedViewsRef = useRefEditorState(selectedViewsSelector)
   const projectContentsRef = useRefEditorState((store) => store.editor.projectContents)
   const originalGlobalFrame: CanvasRectangle = useEditorState(
@@ -292,14 +290,14 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
       <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
         <FrameUpdatingLayoutControl
           property='left'
-          label='L'
+          label='X'
           updateFrame={updateFrame}
           currentValues={originalLTWHValues.left}
           invalid={invalidPins.left || invalidPins.right} // currently showing red for BOTH directions
         />
         <FrameUpdatingLayoutControl
           property='top'
-          label='T'
+          label='Y'
           updateFrame={updateFrame}
           currentValues={originalLTWHValues.top}
           invalid={invalidPins.top || invalidPins.bottom} // currently showing red for BOTH directions
diff --git a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx
index 0c76a94ea7af..b532bfa8e977 100644
--- a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx
+++ b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx
@@ -1,12 +1,6 @@
 import React from 'react'
 import { when } from '../../../../../utils/react-conditionals'
-import {
-  FlexColumn,
-  FlexRow,
-  InspectorSubsectionHeader,
-  Tooltip,
-  UtopiaTheme,
-} from '../../../../../uuiui'
+import { FlexColumn, FlexRow, Tooltip, UtopiaTheme } from '../../../../../uuiui'
 import { Link } from '../../../../../uuiui/link'
 import { useConvertWrapperToFrame } from '../../../../canvas/canvas-strategies/strategies/group-conversion-helpers'
 import { Substores, useEditorState } from '../../../../editor/store/store-hook'
@@ -20,6 +14,9 @@ import { UIGridRow } from '../../../widgets/ui-grid-row'
 import { RadiusRow } from '../../style-section/container-subsection/radius-row'
 import { ClipContentControl } from './clip-content-control'
 import { FrameUpdatingLayoutSection } from './frame-updating-layout-section'
+import { MetadataUtils } from '../../../../../core/model/element-metadata-utils'
+import { getInspectorPreferencesForTargets } from '../../../../../core/property-controls/property-controls-utils'
+import { AlignmentButtons } from '../../../alignment-buttons'
 
 export const SimplifiedLayoutSubsection = React.memo(() => {
   const selectedElementContract = useEditorState(
@@ -33,6 +30,32 @@ export const SimplifiedLayoutSubsection = React.memo(() => {
 
   const showWrapperSectionWarning = selectedElementContract === 'wrapper-div'
 
+  const isCodeElement = useEditorState(
+    Substores.metadata,
+    (store) =>
+      store.editor.selectedViews.length > 0 &&
+      store.editor.selectedViews.every(
+        (path) =>
+          MetadataUtils.isConditional(path, store.editor.jsxMetadata) ||
+          MetadataUtils.isExpressionOtherJavascript(path, store.editor.jsxMetadata) ||
+          MetadataUtils.isJSXMapExpression(path, store.editor.jsxMetadata),
+      ),
+    'SimplifiedLayoutSubsection isCodeElement',
+  )
+
+  const inspectorPreferences = useEditorState(
+    Substores.propertyControlsInfo,
+    (store) =>
+      getInspectorPreferencesForTargets(
+        store.editor.selectedViews,
+        store.editor.propertyControlsInfo,
+        store.editor.projectContents,
+      ),
+    'SimplifiedLayoutSubsection inspectorPreferences',
+  )
+
+  const shouldShowAlignmentButtons = !isCodeElement && inspectorPreferences.includes('layout')
+
   return (
     <FlexColumn>
       <FlexRow
@@ -52,6 +75,7 @@ export const SimplifiedLayoutSubsection = React.memo(() => {
         {when(
           showLayoutSection,
           <>
+            {when(shouldShowAlignmentButtons, <AlignmentButtons />)}
             <FrameUpdatingLayoutSection />
             <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
               <FixedHugDropdown dimension='width' />
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index af022ad5a6e8..fb5587eb39d7 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -630,6 +630,24 @@ export const MetadataUtils = {
       MetadataUtils.getFlexDirection(instance),
     )
   },
+  isFlexOrGridChild: function (jsxMetadata: ElementInstanceMetadataMap, path: ElementPath) {
+    return (
+      MetadataUtils.isFlexLayoutedContainer(
+        MetadataUtils.findElementByElementPath(jsxMetadata, EP.parentPath(path)),
+      ) || MetadataUtils.isGridCell(jsxMetadata, path)
+    )
+  },
+  getRelativeAlignJustify: function (
+    jsxMetadata: ElementInstanceMetadataMap,
+    path: ElementPath,
+  ): { align: 'alignSelf' | 'justifySelf'; justify: 'alignSelf' | 'justifySelf' } {
+    const direction = MetadataUtils.getSimpleFlexDirection(
+      MetadataUtils.findElementByElementPath(jsxMetadata, EP.parentPath(path)),
+    )
+    const align = direction.direction === 'horizontal' ? 'alignSelf' : 'justifySelf'
+    const justify = direction.direction === 'horizontal' ? 'justifySelf' : 'alignSelf'
+    return { align, justify }
+  },
   flexDirectionToSimpleFlexDirection: function (flexDirection: FlexDirection): {
     direction: Direction
     forwardOrReverse: ForwardOrReverse
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 911b3ef6a132..0dc742581b14 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -112,7 +112,7 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(AlignmentButtons)",
+  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(RootElementIndicator)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedClass(ComponentSection)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(InspectorSectionHeader)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(FragmentSection)",
@@ -278,6 +278,133 @@ Array [
   "/div/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)",
   "/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/label/div/Icon/img",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/label/div/Icon/img",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled(div))",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(DropdownMenuTrigger)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-vertical'",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled.DropdownMenuContent)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenuPortal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenu)",
+  "/Symbol(react.forward_ref)(Primitive.button)/button/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -772,7 +899,7 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(AlignmentButtons)",
+  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(RootElementIndicator)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedClass(ComponentSection)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(InspectorSectionHeader)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(FragmentSection)",
@@ -877,6 +1004,133 @@ Array [
   "/div/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)",
   "/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/label/div/Icon/img",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/label/div/Icon/img",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled(div))",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(DropdownMenuTrigger)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-vertical'",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled.DropdownMenuContent)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenuPortal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenu)",
+  "/Symbol(react.forward_ref)(Primitive.button)/button/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -1640,6 +1894,133 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)",
   "/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)/UtopiaSpiedFunctionComponent($)",
   "/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)/UtopiaSpiedFunctionComponent($)/UtopiaSpiedExoticType(Symbol(react.provider))",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/label/div/Icon/img",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/label/div/Icon/img",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled(div))",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(DropdownMenuTrigger)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-vertical'",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled.DropdownMenuContent)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenuPortal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenu)",
+  "/Symbol(react.forward_ref)(Primitive.button)/button/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
@@ -2562,6 +2943,133 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/PropertyControlsSection/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/PropertyControlsSection/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/div/div/Symbol(react.forward_ref)(Styled(span))/span",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)(Icon)",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.memo)()",
+  "/div/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/AlignmentButtons/Symbol(react.forward_ref)(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/label/div/Icon/img",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div//Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/label/div/Icon/img",
+  "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
+  "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/label/div/Icon/img",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled(div))",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(DropdownMenuTrigger)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-vertical'",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled.DropdownMenuContent)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenuPortal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//UtopiaSpiedFunctionComponent(DropdownMenu)",
+  "/Symbol(react.forward_ref)(Primitive.button)/button/Symbol(react.forward_ref)(Styled(div))/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/FixedHugDropdown/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedClass(StateManager)",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index 3c487db99578..b5f21e06e6c8 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`737`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`864`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`989`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1116`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`530`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`657`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`655`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`782`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })
diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts
index 63442cce8e72..f0c68e7b10f1 100644
--- a/editor/src/core/shared/element-template.ts
+++ b/editor/src/core/shared/element-template.ts
@@ -34,7 +34,11 @@ import { firstLetterIsLowerCase } from './string-utils'
 import { intrinsicHTMLElementNamesAsStrings } from './dom-utils'
 import type { MapLike } from 'typescript'
 import { forceNotNull } from './optional-utils'
-import type { FlexAlignment, FlexJustifyContent } from '../../components/inspector/inspector-common'
+import type {
+  FlexAlignment,
+  FlexJustifyContent,
+  SelfAlignment,
+} from '../../components/inspector/inspector-common'
 import { allComments } from './utopia-flags'
 import type { Optic } from './optics/optics'
 import { fromField } from './optics/optic-creators'
@@ -2812,6 +2816,8 @@ export interface SpecialSizeMeasurements {
   justifyContent: FlexJustifyContent | null
   alignContent: FlexJustifyContent | null
   alignItems: FlexAlignment | null
+  alignSelf: SelfAlignment | null
+  justifySelf: SelfAlignment | null
   htmlElementName: string
   renderedChildrenCount: number
   globalContentBoxForChildren: MaybeInfinityCanvasRectangle | null
@@ -2882,6 +2888,8 @@ export function specialSizeMeasurements(
   elementGridPropertiesFromProps: GridElementProperties,
   rowGap: number | null,
   columnGap: number | null,
+  justifySelf: SelfAlignment | null,
+  alignSelf: SelfAlignment | null,
 ): SpecialSizeMeasurements {
   return {
     offset,
@@ -2932,6 +2940,8 @@ export function specialSizeMeasurements(
     elementGridPropertiesFromProps,
     rowGap,
     columnGap,
+    justifySelf,
+    alignSelf,
   }
 }
 
@@ -3009,6 +3019,8 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements(
   },
   null,
   null,
+  null,
+  null,
 )
 
 export function walkElement(
diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx
index 1e5e446bd83d..4d1192f407b0 100644
--- a/editor/src/uuiui/radix-components.tsx
+++ b/editor/src/uuiui/radix-components.tsx
@@ -151,6 +151,7 @@ export const DropdownMenu = React.memo<DropdownMenuProps>((props) => {
                 key={item.id}
                 onSelect={item.onSelect}
                 css={{
+                  opacity: item.disabled ? 0.5 : 1,
                   ':hover': {
                     backgroundColor: item.danger
                       ? colorTheme.errorForeground.value

From 94a6c071a3bbe8e0586994b20af376cddef39c3b Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Fri, 27 Sep 2024 02:10:33 +0300
Subject: [PATCH 052/272] chore(editor): remove unneeded network call (#6399)

**Problem:**
We have a `/permissions` network call on our loading critical path, but
its result is not being used (yet?)

**Fix:**
Remove the call for now since it is sometimes blocking loading the
editor (competing for network)

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode
---
 editor/src/templates/editor.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index f6bcba73af2a..da7f5d0b2c6c 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -34,7 +34,6 @@ import {
 import {
   getLoginState,
   getUserConfiguration,
-  getUserPermissions,
   startPollingLoginState,
 } from '../components/editor/server'
 import type { DispatchResult } from '../components/editor/store/dispatch'
@@ -347,10 +346,7 @@ export class Editor {
       const projectId = getProjectID()
       startPollingLoginState(this.boundDispatch, loginState)
       this.storedState.userState.loginState = loginState
-      void Promise.all([
-        getUserConfiguration(loginState),
-        getUserPermissions(loginState, projectId),
-      ]).then(([shortcutConfiguration, permissions]) => {
+      void getUserConfiguration(loginState).then((shortcutConfiguration) => {
         const userState = {
           ...this.storedState.userState,
           ...shortcutConfiguration,

From fde6292978e24a7bf8310acbdb5e0cebe33cced9 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 27 Sep 2024 09:42:17 +0200
Subject: [PATCH 053/272] Fix alignment controls duplicate key (#6417)

This PR fixes a typo error in
https://github.com/concrete-utopia/utopia/pull/6413 that caused
duplicate keys errors when rendering the new alignment controls.

---------

Co-authored-by: Balint Gabor <127662+gbalint@users.noreply.github.com>
---
 .../inspector/alignment-buttons.tsx           | 12 +--
 ...performance-regression-tests.spec.tsx.snap | 96 +++++++++----------
 2 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/editor/src/components/inspector/alignment-buttons.tsx b/editor/src/components/inspector/alignment-buttons.tsx
index e34735130ae2..b99efdfd7de9 100644
--- a/editor/src/components/inspector/alignment-buttons.tsx
+++ b/editor/src/components/inspector/alignment-buttons.tsx
@@ -174,9 +174,9 @@ export const AlignmentButtons = React.memo(() => {
   return (
     <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
       <OptionChainControl
-        id='left'
-        testId='left'
-        key='left'
+        id='alignment-chain-control-justify'
+        testId='alignment-chain-control-justify'
+        key='alignment-chain-control-justify'
         onSubmitValue={alignSelected}
         value={chainValueJustify}
         controlStatus='controlled'
@@ -203,9 +203,9 @@ export const AlignmentButtons = React.memo(() => {
         ]}
       />
       <OptionChainControl
-        id='left'
-        testId='left'
-        key='left'
+        id='alignment-chain-control-align'
+        testId='alignment-chain-control-align'
+        key='alignment-chain-control-align'
         onSubmitValue={alignSelected}
         value={chainValueAlign}
         controlStatus='controlled'
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 0dc742581b14..fb7e636a06dc 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -296,40 +296,40 @@ Array [
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-justify-0'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-justify-0'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-justify-1'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-justify-1'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-justify-2'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-justify-2'",
   "/label/div/Icon/img",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -341,40 +341,40 @@ Array [
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-align-0'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-align-0'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-align-1'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-align-1'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-align-2'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-align-2'",
   "/label/div/Icon/img",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled(div))",
@@ -1022,40 +1022,40 @@ Array [
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-justify-0'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-justify-0'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-justify-1'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-justify-1'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-justify-2'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-justify-2'",
   "/label/div/Icon/img",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -1067,40 +1067,40 @@ Array [
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-align-0'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-align-0'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-align-1'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-align-1'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-align-2'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-align-2'",
   "/label/div/Icon/img",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled(div))",
@@ -1912,40 +1912,40 @@ Array [
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-justify-0'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-justify-0'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-justify-1'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-justify-1'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-justify-2'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-justify-2'",
   "/label/div/Icon/img",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -1957,40 +1957,40 @@ Array [
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-align-0'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-align-0'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-align-1'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-align-1'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-align-2'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-align-2'",
   "/label/div/Icon/img",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled(div))",
@@ -2961,40 +2961,40 @@ Array [
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-justify-0'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-justify-0'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-justify-1'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-justify-1'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-justify-2'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-justify-2'",
   "/label/div/Icon/img",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -3006,40 +3006,40 @@ Array [
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-0'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-align-0'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-0'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-align-0'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-1'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-align-1'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-1'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-align-1'",
   "/label/div/Icon/img",
   "/div/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/input",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.memo)(Icon)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
-  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='left-2'",
+  "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='alignment-chain-control-align-2'",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/UtopiaSpiedFunctionComponent(Tooltip)",
   "/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/UtopiaSpiedFunctionComponent(OptionControl)/div",
   "/UtopiaSpiedFunctionComponent(OptionControl)/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)",
   "/UtopiaSpiedFunctionComponent(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='left-2'",
+  "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/label:data-testid='alignment-chain-control-align-2'",
   "/label/div/Icon/img",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(Styled(div))",

From 40e6424f3ccd22099a8a11616e0e2ec1cbcbb642 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Sun, 29 Sep 2024 14:37:39 +0300
Subject: [PATCH 054/272] fix(parse): mutable highlight bounds (#6419)

This PR optimizes highlight bounds manipulation by:
1. Making the `highlightBounds` mutable *only when being edited* - to
avoid re-creating them when inside loops
2. Replaces `for-of` implementation with `reduce` and mutable
assignment, which is a bit more performant:
(going with option 2 instead of the current 1):
<img width="981" alt="image"
src="https://github.com/user-attachments/assets/33d14062-6983-4fec-a19e-83103fb5308a">

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode
---
 .../parser-printer/parser-printer-parsing.ts  | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/editor/src/core/workers/parser-printer/parser-printer-parsing.ts b/editor/src/core/workers/parser-printer/parser-printer-parsing.ts
index f9843fc0ddb9..bb9387d43563 100644
--- a/editor/src/core/workers/parser-printer/parser-printer-parsing.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer-parsing.ts
@@ -1100,7 +1100,7 @@ function parseOtherJavaScript<T extends { uid: string }>(
     }
 
     let parsedElementsWithin: ElementsWithinInPosition = []
-    let highlightBounds = existingHighlightBounds
+    let highlightBounds_MUTABLE = { ...existingHighlightBounds }
 
     function addToParsedElementsWithin(
       currentScope: Array<string>,
@@ -1114,7 +1114,7 @@ function parseOtherJavaScript<T extends { uid: string }>(
         imports,
         topLevelNames,
         propsObjectName,
-        highlightBounds,
+        highlightBounds_MUTABLE,
         alreadyExistingUIDs,
         applySteganography,
       )
@@ -1133,7 +1133,10 @@ function parseOtherJavaScript<T extends { uid: string }>(
                   ? firstChild.startColumn - startColumnShift
                   : firstChild.startColumn,
             })
-            highlightBounds = mergeHighlightBounds(highlightBounds, success.highlightBounds)
+            highlightBounds_MUTABLE = mergeHighlightBounds(
+              highlightBounds_MUTABLE,
+              success.highlightBounds,
+            )
 
             fastForEach(success.definedElsewhere, (val) =>
               pushToDefinedElsewhereIfNotThere(currentScope, val),
@@ -1513,11 +1516,11 @@ function parseOtherJavaScript<T extends { uid: string }>(
 
     return mapEither((created) => {
       // Add in the bounds for the entire value.
-      highlightBounds = addToHighlightBounds(
-        highlightBounds,
+      addToHighlightBoundsMutate(
+        highlightBounds_MUTABLE,
         buildHighlightBoundsForExpressionsAndText(sourceFile, expressionsAndTexts, created.uid),
       )
-      return withParserMetadata(created, highlightBounds, propsUsed, definedElsewhere)
+      return withParserMetadata(created, highlightBounds_MUTABLE, propsUsed, definedElsewhere)
     }, failOnNullResult(create(code, definedWithin, definedElsewhere, fileNode, parsedElementsWithin, paramsToUse, statements)))
   }
 }
@@ -2995,11 +2998,13 @@ function buildHighlightBoundsForUids(
 function mergeHighlightBounds(
   ...multipleBounds: Array<HighlightBoundsForUids>
 ): Readonly<HighlightBoundsForUids> {
-  let result: HighlightBoundsForUids = {}
+  const acc: HighlightBoundsForUids = {}
   for (const bounds of multipleBounds) {
-    Object.assign(result, bounds)
+    for (const key in bounds) {
+      acc[key] = bounds[key]
+    }
   }
-  return result
+  return acc
 }
 
 function merge2WithParserMetadata<T1, T2, U>(
@@ -3032,17 +3037,14 @@ function addBoundsIntoWithParser<T>(
   }
 }
 
-function addToHighlightBounds(
-  existing: Readonly<HighlightBoundsForUids>,
+function addToHighlightBoundsMutate(
+  existing: HighlightBoundsForUids,
   toAdd: HighlightBounds | null,
-): Readonly<HighlightBoundsForUids> {
-  if (toAdd == null) {
-    return existing
-  } else {
-    let result: HighlightBoundsForUids = { ...existing }
-    result[toAdd.uid] = toAdd
-    return result
+): HighlightBoundsForUids {
+  if (toAdd != null) {
+    existing[toAdd.uid] = toAdd
   }
+  return existing
 }
 
 interface UpdateUIDResult {

From 3cf3883b613cecb9bc28714e7c56dba41dc46ed2 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Mon, 30 Sep 2024 10:35:44 +0100
Subject: [PATCH 055/272] performance(editor) Mutation and Resize observers now
 async the DOM walker. (#6414)

- Added `queueUpDomWalker` function that manages the triggering of the
dispatch of the dom walker action.
- Observers now call `queueUpDomWalker` so that only one run is
triggered at some point soon.
---
 .../canvas/dom-walker.spec.browser2.tsx       | 30 ++++++---
 editor/src/components/canvas/dom-walker.ts    | 14 +++-
 ...performance-regression-tests.spec.tsx.snap | 64 +++++++++----------
 3 files changed, 65 insertions(+), 43 deletions(-)

diff --git a/editor/src/components/canvas/dom-walker.spec.browser2.tsx b/editor/src/components/canvas/dom-walker.spec.browser2.tsx
index 43d4423bc2d5..5e24dfa510cd 100644
--- a/editor/src/components/canvas/dom-walker.spec.browser2.tsx
+++ b/editor/src/components/canvas/dom-walker.spec.browser2.tsx
@@ -33,9 +33,27 @@ import { mouseClickAtPoint, mouseDownAtPoint, mouseMoveToPoint } from './event-h
 import { EditorModes } from '../editor/editor-modes'
 import { MetadataUtils } from '../../core/model/element-metadata-utils'
 import { optionalMap } from '../../core/shared/optional-utils'
+import type { SinonFakeTimers } from 'sinon'
+import sinon from 'sinon'
 
 disableStoredStateforTests()
 
+function configureSetupTeardown(): { clock: { current: SinonFakeTimers } } {
+  let clock: { current: SinonFakeTimers } = { current: null as any } // it will be non-null thanks to beforeEach
+  beforeEach(function () {
+    // TODO there is something wrong with sinon fake timers here that remotely break other tests that come after these. If your new browser tests are broken, this may be the reason.
+    clock.current = sinon.useFakeTimers({
+      // the timers will tick so the editor is not totally broken, but we can fast-forward time at will
+      // WARNING: the Sinon fake timers will advance in 20ms increments
+      shouldAdvanceTime: true,
+    })
+  })
+  afterEach(function () {
+    clock.current?.restore()
+  })
+  return { clock: clock }
+}
+
 describe('DOM Walker', () => {
   it('Test Project metadata contains entry for all elements', async () => {
     const renderResult = await renderTestEditorWithCode(TestProject, 'await-first-dom-report')
@@ -413,6 +431,7 @@ describe('Capturing closest offset parent', () => {
 })
 
 describe('Observing runtime changes', () => {
+  const { clock } = configureSetupTeardown()
   const changingProjectCode = `
     import * as React from 'react'
     import { Scene, Storyboard } from 'utopia-api'
@@ -502,8 +521,6 @@ describe('Observing runtime changes', () => {
     )
     expect(metadataBefore).toBeNull()
 
-    const recordedActionsBefore = [...renderResult.getRecordedActions()]
-
     const buttonToClick = renderResult.renderedDOM.getByTestId('click-me')
     const buttonToClickBounds = buttonToClick.getBoundingClientRect()
     const clickPoint = {
@@ -512,14 +529,9 @@ describe('Observing runtime changes', () => {
     }
 
     await mouseClickAtPoint(buttonToClick, clickPoint)
-    await wait(20)
+    clock.current.tick(100)
     await renderResult.getDispatchFollowUpActionsFinished()
-
-    const recordedActionsAfter = [...renderResult.getRecordedActions()]
-    const recordedActionsDuring = recordedActionsAfter.slice(recordedActionsBefore.length)
-
-    const runDomWalkerActions = recordedActionsDuring.filter((a) => a.action === 'RUN_DOM_WALKER')
-    expect(runDomWalkerActions.length).toEqual(2) // Both the resize observer and mutation observer will fire
+    clock.current.tick(100)
 
     // Check there is metadata for the target at the end
     const metadataAfter = MetadataUtils.findElementByElementPath(
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 50c273f01bb7..5b2ea0ba4de3 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -322,6 +322,16 @@ export function initDomWalkerObservers(
   editorStore: UtopiaStoreAPI,
   dispatch: EditorDispatch,
 ): { resizeObserver: ResizeObserver; mutationObserver: MutationObserver } {
+  let domWalkerTimeoutID: number | null = null
+  function queueUpDomWalker(): void {
+    if (domWalkerTimeoutID == null) {
+      domWalkerTimeoutID = window.setTimeout(() => {
+        dispatch([runDOMWalker()])
+        domWalkerTimeoutID = null
+      })
+    }
+  }
+
   // Warning: I modified this code so it runs in all modes, not just in live mode. We still don't trigger
   // the DOM walker during canvas interactions, so the performance impact doesn't seem that bad. But it is
   // necessary, because after remix navigation, and after dynamic changes coming from loaders sometimes the
@@ -352,7 +362,7 @@ export function initDomWalkerObservers(
         }
       }
       if (shouldRunDOMWalker) {
-        dispatch([runDOMWalker()])
+        queueUpDomWalker()
       }
     }
   })
@@ -384,7 +394,7 @@ export function initDomWalkerObservers(
         }
       }
       if (shouldRunDOMWalker) {
-        dispatch([runDOMWalker()])
+        queueUpDomWalker()
       }
     }
   })
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index fb7e636a06dc..8f9197517fbc 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -2460,6 +2460,22 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)",
   "/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)/UtopiaSpiedFunctionComponent($)",
   "/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)/UtopiaSpiedFunctionComponent($)/UtopiaSpiedExoticType(Symbol(react.provider))",
+  "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)/Symbol(react.memo)(Storyboard)",
+  "/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)/Storyboard/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/Storyboard/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(SpyWrapper)/Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(SpyWrapper)/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/Symbol(react.memo)()///UtopiaSpiedFunctionComponent(View)",
+  "///UtopiaSpiedFunctionComponent(View)/div",
+  "/UtopiaSpiedFunctionComponent(View)/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))",
+  "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)",
+  "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)",
+  "/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)",
+  "/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)/div",
+  "/UtopiaSpiedFunctionComponent(View)/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)",
+  "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)/div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//UtopiaSpiedClass(EditorCanvas)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.memo)(FloatingPostActionMenu)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//div",
@@ -2551,22 +2567,6 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)",
   "/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)/UtopiaSpiedFunctionComponent($)",
   "/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)/UtopiaSpiedFunctionComponent($)/UtopiaSpiedExoticType(Symbol(react.provider))",
-  "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
-  "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
-  "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)/Symbol(react.memo)(Storyboard)",
-  "/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)/Storyboard/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/Storyboard/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(SpyWrapper)/Symbol(react.memo)()",
-  "/Symbol(react.forward_ref)(SpyWrapper)/Symbol(react.memo)()//Symbol(react.memo)()",
-  "/Symbol(react.memo)()///UtopiaSpiedFunctionComponent(View)",
-  "///UtopiaSpiedFunctionComponent(View)/div",
-  "/UtopiaSpiedFunctionComponent(View)/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))",
-  "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)",
-  "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)",
-  "/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)",
-  "/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)/div",
-  "/UtopiaSpiedFunctionComponent(View)/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)",
-  "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)/div",
 ]
 `;
 
@@ -3387,6 +3387,22 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
+  "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
+  "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)/Symbol(react.memo)(Storyboard)",
+  "/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)/Storyboard/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/Storyboard/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(SpyWrapper)/Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(SpyWrapper)/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/Symbol(react.memo)()///UtopiaSpiedFunctionComponent(View)",
+  "///UtopiaSpiedFunctionComponent(View)/div",
+  "/UtopiaSpiedFunctionComponent(View)/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))",
+  "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)",
+  "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)",
+  "/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)",
+  "/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)/div",
+  "/UtopiaSpiedFunctionComponent(View)/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)",
+  "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)/div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//UtopiaSpiedClass(EditorCanvas)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.memo)(FloatingPostActionMenu)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//div",
@@ -3420,21 +3436,5 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
-  "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
-  "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
-  "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)/Symbol(react.memo)(Storyboard)",
-  "/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)/Storyboard/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/Storyboard/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(SpyWrapper)/Symbol(react.memo)()",
-  "/Symbol(react.forward_ref)(SpyWrapper)/Symbol(react.memo)()//Symbol(react.memo)()",
-  "/Symbol(react.memo)()///UtopiaSpiedFunctionComponent(View)",
-  "///UtopiaSpiedFunctionComponent(View)/div",
-  "/UtopiaSpiedFunctionComponent(View)/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))",
-  "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)",
-  "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)",
-  "/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)",
-  "/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)/div",
-  "/UtopiaSpiedFunctionComponent(View)/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)",
-  "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)/div",
 ]
 `;

From ef8c8ed6820d7a54084f1f93a2763328606c5d89 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Mon, 30 Sep 2024 10:36:16 +0100
Subject: [PATCH 056/272] refactor(strategies) Mandatory Elements To Rerender
 For Strategies (#6408)

- Added `combineElementsToRerender` utility function.
- Added `appendElementsToRerenderToApplyResult` utility function.
- Added `StrategyApplicationResult.elementsToRerender`.
- Removed `setElementsToRerenderCommand` and
`appendElementsToRerenderCommand` and the associated supporting code.
- Moved values originally passed to `setElementsToRerenderCommand` to
the new parameter that `strategyApplicationResult` now has.
- Moved values originally passed to `appendElementsToRerenderCommand` to
a call to `appendElementsToRerenderToApplyResult`.
- Added `applyElementsToRerenderFromStrategyResult` utility function.
- Hooked in the `applyElementsToRerenderFromStrategyResult` function
  into various strategy functions to update the `EditorState`.
---
 .../canvas-strategies/canvas-strategies.tsx   |  13 ++
 .../canvas-strategy-types.ts                  |   6 +-
 .../absolute-duplicate-strategy.tsx           |   6 +-
 ...absolute-reparent-strategy-canvas.spec.tsx |  12 +-
 .../absolute-reparent-strategy.spec.tsx       |  12 +-
 .../strategies/absolute-reparent-strategy.tsx |   6 +-
 .../absolute-resize-bounding-box-strategy.tsx |  31 +++--
 .../strategies/ancestor-metastrategy.tsx      |  71 ++++++----
 .../strategies/basic-resize-strategy.tsx      |  41 +++---
 .../convert-to-absolute-and-move-strategy.tsx |  11 +-
 .../drag-to-insert-metastrategy.tsx           |   5 +
 .../strategies/drag-to-move-metastrategy.tsx  |  31 +++--
 .../draw-to-insert-metastrategy.tsx           |  10 ++
 .../draw-to-insert-text-strategy.tsx          |  44 +++---
 .../flex-reparent-to-absolute-strategy.tsx    |   7 +-
 .../strategies/flex-resize-basic-strategy.tsx |  41 +++---
 .../strategies/flex-resize-strategy.tsx       |  41 +++---
 .../grid-draw-to-insert-strategy.tsx          |   5 +
 .../grid-rearrange-keyboard-strategy.ts       |   4 +
 .../grid-rearrange-move-duplicate-strategy.ts |   4 +-
 .../grid-rearrange-move-strategy.ts           |   4 +
 .../strategies/grid-reparent-strategy.tsx     |   3 +-
 .../grid-resize-element-strategy.ts           |   4 +
 .../keyboard-absolute-move-strategy.ts        |   5 +-
 .../keyboard-absolute-resize-strategy.tsx     |   5 +-
 .../strategies/keyboard-reorder-strategy.ts   |  10 +-
 .../keyboard-set-font-size-strategy.tsx       |   2 +-
 .../keyboard-set-font-weight-strategy.tsx     |   8 +-
 .../keyboard-set-opacity-strategy.tsx         |   8 +-
 .../rearrange-grid-swap-strategy.ts           |   8 +-
 .../strategies/reorder-slider-strategy.tsx    |   7 +-
 .../strategies/reorder-utils.ts               |  15 +-
 .../reparent-as-static-strategy.tsx           |   4 +-
 .../reparent-helpers/reparent-helpers.ts      |   7 +-
 .../strategies/resize-grid-strategy.ts        |   9 +-
 .../strategies/set-border-radius-strategy.tsx |  34 ++---
 .../strategies/set-flex-gap-strategy.tsx      |  52 ++++---
 .../strategies/set-grid-gap-strategy.tsx      |  52 ++++---
 .../strategies/set-padding-strategy.tsx       | 131 ++++++++++--------
 ...shared-absolute-resize-strategy-helpers.ts |   6 +-
 .../shared-move-strategies-helpers.ts         |  58 ++++----
 .../components/canvas/commands/commands.ts    |  14 --
 .../set-elements-to-rerender-command.ts       |  85 ------------
 .../canvas-strategy-picker.spec.browser2.tsx  |   8 +-
 .../src/components/editor/actions/actions.tsx |   9 +-
 .../editor/store/dispatch-strategies.spec.tsx |  11 +-
 .../editor/store/dispatch-strategies.tsx      |  54 +++++---
 .../components/editor/store/editor-state.ts   |  11 ++
 48 files changed, 557 insertions(+), 468 deletions(-)
 delete mode 100644 editor/src/components/canvas/commands/set-elements-to-rerender-command.ts

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
index 02751f5b3c75..a43af7b2c7dc 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -465,6 +465,19 @@ export function applyCanvasStrategy(
   return strategy.apply(strategyLifecycle)
 }
 
+export function applyElementsToRerenderFromStrategyResult(
+  editorState: EditorState,
+  strategyResult: StrategyApplicationResult,
+): EditorState {
+  return {
+    ...editorState,
+    canvas: {
+      ...editorState.canvas,
+      elementsToRerender: strategyResult.elementsToRerender,
+    },
+  }
+}
+
 export function useDelayedEditorState<T>(
   selector: StateSelector<EditorStorePatched, T | null>,
   selectorName: string,
diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
index dff0105a300e..4a0686b16e2c 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
@@ -7,7 +7,7 @@ import type { ElementPath, NodeModules } from '../../../core/shared/project-file
 import type { ProjectContentTreeRoot } from '../../assets'
 import type { PropertyControlsInfo } from '../../custom-code/code-file'
 import type { InsertionSubject } from '../../editor/editor-modes'
-import type { AllElementProps } from '../../editor/store/editor-state'
+import type { AllElementProps, ElementsToRerender } from '../../editor/store/editor-state'
 import type { CanvasCommand } from '../commands/commands'
 import type { ActiveFrameAction } from '../commands/set-active-frames-command'
 import type { StrategyApplicationStatus } from './interaction-state'
@@ -53,23 +53,27 @@ export function defaultCustomStrategyState(): CustomStrategyState {
 
 export interface StrategyApplicationResult {
   commands: Array<CanvasCommand>
+  elementsToRerender: ElementsToRerender
   customStatePatch: CustomStrategyStatePatch
   status: StrategyApplicationStatus
 }
 
 export const emptyStrategyApplicationResult: StrategyApplicationResult = {
   commands: [],
+  elementsToRerender: 'rerender-all-elements',
   customStatePatch: {},
   status: 'success',
 }
 
 export function strategyApplicationResult(
   commands: Array<CanvasCommand>,
+  elementsToRerender: ElementsToRerender,
   customStatePatch: CustomStrategyStatePatch = {},
   status: StrategyApplicationStatus = 'success',
 ): StrategyApplicationResult {
   return {
     commands: commands,
+    elementsToRerender: elementsToRerender,
     customStatePatch: customStatePatch,
     status: status,
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-duplicate-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-duplicate-strategy.tsx
index 2dff81adbae2..9fae9c8996d2 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-duplicate-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-duplicate-strategy.tsx
@@ -12,7 +12,7 @@ import type { CanvasCommand } from '../../commands/commands'
 import { foldAndApplyCommandsInner } from '../../commands/commands'
 import { duplicateElement } from '../../commands/duplicate-element-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { updateFunctionCommand } from '../../commands/update-function-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
 import { ImmediateParentBounds } from '../../controls/parent-bounds'
@@ -127,7 +127,6 @@ export function absoluteDuplicateStrategy(
           [
             ...duplicateCommands,
             ...maybeAddContainLayoutCommand(commonParentPath),
-            setElementsToRerenderCommand([commonParentPath, ...selectedElements, ...newPaths]),
             updateSelectedViews('always', selectedElements),
             updateFunctionCommand('always', (editorState, commandLifecycle) =>
               runMoveStrategy(
@@ -140,13 +139,14 @@ export function absoluteDuplicateStrategy(
             ),
             setCursorCommand(CSSCursor.Duplicate),
           ],
+          [commonParentPath, ...selectedElements, ...newPaths],
           {
             duplicatedElementNewUids: duplicatedElementNewUids,
           },
         )
       } else {
         // Fallback for when the checks above are not satisfied.
-        return strategyApplicationResult([setCursorCommand(CSSCursor.Duplicate)])
+        return strategyApplicationResult([setCursorCommand(CSSCursor.Duplicate)], [])
       }
     },
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy-canvas.spec.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy-canvas.spec.tsx
index e438034e8e9c..5031daf5b2b3 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy-canvas.spec.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy-canvas.spec.tsx
@@ -151,15 +151,11 @@ function reparentElement(
   expect(strategyResult.customStatePatch).toEqual({})
   expect(strategyResult.status).toEqual('success')
 
-  // Check if there are set SetElementsToRerenderCommands with the new parent path
   expect(
-    strategyResult.commands.find(
-      (c) =>
-        c.type === 'SET_ELEMENTS_TO_RERENDER_COMMAND' &&
-        c.value !== 'rerender-all-elements' &&
-        c.value.every((p) => EP.pathsEqual(EP.parentPath(p), newParent)),
-    ),
-  ).not.toBeNull()
+    strategyResult.elementsToRerender === 'rerender-all-elements'
+      ? []
+      : strategyResult.elementsToRerender.map(EP.parentPath),
+  ).toEqual([newParent])
 
   const finalEditor = foldAndApplyCommands(
     editorState,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.tsx
index 464de829ae5b..77328c3d5894 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.tsx
@@ -222,15 +222,11 @@ function reparentElement(
     expect(strategyResult.customStatePatch).toEqual({})
     expect(strategyResult.status).toEqual('success')
 
-    // Check if there are set SetElementsToRerenderCommands with the new parent path
     expect(
-      strategyResult.commands.find(
-        (c) =>
-          c.type === 'SET_ELEMENTS_TO_RERENDER_COMMAND' &&
-          c.value !== 'rerender-all-elements' &&
-          c.value.every((p) => EP.pathsEqual(EP.parentPath(p), newParent)),
-      ),
-    ).not.toBeNull()
+      strategyResult.elementsToRerender === 'rerender-all-elements'
+        ? []
+        : strategyResult.elementsToRerender.map(EP.parentPath),
+    ).toEqual([newParent])
 
     return foldAndApplyCommands(
       editorState,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx
index 557f1c8724cf..0a448ca2b6c3 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx
@@ -13,7 +13,7 @@ import type { InsertionPath } from '../../../editor/store/insertion-path'
 import { CSSCursor } from '../../canvas-types'
 import type { CanvasCommand } from '../../commands/commands'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { setProperty } from '../../commands/set-property-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
 import { ParentBounds } from '../../controls/parent-bounds'
@@ -217,7 +217,6 @@ export function applyAbsoluteReparent(
               ...moveCommands,
               ...commands.flatMap((c) => c.commands),
               updateSelectedViews('always', newPaths),
-              setElementsToRerenderCommand(elementsToRerender),
               ...maybeAddContainLayout(
                 canvasState.startingMetadata,
                 canvasState.startingAllElementProps,
@@ -226,6 +225,7 @@ export function applyAbsoluteReparent(
               ),
               setCursorCommand(CSSCursor.Reparent),
             ],
+            elementsToRerender,
             {
               elementsToRerender,
             },
@@ -236,7 +236,7 @@ export function applyAbsoluteReparent(
               ...defaultCustomStrategyState(),
               action: 'reparent',
             })?.strategy.apply(strategyLifecycle).commands ?? []
-          return strategyApplicationResult(moveCommands)
+          return strategyApplicationResult(moveCommands, 'rerender-all-elements')
         }
       },
     )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
index 9ce4abe252c4..19b27d644757 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
@@ -29,7 +29,7 @@ import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-
 import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { activeFrameTargetRect, setActiveFrames } from '../../commands/set-active-frames-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { setSnappingGuidelines } from '../../commands/set-snapping-guidelines-command'
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { gatherParentAndSiblingTargets } from '../../controls/guideline-helpers'
@@ -141,7 +141,7 @@ export function absoluteResizeBoundingBoxStrategy(
       }),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'RESIZE_HANDLE', 1),
-    apply: () => {
+    apply: (lifecycle) => {
       if (
         interactionSession != null &&
         interactionSession.interactionData.type === 'DRAG' &&
@@ -289,19 +289,24 @@ export function absoluteResizeBoundingBoxStrategy(
               ]
             })
 
-            return strategyApplicationResult([
-              ...commandsForSelectedElements,
-              setSnappingGuidelines('mid-interaction', guidelinesWithSnappingVector),
-              updateHighlightedViews('mid-interaction', []),
-              setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
-              setElementsToRerenderCommand(retargetedTargets),
-            ])
+            return strategyApplicationResult(
+              [
+                ...commandsForSelectedElements,
+                setSnappingGuidelines('mid-interaction', guidelinesWithSnappingVector),
+                updateHighlightedViews('mid-interaction', []),
+                setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
+              ],
+              lifecycle === 'mid-interaction' ? retargetedTargets : 'rerender-all-elements',
+            )
           }
         } else {
-          return strategyApplicationResult([
-            setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
-            updateHighlightedViews('mid-interaction', []),
-          ])
+          return strategyApplicationResult(
+            [
+              setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
+              updateHighlightedViews('mid-interaction', []),
+            ],
+            [],
+          )
         }
       }
       // Fallback for when the checks above are not satisfied.
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/ancestor-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/ancestor-metastrategy.tsx
index bc4b655e30ea..123b4f4a8fcd 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/ancestor-metastrategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/ancestor-metastrategy.tsx
@@ -1,3 +1,7 @@
+import {
+  combineElementsToRerender,
+  type ElementsToRerender,
+} from '../../../../components/editor/store/editor-state'
 import {
   getSimpleAttributeAtPath,
   MetadataUtils,
@@ -9,20 +13,20 @@ import { CSSCursor } from '../../canvas-types'
 import type { CanvasCommand } from '../../commands/commands'
 import { highlightElementsCommand } from '../../commands/highlight-element-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { appendElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
 import { wildcardPatch } from '../../commands/wildcard-patch-command'
 import { onlyFitWhenThisControlIsActive, type MetaCanvasStrategy } from '../canvas-strategies'
 import type {
   CanvasStrategy,
   InteractionCanvasState,
   InteractionLifecycle,
+  StrategyApplicationResult,
 } from '../canvas-strategy-types'
 import { getTargetPathsFromInteractionTarget, targetPaths } from '../canvas-strategy-types'
 import { DoNothingStrategyID } from './drag-to-move-metastrategy'
-import {
-  retargetStrategyToChildrenOfFragmentLikeElements,
-  treatElementAsFragmentLike,
-} from './fragment-like-helpers'
+import { retargetStrategyToChildrenOfFragmentLikeElements } from './fragment-like-helpers'
+import type { Optic } from '../../../../core/shared/optics/optics'
+import { filtered, fromField } from '../../../../core/shared/optics/optic-creators'
+import { modify } from '../../../../core/shared/optics/optic-utilities'
 
 const ANCESTOR_INCOMPATIBLE_STRATEGIES = [DoNothingStrategyID]
 
@@ -125,11 +129,7 @@ export function ancestorMetaStrategy(
       return nextAncestorResult.map((s) => ({
         ...s,
         fitness: fitness(s),
-        apply: appendCommandsToApplyResult(
-          s.apply,
-          [appendElementsToRerenderCommand([target])],
-          [],
-        ),
+        apply: appendElementsToRerenderToApplyResult(s.apply, [target]),
       }))
     } else {
       // Otherwise we should stop at this ancestor and return the strategies for this ancestor
@@ -150,22 +150,21 @@ export function ancestorMetaStrategy(
             id: `${s.id}_ANCESTOR_${level}`,
             name: applyLevelSuffix(s.name, level),
             fitness: fitness(s),
-            apply: appendCommandsToApplyResult(
-              s.apply,
-              [
-                appendElementsToRerenderCommand([target]),
-                highlightElementsCommand([parentPath]),
-                setCursorCommand(CSSCursor.MovingMagic),
-              ],
-              [
-                wildcardPatch('mid-interaction', {
-                  canvas: {
-                    controls: {
-                      dragToMoveIndicatorFlags: { ancestor: { $set: true } },
+            apply: appendElementsToRerenderToApplyResult(
+              appendCommandsToApplyResult(
+                s.apply,
+                [highlightElementsCommand([parentPath]), setCursorCommand(CSSCursor.MovingMagic)],
+                [
+                  wildcardPatch('mid-interaction', {
+                    canvas: {
+                      controls: {
+                        dragToMoveIndicatorFlags: { ancestor: { $set: true } },
+                      },
                     },
-                  },
-                }),
-              ],
+                  }),
+                ],
+              ),
+              [target],
             ),
           }
         }),
@@ -175,6 +174,7 @@ export function ancestorMetaStrategy(
 }
 
 type ApplyFn = CanvasStrategy['apply']
+
 export function appendCommandsToApplyResult(
   applyFn: ApplyFn,
   commandsToAppendToExtendResult: Array<CanvasCommand>,
@@ -204,6 +204,27 @@ export function appendCommandsToApplyResult(
   }
 }
 
+const strategyResultElementsToRerenderOptic: Optic<StrategyApplicationResult, ElementsToRerender> =
+  filtered<StrategyApplicationResult>((result) => result.status === 'success').compose(
+    fromField('elementsToRerender'),
+  )
+
+export function appendElementsToRerenderToApplyResult(
+  applyFn: ApplyFn,
+  additionalElementsToRerender: ElementsToRerender,
+): ApplyFn {
+  return (strategyLifecycle: InteractionLifecycle) => {
+    const result = applyFn(strategyLifecycle)
+    return modify(
+      strategyResultElementsToRerenderOptic,
+      (toRerender) => {
+        return combineElementsToRerender(toRerender, additionalElementsToRerender)
+      },
+      result,
+    )
+  }
+}
+
 function applyLevelSuffix(name: string, level: number): string {
   // FIXME What should we use for the label here?
   const newSuffix = `(Up ${level})`
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
index 60eccfac3a28..2da9612b7ae7 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -30,7 +30,7 @@ import {
 import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
 import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls'
 import { ImmediateParentBounds } from '../../controls/parent-bounds'
@@ -219,24 +219,29 @@ export function basicResizeStrategy(
 
           const elementsToRerender = [...selectedElements, ...gridsToRerender]
 
-          return strategyApplicationResult([
-            adjustCssLengthProperties('always', selectedElement, null, resizeProperties),
-            updateHighlightedViews('mid-interaction', []),
-            setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
-            setElementsToRerenderCommand(elementsToRerender),
-            pushIntendedBoundsAndUpdateGroups(
-              [{ target: selectedElement, frame: resizedBounds }],
-              'starting-metadata',
-            ),
-            ...groupChildren.map((c) =>
-              queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]),
-            ),
-          ])
+          return strategyApplicationResult(
+            [
+              adjustCssLengthProperties('always', selectedElement, null, resizeProperties),
+              updateHighlightedViews('mid-interaction', []),
+              setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
+              pushIntendedBoundsAndUpdateGroups(
+                [{ target: selectedElement, frame: resizedBounds }],
+                'starting-metadata',
+              ),
+              ...groupChildren.map((c) =>
+                queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]),
+              ),
+            ],
+            elementsToRerender,
+          )
         } else {
-          return strategyApplicationResult([
-            updateHighlightedViews('mid-interaction', []),
-            setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
-          ])
+          return strategyApplicationResult(
+            [
+              updateHighlightedViews('mid-interaction', []),
+              setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
+            ],
+            [],
+          )
         }
       }
       // Fallback for when the checks above are not satisfied.
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
index ff61a2be348c..34695730d6b5 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
@@ -278,10 +278,13 @@ function convertToAbsoluteAndMoveStrategyFactory(setHuggingParentToFixed: SetHug
             },
           })
 
-          return strategyApplicationResult([
-            ...absoluteMoveApplyResult.commands,
-            strategyIndicatorCommand,
-          ])
+          return strategyApplicationResult(
+            [...absoluteMoveApplyResult.commands, strategyIndicatorCommand],
+            // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+            // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+            // appropriate to this particular case.
+            'rerender-all-elements',
+          )
         }
         // Fallback for when the checks above are not satisfied.
         return emptyStrategyApplicationResult
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx
index 04da545d72f5..2804f0f5302d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx
@@ -216,6 +216,7 @@ function dragToInsertStrategyFactory(
         if (insertionSubjects.length === 0) {
           return strategyApplicationResult(
             [setCursorCommand(CSSCursor.NotPermitted)],
+            [],
             {},
             'failure',
           )
@@ -280,6 +281,10 @@ function dragToInsertStrategyFactory(
               reparentCommand,
               ...optionalWrappingCommand,
             ],
+            // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+            // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+            // appropriate to this particular case.
+            'rerender-all-elements',
             {
               strategyGeneratedUidsCache: {
                 [insertionSubjects[0].uid]: maybeWrapperWithUid?.uid,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-move-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-move-metastrategy.tsx
index 45dfa9f1d595..67255fe562d1 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-move-metastrategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-move-metastrategy.tsx
@@ -153,23 +153,26 @@ export function doNothingStrategy(canvasState: InteractionCanvasState): CanvasSt
     ],
     fitness: DoNothingFitness,
     apply: () => {
-      return strategyApplicationResult([
-        wildcardPatch('mid-interaction', {
-          canvas: {
-            controls: {
-              dragToMoveIndicatorFlags: {
-                $set: {
-                  showIndicator: true,
-                  dragType: 'none',
-                  reparent: 'none',
-                  ancestor: false,
+      return strategyApplicationResult(
+        [
+          wildcardPatch('mid-interaction', {
+            canvas: {
+              controls: {
+                dragToMoveIndicatorFlags: {
+                  $set: {
+                    showIndicator: true,
+                    dragType: 'none',
+                    reparent: 'none',
+                    ancestor: false,
+                  },
                 },
               },
             },
-          },
-        }),
-        setCursorCommand(CSSCursor.NotPermitted),
-      ])
+          }),
+          setCursorCommand(CSSCursor.NotPermitted),
+        ],
+        [],
+      )
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx
index 3ce8cfb1f4f6..907b6178eed7 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx
@@ -303,6 +303,10 @@ export function drawToInsertStrategyFactory(
                   resizeCommand,
                   ...optionalWrappingCommand,
                 ],
+                // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+                // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+                // appropriate to this particular case.
+                'rerender-all-elements',
                 {
                   strategyGeneratedUidsCache: {
                     [insertionSubject.uid]: maybeWrapperWithUid?.uid,
@@ -348,6 +352,10 @@ export function drawToInsertStrategyFactory(
 
               return strategyApplicationResult(
                 [insertionCommand.command, reparentCommand, ...optionalWrappingCommand],
+                // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+                // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+                // appropriate to this particular case.
+                'rerender-all-elements',
                 {
                   strategyGeneratedUidsCache: {
                     [insertionSubject.uid]: maybeWrapperWithUid?.uid,
@@ -359,11 +367,13 @@ export function drawToInsertStrategyFactory(
             // drag is null, the cursor is not moved yet, but the mousedown already happened
             return strategyApplicationResult(
               getHighlightAndReorderIndicatorCommands(targetParent.intendedParentPath, targetIndex),
+              [],
             )
           }
         } else if (interactionSession.interactionData.type === 'HOVER') {
           return strategyApplicationResult(
             getHighlightAndReorderIndicatorCommands(targetParent.intendedParentPath, targetIndex),
+            [],
           )
         }
       }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-text-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-text-strategy.tsx
index 5ab27f69b3d5..81b24156f222 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-text-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-text-strategy.tsx
@@ -87,7 +87,7 @@ export const drawToInsertTextMetaStrategy: MetaCanvasStrategy = (
           ['hasOnlyTextChildren', 'supportsChildren'],
         )
         if (applicableReparentFactories.length < 1) {
-          return strategyApplicationResult([])
+          return strategyApplicationResult([], [])
         }
 
         const factory = applicableReparentFactories[0]
@@ -107,24 +107,30 @@ export const drawToInsertTextMetaStrategy: MetaCanvasStrategy = (
         const isRoot = targetParentPathParts === 1
         const isClick = s === 'end-interaction' && interactionSession.interactionData.drag == null
         if (!isRoot && textEditableAndHasText && isClick) {
-          return strategyApplicationResult([
-            updateSelectedViews('on-complete', [targetParent.intendedParentPath]),
-            setCursorCommand(CSSCursor.Select),
-            wildcardPatch('on-complete', {
-              mode: {
-                $set: EditorModes.textEditMode(
-                  targetParent.intendedParentPath,
-                  canvasPointToWindowPoint(
-                    pointOnCanvas,
-                    canvasState.scale,
-                    canvasState.canvasOffset,
+          return strategyApplicationResult(
+            [
+              updateSelectedViews('on-complete', [targetParent.intendedParentPath]),
+              setCursorCommand(CSSCursor.Select),
+              wildcardPatch('on-complete', {
+                mode: {
+                  $set: EditorModes.textEditMode(
+                    targetParent.intendedParentPath,
+                    canvasPointToWindowPoint(
+                      pointOnCanvas,
+                      canvasState.scale,
+                      canvasState.canvasOffset,
+                    ),
+                    'existing',
+                    'no-text-selection',
                   ),
-                  'existing',
-                  'no-text-selection',
-                ),
-              },
-            }),
-          ])
+                },
+              }),
+            ],
+            // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+            // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+            // appropriate to this particular case.
+            'rerender-all-elements',
+          )
         }
 
         const strategy = drawToInsertStrategyFactory(
@@ -138,7 +144,7 @@ export const drawToInsertTextMetaStrategy: MetaCanvasStrategy = (
           factory.targetIndex,
         )
         if (strategy == null) {
-          return strategyApplicationResult([])
+          return strategyApplicationResult([], [])
         }
 
         const targetElement = EP.appendToPath(targetParent.intendedParentPath, insertionSubject.uid)
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-absolute-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-absolute-strategy.tsx
index 60941a9865e5..39d6fe1b8255 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-absolute-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-absolute-strategy.tsx
@@ -1,7 +1,7 @@
 import { canvasPoint } from '../../../../core/shared/math-utils'
 import type { EditorStatePatch } from '../../../editor/store/editor-state'
 import { foldAndApplyCommandsInner } from '../../commands/commands'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { updateFunctionCommand } from '../../commands/update-function-command'
 import { ParentBounds } from '../../controls/parent-bounds'
 import { ParentOutlines } from '../../controls/parent-outlines'
@@ -105,10 +105,6 @@ export function baseFlexReparentToAbsoluteStrategy(
               [
                 ...placeholderCommands.commands,
                 ...escapeHatchCommands,
-                setElementsToRerenderCommand([
-                  newParent.intendedParentPath,
-                  ...filteredSelectedElements,
-                ]),
                 updateFunctionCommand(
                   'always',
                   (editorState, commandLifecycle): Array<EditorStatePatch> => {
@@ -137,6 +133,7 @@ export function baseFlexReparentToAbsoluteStrategy(
                   },
                 ),
               ],
+              [newParent.intendedParentPath, ...filteredSelectedElements],
               {
                 duplicatedElementNewUids: placeholderCommands.duplicatedElementNewUids,
               },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx
index 3d8a48bebaa5..12b843038f08 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx
@@ -8,7 +8,7 @@ import {
   lengthPropertyToAdjust,
 } from '../../commands/adjust-css-length-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { ImmediateParentBounds } from '../../controls/parent-bounds'
 import { ImmediateParentOutlines } from '../../controls/parent-outlines'
@@ -220,24 +220,29 @@ export function flexResizeBasicStrategy(
             elementParentBounds?.height,
           )
 
-          return strategyApplicationResult([
-            adjustCssLengthProperties('always', selectedElement, null, resizeProperties),
-            updateHighlightedViews('mid-interaction', []),
-            setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
-            setElementsToRerenderCommand(selectedElements),
-            pushIntendedBoundsAndUpdateGroups(
-              [{ target: selectedElement, frame: resizedBounds }],
-              'starting-metadata',
-            ),
-            ...groupChildren.map((c) =>
-              queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]),
-            ),
-          ])
+          return strategyApplicationResult(
+            [
+              adjustCssLengthProperties('always', selectedElement, null, resizeProperties),
+              updateHighlightedViews('mid-interaction', []),
+              setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
+              pushIntendedBoundsAndUpdateGroups(
+                [{ target: selectedElement, frame: resizedBounds }],
+                'starting-metadata',
+              ),
+              ...groupChildren.map((c) =>
+                queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]),
+              ),
+            ],
+            selectedElements,
+          )
         } else {
-          return strategyApplicationResult([
-            updateHighlightedViews('mid-interaction', []),
-            setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
-          ])
+          return strategyApplicationResult(
+            [
+              updateHighlightedViews('mid-interaction', []),
+              setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
+            ],
+            [],
+          )
         }
       }
       // Fallback for when the checks above are not satisfied.
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx
index 1cff33d7db1f..1197e3c9fe62 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx
@@ -24,7 +24,7 @@ import {
   lengthPropertyToAdjust,
 } from '../../commands/adjust-css-length-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { ImmediateParentBounds } from '../../controls/parent-bounds'
 import { ImmediateParentOutlines } from '../../controls/parent-outlines'
@@ -353,24 +353,29 @@ export function flexResizeStrategy(
             'center-based',
           )
 
-          return strategyApplicationResult([
-            ...resizeCommands,
-            updateHighlightedViews('mid-interaction', []),
-            setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
-            setElementsToRerenderCommand(selectedElements),
-            pushIntendedBoundsAndUpdateGroups(
-              [{ target: selectedElement, frame: newFrame }],
-              'starting-metadata',
-            ),
-            ...groupChildren.map((c) =>
-              queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]),
-            ),
-          ])
+          return strategyApplicationResult(
+            [
+              ...resizeCommands,
+              updateHighlightedViews('mid-interaction', []),
+              setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
+              pushIntendedBoundsAndUpdateGroups(
+                [{ target: selectedElement, frame: newFrame }],
+                'starting-metadata',
+              ),
+              ...groupChildren.map((c) =>
+                queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]),
+              ),
+            ],
+            selectedElements,
+          )
         } else {
-          return strategyApplicationResult([
-            updateHighlightedViews('mid-interaction', []),
-            setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
-          ])
+          return strategyApplicationResult(
+            [
+              updateHighlightedViews('mid-interaction', []),
+              setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
+            ],
+            [],
+          )
         }
       }
       // Fallback for when the checks above are not satisfied.
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index 01c45b432ede..7036621bc9c1 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -165,6 +165,7 @@ const gridDrawToInsertStrategyInner =
               showGridControls('mid-interaction', targetParent),
               updateHighlightedViews('mid-interaction', [targetParent]),
             ],
+            [],
             {
               ...customStrategyState,
               grid: {
@@ -258,6 +259,10 @@ const gridDrawToInsertStrategyInner =
                 : null,
             ]),
           ],
+          // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+          // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+          // appropriate to this particular case.
+          'rerender-all-elements',
           {
             strategyGeneratedUidsCache: {
               [insertionSubject.uid]: maybeWrapperWithUid?.uid,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
index ec4a6e55511f..2b34b4cddc36 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
@@ -133,6 +133,10 @@ export function gridRearrangeResizeKeyboardStrategy(
           gridRowStart,
           gridRowEnd,
         }),
+        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+        // appropriate to this particular case.
+        'rerender-all-elements',
       )
     },
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
index 8418611cdc88..671f74fe51f6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
@@ -4,7 +4,7 @@ import * as EP from '../../../../core/shared/element-path'
 import { CSSCursor } from '../../../../uuiui-deps'
 import { duplicateElement } from '../../commands/duplicate-element-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls'
@@ -93,11 +93,11 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
         [
           duplicateElement('always', selectedElement, newUid),
           ...moveCommands,
-          setElementsToRerenderCommand([...selectedElements, targetElement]),
           updateSelectedViews('always', [targetElement]),
           updateHighlightedViews('always', [targetElement]),
           setCursorCommand(CSSCursor.Duplicate),
         ],
+        [...selectedElements, targetElement],
         {
           grid: {
             targetCellData: targetGridCellData,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index 9a9fe23d1c81..c9ab491743f1 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -155,6 +155,10 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
 
       return strategyApplicationResult(
         [...midInteractionCommands, ...onCompleteCommands, ...commands],
+        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+        // appropriate to this particular case.
+        'rerender-all-elements',
         patch,
       )
     },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 4249b4b699fa..e348e82132ac 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -46,7 +46,6 @@ import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helper
 import { getReparentOutcome, pathToReparent } from './reparent-utils'
 import { flattenSelection } from './shared-move-strategies-helpers'
 import { getGridCellUnderMouseFromMetadata, type GridCellCoordinates } from './grid-cell-bounds'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
 
 export function gridReparentStrategy(
   reparentTarget: ReparentTarget,
@@ -245,8 +244,8 @@ export function applyGridReparent(
             updateSelectedViews('always', newPaths),
             setCursorCommand(CSSCursor.Reparent),
             showGridControls('mid-interaction', reparentTarget.newParent.intendedParentPath),
-            setElementsToRerenderCommand(elementsToRerender),
           ],
+          elementsToRerender,
           {
             elementsToRerender: elementsToRerender,
             grid: {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 64730c52ff48..2f47003ac5ce 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -140,6 +140,10 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
 
       return strategyApplicationResult(
         setGridPropsCommands(selectedElement, gridTemplate, gridPropsWithDragOver(gridProps)),
+        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+        // appropriate to this particular case.
+        'rerender-all-elements',
         {
           grid: { ...customState.grid, targetCellData: targetCell },
         },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-move-strategy.ts
index 41c3f2f5eeca..2e15719b0104 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-move-strategy.ts
@@ -19,7 +19,7 @@ import {
   getInteractionMoveCommandsForSelectedElement,
   getMultiselectBounds,
 } from './shared-move-strategies-helpers'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { setSnappingGuidelines } from '../../commands/set-snapping-guidelines-command'
 import type { CanvasCommand } from '../../commands/commands'
 import {
@@ -120,8 +120,7 @@ export function keyboardAbsoluteMoveStrategy(
 
         commands.push(setSnappingGuidelines('mid-interaction', guidelines))
         commands.push(pushIntendedBoundsAndUpdateGroups(intendedBounds, 'starting-metadata'))
-        commands.push(setElementsToRerenderCommand(selectedElements))
-        return strategyApplicationResult(commands)
+        return strategyApplicationResult(commands, selectedElements)
       } else {
         return emptyStrategyApplicationResult
       }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx
index 785a8cd041f1..70f8b5e5a474 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx
@@ -12,7 +12,7 @@ import type { CanvasFrameAndTarget, EdgePosition } from '../../canvas-types'
 import { EdgePositionBottom, EdgePositionRight } from '../../canvas-types'
 import type { CanvasCommand } from '../../commands/commands'
 import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { setSnappingGuidelines } from '../../commands/set-snapping-guidelines-command'
 import { AbsoluteResizeControl } from '../../controls/select-mode/absolute-resize-control'
 import type { CanvasStrategy, InteractionCanvasState } from '../canvas-strategy-types'
@@ -225,8 +225,7 @@ export function keyboardAbsoluteResizeStrategy(
         const guidelines = getKeyboardStrategyGuidelines(snapTargets, interactionSession, newFrame)
         commands.push(setSnappingGuidelines('mid-interaction', guidelines))
         commands.push(pushIntendedBoundsAndUpdateGroups(intendedBounds, 'starting-metadata'))
-        commands.push(setElementsToRerenderCommand(selectedElements))
-        return strategyApplicationResult(commands)
+        return strategyApplicationResult(commands, selectedElements)
       } else {
         return emptyStrategyApplicationResult
       }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-reorder-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-reorder-strategy.ts
index eaa0abf15914..8a0cdcdc73dc 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-reorder-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-reorder-strategy.ts
@@ -5,7 +5,7 @@ import { shallowEqual } from '../../../../core/shared/equality-utils'
 import { emptyModifiers, Modifier } from '../../../../utils/modifiers'
 import { absolute } from '../../../../utils/utils'
 import { reorderElement } from '../../commands/reorder-element-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import type {
   CanvasStrategy,
@@ -90,10 +90,8 @@ export function keyboardReorderStrategy(
 
         if (newIndex === unpatchedIndex) {
           return strategyApplicationResult(
-            [
-              updateHighlightedViews('mid-interaction', []),
-              setElementsToRerenderCommand(siblingsAndParent),
-            ],
+            [updateHighlightedViews('mid-interaction', [])],
+            siblingsAndParent,
             {
               lastReorderIdx: newIndex,
             },
@@ -102,9 +100,9 @@ export function keyboardReorderStrategy(
           return strategyApplicationResult(
             [
               reorderElement('always', target, absolute(newIndex)),
-              setElementsToRerenderCommand(siblingsAndParent),
               updateHighlightedViews('mid-interaction', []),
             ],
+            siblingsAndParent,
             {
               lastReorderIdx: newIndex,
             },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-size-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-size-strategy.tsx
index 6bf48e00b559..89bac012ea17 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-size-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-size-strategy.tsx
@@ -79,7 +79,7 @@ export function keyboardSetFontSizeStrategy(
         ),
       )
 
-      return strategyApplicationResult(commands)
+      return strategyApplicationResult(commands, 'rerender-all-elements')
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-weight-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-weight-strategy.tsx
index faab0cfca6d9..69d248f68f12 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-weight-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-weight-strategy.tsx
@@ -87,7 +87,13 @@ export function keyboardSetFontWeightStrategy(
         ),
       )
 
-      return strategyApplicationResult(commands)
+      return strategyApplicationResult(
+        commands,
+        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+        // appropriate to this particular case.
+        'rerender-all-elements',
+      )
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-opacity-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-opacity-strategy.tsx
index f3b9c1350ad2..12ccaecd396d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-opacity-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-opacity-strategy.tsx
@@ -57,7 +57,13 @@ export function keyboardSetOpacityStrategy(
         setProperty('always', path, PP.create('style', 'opacity'), inputValue),
       )
 
-      return strategyApplicationResult(commands)
+      return strategyApplicationResult(
+        commands,
+        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+        // appropriate to this particular case.
+        'rerender-all-elements',
+      )
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
index fdfcb3eb6574..ef9bf83e2afe 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
@@ -121,7 +121,13 @@ export const rearrangeGridSwapStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
-      return strategyApplicationResult(commands)
+      return strategyApplicationResult(
+        commands,
+        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+        // appropriate to this particular case.
+        'rerender-all-elements',
+      )
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reorder-slider-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/reorder-slider-strategy.tsx
index 73ed8070f7f4..6ed0746c318c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reorder-slider-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reorder-slider-strategy.tsx
@@ -4,7 +4,7 @@ import { absolute } from '../../../../utils/utils'
 import { CSSCursor } from '../../canvas-types'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { ReorderSliderControl } from '../../controls/reorder-slider-control'
 import type { CanvasStrategy, InteractionCanvasState } from '../canvas-strategy-types'
@@ -83,6 +83,7 @@ export function reorderSliderStategy(
         if (!isReorderAllowed(siblingsOfTarget)) {
           return strategyApplicationResult(
             [setCursorCommand(CSSCursor.NotPermitted)],
+            [],
             {},
             'failure',
           )
@@ -103,17 +104,17 @@ export function reorderSliderStategy(
           return strategyApplicationResult(
             [
               reorderElement('always', target, absolute(newIndex)),
-              setElementsToRerenderCommand(siblingsAndParent),
               updateHighlightedViews('mid-interaction', []),
               setCursorCommand(CSSCursor.ResizeEW),
             ],
+            siblingsAndParent,
             {
               lastReorderIdx: newIndex,
             },
           )
         } else {
           // Fallback for when the checks above are not satisfied.
-          return strategyApplicationResult([setCursorCommand(CSSCursor.ResizeEW)])
+          return strategyApplicationResult([setCursorCommand(CSSCursor.ResizeEW)], [])
         }
       } else {
         return emptyStrategyApplicationResult
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reorder-utils.ts b/editor/src/components/canvas/canvas-strategies/strategies/reorder-utils.ts
index 37cbc20bf15d..7900e6a2eb93 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reorder-utils.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reorder-utils.ts
@@ -13,7 +13,7 @@ import { absolute } from '../../../../utils/utils'
 import { CSSCursor } from '../../canvas-types'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import type {
   CustomStrategyState,
@@ -60,7 +60,12 @@ export function applyReorderCommon(
     const siblingsAndParent = siblings.concat(EP.parentPath(target))
 
     if (!isReorderAllowed(siblings)) {
-      return strategyApplicationResult([setCursorCommand(CSSCursor.NotPermitted)], {}, 'failure')
+      return strategyApplicationResult(
+        [setCursorCommand(CSSCursor.NotPermitted)],
+        [],
+        {},
+        'failure',
+      )
     }
 
     const pointOnCanvas = offsetPoint(
@@ -100,9 +105,9 @@ export function applyReorderCommon(
             { action: 'reorder', target: activeFrameTargetRect(targetFrame), source: sourceFrame },
           ]),
           updateHighlightedViews('mid-interaction', []),
-          setElementsToRerenderCommand(siblingsAndParent),
           setCursorCommand(CSSCursor.Move),
         ],
+        siblingsAndParent,
         {
           lastReorderIdx: newResultOrLastIndex,
         },
@@ -114,10 +119,10 @@ export function applyReorderCommon(
             { action: 'reorder', target: activeFrameTargetRect(targetFrame), source: sourceFrame },
           ]),
           reorderElement('always', target, absolute(newResultOrLastIndex)),
-          setElementsToRerenderCommand(siblingsAndParent),
           updateHighlightedViews('mid-interaction', []),
           setCursorCommand(CSSCursor.Move),
         ],
+        siblingsAndParent,
         {
           lastReorderIdx: newResultOrLastIndex,
         },
@@ -125,7 +130,7 @@ export function applyReorderCommon(
     }
   } else {
     // Fallback for when the checks above are not satisfied.
-    return strategyApplicationResult([setCursorCommand(CSSCursor.Move)])
+    return strategyApplicationResult([setCursorCommand(CSSCursor.Move)], 'rerender-all-elements')
   }
 }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reparent-as-static-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/reparent-as-static-strategy.tsx
index a932268764d4..7eb3bb7f5d2c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reparent-as-static-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reparent-as-static-strategy.tsx
@@ -14,7 +14,6 @@ import type { CanvasCommand } from '../../commands/commands'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { activeFrameTargetRect, setActiveFrames } from '../../commands/set-active-frames-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
 import { showReorderIndicator } from '../../commands/show-reorder-indicator-command'
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
@@ -229,7 +228,7 @@ export function applyStaticReparent(
 
             const commandsAfterReorder = [
               ...propertyChangeCommands,
-              setElementsToRerenderCommand(elementsToRerender),
+
               updateHighlightedViews('mid-interaction', []),
               setCursorCommand(CSSCursor.Move),
             ]
@@ -348,6 +347,7 @@ export function applyStaticReparent(
 
             return {
               commands: [...midInteractionCommands, ...interactionFinishCommands],
+              elementsToRerender: elementsToRerender,
               customStatePatch: { duplicatedElementNewUids, elementsToRerender },
               status: 'success',
             }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts
index a8df61f98d0b..3f6b30158503 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts
@@ -249,7 +249,12 @@ export function ifAllowedToReparent(
   if (allowed) {
     return ifAllowed()
   } else {
-    return strategyApplicationResult([setCursorCommand(CSSCursor.NotPermitted)], {}, 'failure')
+    return strategyApplicationResult(
+      [setCursorCommand(CSSCursor.NotPermitted)],
+      'rerender-all-elements',
+      {},
+      'failure',
+    )
   }
 }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index f78da315415b..6a0d12b74acc 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -30,7 +30,6 @@ import {
   printArrayGridDimensions,
 } from '../../../../components/inspector/common/css-utils'
 import { toFirst } from '../../../../core/shared/optics/optic-utilities'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
 import type { Either } from '../../../../core/shared/either'
 import { foldEither, isLeft, isRight } from '../../../../core/shared/either'
 import { roundToNearestWhole } from '../../../../core/shared/math-utils'
@@ -119,7 +118,10 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       }
 
       if (!canResizeGridTemplate(originalValues)) {
-        return strategyApplicationResult([setCursorCommand(CSSCursor.NotPermitted)])
+        return strategyApplicationResult(
+          [setCursorCommand(CSSCursor.NotPermitted)],
+          'rerender-all-elements',
+        )
       }
 
       const expandedOriginalValues = expandGridDimensions(originalValues.dimensions)
@@ -186,10 +188,9 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
           ),
           propertyValueAsString,
         ),
-        setElementsToRerenderCommand([gridPath]),
       ]
 
-      return strategyApplicationResult(commands)
+      return strategyApplicationResult(commands, [gridPath])
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.tsx
index f53fd038bc83..c2e84920c45c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.tsx
@@ -46,7 +46,7 @@ import {
 import { CSSCursor } from '../../canvas-types'
 import type { CanvasCommand } from '../../commands/commands'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { setProperty } from '../../commands/set-property-command'
 import { BorderRadiusControl } from '../../controls/select-mode/border-radius-control'
 import type { CSSNumberWithRenderedValue } from '../../controls/select-mode/controls-common'
@@ -155,21 +155,23 @@ export const setBorderRadiusStrategy: CanvasStrategyFactory = (
       }),
     ],
     apply: () =>
-      strategyApplicationResult([
-        setCursorCommand(CSSCursor.Radius),
-        ...commands(selectedElement),
-        ...getAddOverflowHiddenCommands(selectedElement, canvasState.projectContents),
-        setElementsToRerenderCommand(selectedElements),
-        setActiveFrames(
-          selectedElements.map((path) => ({
-            action: 'set-radius',
-            target: activeFrameTargetPath(path),
-            source: zeroRectIfNullOrInfinity(
-              MetadataUtils.getFrameInCanvasCoords(path, canvasState.startingMetadata),
-            ),
-          })),
-        ),
-      ]),
+      strategyApplicationResult(
+        [
+          setCursorCommand(CSSCursor.Radius),
+          ...commands(selectedElement),
+          ...getAddOverflowHiddenCommands(selectedElement, canvasState.projectContents),
+          setActiveFrames(
+            selectedElements.map((path) => ({
+              action: 'set-radius',
+              target: activeFrameTargetPath(path),
+              source: zeroRectIfNullOrInfinity(
+                MetadataUtils.getFrameInCanvasCoords(path, canvasState.startingMetadata),
+              ),
+            })),
+          ),
+        ],
+        selectedElements,
+      ),
   }
 }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
index 8a1cb6aa2dfb..77d73a39247c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
@@ -14,7 +14,7 @@ import { printCSSNumber } from '../../../inspector/common/css-utils'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
 import { deleteProperties } from '../../commands/delete-properties-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { setProperty } from '../../commands/set-property-command'
 import {
   fallbackEmptyValue,
@@ -172,30 +172,36 @@ export const setFlexGapStrategy: CanvasStrategyFactory = (
       }
 
       if (shouldTearOffGap) {
-        return strategyApplicationResult([
-          deleteProperties('always', selectedElement, [StyleGapProp]),
-        ])
+        return strategyApplicationResult(
+          [deleteProperties('always', selectedElement, [StyleGapProp])],
+          // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+          // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+          // appropriate to this particular case.
+          'rerender-all-elements',
+        )
       }
 
-      return strategyApplicationResult([
-        setProperty(
-          'always',
-          selectedElement,
-          StyleGapProp,
-          printCSSNumber(fallbackEmptyValue(updatedFlexGapMeasurement), null),
-        ),
-        setCursorCommand(cursorFromFlexDirection(flexGap.direction)),
-        setElementsToRerenderCommand([...selectedElements, ...children.map((c) => c.elementPath)]),
-        setActiveFrames([
-          {
-            action: 'set-gap',
-            target: activeFrameTargetPath(selectedElement),
-            source: zeroRectIfNullOrInfinity(
-              MetadataUtils.getFrameInCanvasCoords(selectedElement, canvasState.startingMetadata),
-            ),
-          },
-        ]),
-      ])
+      return strategyApplicationResult(
+        [
+          setProperty(
+            'always',
+            selectedElement,
+            StyleGapProp,
+            printCSSNumber(fallbackEmptyValue(updatedFlexGapMeasurement), null),
+          ),
+          setCursorCommand(cursorFromFlexDirection(flexGap.direction)),
+          setActiveFrames([
+            {
+              action: 'set-gap',
+              target: activeFrameTargetPath(selectedElement),
+              source: zeroRectIfNullOrInfinity(
+                MetadataUtils.getFrameInCanvasCoords(selectedElement, canvasState.startingMetadata),
+              ),
+            },
+          ]),
+        ],
+        [...selectedElements, ...children.map((c) => c.elementPath)],
+      )
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
index b99698f01649..cb2afe25f6de 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
@@ -12,7 +12,7 @@ import { printCSSNumber } from '../../../inspector/common/css-utils'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
 import { deleteProperties } from '../../commands/delete-properties-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { setProperty } from '../../commands/set-property-command'
 import {
   fallbackEmptyValue,
@@ -171,30 +171,36 @@ export const setGridGapStrategy: CanvasStrategyFactory = (
         axis === 'row' ? updatedGridGapMeasurement.row : updatedGridGapMeasurement.column
 
       if (shouldTearOffGapByAxis) {
-        return strategyApplicationResult([
-          deleteProperties('always', selectedElement, [axisStyleProp]),
-        ])
+        return strategyApplicationResult(
+          [deleteProperties('always', selectedElement, [axisStyleProp])],
+          // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+          // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+          // appropriate to this particular case.
+          'rerender-all-elements',
+        )
       }
 
-      return strategyApplicationResult([
-        setProperty(
-          'always',
-          selectedElement,
-          axisStyleProp,
-          printCSSNumber(fallbackEmptyValue(gridGapMeasurement), null),
-        ),
-        setCursorCommand(cursorFromAxis(axis)),
-        setElementsToRerenderCommand([...selectedElements, ...children.map((c) => c.elementPath)]),
-        setActiveFrames([
-          {
-            action: 'set-gap',
-            target: activeFrameTargetPath(selectedElement),
-            source: zeroRectIfNullOrInfinity(
-              MetadataUtils.getFrameInCanvasCoords(selectedElement, canvasState.startingMetadata),
-            ),
-          },
-        ]),
-      ])
+      return strategyApplicationResult(
+        [
+          setProperty(
+            'always',
+            selectedElement,
+            axisStyleProp,
+            printCSSNumber(fallbackEmptyValue(gridGapMeasurement), null),
+          ),
+          setCursorCommand(cursorFromAxis(axis)),
+          setActiveFrames([
+            {
+              action: 'set-gap',
+              target: activeFrameTargetPath(selectedElement),
+              source: zeroRectIfNullOrInfinity(
+                MetadataUtils.getFrameInCanvasCoords(selectedElement, canvasState.startingMetadata),
+              ),
+            },
+          ]),
+        ],
+        [...selectedElements, ...children.map((c) => c.elementPath)],
+      )
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
index 7210fb3da37e..01f65b4b22c2 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
@@ -14,7 +14,7 @@ import type { EdgePiece } from '../../canvas-types'
 import { CSSCursor, isHorizontalEdgePiece, oppositeEdgePiece } from '../../canvas-types'
 import { deleteProperties } from '../../commands/delete-properties-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { setProperty } from '../../commands/set-property-command'
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { isZeroSizedElement } from '../../controls/outline-utils'
@@ -207,7 +207,6 @@ export const setPaddingStrategy: CanvasStrategyFactory = (canvasState, interacti
       const basicCommands: CanvasCommand[] = [
         updateHighlightedViews('mid-interaction', []),
         setCursorCommand(pickCursorFromEdge(edgePiece)),
-        setElementsToRerenderCommand(selectedElements),
       ]
 
       const nonZeroPropsToAdd = IndividualPaddingProps.flatMap(
@@ -246,11 +245,76 @@ export const setPaddingStrategy: CanvasStrategyFactory = (canvasState, interacti
 
       // "tearing off" padding
       if (newPaddingEdge.renderedValuePx < PaddingTearThreshold) {
-        return strategyApplicationResult([
+        return strategyApplicationResult(
+          [
+            ...basicCommands,
+            deleteProperties('always', selectedElement, [
+              StylePaddingProp,
+              stylePropPathMappingFn(paddingPropInteractedWith, styleStringInArray),
+            ]),
+            ...nonZeroPropsToAdd.map(([p, value]) =>
+              setProperty(
+                'always',
+                selectedElement,
+                stylePropPathMappingFn(p, styleStringInArray),
+                value,
+              ),
+            ),
+            setActiveFrames(
+              selectedElements.map((path) => ({
+                action: 'set-padding',
+                target: activeFrameTargetPath(path),
+                source: zeroRectIfNullOrInfinity(
+                  MetadataUtils.getFrameInCanvasCoords(path, canvasState.startingMetadata),
+                ),
+              })),
+            ),
+          ],
+          // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+          // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+          // appropriate to this particular case.
+          'rerender-all-elements',
+        )
+      }
+
+      const allPaddingPropsDefined = maybeFullPadding(newPaddingMaxed)
+
+      // all 4 sides present - can be represented via the padding shorthand property
+      if (allPaddingPropsDefined != null) {
+        const paddingString = paddingToPaddingString(allPaddingPropsDefined)
+        return strategyApplicationResult(
+          [
+            ...basicCommands,
+            ...IndividualPaddingProps.map((p) =>
+              deleteProperties('always', selectedElement, [
+                stylePropPathMappingFn(p, styleStringInArray),
+              ]),
+            ),
+            setProperty('always', selectedElement, StylePaddingProp, paddingString),
+            setActiveFrames(
+              selectedElements.map((path) => ({
+                action: 'set-padding',
+                target: activeFrameTargetPath(path),
+                source: zeroRectIfNullOrInfinity(
+                  MetadataUtils.getFrameInCanvasCoords(path, canvasState.startingMetadata),
+                ),
+              })),
+            ),
+          ],
+          // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+          // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+          // appropriate to this particular case.
+          'rerender-all-elements',
+        )
+      }
+
+      // only some sides are present - longhand properties have to be used
+      return strategyApplicationResult(
+        [
           ...basicCommands,
           deleteProperties('always', selectedElement, [
             StylePaddingProp,
-            stylePropPathMappingFn(paddingPropInteractedWith, styleStringInArray),
+            ...IndividualPaddingProps.map((p) => stylePropPathMappingFn(p, styleStringInArray)),
           ]),
           ...nonZeroPropsToAdd.map(([p, value]) =>
             setProperty(
@@ -269,59 +333,12 @@ export const setPaddingStrategy: CanvasStrategyFactory = (canvasState, interacti
               ),
             })),
           ),
-        ])
-      }
-
-      const allPaddingPropsDefined = maybeFullPadding(newPaddingMaxed)
-
-      // all 4 sides present - can be represented via the padding shorthand property
-      if (allPaddingPropsDefined != null) {
-        const paddingString = paddingToPaddingString(allPaddingPropsDefined)
-        return strategyApplicationResult([
-          ...basicCommands,
-          ...IndividualPaddingProps.map((p) =>
-            deleteProperties('always', selectedElement, [
-              stylePropPathMappingFn(p, styleStringInArray),
-            ]),
-          ),
-          setProperty('always', selectedElement, StylePaddingProp, paddingString),
-          setActiveFrames(
-            selectedElements.map((path) => ({
-              action: 'set-padding',
-              target: activeFrameTargetPath(path),
-              source: zeroRectIfNullOrInfinity(
-                MetadataUtils.getFrameInCanvasCoords(path, canvasState.startingMetadata),
-              ),
-            })),
-          ),
-        ])
-      }
-
-      // only some sides are present - longhand properties have to be used
-      return strategyApplicationResult([
-        ...basicCommands,
-        deleteProperties('always', selectedElement, [
-          StylePaddingProp,
-          ...IndividualPaddingProps.map((p) => stylePropPathMappingFn(p, styleStringInArray)),
-        ]),
-        ...nonZeroPropsToAdd.map(([p, value]) =>
-          setProperty(
-            'always',
-            selectedElement,
-            stylePropPathMappingFn(p, styleStringInArray),
-            value,
-          ),
-        ),
-        setActiveFrames(
-          selectedElements.map((path) => ({
-            action: 'set-padding',
-            target: activeFrameTargetPath(path),
-            source: zeroRectIfNullOrInfinity(
-              MetadataUtils.getFrameInCanvasCoords(path, canvasState.startingMetadata),
-            ),
-          })),
-        ),
-      ])
+        ],
+        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
+        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
+        // appropriate to this particular case.
+        'rerender-all-elements',
+      )
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/shared-absolute-resize-strategy-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/shared-absolute-resize-strategy-helpers.ts
index bc658645f1f5..17c7d5f55b7e 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/shared-absolute-resize-strategy-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/shared-absolute-resize-strategy-helpers.ts
@@ -57,7 +57,7 @@ import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { addOrMergeIntendedBounds } from './shared-keyboard-strategy-helpers'
 import type { InspectorStrategy } from '../../../../components/inspector/inspector-strategies/inspector-strategy'
 import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { withUnderlyingTarget } from '../../../../components/editor/store/editor-state'
 import type { SetCssLengthProperty } from '../../commands/set-css-length-command'
 import {
@@ -416,7 +416,7 @@ export function resizeInspectorStrategy(
       commands.push(
         pushIntendedBoundsAndUpdateGroups(changeBoundsResult.intendedBounds, 'live-metadata'),
       )
-      commands.push(setElementsToRerenderCommand(selectedElements))
+
       return commands
     },
   }
@@ -460,7 +460,7 @@ export function directResizeInspectorStrategy(
           pushIntendedBoundsAndUpdateGroups(changeBoundsResult.intendedBounds, 'live-metadata'),
         )
       }
-      commands.push(setElementsToRerenderCommand(selectedElements))
+
       return commands
     },
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts
index 5397ee1f84a9..4f93b1e1f635 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts
@@ -44,7 +44,7 @@ import {
 import type { CanvasCommand } from '../../commands/commands'
 import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
-import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
+
 import { setSnappingGuidelines } from '../../commands/set-snapping-guidelines-command'
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import {
@@ -152,17 +152,20 @@ export function applyMoveCommon(
     if (cmdKeyPressed) {
       const commandsForSelectedElements = getMoveCommands(drag)
 
-      return strategyApplicationResult([
-        ...commandsForSelectedElements.commands,
-        pushIntendedBoundsAndUpdateGroups(
-          commandsForSelectedElements.intendedBounds,
-          'starting-metadata',
-        ),
-        updateHighlightedViews('mid-interaction', []),
-        setElementsToRerenderCommand(targets),
-        setCursorCommand(CSSCursor.Select),
-        setActiveFrames(getActiveFrames(commandsForSelectedElements.intendedBounds)),
-      ])
+      return strategyApplicationResult(
+        [
+          ...commandsForSelectedElements.commands,
+          pushIntendedBoundsAndUpdateGroups(
+            commandsForSelectedElements.intendedBounds,
+            'starting-metadata',
+          ),
+          updateHighlightedViews('mid-interaction', []),
+
+          setCursorCommand(CSSCursor.Select),
+          setActiveFrames(getActiveFrames(commandsForSelectedElements.intendedBounds)),
+        ],
+        targets,
+      )
     } else {
       const constrainedDragAxis =
         shiftKeyPressed && drag != null ? determineConstrainedDragAxis(drag) : null
@@ -189,18 +192,21 @@ export function applyMoveCommon(
         canvasState.scale,
       )
       const commandsForSelectedElements = getMoveCommands(snappedDragVector)
-      return strategyApplicationResult([
-        ...commandsForSelectedElements.commands,
-        updateHighlightedViews('mid-interaction', []),
-        setSnappingGuidelines('mid-interaction', guidelinesWithSnappingVector),
-        pushIntendedBoundsAndUpdateGroups(
-          commandsForSelectedElements.intendedBounds,
-          'starting-metadata',
-        ),
-        setElementsToRerenderCommand([...targets, ...targetsForSnapping]),
-        setCursorCommand(CSSCursor.Select),
-        setActiveFrames(getActiveFrames(commandsForSelectedElements.intendedBounds)),
-      ])
+      return strategyApplicationResult(
+        [
+          ...commandsForSelectedElements.commands,
+          updateHighlightedViews('mid-interaction', []),
+          setSnappingGuidelines('mid-interaction', guidelinesWithSnappingVector),
+          pushIntendedBoundsAndUpdateGroups(
+            commandsForSelectedElements.intendedBounds,
+            'starting-metadata',
+          ),
+
+          setCursorCommand(CSSCursor.Select),
+          setActiveFrames(getActiveFrames(commandsForSelectedElements.intendedBounds)),
+        ],
+        [...targets, ...targetsForSnapping],
+      )
     }
   } else {
     // Fallback for when the checks above are not satisfied.
@@ -354,7 +360,7 @@ export function moveInspectorStrategy(
         intendedBounds.push(...moveCommandsResult.intendedBounds)
       }
       commands.push(pushIntendedBoundsAndUpdateGroups(intendedBounds, 'live-metadata'))
-      commands.push(setElementsToRerenderCommand(selectedElementPaths))
+
       return commands
     },
   }
@@ -385,7 +391,7 @@ export function directMoveInspectorStrategy(
         intendedBounds.push(...moveCommandsResult.intendedBounds)
       }
       commands.push(pushIntendedBoundsAndUpdateGroups(intendedBounds, 'live-metadata'))
-      commands.push(setElementsToRerenderCommand(selectedElementPaths))
+
       return commands
     },
   }
diff --git a/editor/src/components/canvas/commands/commands.ts b/editor/src/components/canvas/commands/commands.ts
index 2e5241d5c0b3..2e496effcfa0 100644
--- a/editor/src/components/canvas/commands/commands.ts
+++ b/editor/src/components/canvas/commands/commands.ts
@@ -31,14 +31,6 @@ import type { ShowOutlineHighlight } from './show-outline-highlight-command'
 import { runShowOutlineHighlight } from './show-outline-highlight-command'
 import type { SetCursorCommand } from './set-cursor-command'
 import { runSetCursor } from './set-cursor-command'
-import type {
-  AppendElementsToRerenderCommand,
-  SetElementsToRerenderCommand,
-} from './set-elements-to-rerender-command'
-import {
-  runAppendElementsToRerender,
-  runSetElementsToRerender,
-} from './set-elements-to-rerender-command'
 import type { DuplicateElement } from './duplicate-element-command'
 import { runDuplicateElement } from './duplicate-element-command'
 import type { UpdateFunctionCommand } from './update-function-command'
@@ -121,8 +113,6 @@ export type CanvasCommand =
   | ShowOutlineHighlight
   | ShowReorderIndicator
   | SetCursorCommand
-  | SetElementsToRerenderCommand
-  | AppendElementsToRerenderCommand
   | PushIntendedBoundsAndUpdateGroups
   | PushIntendedBoundsAndUpdateHuggingElements
   | DeleteProperties
@@ -184,10 +174,6 @@ export function runCanvasCommand(
       return runShowReorderIndicator(editorState, command)
     case 'SET_CURSOR_COMMAND':
       return runSetCursor(editorState, command)
-    case 'SET_ELEMENTS_TO_RERENDER_COMMAND':
-      return runSetElementsToRerender(editorState, command)
-    case 'APPEND_ELEMENTS_TO_RERENDER_COMMAND':
-      return runAppendElementsToRerender(editorState, command)
     case 'PUSH_INTENDED_BOUNDS_AND_UPDATE_GROUPS':
       return runPushIntendedBoundsAndUpdateGroups(editorState, command, commandLifecycle)
     case 'PUSH_INTENDED_BOUNDS_AND_UPDATE_HUGGING_ELEMENTS':
diff --git a/editor/src/components/canvas/commands/set-elements-to-rerender-command.ts b/editor/src/components/canvas/commands/set-elements-to-rerender-command.ts
deleted file mode 100644
index 1b6c52fa3368..000000000000
--- a/editor/src/components/canvas/commands/set-elements-to-rerender-command.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as EP from '../../../core/shared/element-path'
-import type {
-  EditorState,
-  EditorStatePatch,
-  ElementsToRerender,
-} from '../../editor/store/editor-state'
-import type { BaseCommand, CommandFunction } from './commands'
-
-export interface SetElementsToRerenderCommand extends BaseCommand {
-  type: 'SET_ELEMENTS_TO_RERENDER_COMMAND'
-  value: ElementsToRerender
-}
-
-export function setElementsToRerenderCommand(
-  value: ElementsToRerender,
-): SetElementsToRerenderCommand {
-  const uniqueValues = value === 'rerender-all-elements' ? value : EP.uniqueElementPaths(value)
-  return {
-    type: 'SET_ELEMENTS_TO_RERENDER_COMMAND',
-    whenToRun: 'mid-interaction',
-    value: uniqueValues,
-  }
-}
-
-export const runSetElementsToRerender: CommandFunction<SetElementsToRerenderCommand> = (
-  e: EditorState,
-  command: SetElementsToRerenderCommand,
-) => {
-  const editorStatePatch: EditorStatePatch = {
-    canvas: {
-      elementsToRerender: { $set: command.value },
-    },
-  }
-  return {
-    editorStatePatches: [editorStatePatch],
-    commandDescription: `Set Elements To Rerender: [${
-      typeof command.value === 'string' ? command.value : command.value.map(EP.toString).join(', ')
-    }]`,
-  }
-}
-
-// NOTE: You probably want to use the command above! Since we don't explicitly clear the current
-// value of canvas.elementsToRerender, and the default value is 'render-all-elements', if you use
-// this command in the wrong place you can very easily end up re-rendering everything
-export interface AppendElementsToRerenderCommand extends BaseCommand {
-  type: 'APPEND_ELEMENTS_TO_RERENDER_COMMAND'
-  value: ElementsToRerender
-}
-
-export function appendElementsToRerenderCommand(
-  value: ElementsToRerender,
-): AppendElementsToRerenderCommand {
-  return {
-    type: 'APPEND_ELEMENTS_TO_RERENDER_COMMAND',
-    whenToRun: 'mid-interaction',
-    value: value,
-  }
-}
-
-function mergeElementsToRerender(l: ElementsToRerender, r: ElementsToRerender): ElementsToRerender {
-  if (l === 'rerender-all-elements' || r === 'rerender-all-elements') {
-    return 'rerender-all-elements'
-  } else {
-    return [...l, ...r]
-  }
-}
-
-export const runAppendElementsToRerender: CommandFunction<AppendElementsToRerenderCommand> = (
-  e: EditorState,
-  command: AppendElementsToRerenderCommand,
-) => {
-  const editorStatePatch: EditorStatePatch = {
-    canvas: {
-      elementsToRerender: {
-        $apply: (current: ElementsToRerender) => mergeElementsToRerender(current, command.value),
-      },
-    },
-  }
-  return {
-    editorStatePatches: [editorStatePatch],
-    commandDescription: `Append Elements To Rerender: [${
-      typeof command.value === 'string' ? command.value : command.value.map(EP.toString).join(', ')
-    }]`,
-  }
-}
diff --git a/editor/src/components/canvas/controls/select-mode/canvas-strategy-picker.spec.browser2.tsx b/editor/src/components/canvas/controls/select-mode/canvas-strategy-picker.spec.browser2.tsx
index 1982d17b690b..a3dfe5df0d87 100644
--- a/editor/src/components/canvas/controls/select-mode/canvas-strategy-picker.spec.browser2.tsx
+++ b/editor/src/components/canvas/controls/select-mode/canvas-strategy-picker.spec.browser2.tsx
@@ -32,7 +32,7 @@ const BestStrategy: CanvasStrategy = {
   icon: { category: 'tools', type: 'pointer' },
   controlsToRender: [],
   fitness: 10,
-  apply: () => strategyApplicationResult([]),
+  apply: () => strategyApplicationResult([], 'rerender-all-elements'),
 }
 
 const AverageStrategy: CanvasStrategy = {
@@ -42,7 +42,7 @@ const AverageStrategy: CanvasStrategy = {
   icon: { category: 'tools', type: 'pointer' },
   controlsToRender: [],
   fitness: 5,
-  apply: () => strategyApplicationResult([]),
+  apply: () => strategyApplicationResult([], 'rerender-all-elements'),
 }
 
 const WorstStrategy: CanvasStrategy = {
@@ -52,7 +52,7 @@ const WorstStrategy: CanvasStrategy = {
   icon: { category: 'tools', type: 'pointer' },
   controlsToRender: [],
   fitness: 1,
-  apply: () => strategyApplicationResult([]),
+  apply: () => strategyApplicationResult([], 'rerender-all-elements'),
 }
 
 const UnfitStrategy: CanvasStrategy = {
@@ -62,7 +62,7 @@ const UnfitStrategy: CanvasStrategy = {
   icon: { category: 'tools', type: 'pointer' },
   controlsToRender: [],
   fitness: 0,
-  apply: () => strategyApplicationResult([]),
+  apply: () => strategyApplicationResult([], 'rerender-all-elements'),
 }
 
 // Deliberately not in sorted order
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index a1c4cea4ef20..14cc63ab0cfa 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -485,7 +485,6 @@ import {
 } from '../../canvas/canvas-strategies/strategies/shared-move-strategies-helpers'
 import type { CanvasCommand } from '../../canvas/commands/commands'
 import { foldAndApplyCommandsSimple } from '../../canvas/commands/commands'
-import { setElementsToRerenderCommand } from '../../canvas/commands/set-elements-to-rerender-command'
 import type { UiJsxCanvasContextData } from '../../canvas/ui-jsx-canvas'
 import { notice } from '../../common/notice'
 import type { ShortcutConfiguration } from '../shortcut-definitions'
@@ -5781,7 +5780,13 @@ export const UPDATE_FNS = {
     }
   },
   SET_ELEMENTS_TO_RERENDER: (action: SetElementsToRerender, editor: EditorModel): EditorModel => {
-    return foldAndApplyCommandsSimple(editor, [setElementsToRerenderCommand(action.value)])
+    return {
+      ...editor,
+      canvas: {
+        ...editor.canvas,
+        elementsToRerender: action.value,
+      },
+    }
   },
   TOGGLE_SELECTION_LOCK: (action: ToggleSelectionLock, editor: EditorModel): EditorModel => {
     const targets = action.targets
diff --git a/editor/src/components/editor/store/dispatch-strategies.spec.tsx b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
index 79b1e71e1a0b..a3ffdb94c054 100644
--- a/editor/src/components/editor/store/dispatch-strategies.spec.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
@@ -157,9 +157,10 @@ const testStrategy: MetaCanvasStrategy = (
     controlsToRender: [],
     fitness: 10,
     apply: function (): StrategyApplicationResult {
-      return strategyApplicationResult([
-        wildcardPatch('always', { canvas: { scale: { $set: 100 } } }),
-      ])
+      return strategyApplicationResult(
+        [wildcardPatch('always', { canvas: { scale: { $set: 100 } } })],
+        'rerender-all-elements',
+      )
     },
     descriptiveLabel: 'A Test Strategy',
     icon: {
@@ -984,7 +985,7 @@ describe('only update metadata on SAVE_DOM_REPORT', () => {
             },
             apply: function (): StrategyApplicationResult {
               if (interactionSession == null) {
-                return strategyApplicationResult([])
+                return strategyApplicationResult([], 'rerender-all-elements')
               }
               expect(canvasState.startingMetadata).not.toBe(interactionSession.latestMetadata)
               expect(canvasState.startingAllElementProps).not.toBe(
@@ -1011,7 +1012,7 @@ describe('only update metadata on SAVE_DOM_REPORT', () => {
                   .backgroundColor,
               ).toBeDefined()
               testStrategyRan = true
-              return strategyApplicationResult([])
+              return strategyApplicationResult([], 'rerender-all-elements')
             },
           },
         ],
diff --git a/editor/src/components/editor/store/dispatch-strategies.tsx b/editor/src/components/editor/store/dispatch-strategies.tsx
index 682477d3084e..7801ff49e943 100644
--- a/editor/src/components/editor/store/dispatch-strategies.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.tsx
@@ -5,6 +5,7 @@ import type {
 } from '../../canvas/canvas-strategies/canvas-strategies'
 import {
   applyCanvasStrategy,
+  applyElementsToRerenderFromStrategyResult,
   findCanvasStrategy,
   interactionInProgress,
   pickCanvasStateFromEditorState,
@@ -47,6 +48,7 @@ import type {
   CustomStrategyState,
   CustomStrategyStatePatch,
   InteractionCanvasState,
+  StrategyApplicationResult,
 } from '../../canvas/canvas-strategies/canvas-strategy-types'
 import { strategyApplicationResult } from '../../canvas/canvas-strategies/canvas-strategy-types'
 import { isFeatureEnabled } from '../../../utils/feature-switches'
@@ -91,7 +93,7 @@ export function interactionFinished(
       result.strategyState.currentStrategy,
     )
 
-    const strategyResult =
+    const strategyResult: StrategyApplicationResult =
       strategy != null
         ? applyCanvasStrategy(
             strategy.strategy,
@@ -100,9 +102,7 @@ export function interactionFinished(
             result.strategyState.customStrategyState,
             'end-interaction',
           )
-        : {
-            commands: [],
-          }
+        : strategyApplicationResult([], 'rerender-all-elements')
     const commandResult = foldAndApplyCommands(
       newEditorState,
       storedState.patchedEditor,
@@ -111,13 +111,16 @@ export function interactionFinished(
       'end-interaction',
     )
 
-    const finalEditor: EditorState = {
-      ...commandResult.editorState,
-      // TODO instead of clearing the metadata, we should save the latest valid metadata here to save a dom-walker run
-      jsxMetadata: {},
-      domMetadata: {},
-      spyMetadata: {},
-    }
+    const finalEditor: EditorState = applyElementsToRerenderFromStrategyResult(
+      {
+        ...commandResult.editorState,
+        // TODO instead of clearing the metadata, we should save the latest valid metadata here to save a dom-walker run
+        jsxMetadata: {},
+        domMetadata: {},
+        spyMetadata: {},
+      },
+      strategyResult,
+    )
 
     return {
       unpatchedEditorState: finalEditor,
@@ -217,7 +220,10 @@ export function interactionHardReset(
 
       return {
         unpatchedEditorState: newEditorState,
-        patchedEditorState: commandResult.editorState,
+        patchedEditorState: applyElementsToRerenderFromStrategyResult(
+          commandResult.editorState,
+          strategyResult,
+        ),
         newStrategyState: newStrategyState,
       }
     } else {
@@ -380,7 +386,10 @@ export function interactionStart(
 
       return {
         unpatchedEditorState: newEditorState,
-        patchedEditorState: commandResult.editorState,
+        patchedEditorState: applyElementsToRerenderFromStrategyResult(
+          commandResult.editorState,
+          strategyResult,
+        ),
         newStrategyState: newStrategyState,
       }
     } else {
@@ -483,7 +492,10 @@ function handleUserChangedStrategy(
 
     return {
       unpatchedEditorState: newEditorState,
-      patchedEditorState: commandResult.editorState,
+      patchedEditorState: applyElementsToRerenderFromStrategyResult(
+        commandResult.editorState,
+        strategyResult,
+      ),
       newStrategyState: newStrategyState,
     }
   } else {
@@ -537,7 +549,7 @@ function handleAccumulatingKeypresses(
               strategyState.customStrategyState,
               'mid-interaction',
             )
-          : strategyApplicationResult([])
+          : strategyApplicationResult([], 'rerender-all-elements')
       const commandResult = foldAndApplyCommands(
         updatedEditorState,
         storedEditorState,
@@ -565,7 +577,10 @@ function handleAccumulatingKeypresses(
 
       return {
         unpatchedEditorState: updatedEditorState,
-        patchedEditorState: commandResult.editorState,
+        patchedEditorState: applyElementsToRerenderFromStrategyResult(
+          commandResult.editorState,
+          strategyResult,
+        ),
         newStrategyState: newStrategyState,
       }
     }
@@ -601,7 +616,7 @@ function handleUpdate(
             strategyState.customStrategyState,
             'mid-interaction',
           )
-        : strategyApplicationResult([])
+        : strategyApplicationResult([], 'rerender-all-elements')
     const commandResult = foldAndApplyCommands(
       newEditorState,
       storedEditorState,
@@ -628,7 +643,10 @@ function handleUpdate(
     }
     return {
       unpatchedEditorState: newEditorState,
-      patchedEditorState: commandResult.editorState,
+      patchedEditorState: applyElementsToRerenderFromStrategyResult(
+        commandResult.editorState,
+        strategyResult,
+      ),
       newStrategyState: newStrategyState,
     }
   } else {
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index aa3231f356da..d6090a49e8bb 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -852,6 +852,17 @@ export function editorStateCanvasControls(
 
 export type ElementsToRerender = Array<ElementPath> | 'rerender-all-elements'
 
+export function combineElementsToRerender(
+  first: ElementsToRerender,
+  second: ElementsToRerender,
+): ElementsToRerender {
+  if (first === 'rerender-all-elements' || second === 'rerender-all-elements') {
+    return 'rerender-all-elements'
+  } else {
+    return [...first, ...second]
+  }
+}
+
 export interface InternalClipboard {
   styleClipboard: Array<ValueAtPath>
   elements: Array<CopyData>

From 7f1f4709206afadb0ead384301bba6b17332b168 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 30 Sep 2024 14:33:08 +0200
Subject: [PATCH 057/272] Grid resize fix striped area positioning and sizing
 (#6422)

**Problem:**

The grid resize striped area has two issues:

1. it is positioned and sized based on the container size and not the
actual grid template
2. it does not get positioned correctly when zoomed

**Fix:**

This PR fixes both issues.

| Before | After |
|--------|------------|
| ![Kapture 2024-09-27 at 15 02
14](https://github.com/user-attachments/assets/8d74f95c-7eec-43d3-9952-90d6dd77c567)
| ![Kapture 2024-09-27 at 15 00
47](https://github.com/user-attachments/assets/a4d52f24-430f-462c-9d07-52fa0208c2de)
|


Fixes #6421
---
 .../canvas/controls/grid-controls.tsx         | 44 ++++++++++++++++---
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 2b47c4e806b1..a72f25fbb4b5 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -157,10 +157,11 @@ export interface GridResizingControlProps {
   axis: Axis
   containingFrame: CanvasRectangle
   fromPropsAxisValues: GridAutoOrTemplateDimensions | null
-  padding: number | null
+  padding: number
   resizing: 'resize-target' | 'resize-generated' | 'not-resizing'
   setResizingIndex: (v: number | null) => void
   resizeLocked: boolean
+  stripedAreaLength: number | null
 }
 
 export const GridResizingControl = React.memo((props: GridResizingControlProps) => {
@@ -229,6 +230,11 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
       : props.containingFrame.width + GRID_RESIZE_HANDLE_CONTAINER_SIZE
   }, [props.containingFrame, props.axis])
 
+  const stripedAreaSkew = React.useMemo(
+    () => GRID_RESIZE_HANDLE_CONTAINER_SIZE / scale + props.padding,
+    [scale, props.padding],
+  )
+
   return (
     <div
       key={containerId}
@@ -280,10 +286,18 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
         <div
           style={{
             position: 'absolute',
-            top: props.axis === 'column' ? GRID_RESIZE_HANDLE_CONTAINER_SIZE : 0,
-            left: props.axis === 'row' ? GRID_RESIZE_HANDLE_CONTAINER_SIZE : 0,
-            right: 0,
-            bottom: 0,
+            top: props.axis === 'column' ? stripedAreaSkew : 0,
+            left: props.axis === 'row' ? stripedAreaSkew : 0,
+            right: props.axis === 'row' || props.stripedAreaLength == null ? undefined : 0,
+            width:
+              props.axis === 'row' && props.stripedAreaLength != null
+                ? props.stripedAreaLength
+                : undefined,
+            bottom: props.axis === 'column' || props.stripedAreaLength == null ? undefined : 0,
+            height:
+              props.axis === 'column' && props.stripedAreaLength != null
+                ? props.stripedAreaLength
+                : undefined,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -330,6 +344,7 @@ GridResizingControl.displayName = 'GridResizingControl'
 export interface GridResizingProps {
   axisValues: GridAutoOrTemplateBase | null
   fromPropsAxisValues: GridAutoOrTemplateBase | null
+  stripedAreaLength: number | null
   containingFrame: CanvasRectangle
   axis: Axis
   gap: number | null
@@ -429,6 +444,7 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
                 dimensionIndex={dimensionIndex}
                 dimension={dimension}
                 fromPropsAxisValues={fromProps}
+                stripedAreaLength={props.stripedAreaLength}
                 axis={props.axis}
                 containingFrame={props.containingFrame}
                 resizing={
@@ -444,8 +460,8 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
                   props.padding == null
                     ? 0
                     : props.axis === 'column'
-                    ? props.padding.left ?? 0
-                    : props.padding.top ?? 0
+                    ? props.padding.top ?? 0
+                    : props.padding.left ?? 0
                 }
               />
             )
@@ -552,6 +568,18 @@ export const GridRowColumnResizingControls =
   controlForStrategyMemoized<GridRowColumnResizingControlsProps>(({ target }) => {
     const grids = useGridData([target])
 
+    function getStripedAreaLength(template: GridAutoOrTemplateBase | null, gap: number) {
+      if (template?.type !== 'DIMENSIONS') {
+        return null
+      }
+      return template.dimensions.reduce((acc, curr, index) => {
+        if (curr.type === 'NUMBER') {
+          return acc + curr.value.value + (index > 0 ? gap : 0)
+        }
+        return acc
+      }, 0)
+    }
+
     return (
       <CanvasOffsetWrapper>
         {grids.flatMap((grid) => {
@@ -564,6 +592,7 @@ export const GridRowColumnResizingControls =
               axis={'column'}
               gap={grid.columnGap ?? grid.gap}
               padding={grid.padding}
+              stripedAreaLength={getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0)}
             />
           )
         })}
@@ -577,6 +606,7 @@ export const GridRowColumnResizingControls =
               axis={'row'}
               gap={grid.rowGap ?? grid.gap}
               padding={grid.padding}
+              stripedAreaLength={getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0)}
             />
           )
         })}

From 46a961eb3b8a9ebb0f0a985ea4269953786eb0b5 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 30 Sep 2024 15:53:34 +0200
Subject: [PATCH 058/272] Use stretch instead of fill for grid children (#6424)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Problem:**

The inspector should show `Stretch` instead of `Fill` for grid children,
and set `alignSelf`/`justifySelf` in those cases.

**Fix:**

1. Set `alignSelf`/`justifySelf` to `stretch` if `Stretch` is selected
in the inspector dropdown for grid children
2. Show `Stretch` instead of `Fill` for label for grid children (note: I
opted for just changing the label here instead of having a different
strategy altogether, since in my mind it's still fulfilling the goal of
"filling" the parent – but lmk if this is the wrong take)

Fixes #6423
---
 .../strategies/basic-resize-strategy.tsx      | 44 +++++++----
 .../select-mode/absolute-resize-control.tsx   |  2 +
 .../src/components/editor/actions/actions.tsx | 79 +++++++++++++++----
 .../inspector/fill-hug-fixed-control.tsx      |  7 ++
 .../components/inspector/inspector-common.ts  | 50 +++++++++++-
 .../fill-container-basic-strategy.ts          | 78 +++++++++++++++++-
 .../fixed-size-basic-strategy.ts              |  7 +-
 .../inspector-strategies.ts                   |  2 +
 .../inspector/resize-to-fit-control.tsx       |  1 +
 9 files changed, 232 insertions(+), 38 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
index 2da9612b7ae7..53f768b6e61d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -11,6 +11,7 @@ import {
   isInfinityRectangle,
   offsetPoint,
 } from '../../../../core/shared/math-utils'
+import * as PP from '../../../../core/shared/property-path'
 import { styleStringInArray } from '../../../../utils/common-constants'
 import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
@@ -20,6 +21,7 @@ import { oppositeEdgePosition } from '../../canvas-types'
 import {
   isEdgePositionACorner,
   isEdgePositionAHorizontalEdge,
+  isEdgePositionAVerticalEdge,
   pickPointOnRect,
 } from '../../canvas-utils'
 import type { LengthPropertyToAdjust } from '../../commands/adjust-css-length-command'
@@ -27,6 +29,8 @@ import {
   adjustCssLengthProperties,
   lengthPropertyToAdjust,
 } from '../../commands/adjust-css-length-command'
+import type { CanvasCommand } from '../../commands/commands'
+import { deleteProperties } from '../../commands/delete-properties-command'
 import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
 import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
@@ -219,21 +223,31 @@ export function basicResizeStrategy(
 
           const elementsToRerender = [...selectedElements, ...gridsToRerender]
 
-          return strategyApplicationResult(
-            [
-              adjustCssLengthProperties('always', selectedElement, null, resizeProperties),
-              updateHighlightedViews('mid-interaction', []),
-              setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
-              pushIntendedBoundsAndUpdateGroups(
-                [{ target: selectedElement, frame: resizedBounds }],
-                'starting-metadata',
-              ),
-              ...groupChildren.map((c) =>
-                queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]),
-              ),
-            ],
-            elementsToRerender,
-          )
+          let commands: CanvasCommand[] = [
+            adjustCssLengthProperties('always', selectedElement, null, resizeProperties),
+            updateHighlightedViews('mid-interaction', []),
+            setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
+            pushIntendedBoundsAndUpdateGroups(
+              [{ target: selectedElement, frame: resizedBounds }],
+              'starting-metadata',
+            ),
+            ...groupChildren.map((c) =>
+              queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]),
+            ),
+          ]
+
+          if (isEdgePositionAHorizontalEdge(edgePosition)) {
+            commands.push(
+              deleteProperties('always', selectedElement, [PP.create('style', 'justifySelf')]),
+            )
+          }
+          if (isEdgePositionAVerticalEdge(edgePosition)) {
+            commands.push(
+              deleteProperties('always', selectedElement, [PP.create('style', 'alignSelf')]),
+            )
+          }
+
+          return strategyApplicationResult(commands, elementsToRerender)
         } else {
           return strategyApplicationResult(
             [
diff --git a/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx b/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
index 38f456abf349..c8db573bd4af 100644
--- a/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
@@ -398,6 +398,8 @@ const sizeLabel = (state: FixedHugFill['type'], actualSize: number): string => {
     case 'detected':
     case 'computed':
       return `${actualSize}`
+    case 'stretch':
+      return 'Stretch'
     default:
       assertNever(state)
   }
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index 14cc63ab0cfa..4b02829f691a 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -4,8 +4,7 @@ import localforage from 'localforage'
 import { imagePathURL } from '../../../common/server'
 import { roundAttributeLayoutValues } from '../../../core/layout/layout-utils'
 import {
-  findElementAtPath,
-  findJSXElementAtPath,
+  getSimpleAttributeAtPath,
   getZIndexOrderedViewsWithoutDirectChildren,
   MetadataUtils,
 } from '../../../core/model/element-metadata-utils'
@@ -102,6 +101,7 @@ import type {
   LocalRectangle,
   Size,
   CanvasVector,
+  MaybeInfinityCanvasRectangle,
 } from '../../../core/shared/math-utils'
 import {
   canvasRectangle,
@@ -157,7 +157,7 @@ import { assertNever, fastForEach, getProjectLockedKey, identity } from '../../.
 import { emptyImports, mergeImports } from '../../../core/workers/common/project-file-utils'
 import type { UtopiaTsWorkers } from '../../../core/workers/common/worker-types'
 import type { IndexPosition } from '../../../utils/utils'
-import Utils, { absolute } from '../../../utils/utils'
+import Utils from '../../../utils/utils'
 import type { ProjectContentTreeRoot } from '../../assets'
 import {
   isProjectContentFile,
@@ -430,7 +430,7 @@ import {
 import { loadStoredState } from '../stored-state'
 import { applyMigrations } from './migrations/migrations'
 
-import { boundsInFile, defaultConfig } from 'utopia-vscode-common'
+import { defaultConfig } from 'utopia-vscode-common'
 import { reorderElement } from '../../../components/canvas/commands/reorder-element-command'
 import type { BuiltInDependencies } from '../../../core/es-modules/package-manager/built-in-dependencies-list'
 import { fetchNodeModules } from '../../../core/es-modules/package-manager/fetch-packages'
@@ -495,7 +495,6 @@ import {
   clearImageFileBlob,
   enableInsertModeForJSXElement,
   finishCheckpointTimer,
-  insertAsChildTarget,
   insertJSXElement,
   openCodeEditorFile,
   replaceMappedElement,
@@ -524,7 +523,6 @@ import { styleStringInArray } from '../../../utils/common-constants'
 import { collapseTextElements } from '../../../components/text-editor/text-handling'
 import { LayoutPropertyList, StyleProperties } from '../../inspector/common/css-utils'
 import {
-  getFromPropOrFlagComment,
   isUtopiaPropOrCommentFlag,
   makeUtopiaFlagComment,
   removePropOrFlagComment,
@@ -543,7 +541,10 @@ import {
   replaceWithElementsWrappedInFragmentBehaviour,
 } from '../store/insertion-path'
 import { getConditionalCaseCorrespondingToBranchPath } from '../../../core/model/conditionals'
-import { deleteProperties } from '../../canvas/commands/delete-properties-command'
+import {
+  deleteProperties,
+  deleteValuesAtPath,
+} from '../../canvas/commands/delete-properties-command'
 import { treatElementAsFragmentLike } from '../../canvas/canvas-strategies/strategies/fragment-like-helpers'
 import {
   fixParentContainingBlockSettings,
@@ -619,11 +620,12 @@ import {
 import type { FixUIDsState } from '../../../core/workers/parser-printer/uid-fix'
 import { fixTopLevelElementsUIDs } from '../../../core/workers/parser-printer/uid-fix'
 import { nextSelectedTab } from '../../navigator/left-pane/left-pane-utils'
-import { getDefaultedRemixRootDir, getRemixRootDir } from '../store/remix-derived-data'
+import { getDefaultedRemixRootDir } from '../store/remix-derived-data'
 import { isReplaceKeepChildrenAndStyleTarget } from '../../navigator/navigator-item/component-picker-context-menu'
 import { canCondenseJSXElementChild } from '../../../utils/can-condense'
 import { getNavigatorTargetsFromEditorState } from '../../navigator/navigator-utils'
 import { applyValuesAtPath } from '../../canvas/commands/adjust-number-command'
+import { styleP } from '../../inspector/inspector-common'
 
 export const MIN_CODE_PANE_REOPEN_WIDTH = 100
 
@@ -6589,10 +6591,54 @@ function removeErrorMessagesForFile(editor: EditorState, filename: string): Edit
 function alignFlexOrGridChildren(editor: EditorState, views: ElementPath[], alignment: Alignment) {
   let workingEditorState = { ...editor }
   for (const view of views) {
-    function apply(prop: 'alignSelf' | 'justifySelf', value: string) {
-      return applyValuesAtPath(workingEditorState, view, [
+    // When updating alongside the given alignment, also update the opposite one so that it makes sense:
+    // For example, if alignment is 'alignSelf', delete the 'justifySelf' if currently set to stretch and, if so,
+    // set the explicit height of the element (and vice versa for 'justifySelf').
+    function updateOpposite(
+      editorState: EditorState,
+      frame: MaybeInfinityCanvasRectangle | null,
+      target: 'alignSelf' | 'justifySelf',
+      dimension: 'width' | 'height',
+    ) {
+      let working = { ...editorState }
+
+      working = deleteValuesAtPath(working, view, [styleP(target)]).editorStateWithChanges
+
+      working = applyValuesAtPath(working, view, [
+        {
+          path: styleP(dimension),
+          value: jsExpressionValue(zeroRectIfNullOrInfinity(frame)[dimension], emptyComments),
+        },
+      ]).editorStateWithChanges
+
+      return working
+    }
+
+    function apply(editorState: EditorState, prop: 'alignSelf' | 'justifySelf', value: string) {
+      const element = MetadataUtils.findElementByElementPath(editor.jsxMetadata, view)
+      if (element == null || isLeft(element.element) || !isJSXElement(element.element.value)) {
+        return workingEditorState
+      }
+
+      let working = editorState
+
+      working = applyValuesAtPath(working, view, [
         { path: PP.create('style', prop), value: jsExpressionValue(value, emptyComments) },
       ]).editorStateWithChanges
+
+      const alignSelfStretch =
+        getSimpleAttributeAtPath(right(element.element.value.props), styleP('alignSelf')).value ===
+        'stretch'
+      const justifySelfStretch =
+        getSimpleAttributeAtPath(right(element.element.value.props), styleP('justifySelf'))
+          .value === 'stretch'
+
+      if (prop === 'alignSelf' && justifySelfStretch) {
+        working = updateOpposite(working, element.globalFrame, 'justifySelf', 'height')
+      } else if (prop === 'justifySelf' && alignSelfStretch) {
+        working = updateOpposite(working, element.globalFrame, 'alignSelf', 'width')
+      }
+      return working
     }
 
     const { align, justify } = MetadataUtils.getRelativeAlignJustify(
@@ -6602,27 +6648,28 @@ function alignFlexOrGridChildren(editor: EditorState, views: ElementPath[], alig
 
     switch (alignment) {
       case 'bottom':
-        workingEditorState = apply(align, 'end')
+        workingEditorState = apply(workingEditorState, align, 'end')
         break
       case 'top':
-        workingEditorState = apply(align, 'start')
+        workingEditorState = apply(workingEditorState, align, 'start')
         break
       case 'vcenter':
-        workingEditorState = apply(align, 'center')
+        workingEditorState = apply(workingEditorState, align, 'center')
         break
       case 'hcenter':
-        workingEditorState = apply(justify, 'center')
+        workingEditorState = apply(workingEditorState, justify, 'center')
         break
       case 'left':
-        workingEditorState = apply(justify, 'start')
+        workingEditorState = apply(workingEditorState, justify, 'start')
         break
       case 'right':
-        workingEditorState = apply(justify, 'end')
+        workingEditorState = apply(workingEditorState, justify, 'end')
         break
       default:
         assertNever(alignment)
     }
   }
+
   return workingEditorState
 }
 
diff --git a/editor/src/components/inspector/fill-hug-fixed-control.tsx b/editor/src/components/inspector/fill-hug-fixed-control.tsx
index e97e7e2e5e5b..08dd8f40050e 100644
--- a/editor/src/components/inspector/fill-hug-fixed-control.tsx
+++ b/editor/src/components/inspector/fill-hug-fixed-control.tsx
@@ -80,6 +80,7 @@ export const CollapsedLabel = 'Collapsed' as const
 export const HugGroupContentsLabel = 'Hug' as const
 export const ComputedLabel = 'Computed' as const
 export const DetectedLabel = 'Detected' as const
+export const StretchLabel = 'Stretch' as const
 
 export function selectOptionLabel(mode: FixedHugFillMode): string {
   switch (mode) {
@@ -101,6 +102,8 @@ export function selectOptionLabel(mode: FixedHugFillMode): string {
       return ComputedLabel
     case 'detected':
       return DetectedLabel
+    case 'stretch':
+      return StretchLabel
     default:
       assertNever(mode)
   }
@@ -126,6 +129,8 @@ export function selectOptionIconType(
       return `fixed-${dimension}`
     case 'detected':
       return `fixed-${dimension}`
+    case 'stretch':
+      return `fill-${dimension}`
     default:
       assertNever(mode)
   }
@@ -396,6 +401,7 @@ function strategyForChangingFillFixedHugType(
 ): Array<InspectorStrategy> {
   switch (mode) {
     case 'fill':
+    case 'stretch':
       return setPropFillStrategies(metadata, selectedElements, axis, 'default', otherAxisSetToFill)
     case 'hug':
     case 'squeeze':
@@ -427,6 +433,7 @@ function pickFixedValue(value: FixedHugFill): CSSNumber | undefined {
     case 'fill':
     case 'hug-group':
       return value.value
+    case 'stretch':
     case 'hug':
     case 'squeeze':
     case 'collapsed':
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index e51e2fecd4fd..7f0b03ef28a1 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -647,6 +647,7 @@ export type FixedHugFill =
   | { type: 'computed'; value: CSSNumber }
   | { type: 'detected'; value: CSSNumber }
   | { type: 'scaled'; value: CSSNumber }
+  | { type: 'stretch' }
 
 export type FixedHugFillMode = FixedHugFill['type']
 
@@ -666,6 +667,30 @@ export function detectFillHugFixedState(
     return { fixedHugFill: null, controlStatus: 'off' }
   }
 
+  const width = foldEither(
+    () => null,
+    (value) => defaultEither(null, parseCSSNumber(value, 'Unitless')),
+    getSimpleAttributeAtPath(right(element.element.value.props), PP.create('style', 'width')),
+  )
+  const height = foldEither(
+    () => null,
+    (value) => defaultEither(null, parseCSSNumber(value, 'Unitless')),
+    getSimpleAttributeAtPath(right(element.element.value.props), PP.create('style', 'height')),
+  )
+
+  if (MetadataUtils.isGridCell(metadata, elementPath)) {
+    if (
+      (element.specialSizeMeasurements.alignSelf === 'stretch' &&
+        axis === 'horizontal' &&
+        width == null) ||
+      (element.specialSizeMeasurements.justifySelf === 'stretch' &&
+        axis === 'vertical' &&
+        height == null)
+    ) {
+      return { fixedHugFill: { type: 'stretch' }, controlStatus: 'detected' }
+    }
+  }
+
   const flexGrowLonghand = foldEither(
     () => null,
     (value) => defaultEither(null, parseCSSNumber(value, 'Unitless')),
@@ -1071,7 +1096,11 @@ export function getFixedFillHugOptionsForElement(
       (!isGroup && basicHugContentsApplicableForContainer(metadata, pathTrees, selectedView))
         ? 'hug'
         : null,
-      fillContainerApplicable(metadata, selectedView) ? 'fill' : null,
+      fillContainerApplicable(metadata, selectedView)
+        ? MetadataUtils.isGridCell(metadata, selectedView)
+          ? 'stretch'
+          : 'fill'
+        : null,
     ]),
   )
 }
@@ -1198,6 +1227,20 @@ export function removeExtraPinsWhenSettingSize(
   )
 }
 
+export function removeAlignJustifySelf(
+  axis: Axis,
+  elementMetadata: ElementInstanceMetadata | null,
+): Array<CanvasCommand> {
+  if (elementMetadata == null) {
+    return []
+  }
+  return [
+    deleteProperties('always', elementMetadata.elementPath, [
+      styleP(axis === 'horizontal' ? 'alignSelf' : 'justifySelf'),
+    ]),
+  ]
+}
+
 export function isFixedHugFillEqual(
   a: { fixedHugFill: FixedHugFill | null; controlStatus: ControlStatus },
   b: { fixedHugFill: FixedHugFill | null; controlStatus: ControlStatus },
@@ -1230,9 +1273,10 @@ export function isFixedHugFillEqual(
         a.fixedHugFill.value.value === b.fixedHugFill.value.value &&
         a.fixedHugFill.value.unit === b.fixedHugFill.value.unit
       )
+    case 'stretch':
+      return a.fixedHugFill.type === b.fixedHugFill.type
     default:
-      const _exhaustiveCheck: never = a.fixedHugFill
-      throw new Error(`Unknown type in FixedHugFill ${JSON.stringify(a.fixedHugFill)}`)
+      assertNever(a.fixedHugFill)
   }
 }
 
diff --git a/editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts b/editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts
index 230669cf7a09..20ca8f6a8b7b 100644
--- a/editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts
+++ b/editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts
@@ -1,7 +1,12 @@
 import * as PP from '../../../core/shared/property-path'
-import { MetadataUtils } from '../../../core/model/element-metadata-utils'
+import { getSimpleAttributeAtPath, MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { clamp } from '../../../core/shared/math-utils'
-import { setProperty } from '../../canvas/commands/set-property-command'
+import {
+  propertyToDelete,
+  propertyToSet,
+  setProperty,
+  updateBulkProperties,
+} from '../../canvas/commands/set-property-command'
 import type { FlexDirection } from '../common/css-utils'
 import { cssNumber, printCSSNumber } from '../common/css-utils'
 import type { Axis } from '../inspector-common'
@@ -14,6 +19,8 @@ import {
   nukeSizingPropsForAxisCommand,
   nullOrNonEmpty,
   setParentToFixedIfHugCommands,
+  removeAlignJustifySelf,
+  styleP,
 } from '../inspector-common'
 import type { InspectorStrategy } from './inspector-strategy'
 import {
@@ -24,8 +31,13 @@ import {
   groupErrorToastCommand,
   maybeInvalidGroupState,
 } from '../../canvas/canvas-strategies/strategies/group-helpers'
-import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template'
+import {
+  isJSXElement,
+  type ElementInstanceMetadataMap,
+} from '../../../core/shared/element-template'
 import type { ElementPath } from '../../../core/shared/project-file-types'
+import { foldEither, defaultEither, right, isLeft } from '../../../core/shared/either'
+import { parseString } from '../../../utils/value-parser-utils'
 
 export const fillContainerStrategyFlow = (
   metadata: ElementInstanceMetadataMap,
@@ -102,6 +114,8 @@ export const fillContainerStrategyFlexParent = (
     }
 
     const commands = elements.flatMap((path) => {
+      const elementMetadata = MetadataUtils.findElementByElementPath(metadata, path)
+
       const flexDirection =
         overrides.forceFlexDirectionForParent ?? detectParentFlexDirection(metadata, path) ?? 'row'
 
@@ -113,6 +127,7 @@ export const fillContainerStrategyFlexParent = (
           value === 'default' ? cssNumber(100, '%') : cssNumber(clamp(0, 100, value), '%')
         return [
           ...setParentToFixedIfHugCommands(axis, metadata, path),
+          ...removeAlignJustifySelf(axis, elementMetadata),
           setCssLengthProperty(
             'always',
             path,
@@ -128,6 +143,7 @@ export const fillContainerStrategyFlexParent = (
 
       return [
         ...nukeAllAbsolutePositioningPropsCommands(path),
+        ...removeAlignJustifySelf(axis, elementMetadata),
         ...setParentToFixedIfHugCommands(axis, metadata, path),
         nukeSizingPropsForAxisCommand(axis, path),
         setProperty(
@@ -142,3 +158,59 @@ export const fillContainerStrategyFlexParent = (
     return nullOrNonEmpty(commands)
   },
 })
+
+export const fillContainerStrategyGridParent = (
+  metadata: ElementInstanceMetadataMap,
+  elementPaths: ElementPath[],
+  axis: Axis,
+): InspectorStrategy => ({
+  name: 'Set to Fill Container, in grid layout',
+  strategy: () => {
+    const elements = elementPaths.filter(
+      (path) => fillContainerApplicable(metadata, path) && MetadataUtils.isGridCell(metadata, path),
+    )
+
+    if (elements.length === 0) {
+      return null
+    }
+
+    const commands = elements.flatMap((path) => {
+      const element = MetadataUtils.findElementByElementPath(metadata, path)
+      if (element == null || isLeft(element.element) || !isJSXElement(element.element.value)) {
+        return []
+      }
+
+      const alignSelf = foldEither(
+        () => null,
+        (value) => defaultEither(null, parseString(value)),
+        getSimpleAttributeAtPath(right(element.element.value.props), styleP('alignSelf')),
+      )
+
+      const justifySelf = foldEither(
+        () => null,
+        (value) => defaultEither(null, parseString(value)),
+        getSimpleAttributeAtPath(right(element.element.value.props), styleP('justifySelf')),
+      )
+
+      let updates = [
+        propertyToSet(styleP(axis === 'horizontal' ? 'alignSelf' : 'justifySelf'), 'stretch'),
+      ]
+
+      // delete the opposite side value (justify <> align) if not set to stretch
+      if (axis === 'vertical' && alignSelf !== 'stretch') {
+        updates.push(propertyToDelete(styleP('alignSelf')))
+      } else if (axis === 'horizontal' && justifySelf !== 'stretch') {
+        updates.push(propertyToDelete(styleP('justifySelf')))
+      }
+
+      return [
+        ...nukeAllAbsolutePositioningPropsCommands(path),
+        ...setParentToFixedIfHugCommands(axis, metadata, path),
+        nukeSizingPropsForAxisCommand(axis, path),
+        updateBulkProperties('always', path, updates),
+      ]
+    })
+
+    return nullOrNonEmpty(commands)
+  },
+})
diff --git a/editor/src/components/inspector/inspector-strategies/fixed-size-basic-strategy.ts b/editor/src/components/inspector/inspector-strategies/fixed-size-basic-strategy.ts
index 1c62f3d07fcf..504650a00db9 100644
--- a/editor/src/components/inspector/inspector-strategies/fixed-size-basic-strategy.ts
+++ b/editor/src/components/inspector/inspector-strategies/fixed-size-basic-strategy.ts
@@ -7,7 +7,11 @@ import {
 } from '../../canvas/commands/set-css-length-command'
 import type { CSSNumber } from '../common/css-utils'
 import type { Axis } from '../inspector-common'
-import { removeExtraPinsWhenSettingSize, widthHeightFromAxis } from '../inspector-common'
+import {
+  removeAlignJustifySelf,
+  removeExtraPinsWhenSettingSize,
+  widthHeightFromAxis,
+} from '../inspector-common'
 import type { InspectorStrategy } from './inspector-strategy'
 import { queueTrueUpElement } from '../../canvas/commands/queue-true-up-command'
 import {
@@ -48,6 +52,7 @@ export const fixedSizeBasicStrategy = (
 
       return [
         ...removeExtraPinsWhenSettingSize(axis, elementMetadata),
+        ...removeAlignJustifySelf(axis, elementMetadata),
         setCssLengthProperty(
           whenToRun,
           path,
diff --git a/editor/src/components/inspector/inspector-strategies/inspector-strategies.ts b/editor/src/components/inspector/inspector-strategies/inspector-strategies.ts
index 3e87820adcfb..a066a3494321 100644
--- a/editor/src/components/inspector/inspector-strategies/inspector-strategies.ts
+++ b/editor/src/components/inspector/inspector-strategies/inspector-strategies.ts
@@ -26,6 +26,7 @@ import {
 import {
   fillContainerStrategyFlexParent,
   fillContainerStrategyFlow,
+  fillContainerStrategyGridParent,
 } from './fill-container-basic-strategy'
 import { setSpacingModePacked, setSpacingModeSpaceBetween } from './spacing-mode-strategies'
 import { convertLayoutToFlexCommands } from '../../common/shared-strategies/convert-to-flex-strategy'
@@ -226,6 +227,7 @@ export const setPropFillStrategies = (
   value: 'default' | number,
   otherAxisSetToFill: boolean,
 ): Array<InspectorStrategy> => [
+  fillContainerStrategyGridParent(metadata, elementPaths, axis),
   fillContainerStrategyFlexParent(metadata, elementPaths, axis, value),
   fillContainerStrategyFlow(metadata, elementPaths, axis, value, otherAxisSetToFill),
 ]
diff --git a/editor/src/components/inspector/resize-to-fit-control.tsx b/editor/src/components/inspector/resize-to-fit-control.tsx
index 7e5598f4aa9a..84f8d46a3e0c 100644
--- a/editor/src/components/inspector/resize-to-fit-control.tsx
+++ b/editor/src/components/inspector/resize-to-fit-control.tsx
@@ -40,6 +40,7 @@ function checkGroupSuitability(
       // Do not let a group be the target of a resize to fit operation.
       return !treatElementAsGroupLike(metadata, target)
     case 'fill':
+    case 'stretch':
       // Neither a group or the child of a group should be eligible for a resize to fill operation.
       return !(
         treatElementAsGroupLike(metadata, target) || treatElementAsGroupLike(metadata, parentPath)

From f7d6be2c720856475a657d49f4391fa0fb690c31 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Mon, 30 Sep 2024 16:28:21 +0200
Subject: [PATCH 059/272] LocalSelectedViews 2: Electric Boogaloo (#6411)

**Problem:**

Selection change can be upwards of 100ms, in a large enough project it
may reach half a second. This is because almost all parts of the Editor
UI use EditorState.selectedViews as a main part of their state, which
means changing the selected elements triggers a re-render of all of the
editor. For historical reasons, we also use this as an opportunity to
re-render and re-measure the canvas, correcting all metadata that may be
stale because of partial updates during interactions.

**Fix:**
The idea is that instead of speeding up the actual rerender, we make the
selection outline change first in a fast frame, then run the expensive
editor UI update in the next frame. Turns out that _perceptually_ this
is the desired behavior: the user looks at where the mouse is, they see
a very responsive UI change, and after having clicked with the mouse, we
have a 200-300ms deadzone of user perception before that can click or
move the mouse again. We fill that space with the expensive state
update, by the time the user moves their mouse or clicks again, the
editor is ready again to handle events responsively.

**Commit details**
- Adding `temporarilyDisableStoreUpdates` to `editor.tsx`
- Adding 'canvas-fast-selection-hack' and
'resume-canvas-fast-selection-hack' to the dispatch function's
"priority" parameter, which toggles `temporarilyDisableStoreUpdates` to
true or false.
- `mouseHandler` in `select-mode-hooks.tsx` dispatches
'canvas-fast-selection-hack' and then TWO animatonFrames later, a
'resume-canvas-fast-selection-hack'.
- Some selectors and hooks, most notably
`useGetApplicableStrategyControls` get a separate selectedViews field,
instead of using EditorState.selectedViews (which may be stale). This
selectedViews parameter is fed from localSelectedViews which is updated
sooner than the zustand editor store is. this is what enables the canvas
controls to draw the changed controls immediately while the rest of the
editor UI is temporarily one frame behind.

**Notes:**
- The tests DO NOT use the `temporarilyDisableStoreUpdates` system,
because the test's fake mouse helper events we dispatch are all fired in
a single animation frame (unlike Chrome's real mouse events). Changing
all this felt like too invasive for little benefit.
- IF we find event listeners that fire out of order or with stale state,
we can create a fourth Zustand store, and delete the canvas controls
localSelectedViews / localHighlightedViews. this fourth zustand store
would be immediately updated, and select important parts of the UI could
subscribe to it to get instant updates of the selection change.
---
 .../canvas-strategies.spec.browser2.tsx       |  4 ++
 .../canvas-strategies/canvas-strategies.tsx   | 42 ++++++++++++-------
 .../absolute-duplicate-strategy.spec.tsx      |  1 +
 ...absolute-reparent-strategy-canvas.spec.tsx |  1 +
 .../absolute-reparent-strategy.spec.tsx       |  1 +
 ...lute-resize-bounding-box-strategy.spec.tsx |  1 +
 ...ert-to-absolute-and-move-strategy.spec.tsx |  1 +
 .../drag-to-insert-metastrategy.tsx           |  1 +
 .../draw-to-insert-metastrategy.tsx           |  7 +++-
 .../flex-reparent-to-absolute-strategy.tsx    |  1 +
 .../keyboard-interaction.test-utils.tsx       |  1 +
 .../canvas/controls/new-canvas-controls.tsx   | 15 +++----
 .../select-mode/select-mode-hooks.tsx         | 27 ++++++++++--
 editor/src/components/editor/action-types.ts  |  3 ++
 .../src/components/editor/actions/actions.tsx |  6 ++-
 .../editor/store/dispatch-strategies.tsx      |  7 ++++
 editor/src/templates/editor.tsx               | 22 ++++++++--
 editor/src/utils/feature-switches.ts          |  3 ++
 18 files changed, 113 insertions(+), 31 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.spec.browser2.tsx
index 3239dcd9cee1..c3dad1aac9a2 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.spec.browser2.tsx
@@ -176,6 +176,7 @@ describe('Strategy Fitness', () => {
     const canvasStrategy = findCanvasStrategy(
       RegisteredCanvasStrategies,
       pickCanvasStateFromEditorState(
+        renderResult.getEditorState().editor.selectedViews,
         renderResult.getEditorState().editor,
         renderResult.getEditorState().builtInDependencies,
       ),
@@ -226,6 +227,7 @@ describe('Strategy Fitness', () => {
     const canvasStrategy = findCanvasStrategy(
       RegisteredCanvasStrategies,
       pickCanvasStateFromEditorState(
+        renderResult.getEditorState().editor.selectedViews,
         renderResult.getEditorState().editor,
         renderResult.getEditorState().builtInDependencies,
       ),
@@ -313,6 +315,7 @@ describe('Strategy Fitness', () => {
     const canvasStrategy = findCanvasStrategy(
       RegisteredCanvasStrategies,
       pickCanvasStateFromEditorState(
+        renderResult.getEditorState().editor.selectedViews,
         renderResult.getEditorState().editor,
         renderResult.getEditorState().builtInDependencies,
       ),
@@ -363,6 +366,7 @@ describe('Strategy Fitness', () => {
     const canvasStrategy = findCanvasStrategy(
       RegisteredCanvasStrategies,
       pickCanvasStateFromEditorState(
+        renderResult.getEditorState().editor.selectedViews,
         renderResult.getEditorState().editor,
         renderResult.getEditorState().builtInDependencies,
       ),
diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
index a43af7b2c7dc..29d4ae683ffc 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -81,6 +81,7 @@ import type { ElementPath } from 'utopia-shared/src/types'
 import { reparentSubjectsForInteractionTarget } from './strategies/reparent-helpers/reparent-strategy-helpers'
 import { getReparentTargetUnified } from './strategies/reparent-helpers/reparent-strategy-parent-lookup'
 import { gridRearrangeResizeKeyboardStrategy } from './strategies/grid-rearrange-keyboard-strategy'
+import createCachedSelector from 're-reselect'
 
 export type CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -197,12 +198,13 @@ export const RegisteredCanvasStrategies: Array<MetaCanvasStrategy> = [
 ]
 
 export function pickCanvasStateFromEditorState(
+  localSelectedViews: Array<ElementPath>,
   editorState: EditorState,
   builtInDependencies: BuiltInDependencies,
 ): InteractionCanvasState {
   return {
     builtInDependencies: builtInDependencies,
-    interactionTarget: getInteractionTargetFromEditorState(editorState),
+    interactionTarget: getInteractionTargetFromEditorState(editorState, localSelectedViews),
     projectContents: editorState.projectContents,
     nodeModules: editorState.nodeModules.files,
     openFile: editorState.canvas.openFile?.filename,
@@ -216,6 +218,7 @@ export function pickCanvasStateFromEditorState(
 }
 
 export function pickCanvasStateFromEditorStateWithMetadata(
+  localSelectedViews: Array<ElementPath>,
   editorState: EditorState,
   builtInDependencies: BuiltInDependencies,
   metadata: ElementInstanceMetadataMap,
@@ -223,7 +226,7 @@ export function pickCanvasStateFromEditorStateWithMetadata(
 ): InteractionCanvasState {
   return {
     builtInDependencies: builtInDependencies,
-    interactionTarget: getInteractionTargetFromEditorState(editorState),
+    interactionTarget: getInteractionTargetFromEditorState(editorState, localSelectedViews),
     projectContents: editorState.projectContents,
     nodeModules: editorState.nodeModules.files,
     openFile: editorState.canvas.openFile?.filename,
@@ -236,7 +239,10 @@ export function pickCanvasStateFromEditorStateWithMetadata(
   }
 }
 
-function getInteractionTargetFromEditorState(editor: EditorState): InteractionTarget {
+function getInteractionTargetFromEditorState(
+  editor: EditorState,
+  localSelectedViews: Array<ElementPath>,
+): InteractionTarget {
   switch (editor.mode.type) {
     case 'insert':
       return insertionSubjects(editor.mode.subjects)
@@ -245,7 +251,7 @@ function getInteractionTargetFromEditorState(editor: EditorState): InteractionTa
     case 'textEdit':
     case 'comment':
     case 'follow':
-      return targetPaths(editor.selectedViews)
+      return targetPaths(localSelectedViews)
     default:
       assertNever(editor.mode)
   }
@@ -288,17 +294,21 @@ export function getApplicableStrategies(
   return strategies.flatMap((s) => s(canvasState, interactionSession, customStrategyState))
 }
 
-const getApplicableStrategiesSelector = createSelector(
-  (store: EditorStorePatched) =>
+const getApplicableStrategiesSelector = createCachedSelector(
+  (store: EditorStorePatched, _) =>
     optionalMap(
       (sas) => sas.map((s) => s.strategy),
       store.strategyState.sortedApplicableStrategies,
     ),
-  (store: EditorStorePatched): InteractionCanvasState => {
-    return pickCanvasStateFromEditorState(store.editor, store.builtInDependencies)
+  (store: EditorStorePatched, localSelectedViews: Array<ElementPath>): InteractionCanvasState => {
+    return pickCanvasStateFromEditorState(
+      localSelectedViews,
+      store.editor,
+      store.builtInDependencies,
+    )
   },
-  (store: EditorStorePatched) => store.editor.canvas.interactionSession,
-  (store: EditorStorePatched) => store.strategyState.customStrategyState,
+  (store: EditorStorePatched, _) => store.editor.canvas.interactionSession,
+  (store: EditorStorePatched, _) => store.strategyState.customStrategyState,
   (
     applicableStrategiesFromStrategyState: Array<CanvasStrategy> | null,
     canvasState: InteractionCanvasState,
@@ -316,12 +326,12 @@ const getApplicableStrategiesSelector = createSelector(
       )
     }
   },
-)
+)((_, localSelectedViews: Array<ElementPath>) => localSelectedViews.map(EP.toString).join(','))
 
-function useGetApplicableStrategies(): Array<CanvasStrategy> {
+function useGetApplicableStrategies(localSelectedViews: Array<ElementPath>): Array<CanvasStrategy> {
   return useEditorState(
     Substores.fullStore,
-    getApplicableStrategiesSelector,
+    (store) => getApplicableStrategiesSelector(store, localSelectedViews),
     'useGetApplicableStrategies',
     arrayEqualsByReference,
   )
@@ -624,8 +634,10 @@ function controlPriorityToNumber(prio: ControlWithProps<any>['priority']): numbe
   }
 }
 
-export function useGetApplicableStrategyControls(): Array<ControlWithProps<unknown>> {
-  const applicableStrategies = useGetApplicableStrategies()
+export function useGetApplicableStrategyControls(
+  localSelectedViews: Array<ElementPath>,
+): Array<ControlWithProps<unknown>> {
+  const applicableStrategies = useGetApplicableStrategies(localSelectedViews)
   const currentStrategy = useDelayedCurrentStrategy()
   const currentlyInProgress = useEditorState(
     Substores.canvas,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-duplicate-strategy.spec.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-duplicate-strategy.spec.tsx
index 39f4ab07acaa..8db594de244a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-duplicate-strategy.spec.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-duplicate-strategy.spec.tsx
@@ -74,6 +74,7 @@ function dragByPixelsIsApplicable(
   return (
     absoluteDuplicateStrategy(
       pickCanvasStateFromEditorStateWithMetadata(
+        editorState.selectedViews,
         editorState,
         createBuiltInDependenciesList(null),
         metadata,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy-canvas.spec.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy-canvas.spec.tsx
index 5031daf5b2b3..e7c5460c10c9 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy-canvas.spec.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy-canvas.spec.tsx
@@ -133,6 +133,7 @@ function reparentElement(
   }
 
   const canvasState = pickCanvasStateFromEditorStateWithMetadata(
+    editorState.selectedViews,
     editorState,
     createBuiltInDependenciesList(null),
     startingMetadata,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.tsx
index 77328c3d5894..b1832b2f795b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.tsx
@@ -202,6 +202,7 @@ function reparentElement(
   }
 
   const canvasState = pickCanvasStateFromEditorStateWithMetadata(
+    editorState.selectedViews,
     editorState,
     createBuiltInDependenciesList(null),
     startingMetadata,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.tsx
index dc38cee0ac73..c159ff9fa5c5 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.tsx
@@ -52,6 +52,7 @@ function multiselectResizeElements(
 
   const strategyResult = absoluteResizeBoundingBoxStrategy(
     pickCanvasStateFromEditorStateWithMetadata(
+      initialEditor.selectedViews,
       initialEditor,
       createBuiltInDependenciesList(null),
       metadata,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.spec.tsx b/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.spec.tsx
index 4fac80bc13c9..1d5682e256bd 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.spec.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.spec.tsx
@@ -175,6 +175,7 @@ function dragByPixels(
   const strategyResultCommands =
     convertToAbsoluteAndMoveStrategy(
       pickCanvasStateFromEditorStateWithMetadata(
+        editorState.selectedViews,
         editorState,
         createBuiltInDependenciesList(null),
         metadata,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx
index 2804f0f5302d..031162699ef6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx
@@ -394,6 +394,7 @@ function runTargetStrategiesForFreshlyInsertedElement(
   // because that element is inserted to the storyboard before reparenting to the correct location,
   // so its index amongst its starting siblings isn't relevant.
   const canvasState = pickCanvasStateFromEditorStateWithMetadata(
+    editorState.selectedViews,
     editorState,
     builtInDependencies,
     patchedMetadata,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx
index 907b6178eed7..0da5cf8ca11a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx
@@ -590,7 +590,11 @@ function runTargetStrategiesForFreshlyInsertedElementToReparent(
   strategyLifecycle: InteractionLifecycle,
   startingMetadata: ElementInstanceMetadataMap,
 ): Array<EditorStatePatch> {
-  const canvasState = pickCanvasStateFromEditorState(editorState, builtInDependencies)
+  const canvasState = pickCanvasStateFromEditorState(
+    editorState.selectedViews,
+    editorState,
+    builtInDependencies,
+  )
 
   const rootPath = getRootPath(startingMetadata)
   if (rootPath == null) {
@@ -679,6 +683,7 @@ function runTargetStrategiesForFreshlyInsertedElementToResize(
   // when actually applying the strategies. If we ever need to pick a resize strategy based on the target
   // element's index, we will need to update the elementPathTree with the new element and pass it in here.
   const canvasState = pickCanvasStateFromEditorStateWithMetadata(
+    editorState.selectedViews,
     editorState,
     builtInDependencies,
     patchedMetadata,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-absolute-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-absolute-strategy.tsx
index 39d6fe1b8255..e94bdc502612 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-absolute-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-reparent-to-absolute-strategy.tsx
@@ -109,6 +109,7 @@ export function baseFlexReparentToAbsoluteStrategy(
                   'always',
                   (editorState, commandLifecycle): Array<EditorStatePatch> => {
                     const updatedCanvasState = pickCanvasStateFromEditorState(
+                      editorState.selectedViews,
                       editorState,
                       canvasState.builtInDependencies,
                     )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-interaction.test-utils.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-interaction.test-utils.tsx
index 70478e0390d7..457a84ac9304 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-interaction.test-utils.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-interaction.test-utils.tsx
@@ -80,6 +80,7 @@ export function pressKeys(
 
   const strategy = strategyFactoryFunction(
     pickCanvasStateFromEditorStateWithMetadata(
+      editorState.selectedViews,
       editorState,
       createBuiltInDependenciesList(null),
       metadata,
diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx
index b6cead1192f7..be85b3261131 100644
--- a/editor/src/components/canvas/controls/new-canvas-controls.tsx
+++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx
@@ -274,9 +274,16 @@ interface NewCanvasControlsInnerProps {
 }
 
 const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
+  const {
+    localSelectedViews,
+    localHighlightedViews,
+    setLocalSelectedViews,
+    setLocalHighlightedViews,
+  } = props
+
   const dispatch = useDispatch()
   const colorTheme = useColorTheme()
-  const strategyControls = useGetApplicableStrategyControls()
+  const strategyControls = useGetApplicableStrategyControls(localSelectedViews)
   const [inspectorHoveredControls] = useAtom(InspectorHoveredCanvasControls)
   const [inspectorFocusedControls] = useAtom(InspectorFocusedCanvasControls)
 
@@ -331,12 +338,6 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
     'NewCanvasControlsInner',
   )
 
-  const {
-    localSelectedViews,
-    localHighlightedViews,
-    setLocalSelectedViews,
-    setLocalHighlightedViews,
-  } = props
   const cmdKeyPressed = keysPressed['cmd'] ?? false
 
   const contextMenuEnabled = !isLiveMode(editorMode)
diff --git a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
index 32852623061f..83047c82baf1 100644
--- a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
+++ b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { uniqBy } from '../../../../core/shared/array-utils'
 import type { ElementInstanceMetadataMap } from '../../../../core/shared/element-template'
@@ -17,6 +18,7 @@ import {
   selectComponents,
   setHoveredView,
   clearHoveredViews,
+  runDOMWalker,
 } from '../../../editor/actions/action-creators'
 import { cancelInsertModeActions } from '../../../editor/actions/meta-actions'
 import {
@@ -58,6 +60,9 @@ import { getAllLockedElementPaths } from '../../../../core/shared/element-lockin
 import { treatElementAsGroupLike } from '../../canvas-strategies/strategies/group-helpers'
 import { useCommentModeSelectAndHover } from '../comment-mode/comment-mode-hooks'
 import { useFollowModeSelectAndHover } from '../follow-mode/follow-mode-hooks'
+import { wait } from '../../../../core/model/performance-scripts'
+import { IS_TEST_ENVIRONMENT } from '../../../../common/env-vars'
+import { isFeatureEnabled } from '../../../../utils/feature-switches'
 
 export function isDragInteractionActive(editorState: EditorState): boolean {
   return editorState.canvas.interactionSession?.interactionData.type === 'DRAG'
@@ -640,7 +645,7 @@ function useSelectOrLiveModeSelectAndHover(
     [innerOnMouseMove, editorStoreRef],
   )
   const mouseHandler = React.useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
+    async (event: React.MouseEvent<HTMLDivElement>) => {
       const isLeftClick = event.button === 0
       const isRightClick = event.type === 'contextmenu' && event.detail === 0
       const isCanvasPanIntention =
@@ -773,8 +778,10 @@ function useSelectOrLiveModeSelectAndHover(
         }
 
         if (!foundTargetIsSelected) {
-          // first we only set the selected views for the canvas controls
-          setSelectedViewsForCanvasControlsOnly(updatedSelection)
+          // first we only set the selected views for the canvas controls. however this will be clumped together with the dispatch, unless we wait asynchronously before we dispatch
+          ReactDOM.flushSync(() => {
+            setSelectedViewsForCanvasControlsOnly(updatedSelection)
+          })
 
           // In either case cancel insert mode.
           if (isInsertMode(editorStoreRef.current.editor.mode)) {
@@ -789,7 +796,19 @@ function useSelectOrLiveModeSelectAndHover(
           }
         }
       }
-      dispatch(editorActions)
+
+      if (event.detail === 1 && isFeatureEnabled('Canvas Fast Selection Hack')) {
+        // If event.detail is 1 that means this is a first click, where it is safe to delay dispatching actions
+        // to allow the localSelectedViews to be updated.
+        // For subsequent clicks, we want to dispatch immediately to avoid out of sync event handlers queueing up
+
+        dispatch(editorActions, 'canvas-fast-selection-hack') // first we dispatch only to update the editor state, but not run the expensive parts
+        await new Promise((resolve) => requestAnimationFrame(resolve)) // the first requestAnimationFrame fires in the same animation frame we are in, so we need to wait one more
+        await new Promise((resolve) => requestAnimationFrame(resolve)) // the second requestAnimationFrame is fired in the next actual animation frame, at which point it is safe to run the expensive parts
+        dispatch([runDOMWalker()], 'resume-canvas-fast-selection-hack') // then we dispatch to run the expensive parts
+      } else {
+        dispatch(editorActions)
+      }
     },
     [
       dispatch,
diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts
index 9ad3c9a4ac96..94190c524369 100644
--- a/editor/src/components/editor/action-types.ts
+++ b/editor/src/components/editor/action-types.ts
@@ -1446,6 +1446,9 @@ export type DispatchPriority =
   | 'topmenu'
   | 'contextmenu'
   | 'noone'
+  | 'canvas-fast-selection-hack'
+  | 'resume-canvas-fast-selection-hack'
+
 export type EditorDispatch = (
   actions: ReadonlyArray<EditorAction>,
   priority?: DispatchPriority,
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index 4b02829f691a..dc5a7ed77b80 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -5767,7 +5767,11 @@ export const UPDATE_FNS = {
     editor: EditorModel,
     builtInDependencies: BuiltInDependencies,
   ): EditorModel => {
-    const canvasState = pickCanvasStateFromEditorState(editor, builtInDependencies)
+    const canvasState = pickCanvasStateFromEditorState(
+      editor.selectedViews,
+      editor,
+      builtInDependencies,
+    )
     if (areAllSelectedElementsNonAbsolute(action.targets, editor.jsxMetadata)) {
       const commands = getEscapeHatchCommands(
         action.targets,
diff --git a/editor/src/components/editor/store/dispatch-strategies.tsx b/editor/src/components/editor/store/dispatch-strategies.tsx
index 7801ff49e943..0d902f940f66 100644
--- a/editor/src/components/editor/store/dispatch-strategies.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.tsx
@@ -79,6 +79,7 @@ export function interactionFinished(
       newEditorState.elementPathTree,
   )
   const canvasState: InteractionCanvasState = pickCanvasStateFromEditorState(
+    newEditorState.selectedViews,
     newEditorState,
     result.builtInDependencies,
   )
@@ -156,6 +157,7 @@ export function interactionHardReset(
     startingMetadata: storedState.unpatchedEditor.jsxMetadata,
   }
   const canvasState: InteractionCanvasState = pickCanvasStateFromEditorState(
+    newEditorState.selectedViews,
     newEditorState,
     result.builtInDependencies,
   )
@@ -244,6 +246,7 @@ export function interactionUpdate(
 ): HandleStrategiesResult {
   const newEditorState = result.unpatchedEditor
   const canvasState: InteractionCanvasState = pickCanvasStateFromEditorState(
+    newEditorState.selectedViews,
     newEditorState,
     result.builtInDependencies,
   )
@@ -326,6 +329,7 @@ export function interactionStart(
       newEditorState.elementPathTree,
   )
   const canvasState: InteractionCanvasState = pickCanvasStateFromEditorState(
+    newEditorState.selectedViews,
     newEditorState,
     result.builtInDependencies,
   )
@@ -437,6 +441,7 @@ function handleUserChangedStrategy(
   sortedApplicableStrategies: Array<ApplicableStrategy>,
 ): HandleStrategiesResult {
   const canvasState: InteractionCanvasState = pickCanvasStateFromEditorState(
+    newEditorState.selectedViews,
     newEditorState,
     builtInDependencies,
   )
@@ -517,6 +522,7 @@ function handleAccumulatingKeypresses(
   sortedApplicableStrategies: Array<ApplicableStrategy>,
 ): HandleStrategiesResult {
   const canvasState: InteractionCanvasState = pickCanvasStateFromEditorState(
+    newEditorState.selectedViews,
     newEditorState,
     builtInDependencies,
   )
@@ -602,6 +608,7 @@ function handleUpdate(
   sortedApplicableStrategies: Array<ApplicableStrategy>,
 ): HandleStrategiesResult {
   const canvasState: InteractionCanvasState = pickCanvasStateFromEditorState(
+    newEditorState.selectedViews,
     newEditorState,
     builtInDependencies,
   )
diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index da7f5d0b2c6c..0d2aa892c21d 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -424,12 +424,24 @@ export class Editor {
     )
   }
 
+  // This is used to temporarily disable updates to the store, for example when we are in the middle of a fast selection hack
+  temporarilyDisableStoreUpdates = false
+
   boundDispatch = (
     dispatchedActions: readonly EditorAction[],
     priority?: DispatchPriority,
   ): {
     entireUpdateFinished: Promise<any>
   } => {
+    if (
+      priority === 'canvas-fast-selection-hack' &&
+      isFeatureEnabled('Canvas Fast Selection Hack')
+    ) {
+      this.temporarilyDisableStoreUpdates = true
+    } else if (priority === 'resume-canvas-fast-selection-hack') {
+      this.temporarilyDisableStoreUpdates = false
+    }
+
     resetDomSamplerExecutionCounts()
     const Measure = createPerformanceMeasure()
     Measure.logActions(dispatchedActions)
@@ -463,7 +475,8 @@ export class Editor {
 
       const shouldUpdateCanvasStore =
         !dispatchResult.nothingChanged &&
-        !anyCodeAhead(dispatchResult.unpatchedEditor.projectContents)
+        !anyCodeAhead(dispatchResult.unpatchedEditor.projectContents) &&
+        !this.temporarilyDisableStoreUpdates
 
       const updateId = canvasUpdateId++
       if (shouldUpdateCanvasStore) {
@@ -482,7 +495,9 @@ export class Editor {
         })
       }
 
-      const runDomWalker = shouldRunDOMWalker(dispatchedActions, oldEditorState, this.storedState)
+      const runDomWalker =
+        shouldRunDOMWalker(dispatchedActions, oldEditorState, this.storedState) &&
+        !this.temporarilyDisableStoreUpdates
 
       // run the dom-walker
       if (runDomWalker) {
@@ -603,7 +618,8 @@ export class Editor {
               shouldUpdateLowPriorityUI(
                 this.storedState.strategyState,
                 ElementsToRerenderGLOBAL.current,
-              )
+              ) &&
+              !this.temporarilyDisableStoreUpdates
             ) {
               Measure.taskTime(`Update Low Prio Store ${updateId}`, () => {
                 this.lowPriorityStore.setState(
diff --git a/editor/src/utils/feature-switches.ts b/editor/src/utils/feature-switches.ts
index 4d48a1772df5..cce2962ef6c7 100644
--- a/editor/src/utils/feature-switches.ts
+++ b/editor/src/utils/feature-switches.ts
@@ -15,6 +15,7 @@ export type FeatureName =
   | 'Debug - Print UIDs'
   | 'Debug – Connections'
   | 'Condensed Navigator Entries'
+  | 'Canvas Fast Selection Hack'
   | 'Roll Your Own'
 
 export const AllFeatureNames: FeatureName[] = [
@@ -31,6 +32,7 @@ export const AllFeatureNames: FeatureName[] = [
   'Debug - Print UIDs',
   'Debug – Connections',
   'Condensed Navigator Entries',
+  'Canvas Fast Selection Hack',
   'Roll Your Own',
 ]
 
@@ -47,6 +49,7 @@ let FeatureSwitches: { [feature in FeatureName]: boolean } = {
   'Debug - Print UIDs': false,
   'Debug – Connections': false,
   'Condensed Navigator Entries': !IS_TEST_ENVIRONMENT,
+  'Canvas Fast Selection Hack': true,
   'Roll Your Own': false,
 }
 

From 9ba600dc61179f927dba58a5c9a2a1b9c2ba10df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Mon, 30 Sep 2024 17:13:48 +0200
Subject: [PATCH 060/272] Tailwind class compilation (#6401)

<img width="2551" alt="image"
src="https://github.com/user-attachments/assets/c8180213-1a0b-4b63-b6eb-851b913f6054">


## [Example
project](https://utopia.fish/p/5c03b0e5-glorious-coconut/?branch_name=feature-tailwind-class-compilation&Tailwind=true)

## Description

This PR removes twind (as it's not maintained anymore), and replaces it
with https://github.com/mhsdesign/jit-browser-tailwindcss/, which builds
on tailwindcss to compile tailwind classes.

### Details
- The code wrapping `twind` is removed
- Wrapper code is added for
https://github.com/mhsdesign/jit-browser-tailwindcss/
(`useTailwindCompilation`)
- A Karma test is added to check whether some tailwind classes are
compiled correctly (`tailwind.spec.browser2.tsx`). The test is
intentionally coarse-grained, because exhaustively testing every
tailwind feature is out of scope, and the example store heavily uses
tailwind anyway
- Generating the tailwind styles depends on whether the project has a
tailwind.config.js file or not. Down the line we'll change this to
checking in a flag in the `"utopia"` section of `package.json`, the
current implementation is there to keep the PR self-contained
- `isTailwindEnabled` and `TAILWIND_INSTANCE.current`:
`isTailwindEnabled` should be a pure function of `projectContents`.
However, that implementation caused a lot of re-renders, so instead I
mirrored the original implementation that checked whether a
module-private variable was set or not
- Stubbed `@mhsdesign/jit-browser-tailwindcss` in Jest
---
 editor/jest.config.js                         |   2 +
 editor/package.json                           |   4 +-
 editor/pnpm-lock.yaml                         | 357 +++++++++++++-----
 .../src/components/canvas/ui-jsx-canvas.tsx   |   4 +-
 editor/src/components/inspector/inspector.tsx |   5 +-
 .../src/core/tailwind/tailwind-compilation.ts | 106 ++++++
 editor/src/core/tailwind/tailwind-options.tsx |   4 +-
 .../core/tailwind/tailwind.spec.browser2.tsx  | 218 +++++++++++
 editor/src/core/tailwind/tailwind.spec.ts     |  55 ---
 editor/src/core/tailwind/tailwind.ts          | 291 --------------
 editor/src/templates/preview/preview.tsx      |   3 -
 .../__mocks__/jit-browser-tailwindcss.js      |   5 +
 editor/src/utils/feature-switches.ts          |   3 +
 13 files changed, 602 insertions(+), 455 deletions(-)
 create mode 100644 editor/src/core/tailwind/tailwind-compilation.ts
 create mode 100644 editor/src/core/tailwind/tailwind.spec.browser2.tsx
 delete mode 100644 editor/src/core/tailwind/tailwind.spec.ts
 delete mode 100644 editor/src/core/tailwind/tailwind.ts
 create mode 100644 editor/src/utils/__mocks__/jit-browser-tailwindcss.js

diff --git a/editor/jest.config.js b/editor/jest.config.js
index bc651b6d6b29..0a99d49a3e88 100644
--- a/editor/jest.config.js
+++ b/editor/jest.config.js
@@ -112,6 +112,8 @@ module.exports = {
         'react-dnd-html5-backend': '<rootDir>/test/jest/__mocks__/react-dnd-html5-backend.js',
         '^react$': '<rootDir>/node_modules/react/index.js',
         '^react-dom$': '<rootDir>/node_modules/react-dom/index.js',
+        '^@mhsdesign/jit-browser-tailwindcss$':
+          '<rootDir>/src/utils/__mocks__/jit-browser-tailwindcss.js',
         '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
           '<rootDir>/test/jest/__mocks__/styleMock.js',
       },
diff --git a/editor/package.json b/editor/package.json
index 91b7e6b6f694..9da259561b23 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -152,6 +152,7 @@
     "@liveblocks/react": "1.10.0",
     "@liveblocks/react-comments": "1.10.0",
     "@liveblocks/yjs": "1.10.0",
+    "@mhsdesign/jit-browser-tailwindcss": "0.4.1",
     "@popperjs/core": "2.4.4",
     "@radix-ui/react-dropdown-menu": "2.1.1",
     "@radix-ui/react-select": "2.1.1",
@@ -164,9 +165,6 @@
     "@svgr/plugin-jsx": "5.5.0",
     "@testing-library/user-event": "14.5.2",
     "@tippyjs/react": "4.1.0",
-    "@twind/core": "1.1.3",
-    "@twind/preset-autoprefix": "1.0.7",
-    "@twind/preset-tailwind": "1.1.4",
     "@types/fontfaceobserver": "0.0.6",
     "@types/lodash.findlastindex": "4.6.7",
     "@types/react-syntax-highlighter": "11.0.4",
diff --git a/editor/pnpm-lock.yaml b/editor/pnpm-lock.yaml
index a624524d7631..9c062e509ccd 100644
--- a/editor/pnpm-lock.yaml
+++ b/editor/pnpm-lock.yaml
@@ -65,6 +65,7 @@ specifiers:
   '@liveblocks/react': 1.10.0
   '@liveblocks/react-comments': 1.10.0
   '@liveblocks/yjs': 1.10.0
+  '@mhsdesign/jit-browser-tailwindcss': 0.4.1
   '@originjs/vite-plugin-commonjs': 1.0.3
   '@peculiar/webcrypto': 1.4.3
   '@popperjs/core': 2.4.4
@@ -84,9 +85,6 @@ specifiers:
   '@testing-library/react': 14.0.0
   '@testing-library/user-event': 14.5.2
   '@tippyjs/react': 4.1.0
-  '@twind/core': 1.1.3
-  '@twind/preset-autoprefix': 1.0.7
-  '@twind/preset-tailwind': 1.1.4
   '@types/babel__traverse': 7.18.3
   '@types/chai': 3.5.1
   '@types/chroma-js': 2.0.0
@@ -370,6 +368,7 @@ dependencies:
   '@liveblocks/react': 1.10.0_react@18.1.0
   '@liveblocks/react-comments': 1.10.0_wgqxz3kjpz4ixw4iz4mbg2tk4i
   '@liveblocks/yjs': 1.10.0_yjs@13.6.8
+  '@mhsdesign/jit-browser-tailwindcss': 0.4.1
   '@popperjs/core': 2.4.4
   '@radix-ui/react-dropdown-menu': 2.1.1_wgqxz3kjpz4ixw4iz4mbg2tk4i
   '@radix-ui/react-select': 2.1.1_wgqxz3kjpz4ixw4iz4mbg2tk4i
@@ -382,9 +381,6 @@ dependencies:
   '@svgr/plugin-jsx': 5.5.0
   '@testing-library/user-event': 14.5.2
   '@tippyjs/react': 4.1.0_ef5jwxihqo6n7gxfmzogljlgcm
-  '@twind/core': 1.1.3_typescript@5.5.4
-  '@twind/preset-autoprefix': 1.0.7_gmrgfak3invo7trrvnu65or3fu
-  '@twind/preset-tailwind': 1.1.4_gmrgfak3invo7trrvnu65or3fu
   '@types/fontfaceobserver': 0.0.6
   '@types/lodash.findlastindex': 4.6.7
   '@types/react-syntax-highlighter': 11.0.4
@@ -670,6 +666,11 @@ packages:
     resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
     engines: {node: '>=0.10.0'}
 
+  /@alloc/quick-lru/5.2.0:
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+    dev: false
+
   /@alloc/types/1.3.0:
     resolution: {integrity: sha512-mH7LiFiq9g6rX2tvt1LtwsclfG5hnsmtIfkZiauAGrm1AwXhoRS0sF2WrN9JGN7eV5vFXqNaB0eXZ3IvMsVi9g==}
     dev: false
@@ -2716,7 +2717,6 @@ packages:
       strip-ansi-cjs: /strip-ansi/6.0.1
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: /wrap-ansi/7.0.0
-    dev: true
 
   /@istanbuljs/load-nyc-config/1.1.0:
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
@@ -3166,6 +3166,23 @@ packages:
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
     dev: false
 
+  /@mhsdesign/jit-browser-tailwindcss/0.4.1:
+    resolution: {integrity: sha512-n08EkCXPP6XADdXtZ+zLRyF5qkEsoC37FrC7pAceREQRCT+SB9oI7qXMS2hNPwTXdBwUdR3d2TSk9R7imMyMRQ==}
+    dependencies:
+      color-name: 1.1.4
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      postcss: 8.4.27
+      postcss-js: 4.0.1_postcss@8.4.27
+      postcss-nested: 5.0.6_postcss@8.4.27
+      postcss-selector-parser: 6.1.2
+      postcss-value-parser: 4.2.0
+      quick-lru: 5.1.1
+      tailwindcss: 3.4.13
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /@nicolo-ribaudo/chokidar-2/2.1.8-no-fsevents.3:
     resolution: {integrity: sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==}
     requiresBuild: true
@@ -3226,7 +3243,6 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
     requiresBuild: true
-    dev: true
     optional: true
 
   /@polka/url/1.0.0-next.20:
@@ -4918,48 +4934,6 @@ packages:
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
     dev: false
 
-  /@twind/core/1.1.3_typescript@5.5.4:
-    resolution: {integrity: sha512-/B/aNFerMb2IeyjSJy3SJxqVxhrT77gBDknLMiZqXIRr4vNJqiuhx7KqUSRzDCwUmyGuogkamz+aOLzN6MeSLw==}
-    engines: {node: '>=14.15.0'}
-    peerDependencies:
-      typescript: ^4.8.4
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      csstype: 3.1.2
-      typescript: 5.5.4
-    dev: false
-
-  /@twind/preset-autoprefix/1.0.7_gmrgfak3invo7trrvnu65or3fu:
-    resolution: {integrity: sha512-3wmHO0pG/CVxYBNZUV0tWcL7CP0wD5KpyWAQE/KOalWmOVBj+nH6j3v6Y3I3pRuMFaG5DC78qbYbhA1O11uG3w==}
-    engines: {node: '>=14.15.0'}
-    peerDependencies:
-      '@twind/core': ^1.1.0
-      typescript: ^4.8.4
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@twind/core': 1.1.3_typescript@5.5.4
-      style-vendorizer: 2.2.3
-      typescript: 5.5.4
-    dev: false
-
-  /@twind/preset-tailwind/1.1.4_gmrgfak3invo7trrvnu65or3fu:
-    resolution: {integrity: sha512-zv85wrP/DW4AxgWrLfH7kyGn/KJF3K04FMLVl2AjoxZGYdCaoZDkL8ma3hzaKQ+WGgBFRubuB/Ku2Rtv/wjzVw==}
-    engines: {node: '>=14.15.0'}
-    peerDependencies:
-      '@twind/core': ^1.1.0
-      typescript: ^4.8.4
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@twind/core': 1.1.3_typescript@5.5.4
-      typescript: 5.5.4
-    dev: false
-
   /@types/aria-query/5.0.1:
     resolution: {integrity: sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==}
     dev: true
@@ -6342,7 +6316,6 @@ packages:
   /ansi-regex/6.0.1:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
     engines: {node: '>=12'}
-    dev: true
 
   /ansi-styles/1.1.0:
     resolution: {integrity: sha512-f2PKUkN5QngiSemowa6Mrk9MPCdtFiOSmibjZ+j1qhLGHHYsqZwmBMRF3IRMVXo8sybDqx2fJl2d/8OphBoWkA==}
@@ -6374,7 +6347,6 @@ packages:
   /ansi-styles/6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
-    dev: true
 
   /antd/4.3.5_ef5jwxihqo6n7gxfmzogljlgcm:
     resolution: {integrity: sha512-C1qILCKh+G7q06wtm4uqmyvqzAzAaDKKzuTO0BO+rtUbSATjzbUg2Bp5byDEw0ThUGTWfJEQ0J7HZHh0FgiaJA==}
@@ -6445,8 +6417,7 @@ packages:
     dev: true
 
   /any-promise/1.3.0:
-    resolution: {integrity: sha1-q8av7tzqUugJzcA3au0845Y10X8=}
-    dev: true
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
   /anymatch/3.1.2:
     resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
@@ -6454,7 +6425,10 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: true
+
+  /arg/5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+    dev: false
 
   /argparse/1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -7047,7 +7021,6 @@ packages:
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
-    dev: true
 
   /binaryextensions/4.18.0:
     resolution: {integrity: sha512-PQu3Kyv9dM4FnwB7XGj1+HucW+ShvJzJqjuw1JkKVs1mWdwOKVcRjOi+pV9X52A0tNvrPCsPkbFFQb+wE1EAXw==}
@@ -7137,7 +7110,6 @@ packages:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
     dependencies:
       balanced-match: 1.0.2
-    dev: true
 
   /braces/2.3.2:
     resolution: {integrity: sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==}
@@ -7484,6 +7456,11 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /camelcase-css/2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+    dev: false
+
   /camelcase/5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
@@ -7662,7 +7639,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /chownr/2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
@@ -7973,7 +7949,6 @@ packages:
   /commander/4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /commander/6.2.1:
     resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
@@ -8402,7 +8377,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /cssnano/3.10.0:
     resolution: {integrity: sha1-Tzj2zqK5sX+gFJDyPx3GjqZcHDg=}
@@ -8855,6 +8829,10 @@ packages:
     resolution: {integrity: sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==}
     dev: true
 
+  /didyoumean/1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+    dev: false
+
   /diff-match-patch/1.0.5:
     resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
     dev: false
@@ -8907,6 +8885,10 @@ packages:
     resolution: {integrity: sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=}
     dev: true
 
+  /dlv/1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+    dev: false
+
   /dnd-core/16.0.1:
     resolution: {integrity: sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==}
     dependencies:
@@ -9081,7 +9063,6 @@ packages:
 
   /eastasianwidth/0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-    dev: true
 
   /editions/4.2.0:
     resolution: {integrity: sha512-pmUkYpyeF6LY1tXXPaVr902upCeSAisp7vtY5udlSSj31emhRTNKBxEJk30sD6CJHbYSPAh+B3GDR4aJvXi/FQ==}
@@ -10099,7 +10080,7 @@ packages:
       is-stream: 1.1.0
       npm-run-path: 2.0.2
       p-finally: 1.0.0
-      signal-exit: 3.0.5
+      signal-exit: 3.0.7
       strip-eof: 1.0.0
     dev: true
 
@@ -10580,7 +10561,6 @@ packages:
     dependencies:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
-    dev: true
 
   /fork-ts-checker-async-overlay-webpack-plugin/0.4.0_sjzsq4ndqjvzfirlvtns5daumi:
     resolution: {integrity: sha512-PdmEymfvFsPsZ3o0b72rtcIOvl3QAUiVXIdV4uzuV/+AH0zjHYy9Mo8qN5wJSLYYzkHnDte+5rGf4mKhuONqJA==}
@@ -10890,6 +10870,13 @@ packages:
     dependencies:
       is-glob: 4.0.3
 
+  /glob-parent/6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: false
+
   /glob-to-regexp/0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
 
@@ -10900,13 +10887,26 @@ packages:
     dependencies:
       foreground-child: 3.1.1
       jackspeak: 2.3.6
-      minimatch: 9.0.3
-      minipass: 7.0.4
-      path-scurry: 1.10.1
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      path-scurry: 1.11.1
     dev: true
 
+  /glob/10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+    dependencies:
+      foreground-child: 3.1.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.0
+      path-scurry: 1.11.1
+    dev: false
+
   /glob/3.1.21:
     resolution: {integrity: sha512-ANhy2V2+tFpRajE3wN4DhkNQ08KDr0Ir1qL12/cUe5+a7STEK8jkW4onUYuY8/06qAFuT5je7mjAqzx0eKI2tQ==}
+    deprecated: Glob versions prior to v9 are no longer supported
     dependencies:
       graceful-fs: 1.2.3
       inherits: 1.0.2
@@ -11785,7 +11785,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.2.0
-    dev: true
 
   /is-boolean-object/1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -12329,6 +12328,14 @@ packages:
       '@pkgjs/parseargs': 0.11.0
     dev: true
 
+  /jackspeak/3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+    dev: false
+
   /jake/10.8.2:
     resolution: {integrity: sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==}
     hasBin: true
@@ -12962,6 +12969,11 @@ packages:
       - utf-8-validate
     dev: true
 
+  /jiti/1.21.6:
+    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+    hasBin: true
+    dev: false
+
   /jotai-devtools/0.6.2_hgjqizhc26gc665cnflpub44vy:
     resolution: {integrity: sha512-iHKYt8V2T2Gh2DtGRpvpv2daVoFoHRJXqk5/LHnhFkJy9rMQuIGo4XgVu/v1ZMSvMzwDXdU3hDOQkfQWlDErUQ==}
     engines: {node: '>=14.0.0'}
@@ -13462,6 +13474,16 @@ packages:
       immediate: 3.0.6
     dev: false
 
+  /lilconfig/2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /lilconfig/3.1.2:
+    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
+    engines: {node: '>=14'}
+    dev: false
+
   /lines-and-columns/1.1.6:
     resolution: {integrity: sha512-8ZmlJFVK9iCmtLz19HpSsR8HaAMWBT284VMNednLwlIMDP2hJDCIhUp0IZ2xUcZ+Ob6BM0VvCSJwzASDM45NLQ==}
 
@@ -13793,7 +13815,6 @@ packages:
   /lru-cache/10.2.0:
     resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
     engines: {node: 14 || >=16.14}
-    dev: true
 
   /lru-cache/2.7.3:
     resolution: {integrity: sha512-WpibWJ60c3AgAz8a2iYErDrcT2C7OmKnsWhIcHOjkUHFjkXncJhtLxNSqUmxRxRunpb5I8Vprd7aNSd2NtksJQ==}
@@ -14077,12 +14098,11 @@ packages:
     dependencies:
       brace-expansion: 1.1.11
 
-  /minimatch/9.0.3:
-    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+  /minimatch/9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
       brace-expansion: 2.0.1
-    dev: true
 
   /minimist/1.2.0:
     resolution: {integrity: sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=}
@@ -14102,10 +14122,9 @@ packages:
       yallist: 4.0.0
     dev: true
 
-  /minipass/7.0.4:
-    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
+  /minipass/7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
-    dev: true
 
   /minizlib/2.1.2:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
@@ -14230,6 +14249,14 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /mz/2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+    dev: false
+
   /nanoid/3.1.20:
     resolution: {integrity: sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -14402,7 +14429,6 @@ packages:
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /normalize-range/0.1.2:
     resolution: {integrity: sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=}
@@ -14508,6 +14534,11 @@ packages:
       kind-of: 3.2.2
     dev: true
 
+  /object-hash/3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+    dev: false
+
   /object-inspect/1.11.0:
     resolution: {integrity: sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==}
     dev: true
@@ -14818,6 +14849,10 @@ packages:
       netmask: 2.0.2
     dev: false
 
+  /package-json-from-dist/1.0.0:
+    resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
+    dev: false
+
   /pako/0.2.9:
     resolution: {integrity: sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=}
     dev: true
@@ -14971,13 +15006,12 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /path-scurry/1.10.1:
-    resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  /path-scurry/1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
     dependencies:
       lru-cache: 10.2.0
-      minipass: 7.0.4
-    dev: true
+      minipass: 7.1.2
 
   /path-to-regexp/0.1.7:
     resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
@@ -15043,7 +15077,6 @@ packages:
   /pify/2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /pify/3.0.0:
     resolution: {integrity: sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=}
@@ -15070,7 +15103,6 @@ packages:
   /pirates/4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /pkg-dir/4.2.0:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
@@ -15165,6 +15197,45 @@ packages:
       postcss: 5.2.18
     dev: true
 
+  /postcss-import/15.1.0_postcss@8.4.27:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.27
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.2
+    dev: false
+
+  /postcss-js/4.0.1_postcss@8.4.27:
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.27
+    dev: false
+
+  /postcss-load-config/4.0.2_postcss@8.4.27:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 3.1.2
+      postcss: 8.4.27
+      yaml: 2.5.1
+    dev: false
+
   /postcss-merge-idents/2.1.7:
     resolution: {integrity: sha1-TFUwMTwI4dWzu/PSu8dH4njuonA=}
     dependencies:
@@ -15253,6 +15324,26 @@ packages:
       postcss: 6.0.23
     dev: true
 
+  /postcss-nested/5.0.6_postcss@8.4.27:
+    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.27
+      postcss-selector-parser: 6.1.2
+    dev: false
+
+  /postcss-nested/6.2.0_postcss@8.4.27:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.27
+      postcss-selector-parser: 6.1.2
+    dev: false
+
   /postcss-normalize-charset/1.1.1:
     resolution: {integrity: sha1-757nEhLX/nWceO0WL2HtYrXLk/E=}
     dependencies:
@@ -15297,13 +15388,21 @@ packages:
     dev: true
 
   /postcss-selector-parser/2.2.3:
-    resolution: {integrity: sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=}
+    resolution: {integrity: sha512-3pqyakeGhrO0BQ5+/tGTfvi5IAUAhHRayGK8WFSu06aEv2BmHoXw/Mhb+w7VY5HERIuC+QoUI7wgrCcq2hqCVA==}
     dependencies:
       flatten: 1.0.3
       indexes-of: 1.0.1
       uniq: 1.0.1
     dev: true
 
+  /postcss-selector-parser/6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: false
+
   /postcss-svgo/2.1.6:
     resolution: {integrity: sha1-tt8YqmE7Zm4TPwittSGcJoSsEI0=}
     dependencies:
@@ -15325,6 +15424,10 @@ packages:
     resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
     dev: true
 
+  /postcss-value-parser/4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: false
+
   /postcss-zindex/2.2.0:
     resolution: {integrity: sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=}
     dependencies:
@@ -15688,7 +15791,6 @@ packages:
   /quick-lru/5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
-    dev: true
 
   /raf/3.4.1:
     resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==}
@@ -16891,6 +16993,12 @@ packages:
       loose-envify: 1.4.0
     patched: true
 
+  /read-cache/1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    dependencies:
+      pify: 2.3.0
+    dev: false
+
   /read-only-stream/2.0.0:
     resolution: {integrity: sha1-JyT9aoET1zdkrCiNQ4YnDB2/F/A=}
     dependencies:
@@ -16939,7 +17047,6 @@ packages:
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: true
 
   /rechoir/0.8.0:
     resolution: {integrity: sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==}
@@ -17678,10 +17785,6 @@ packages:
     resolution: {integrity: sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=}
     dev: true
 
-  /signal-exit/3.0.5:
-    resolution: {integrity: sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==}
-    dev: true
-
   /signal-exit/3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: true
@@ -17689,7 +17792,6 @@ packages:
   /signal-exit/4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
-    dev: true
 
   /simple-concat/1.0.1:
     resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
@@ -18188,7 +18290,6 @@ packages:
       eastasianwidth: 0.2.0
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
-    dev: true
 
   /string.prototype.matchall/4.0.5:
     resolution: {integrity: sha512-Z5ZaXO0svs0M2xd/6By3qpeKpLKd9mO4v4q3oMEQrk8Ck4xOD5d5XeBOOjGrmVZZ/AHB1S0CgG4N5r1G9N3E2Q==}
@@ -18302,7 +18403,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       ansi-regex: 6.0.1
-    dev: true
 
   /strip-bom/2.0.0:
     resolution: {integrity: sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==}
@@ -18353,10 +18453,6 @@ packages:
       inline-style-parser: 0.1.1
     dev: false
 
-  /style-vendorizer/2.2.3:
-    resolution: {integrity: sha512-/VDRsWvQAgspVy9eATN3z6itKTuyg+jW1q6UoTCQCFRqPDw8bi3E1hXIKnGw5LvXS2AQPuJ7Af4auTLYeBOLEg==}
-    dev: false
-
   /stylis/4.0.10:
     resolution: {integrity: sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==}
     dev: false
@@ -18367,6 +18463,20 @@ packages:
       minimist: 1.2.8
     dev: true
 
+  /sucrase/3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      commander: 4.1.1
+      glob: 10.4.5
+      lines-and-columns: 1.1.6
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+    dev: false
+
   /superstruct/0.8.4:
     resolution: {integrity: sha512-48Ors8IVWZm/tMr8r0Si6+mJiB7mkD7jqvIzktjJ4+EnP5tBp0qOpiM1J8sCUorKx+TXWrfb3i1UcjdD1YK/wA==}
     dependencies:
@@ -18482,6 +18592,37 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  /tailwindcss/3.4.13:
+    resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.5.3
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.1
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.6
+      lilconfig: 2.1.0
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.27
+      postcss-import: 15.1.0_postcss@8.4.27
+      postcss-js: 4.0.1_postcss@8.4.27
+      postcss-load-config: 4.0.2_postcss@8.4.27
+      postcss-nested: 6.2.0_postcss@8.4.27
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.2
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /tapable/1.1.3:
     resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
     engines: {node: '>=6'}
@@ -18591,6 +18732,19 @@ packages:
     engines: {node: '>=0.8'}
     dev: false
 
+  /thenify-all/1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      thenify: 3.3.1
+    dev: false
+
+  /thenify/3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+    dependencies:
+      any-promise: 1.3.0
+    dev: false
+
   /three/0.139.2:
     resolution: {integrity: sha512-gV7q7QY8rogu7HLFZR9cWnOQAUedUhu2WXAnpr2kdXZP9YDKsG/0ychwQvWkZN5PlNw9mv5MoCTin6zNTXoONg==}
     dev: false
@@ -18782,6 +18936,10 @@ packages:
     dependencies:
       typescript: 5.5.4
 
+  /ts-interface-checker/0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+    dev: false
+
   /ts-loader/5.3.3_typescript@5.5.4:
     resolution: {integrity: sha512-KwF1SplmOJepnoZ4eRIloH/zXL195F51skt7reEsS6jvDqzgc/YSbz9b8E07GxIUwLXdcD4ssrJu6v8CwaTafA==}
     engines: {node: '>=6.11.5'}
@@ -19839,7 +19997,6 @@ packages:
       ansi-styles: 6.2.1
       string-width: 5.1.2
       strip-ansi: 7.1.0
-    dev: true
 
   /wrappy/1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
@@ -19978,6 +20135,12 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
+  /yaml/2.5.1:
+    resolution: {integrity: sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==}
+    engines: {node: '>= 14'}
+    hasBin: true
+    dev: false
+
   /yargs-parser/20.2.4:
     resolution: {integrity: sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==}
     engines: {node: '>=10'}
diff --git a/editor/src/components/canvas/ui-jsx-canvas.tsx b/editor/src/components/canvas/ui-jsx-canvas.tsx
index 03b2215fd10e..85239c3dce47 100644
--- a/editor/src/components/canvas/ui-jsx-canvas.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas.tsx
@@ -77,7 +77,6 @@ import { applyUIDMonkeyPatch } from '../../utils/canvas-react-utils'
 import type { RemixValidPathsGenerationContext } from './canvas-utils'
 import { getParseSuccessForFilePath, getValidElementPaths } from './canvas-utils'
 import { arrayEqualsByValue, fastForEach, NO_OP } from '../../core/shared/utils'
-import { useTwind } from '../../core/tailwind/tailwind'
 import {
   AlwaysFalse,
   atomWithPubSub,
@@ -98,6 +97,7 @@ import { IS_TEST_ENVIRONMENT } from '../../common/env-vars'
 import { listenForReactRouterErrors } from '../../core/shared/runtime-report-logs'
 import { getFilePathMappings } from '../../core/model/project-file-utils'
 import { useInvalidatedCanvasRemount } from './canvas-component-entry'
+import { useTailwindCompilation } from '../../core/tailwind/tailwind-compilation'
 
 applyUIDMonkeyPatch()
 
@@ -498,7 +498,7 @@ export const UiJsxCanvas = React.memo<UiJsxCanvasPropsWithErrorCallback>((props)
 
   const executionScope = scope
 
-  useTwind(projectContentsForRequireFn, customRequire, '#canvas-container')
+  useTailwindCompilation(customRequire)
 
   const topLevelElementsMap = useKeepReferenceEqualityIfPossible(new Map(topLevelJsxComponents))
 
diff --git a/editor/src/components/inspector/inspector.tsx b/editor/src/components/inspector/inspector.tsx
index e4ea5d8d688c..2b6686ec0e4a 100644
--- a/editor/src/components/inspector/inspector.tsx
+++ b/editor/src/components/inspector/inspector.tsx
@@ -48,7 +48,6 @@ import {
 import { getElementsToTarget } from './common/inspector-utils'
 import type { ElementPath, PropertyPath } from '../../core/shared/project-file-types'
 import { unless, when } from '../../utils/react-conditionals'
-import { isTwindEnabled } from '../../core/tailwind/tailwind'
 import {
   isKeyboardAbsoluteStrategy,
   isKeyboardReorderStrategy,
@@ -90,6 +89,7 @@ import {
 import { InspectorSectionHeader } from './section-header'
 import { GridPlacementSubsection } from './sections/style-section/container-subsection/grid-cell-subsection'
 import { ContainerSubsection } from './sections/style-section/container-subsection/container-subsection'
+import { isTailwindEnabled } from '../../core/tailwind/tailwind-compilation'
 
 export interface ElementPathElement {
   name?: string
@@ -286,7 +286,8 @@ export const Inspector = React.memo<InspectorProps>((props: InspectorProps) => {
   const shouldShowStyleSectionContents = styleSectionOpen && !shouldHideInspectorSections
   const shouldShowAdvancedSectionContents = advancedSectionOpen && !shouldHideInspectorSections
 
-  const shouldShowClassNameSubsection = isTwindEnabled() && inspectorPreferences.includes('visual')
+  const shouldShowClassNameSubsection =
+    isTailwindEnabled() && inspectorPreferences.includes('visual')
   const shouldShowTargetSelectorSection = canEdit && inspectorPreferences.includes('visual')
   const shouldShowFlexSection =
     multiselectedContract === 'frame' &&
diff --git a/editor/src/core/tailwind/tailwind-compilation.ts b/editor/src/core/tailwind/tailwind-compilation.ts
new file mode 100644
index 000000000000..9e030e1b83ad
--- /dev/null
+++ b/editor/src/core/tailwind/tailwind-compilation.ts
@@ -0,0 +1,106 @@
+import React from 'react'
+import type { TailwindConfig, Tailwindcss } from '@mhsdesign/jit-browser-tailwindcss'
+import { createTailwindcss } from '@mhsdesign/jit-browser-tailwindcss'
+import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
+import { getProjectFileByFilePath, walkContentsTree } from '../../components/assets'
+import { interactionSessionIsActive } from '../../components/canvas/canvas-strategies/interaction-state'
+import { CanvasContainerID } from '../../components/canvas/canvas-types'
+import {
+  Substores,
+  useEditorState,
+  useRefEditorState,
+} from '../../components/editor/store/store-hook'
+import { importDefault } from '../es-modules/commonjs-interop'
+import { rescopeCSSToTargetCanvasOnly } from '../shared/css-utils'
+import type { RequireFn } from '../shared/npm-dependency-types'
+import { TailwindConfigPath } from './tailwind-config'
+import { ElementsToRerenderGLOBAL } from '../../components/canvas/ui-jsx-canvas'
+import { isFeatureEnabled } from '../../utils/feature-switches'
+
+const TAILWIND_INSTANCE: { current: Tailwindcss | null } = { current: null }
+
+export function isTailwindEnabled(): boolean {
+  return TAILWIND_INSTANCE.current != null
+}
+
+function ensureElementExists({ type, id }: { type: string; id: string }) {
+  let tag = document.getElementById(id)
+  if (tag == null) {
+    tag = document.createElement(type)
+    tag.id = id
+    document.head.appendChild(tag)
+  }
+  return tag
+}
+
+async function generateTailwindStyles(tailwindCss: Tailwindcss, allCSSFiles: string) {
+  const contentElement = document.getElementById(CanvasContainerID)
+  if (contentElement == null) {
+    return
+  }
+  const content = contentElement.outerHTML
+  const styleString = await tailwindCss.generateStylesFromContent(allCSSFiles, [content])
+  const style = ensureElementExists({ type: 'style', id: 'utopia-tailwind-jit-styles' })
+  style.textContent = rescopeCSSToTargetCanvasOnly(styleString)
+}
+
+function getCssFilesFromProjectContents(projectContents: ProjectContentTreeRoot) {
+  let files: string[] = []
+  walkContentsTree(projectContents, (path, file) => {
+    if (file.type === 'TEXT_FILE' && path.endsWith('.css')) {
+      files.push(file.fileContents.code)
+    }
+  })
+  return files
+}
+
+function generateTailwindClasses(projectContents: ProjectContentTreeRoot, requireFn: RequireFn) {
+  const allCSSFiles = getCssFilesFromProjectContents(projectContents).join('\n')
+  const rawConfig = importDefault(requireFn('/', TailwindConfigPath))
+  const tailwindCss = createTailwindcss({ tailwindConfig: rawConfig as TailwindConfig })
+  TAILWIND_INSTANCE.current = tailwindCss
+  void generateTailwindStyles(tailwindCss, allCSSFiles)
+}
+
+export const useTailwindCompilation = (requireFn: RequireFn) => {
+  const projectContents = useEditorState(
+    Substores.projectContents,
+    (store) => store.editor.projectContents,
+    'useTailwindCompilation projectContents',
+  )
+
+  const isInteractionActiveRef = useRefEditorState((store) =>
+    interactionSessionIsActive(store.editor.canvas.interactionSession),
+  )
+
+  const observerCallback = React.useCallback(() => {
+    if (
+      isInteractionActiveRef.current ||
+      ElementsToRerenderGLOBAL.current !== 'rerender-all-elements' || // implies that an interaction is in progress
+      !isFeatureEnabled('Tailwind')
+    ) {
+      return
+    }
+    generateTailwindClasses(projectContents, requireFn)
+  }, [isInteractionActiveRef, projectContents, requireFn])
+
+  React.useEffect(() => {
+    const tailwindConfigFile = getProjectFileByFilePath(projectContents, TailwindConfigPath)
+    if (tailwindConfigFile == null || tailwindConfigFile.type !== 'TEXT_FILE') {
+      return // we consider tailwind to be enabled if there's a tailwind config file in the project
+    }
+    const observer = new MutationObserver(observerCallback)
+
+    observer.observe(document.getElementById(CanvasContainerID)!, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    })
+
+    observerCallback()
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [isInteractionActiveRef, observerCallback, projectContents, requireFn])
+}
diff --git a/editor/src/core/tailwind/tailwind-options.tsx b/editor/src/core/tailwind/tailwind-options.tsx
index e0a0dc6140d2..93710dce45f0 100644
--- a/editor/src/core/tailwind/tailwind-options.tsx
+++ b/editor/src/core/tailwind/tailwind-options.tsx
@@ -28,9 +28,9 @@ import {
 } from '../shared/jsx-attribute-utils'
 import * as PP from '../shared/property-path'
 import * as EP from '../shared/element-path'
-import { isTwindEnabled } from './tailwind'
 import type { AttributeCategory } from './attribute-categories'
 import { AttributeCategories } from './attribute-categories'
+import { isTailwindEnabled } from './tailwind-compilation'
 
 export interface TailWindOption {
   label: string
@@ -165,7 +165,7 @@ export function useFilteredOptions(
   onEmptyResults: () => void = NO_OP,
 ): Array<TailWindOption> {
   return React.useMemo(() => {
-    if (isTwindEnabled()) {
+    if (isTailwindEnabled()) {
       const sanitisedFilter = filter.trim().toLowerCase()
       const searchTerms = searchStringToIndividualTerms(sanitisedFilter)
       let results: Array<TailWindOption>
diff --git a/editor/src/core/tailwind/tailwind.spec.browser2.tsx b/editor/src/core/tailwind/tailwind.spec.browser2.tsx
new file mode 100644
index 000000000000..8040db905fdc
--- /dev/null
+++ b/editor/src/core/tailwind/tailwind.spec.browser2.tsx
@@ -0,0 +1,218 @@
+import { renderTestEditorWithModel } from '../../components/canvas/ui-jsx.test-utils'
+import { createModifiedProject } from '../../sample-projects/sample-project-utils.test-utils'
+import { setFeatureForBrowserTestsUseInDescribeBlockOnly } from '../../utils/utils.test-utils'
+import { wait } from '../model/performance-scripts'
+
+const Project = createModifiedProject({
+  '/utopia/storyboard.js': `import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      data-uid='scene'
+      id='playground-scene'
+      commentId='playground-scene'
+      className='absolute top-[100px] left-[200px] w-[700px] h-[1050px]'
+      data-label='Playground'
+    >
+      <div data-uid='absolute' data-testid='absolute' className='absolute top-[33px] left-[40px] w-[620px] h-[177px] bg-tahiti'>
+        <div data-uid='absolute-child' data-testid='absolute-child' className='absolute top-4 left-4 w-10 h-10 bg-midnight' />
+      </div>
+      <div data-uid='flex' data-testid='flex' className='absolute bg-metal left-10 top-[250px] w-[500px] h-max flex flex-row gap-10 px-5 py-[30px] items-center justify-start'>
+        <div data-uid='flex-child-1' data-testid='flex-child-1' className='bg-silver w-32 h-32' />
+        <div data-uid='flex-child-2' data-testid='flex-child-2' className='bg-silver w-32 h-32' />
+      </div>
+      <div data-uid='grid' data-testid='grid' className='absolute left-10 top-[450px] bg-bermuda w-[600px] h-[250px] grid grid-cols-4 grid-rows-4 gap-4'>
+        <div data-uid='grid-child-1' data-testid='grid-child-1' className='bg-bubble-gum m-2' />
+        <div data-uid='grid-child-2' data-testid='grid-child-2' className='bg-bubble-gum m-2 row-start-2 col-span-3' />
+        <div data-uid='grid-child-3' data-testid='grid-child-3' className='bg-bubble-gum m-2 row-start-3 col-start-4' />
+        <div data-uid='grid-child-4' data-testid='grid-child-4' className='bg-bubble-gum m-2' />
+      </div>
+      <div data-uid='text-shadow' data-testid='text-shadow' className='absolute left-10 top-[750px] bg-bermuda w-[600px] h-[250px] flex flex-col'>
+        <span data-uid='text-shadow-1' data-testid='text-shadow-1' className='text-4xl text-shadow'>Text Shadow</span>
+        <span data-uid='text-shadow-2' data-testid='text-shadow-2' class='text-3xl text-shadow-md'>This is a medium text shadow example</span>
+        <span data-uid='text-shadow-3' data-testid='text-shadow-3' class='text-2xl text-shadow-lg'>This is a large text shadow example</span>
+        <span data-uid='text-shadow-4' data-testid='text-shadow-4' class='text-xl text-shadow-none'>This has no text shadow</span>
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`,
+  '/src/app.css': `
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`,
+  'tailwind.config.js': `
+const Tailwind = {
+  theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      white: '#ffffff',
+      purple: '#3f3cbb',
+      midnight: '#121063',
+      metal: '#565584',
+      tahiti: '#3ab7bf',
+      silver: '#ecebff',
+      'bubble-gum': '#ff77e9',
+      bermuda: '#78dcca',
+    },
+  },
+  plugins: [
+    function ({ addUtilities }) {
+      const newUtilities = {
+        '.text-shadow': {
+          textShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)',
+        },
+        '.text-shadow-md': {
+          textShadow: '3px 3px 6px rgba(0, 0, 0, 0.2)',
+        },
+        '.text-shadow-lg': {
+          textShadow: '4px 4px 8px rgba(0, 0, 0, 0.3)',
+        },
+        '.text-shadow-none': {
+          textShadow: 'none',
+        },
+      }
+
+      addUtilities(newUtilities, ['responsive', 'hover'])
+    },
+  ],
+}
+export default Tailwind
+`,
+})
+
+describe('rendering tailwind projects in the editor', () => {
+  setFeatureForBrowserTestsUseInDescribeBlockOnly('Tailwind', true)
+  it('can render absolute positioning classes', async () => {
+    const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
+
+    {
+      const absolute = editor.renderedDOM.getByTestId('absolute')
+      const { position, top, left, width, height, backgroundColor } = getComputedStyle(absolute)
+      expect({ position, top, left, width, height, backgroundColor }).toEqual({
+        backgroundColor: 'rgb(58, 183, 191)',
+        height: '177px',
+        left: '40px',
+        position: 'absolute',
+        top: '33px',
+        width: '620px',
+      })
+    }
+    {
+      const absoluteChild = editor.renderedDOM.getByTestId('absolute-child')
+      const { position, top, left, width, height, backgroundColor } =
+        getComputedStyle(absoluteChild)
+      expect({ position, top, left, width, height, backgroundColor }).toEqual({
+        backgroundColor: 'rgb(18, 16, 99)',
+        height: '40px',
+        left: '16px',
+        position: 'absolute',
+        top: '16px',
+        width: '40px',
+      })
+    }
+  })
+
+  it('can render flex positioning classes', async () => {
+    const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
+
+    const flex = editor.renderedDOM.getByTestId('flex')
+    const { display, flexDirection, justifyContent, alignItems, gap, padding } =
+      getComputedStyle(flex)
+    expect({ display, flexDirection, justifyContent, alignItems, gap, padding }).toEqual({
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row',
+      gap: '40px',
+      justifyContent: 'flex-start',
+      padding: '30px 20px',
+    })
+  })
+
+  it('can render grid positioning classes', async () => {
+    const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
+
+    const grid = editor.renderedDOM.getByTestId('grid')
+    const { display, gridTemplateColumns, gridTemplateRows, gap } = getComputedStyle(grid)
+    expect({ display, gridTemplateColumns, gridTemplateRows, gap }).toEqual({
+      display: 'grid',
+      gap: '16px',
+      gridTemplateColumns: '138px 138px 138px 138px',
+      gridTemplateRows: '50.5px 50.5px 50.5px 50.5px',
+    })
+
+    {
+      const gridChild2 = editor.renderedDOM.getByTestId('grid-child-2')
+      const { gridColumnStart, gridColumnEnd, gridRowStart, gridRowEnd, backgroundColor } =
+        getComputedStyle(gridChild2)
+      expect({ gridColumnStart, gridColumnEnd, gridRowStart, gridRowEnd, backgroundColor }).toEqual(
+        {
+          backgroundColor: 'rgb(255, 119, 233)',
+          gridColumnEnd: 'span 3',
+          gridColumnStart: 'span 3',
+          gridRowEnd: 'auto',
+          gridRowStart: '2',
+        },
+      )
+    }
+
+    {
+      const gridChild3 = editor.renderedDOM.getByTestId('grid-child-3')
+      const { gridColumnStart, gridColumnEnd, gridRowStart, gridRowEnd, backgroundColor } =
+        getComputedStyle(gridChild3)
+      expect({ gridColumnStart, gridColumnEnd, gridRowStart, gridRowEnd, backgroundColor }).toEqual(
+        {
+          backgroundColor: 'rgb(255, 119, 233)',
+          gridColumnEnd: 'auto',
+          gridColumnStart: '4',
+          gridRowEnd: 'auto',
+          gridRowStart: '3',
+        },
+      )
+    }
+  })
+
+  it('can render classes added from custom plugins', async () => {
+    const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
+
+    {
+      const textShadow1 = editor.renderedDOM.getByTestId('text-shadow-1')
+      const { textShadow, fontSize, lineHeight } = getComputedStyle(textShadow1)
+      expect({ textShadow, fontSize, lineHeight }).toEqual({
+        fontSize: '36px',
+        lineHeight: '40px',
+        textShadow: 'rgba(0, 0, 0, 0.1) 2px 2px 4px',
+      })
+    }
+    {
+      const textShadow2 = editor.renderedDOM.getByTestId('text-shadow-2')
+      const { textShadow, fontSize, lineHeight } = getComputedStyle(textShadow2)
+      expect({ textShadow, fontSize, lineHeight }).toEqual({
+        fontSize: '30px',
+        lineHeight: '36px',
+        textShadow: 'rgba(0, 0, 0, 0.2) 3px 3px 6px',
+      })
+    }
+    {
+      const textShadow3 = editor.renderedDOM.getByTestId('text-shadow-3')
+      const { textShadow, fontSize, lineHeight } = getComputedStyle(textShadow3)
+      expect({ textShadow, fontSize, lineHeight }).toEqual({
+        fontSize: '24px',
+        lineHeight: '32px',
+        textShadow: 'rgba(0, 0, 0, 0.3) 4px 4px 8px',
+      })
+    }
+    {
+      const textShadow4 = editor.renderedDOM.getByTestId('text-shadow-4')
+      const { textShadow, fontSize, lineHeight } = getComputedStyle(textShadow4)
+      expect({ textShadow, fontSize, lineHeight }).toEqual({
+        fontSize: '20px',
+        lineHeight: '28px',
+        textShadow: 'none',
+      })
+    }
+  })
+})
diff --git a/editor/src/core/tailwind/tailwind.spec.ts b/editor/src/core/tailwind/tailwind.spec.ts
deleted file mode 100644
index ce4e4b35ed3e..000000000000
--- a/editor/src/core/tailwind/tailwind.spec.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { adjustRuleScopeImpl } from './tailwind'
-
-describe('adjustRuleScope', () => {
-  it('Returns a rule unchanged if no prefix is provided', () => {
-    const input = '.container{width:100%}'
-    const output = adjustRuleScopeImpl(input, null)
-    const expected = input
-    expect(output).toEqual(expected)
-  })
-
-  it('Returns a rule unchanged if it is an at-rule but not a media query', () => {
-    const input = '@keyframes spin{to{transform:rotate(360deg)}}'
-    const output = adjustRuleScopeImpl(input, '#canvas-container')
-    const expected = input
-    expect(output).toEqual(expected)
-  })
-
-  it('Prefixes a regular selector', () => {
-    const input = '.container{width:100%}'
-    const output = adjustRuleScopeImpl(input, '#canvas-container')
-    const expected = '#canvas-container .container{width:100%}'
-    expect(output).toEqual(expected)
-  })
-
-  it('Handles comma separated selectors', () => {
-    const input = '.container,.other-container{width:100%}'
-    const output = adjustRuleScopeImpl(input, '#canvas-container')
-    const expected = '#canvas-container .container,#canvas-container .other-container{width:100%}'
-    expect(output).toEqual(expected)
-  })
-
-  it('Replaces :root, html, or head with the provided prefix', () => {
-    const rootOutput = adjustRuleScopeImpl(':root{width:100%}', '#canvas-container')
-    const htmlOutput = adjustRuleScopeImpl('html{width:100%}', '#canvas-container')
-    const headOutput = adjustRuleScopeImpl('head{width:100%}', '#canvas-container')
-    const expected = '#canvas-container{width:100%}'
-    expect(rootOutput).toEqual(expected)
-    expect(htmlOutput).toEqual(expected)
-    expect(headOutput).toEqual(expected)
-  })
-
-  it('Replaces body with a selector for children of the provided prefix', () => {
-    const input = 'body{width:100%}'
-    const output = adjustRuleScopeImpl(input, '#canvas-container')
-    const expected = '#canvas-container > *{width:100%}'
-    expect(output).toEqual(expected)
-  })
-
-  it('Handles a media query', () => {
-    const input = '@media (min-width:640px){.container{max-width:640px}}'
-    const output = adjustRuleScopeImpl(input, '#canvas-container')
-    const expected = '@media (min-width:640px){#canvas-container .container{max-width:640px}}'
-    expect(output).toEqual(expected)
-  })
-})
diff --git a/editor/src/core/tailwind/tailwind.ts b/editor/src/core/tailwind/tailwind.ts
deleted file mode 100644
index e6f348483c79..000000000000
--- a/editor/src/core/tailwind/tailwind.ts
+++ /dev/null
@@ -1,291 +0,0 @@
-import type { ProjectContentTreeRoot } from '../../components/assets'
-import { packageJsonFileFromProjectContents } from '../../components/assets'
-import { getProjectFileByFilePath } from '../../components/assets'
-import type { Either } from '../shared/either'
-import { isRight, left, right } from '../shared/either'
-import type { RequireFn } from '../shared/npm-dependency-types'
-import type { ProjectFile } from '../shared/project-file-types'
-import { isTextFile } from '../shared/project-file-types'
-import type { Sheet, Twind } from '@twind/core'
-import { cssom, observe, defineConfig, tw } from '@twind/core'
-import presetAutoprefix from '@twind/preset-autoprefix'
-import presetTailwind from '@twind/preset-tailwind'
-import React from 'react'
-import { includesDependency } from '../../components/editor/npm-dependency/npm-dependency'
-import { propOrNull } from '../shared/object-utils'
-import { memoize } from '../shared/memoize'
-import { importDefault } from '../es-modules/commonjs-interop'
-import { PostCSSPath, TailwindConfigPath } from './tailwind-config'
-import { useKeepReferenceEqualityIfPossible } from '../../utils/react-performance'
-import { twind } from '@twind/core'
-
-type TwindConfigType = ReturnType<typeof defineConfig>
-
-function hasRequiredDependenciesForTailwind(packageJsonFile: ProjectFile): boolean {
-  const hasTailwindDependency = includesDependency(packageJsonFile, 'tailwindcss')
-  const hasPostCSSDependency = includesDependency(packageJsonFile, 'postcss')
-
-  return hasTailwindDependency && hasPostCSSDependency
-}
-
-function useGetPackageJson(projectContents: ProjectContentTreeRoot): ProjectFile | null {
-  return React.useMemo(() => packageJsonFileFromProjectContents(projectContents), [projectContents])
-}
-
-function useHasRequiredDependenciesForTailwind(projectContents: ProjectContentTreeRoot): boolean {
-  const packageJsonFile = useGetPackageJson(projectContents)
-  return React.useMemo(() => {
-    return packageJsonFile != null && hasRequiredDependenciesForTailwind(packageJsonFile)
-  }, [packageJsonFile])
-}
-
-function postCSSIncludesTailwindPlugin(postCSSFile: ProjectFile, requireFn: RequireFn): boolean {
-  if (isTextFile(postCSSFile)) {
-    try {
-      const requireResult = requireFn('/', PostCSSPath)
-      const rawConfig = importDefault(requireResult)
-      const plugins = (rawConfig as any)?.plugins
-      return plugins?.tailwindcss != null
-    } catch (e) {
-      /* Do nothing */
-    }
-  }
-
-  return false
-}
-
-function useGetPostCSSConfigFile(projectContents: ProjectContentTreeRoot): ProjectFile | null {
-  return React.useMemo(
-    () => getProjectFileByFilePath(projectContents, PostCSSPath),
-    [projectContents],
-  )
-}
-
-function usePostCSSIncludesTailwindPlugin(
-  projectContents: ProjectContentTreeRoot,
-  requireFn: RequireFn,
-): boolean {
-  const postCSSFile = useGetPostCSSConfigFile(projectContents)
-  return React.useMemo(() => {
-    return postCSSFile != null && postCSSIncludesTailwindPlugin(postCSSFile, requireFn)
-  }, [postCSSFile, requireFn])
-}
-
-const PreflightKey = 'preflight'
-
-function enablesPreflight(tailwindConfig: any): boolean {
-  const corePlugins = propOrNull('corePlugins', tailwindConfig)
-  if (corePlugins != null && typeof corePlugins === 'object') {
-    if (Array.isArray(corePlugins)) {
-      // This means we have an explicit list of all allowed core plugins
-      return corePlugins.includes(PreflightKey)
-    } else {
-      // We have an object that enables or disables specific plugins - all unlisted plugins are enabled
-      const explicitDisabled = corePlugins[PreflightKey] === false // Tailwind doesn't use truthiness here
-      return !explicitDisabled
-    }
-  }
-
-  return true
-}
-
-function convertTailwindToTwindConfig(tailwindConfig: any): TwindConfigType {
-  const preflightEnabled = enablesPreflight(tailwindConfig)
-
-  const twindConfig = defineConfig({
-    presets: [
-      presetTailwind({
-        disablePreflight: !preflightEnabled,
-      }),
-      presetAutoprefix(),
-    ],
-    // force pushing tailwind's config to twind
-    theme: tailwindConfig.theme,
-    darkMode: tailwindConfig.darkMode,
-    variants: tailwindConfig.variants,
-    preflight: tailwindConfig.preflight,
-  })
-
-  return twindConfig
-}
-
-function getTailwindConfig(
-  tailwindFile: ProjectFile | null,
-  requireFn: RequireFn,
-): Either<any, TwindConfigType> {
-  if (tailwindFile != null && isTextFile(tailwindFile)) {
-    try {
-      const requireResult = requireFn('/', TailwindConfigPath)
-      const rawConfig = importDefault(requireResult)
-      if (rawConfig != null) {
-        const twindConfig = convertTailwindToTwindConfig(rawConfig)
-        return right(twindConfig)
-      } else {
-        return left('Tailwind config contains no default export')
-      }
-    } catch (error) {
-      console.error('Error loading tailwind config', error)
-      return left(error)
-    }
-  }
-
-  return left('Invalid or missing tailwind config file type')
-}
-
-function useGetTailwindConfigFile(projectContents: ProjectContentTreeRoot): ProjectFile | null {
-  return React.useMemo(
-    () => getProjectFileByFilePath(projectContents, TailwindConfigPath),
-    [projectContents],
-  )
-}
-
-function useGetTailwindConfig(
-  projectContents: ProjectContentTreeRoot,
-  requireFn: RequireFn,
-): TwindConfigType {
-  const tailwindConfigFile = useGetTailwindConfigFile(projectContents)
-  const tailwindConfig = React.useMemo(() => {
-    const maybeConfig = getTailwindConfig(tailwindConfigFile, requireFn)
-    if (isRight(maybeConfig)) {
-      return maybeConfig.value
-    } else {
-      return defineConfig({})
-    }
-  }, [tailwindConfigFile, requireFn])
-  return useKeepReferenceEqualityIfPossible(tailwindConfig)
-}
-
-interface TwindInstance {
-  element: HTMLStyleElement
-  instance: Twind
-}
-
-let twindInstance: TwindInstance | null = null
-
-export function isTwindEnabled(): boolean {
-  return twindInstance != null
-}
-
-function clearTwind() {
-  if (twindInstance != null) {
-    twindInstance.instance.clear()
-    twindInstance.instance.destroy()
-    twindInstance.element.parentNode?.removeChild(twindInstance.element)
-  }
-}
-
-export function adjustRuleScopeImpl(rule: string, prefixSelector: string | null): string {
-  // TODO Use css-tree to handle more complex cases. That doesn't seem necessary right now since Tailwind
-  // as at 2.2.4 only uses @media and @keyframes
-  const isMediaQuery = rule.startsWith('@media')
-  const isOtherAtRule = rule.startsWith('@') && !isMediaQuery
-  if (prefixSelector == null || isOtherAtRule) {
-    return rule
-  } else {
-    const splitOnBrace = rule.split('{')
-    const selectorIndex = isMediaQuery ? 1 : 0
-    const splitSelectors = splitOnBrace[selectorIndex].split(',')
-    const scopedSelectors = splitSelectors.map((s) => {
-      const lowerCaseSelector = s.toLowerCase().trim()
-
-      if (
-        lowerCaseSelector === ':root' ||
-        lowerCaseSelector === 'html' ||
-        lowerCaseSelector === 'head'
-      ) {
-        return prefixSelector
-      } else if (lowerCaseSelector === 'body') {
-        return `${prefixSelector} > *`
-      } else {
-        return `${prefixSelector} ${s}`
-      }
-    })
-    const joinedSelectors = scopedSelectors.join(',')
-    const theRest = splitOnBrace.slice(selectorIndex + 1)
-    const front = splitOnBrace.slice(0, selectorIndex)
-    const finalRule = [...front, joinedSelectors, ...theRest].join('{')
-    return finalRule
-  }
-}
-
-const adjustRuleScope = memoize(adjustRuleScopeImpl, {
-  maxSize: 100,
-  matchesArg: (a, b) => a === b,
-})
-
-function updateTwind(config: TwindConfigType, prefixSelector: string | null) {
-  const element = document.head.appendChild(document.createElement('style'))
-  element.appendChild(document.createTextNode('')) // Avoid Edge bug where empty style elements doesn't create sheets
-  element.setAttribute('id', `twind-styles-${Math.random().toString(36).slice(2)}`)
-
-  const sheet = cssom(element)
-  const customSheet: Sheet = {
-    ...sheet,
-    target: sheet.target,
-    insert: (rule, index, sheetRule) => {
-      const scopedRule = adjustRuleScope(rule, prefixSelector)
-      sheet.insert(scopedRule, index, sheetRule)
-    },
-  }
-
-  clearTwind()
-
-  if (twindInstance == null) {
-    const prefixes = ['TWIND_', 'TAILWIND_']
-    window.addEventListener('warning', (event: any | { detail: { code: string } }) => {
-      const isTwindWarning: boolean = prefixes.some((prefix) =>
-        event?.detail?.code?.startsWith?.(prefix),
-      )
-      if (isTwindWarning) {
-        event.preventDefault()
-      }
-    })
-  }
-
-  const instance = observe(twind(config, customSheet), document.documentElement)
-
-  twindInstance = {
-    element: element,
-    instance: instance,
-  }
-}
-
-export function useTwind(
-  projectContents: ProjectContentTreeRoot,
-  requireFn: RequireFn,
-  prefixSelector: string | null = null,
-): void {
-  const hasDependencies = useHasRequiredDependenciesForTailwind(projectContents)
-  const hasPostCSSPlugin = usePostCSSIncludesTailwindPlugin(projectContents, requireFn)
-  const shouldUseTwind = hasDependencies && hasPostCSSPlugin
-  const tailwindConfig = useGetTailwindConfig(projectContents, requireFn)
-  React.useEffect(() => {
-    if (shouldUseTwind) {
-      updateTwind(tailwindConfig, prefixSelector)
-    } else {
-      clearTwind()
-    }
-  }, [prefixSelector, shouldUseTwind, tailwindConfig])
-}
-
-export function injectTwind(
-  projectContents: ProjectContentTreeRoot,
-  requireFn: RequireFn,
-  prefixSelector: string | null = null,
-): void {
-  const packageJsonFile = packageJsonFileFromProjectContents(projectContents)
-  const hasDependencies =
-    packageJsonFile != null && hasRequiredDependenciesForTailwind(packageJsonFile)
-  const postCSSFile = getProjectFileByFilePath(projectContents, PostCSSPath)
-  const hasPostCSSPlugin =
-    postCSSFile != null && postCSSIncludesTailwindPlugin(postCSSFile, requireFn)
-  const shouldUseTwind = hasDependencies && hasPostCSSPlugin
-  const tailwindConfigFile = getProjectFileByFilePath(projectContents, TailwindConfigPath)
-  const maybeTailwindConfig = getTailwindConfig(tailwindConfigFile, requireFn)
-  const tailwindConfig = isRight(maybeTailwindConfig) ? maybeTailwindConfig.value : defineConfig({})
-  if (shouldUseTwind) {
-    updateTwind(tailwindConfig, prefixSelector)
-  } else {
-    clearTwind()
-  }
-}
diff --git a/editor/src/templates/preview/preview.tsx b/editor/src/templates/preview/preview.tsx
index 3379822ff2ea..c2db43f38fb9 100644
--- a/editor/src/templates/preview/preview.tsx
+++ b/editor/src/templates/preview/preview.tsx
@@ -21,7 +21,6 @@ import { pluck } from '../../core/shared/array-utils'
 import { getMainHTMLFilename, getMainJSFilename } from '../../core/shared/project-contents-utils'
 import type { NodeModules } from '../../core/shared/project-file-types'
 import { isTextFile } from '../../core/shared/project-file-types'
-import { injectTwind } from '../../core/tailwind/tailwind'
 import { NewBundlerWorker, RealBundlerWorker } from '../../core/workers/bundler-bridge'
 import { createBundle } from '../../core/workers/bundler-promise'
 import Utils from '../../utils/utils'
@@ -280,8 +279,6 @@ const initPreview = () => {
       }
     }
 
-    injectTwind(projectContents, requireFn)
-
     const previewJSFileName = getMainJSFilename(projectContents)
     const previewJSFilePath = `/${previewJSFileName}`
     const previewJSFile = getProjectFileByFilePath(projectContents, previewJSFilePath)
diff --git a/editor/src/utils/__mocks__/jit-browser-tailwindcss.js b/editor/src/utils/__mocks__/jit-browser-tailwindcss.js
new file mode 100644
index 000000000000..54cc6d0eb188
--- /dev/null
+++ b/editor/src/utils/__mocks__/jit-browser-tailwindcss.js
@@ -0,0 +1,5 @@
+module.exports = {
+  createTailwindcss: () => ({
+    generateStylesFromContent: () => '',
+  }),
+}
diff --git a/editor/src/utils/feature-switches.ts b/editor/src/utils/feature-switches.ts
index cce2962ef6c7..9fa1a0064189 100644
--- a/editor/src/utils/feature-switches.ts
+++ b/editor/src/utils/feature-switches.ts
@@ -17,6 +17,7 @@ export type FeatureName =
   | 'Condensed Navigator Entries'
   | 'Canvas Fast Selection Hack'
   | 'Roll Your Own'
+  | 'Tailwind'
 
 export const AllFeatureNames: FeatureName[] = [
   // 'Dragging Reparents By Default', // Removing this option so that we can experiment on this later
@@ -34,6 +35,7 @@ export const AllFeatureNames: FeatureName[] = [
   'Condensed Navigator Entries',
   'Canvas Fast Selection Hack',
   'Roll Your Own',
+  'Tailwind',
 ]
 
 let FeatureSwitches: { [feature in FeatureName]: boolean } = {
@@ -48,6 +50,7 @@ let FeatureSwitches: { [feature in FeatureName]: boolean } = {
   'Project Thumbnail Generation': false,
   'Debug - Print UIDs': false,
   'Debug – Connections': false,
+  Tailwind: false,
   'Condensed Navigator Entries': !IS_TEST_ENVIRONMENT,
   'Canvas Fast Selection Hack': true,
   'Roll Your Own': false,

From 0e797f8632d82d6dc6967e18d8c1cfc798c0113b Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 1 Oct 2024 11:38:37 +0200
Subject: [PATCH 061/272] Hide crowded grid resize controls (#6430)

**Problem:**

Grid resize controls should be hidden when they get too crowded, for
example when zooming out.

<img width="299" alt="Screenshot 2024-09-30 at 17 32 08"
src="https://github.com/user-attachments/assets/13c8354d-1080-41d0-9cf5-9cc4f915dfbb">

**Fix:**

Hide the controls for an axis if any of the control areas would become
smaller than the control size.

Fixes #6429
---
 .../canvas/controls/grid-controls.tsx         | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index a72f25fbb4b5..bbdba72e9a10 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -405,12 +405,25 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
     })
   }, [props.fromPropsAxisValues, resizingIndex])
 
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'GridResizing scale',
+  )
+
   if (props.axisValues == null) {
     return null
   }
   switch (props.axisValues.type) {
     case 'DIMENSIONS':
       const size = GRID_RESIZE_HANDLE_CONTAINER_SIZE / canvasScale
+      const dimensions = props.axisValues.dimensions
+
+      const hideControls = dimensions.some((dim) => {
+        const scaledSize = (dim.type === 'NUMBER' ? dim.value.value : 0) * scale
+        return scaledSize < GRID_RESIZE_HANDLE_SIZE
+      })
+
       return (
         <div
           style={{
@@ -422,11 +435,11 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
             display: 'grid',
             gridTemplateColumns:
               props.axis === 'column'
-                ? props.axisValues.dimensions.map((dim) => printGridCSSNumber(dim)).join(' ')
+                ? dimensions.map((dim) => printGridCSSNumber(dim)).join(' ')
                 : undefined,
             gridTemplateRows:
               props.axis === 'row'
-                ? props.axisValues.dimensions.map((dim) => printGridCSSNumber(dim)).join(' ')
+                ? dimensions.map((dim) => printGridCSSNumber(dim)).join(' ')
                 : undefined,
             gap: props.gap ?? 0,
             paddingLeft:
@@ -435,9 +448,10 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
                 : undefined,
             paddingTop:
               props.axis === 'row' && props.padding != null ? `${props.padding.top}px` : undefined,
+            visibility: hideControls ? 'hidden' : 'visible',
           }}
         >
-          {props.axisValues.dimensions.flatMap((dimension, dimensionIndex) => {
+          {dimensions.flatMap((dimension, dimensionIndex) => {
             return (
               <GridResizingControl
                 key={`grid-resizing-control-${dimensionIndex}`}
@@ -1552,7 +1566,7 @@ export const GridResizeControls = controlForStrategyMemoized<GridResizeControlPr
     const element = useEditorState(
       Substores.metadata,
       (store) => MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, target),
-      'GridResizeShadow element',
+      'GridResizeControls element',
     )
 
     const dispatch = useDispatch()
@@ -1560,7 +1574,7 @@ export const GridResizeControls = controlForStrategyMemoized<GridResizeControlPr
     const scale = useEditorState(
       Substores.canvas,
       (store) => store.editor.canvas.scale,
-      'GridResizingControl scale',
+      'GridResizeControls scale',
     )
 
     const resizeControlRef = useRefEditorState((store) =>

From aa7955e3817c4a50c5eac859f44c8ddccba6a248 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Tue, 1 Oct 2024 11:46:17 +0200
Subject: [PATCH 062/272] fixing setPaddingStrategy elementsToRerender (#6427)

This PR sets the elementsToRerender value in the setPaddingStrategy
---
 .../strategies/set-padding-strategy.tsx           | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
index 01f65b4b22c2..bb69d4fc2a7c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
@@ -270,10 +270,7 @@ export const setPaddingStrategy: CanvasStrategyFactory = (canvasState, interacti
               })),
             ),
           ],
-          // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-          // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-          // appropriate to this particular case.
-          'rerender-all-elements',
+          selectedElements,
         )
       }
 
@@ -301,10 +298,7 @@ export const setPaddingStrategy: CanvasStrategyFactory = (canvasState, interacti
               })),
             ),
           ],
-          // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-          // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-          // appropriate to this particular case.
-          'rerender-all-elements',
+          selectedElements,
         )
       }
 
@@ -334,10 +328,7 @@ export const setPaddingStrategy: CanvasStrategyFactory = (canvasState, interacti
             })),
           ),
         ],
-        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-        // appropriate to this particular case.
-        'rerender-all-elements',
+        selectedElements,
       )
     },
   }

From 9ac163c9259361b2349c73c64c5fd74e6908353c Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 1 Oct 2024 12:20:47 +0200
Subject: [PATCH 063/272] Fix duplicate key in inspector background section
 (#6438)

**Problem:**

The inspector background section causes duplicate keys errors.

<img width="626" alt="image"
src="https://github.com/user-attachments/assets/2d560bc6-7c7b-4ed4-a0a7-e9d4a13a7ff6">

**Fix:**

Rename the keys for solid/gradient <> string background inputs so they
are unique.

Fixes #6437
---
 .../background-subsection/solid-background-layer.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/editor/src/components/inspector/sections/style-section/background-subsection/solid-background-layer.tsx b/editor/src/components/inspector/sections/style-section/background-subsection/solid-background-layer.tsx
index 2eb227918cdb..d5f9381117f5 100644
--- a/editor/src/components/inspector/sections/style-section/background-subsection/solid-background-layer.tsx
+++ b/editor/src/components/inspector/sections/style-section/background-subsection/solid-background-layer.tsx
@@ -117,9 +117,9 @@ export const SolidBackgroundLayer = React.memo<SolidBackgroundLayerProps>((props
           onMouseDown={stopPropagation}
         />
         <BackgroundSolidOrGradientThumbnailControl
-          id={`background-layer-gradient-${props.index}`}
-          key={`background-layer-gradient-${props.index}`}
-          testId={`background-layer-gradient-${props.index}`}
+          id={`background-layer-solid-or-gradient-${props.index}`}
+          key={`background-layer-solid-or-gradient-${props.index}`}
+          testId={`background-layer-solid-or-gradient-${props.index}`}
           value={props.value}
           backgroundIndex={props.index}
           useSubmitValueFactory={props.useSubmitTransformedValuesFactory}
@@ -132,9 +132,9 @@ export const SolidBackgroundLayer = React.memo<SolidBackgroundLayerProps>((props
           setOpenPopup={props.setOpenPopup}
         />
         <StringBackgroundColorControl
-          id={`background-layer-gradient-${props.index}`}
-          key={`background-layer-gradient-${props.index}`}
-          testId={`background-layer-gradient-${props.index}`}
+          id={`background-layer-string-${props.index}`}
+          key={`background-layer-string-${props.index}`}
+          testId={`background-layer-string-${props.index}`}
           value={props.value}
           backgroundIndex={props.index}
           useSubmitValueFactory={props.useSubmitTransformedValuesFactory}

From ddcec3de98fda06d97ef764eb37a0cc55f65e5f4 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 1 Oct 2024 12:21:10 +0200
Subject: [PATCH 064/272] Detect stretch when resizing grid cell (#6436)

**Problem:**

The grid cell resize handles should be shown when the child is
stretching as well as filling the cell.

**Fix:**

Do that.

Fixes #6435
---
 ...-resize-element-strategy.spec.browser2.tsx | 31 +++++++++++++++++++
 .../grid-resize-element-strategy.ts           | 10 +++---
 .../components/inspector/inspector-common.ts  | 13 ++++++--
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 0ba50510b128..7b39be3806b6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -340,6 +340,26 @@ export var storyboard = (
       }
     })
   })
+
+  it('also works for stretching cells', async () => {
+    const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+    await runCellResizeTest(
+      editor,
+      'column-end',
+      gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 10),
+      EP.fromString('sb/scene/grid/eee'),
+    )
+
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+      editor.renderedDOM.getByTestId('grid-child-stretch').style
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '11',
+      gridColumnStart: '4',
+      gridRowStart: '4',
+      gridRowEnd: 'auto',
+    })
+  })
 })
 
 const ProjectCode = `import * as React from 'react'
@@ -425,6 +445,17 @@ export var storyboard = (
           data-uid='ddd'
           data-testid='grid-child'
         />
+        <div
+          style={{
+            backgroundColor: '#9f0',
+            alignSelf: 'stretch',
+            justifySelf: 'stretch',
+            gridColumn: 4,
+            gridRow: 4,
+          }}
+          data-uid='eee'
+          data-testid='grid-child-stretch'
+        />
       </div>
     </Scene>
   </Storyboard>
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 2f47003ac5ce..daa9996bc207 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -38,12 +38,10 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const isFillContainer = isFixedHugFillModeApplied(
-    canvasState.startingMetadata,
-    selectedElement,
-    'fill',
-  )
-  if (!isFillContainer) {
+  const isFillOrStretchContainer =
+    isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'fill') ||
+    isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'stretch')
+  if (!isFillOrStretchContainer) {
     return null
   }
 
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index 7f0b03ef28a1..06588173c38b 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -679,14 +679,23 @@ export function detectFillHugFixedState(
   )
 
   if (MetadataUtils.isGridCell(metadata, elementPath)) {
-    if (
+    const isStretchingExplicitly =
       (element.specialSizeMeasurements.alignSelf === 'stretch' &&
         axis === 'horizontal' &&
         width == null) ||
       (element.specialSizeMeasurements.justifySelf === 'stretch' &&
         axis === 'vertical' &&
         height == null)
-    ) {
+
+    const isStretchingImplicitly =
+      width == null &&
+      height == null &&
+      (element.specialSizeMeasurements.alignSelf == null ||
+        element.specialSizeMeasurements.alignSelf === 'auto') &&
+      (element.specialSizeMeasurements.justifySelf == null ||
+        element.specialSizeMeasurements.justifySelf === 'auto')
+
+    if (isStretchingExplicitly || isStretchingImplicitly) {
       return { fixedHugFill: { type: 'stretch' }, controlStatus: 'detected' }
     }
   }

From 161179c924bd0c7f3e6317155e388be625db654a Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 1 Oct 2024 15:32:58 +0200
Subject: [PATCH 065/272] Clamp minimum gap for flex/grid elements (#6441)

**Problem:**

The grid and flex gap inspector controls can go negative, either by
scrubbing as well as direct input.

**Fix:**

1. Add `minimum={0}` to those number inputs so the scrubbing cannot go
lower than 0
2. Clamp the value calculated in the number input so it stays between
the min/max bounds.

Fixes #6440
---
 editor/src/components/inspector/flex-section.tsx  |  6 ++++++
 .../flex-container-controls.tsx                   |  2 ++
 editor/src/uuiui/inputs/number-input.tsx          | 15 ++++++++++++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 3ff686593e13..b32f4da14128 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -887,6 +887,8 @@ const GapRowColumnControl = React.memo(() => {
           <NumberInput
             value={columnGap.value}
             numberType={'Length'}
+            minimum={0}
+            clampOnSubmitValue={true}
             onSubmitValue={onSubmitUnifiedValue}
             onTransientSubmitValue={onSubmitUnifiedValue}
             onForcedSubmitValue={onSubmitUnifiedValue}
@@ -903,6 +905,8 @@ const GapRowColumnControl = React.memo(() => {
           <NumberInput
             value={columnGap.value}
             numberType={'Length'}
+            minimum={0}
+            clampOnSubmitValue={true}
             onSubmitValue={onSubmitSplitValue('columnGap')}
             onTransientSubmitValue={onSubmitSplitValue('columnGap')}
             onForcedSubmitValue={onSubmitSplitValue('columnGap')}
@@ -916,6 +920,8 @@ const GapRowColumnControl = React.memo(() => {
           <NumberInput
             value={rowGap.value}
             numberType={'Length'}
+            minimum={0}
+            clampOnSubmitValue={true}
             onSubmitValue={onSubmitSplitValue('rowGap')}
             onTransientSubmitValue={onSubmitSplitValue('rowGap')}
             onForcedSubmitValue={onSubmitSplitValue('rowGap')}
diff --git a/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx b/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
index ed42986db729..a519c34fddfa 100644
--- a/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
+++ b/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
@@ -328,6 +328,8 @@ export const FlexGapControl = React.memo(() => {
           testId='flex.container.gap'
           key='flex.container.gap'
           value={value}
+          minimum={0}
+          clampOnSubmitValue={true}
           onSubmitValue={wrappedOnSubmitValue}
           onTransientSubmitValue={wrappedOnTransientSubmitValue}
           onForcedSubmitValue={wrappedOnSubmitValue}
diff --git a/editor/src/uuiui/inputs/number-input.tsx b/editor/src/uuiui/inputs/number-input.tsx
index 41db6078d683..aeb9d054fee5 100644
--- a/editor/src/uuiui/inputs/number-input.tsx
+++ b/editor/src/uuiui/inputs/number-input.tsx
@@ -36,11 +36,10 @@ import type {
 } from '../../components/inspector/controls/control'
 import type { Either } from '../../core/shared/either'
 import { isLeft, mapEither } from '../../core/shared/either'
-import { clampValue, point } from '../../core/shared/math-utils'
+import { clampValue } from '../../core/shared/math-utils'
 import { memoize } from '../../core/shared/memoize'
 import type { ControlStyles } from '../../uuiui-deps'
 import { getControlStyles, CSSCursor } from '../../uuiui-deps'
-import type { IcnProps } from '../icn'
 import { Icn } from '../icn'
 import { useColorTheme, UtopiaTheme } from '../styles/theme'
 import { FlexRow } from '../widgets/layout/flex-row'
@@ -141,6 +140,7 @@ export interface NumberInputOptions {
   pasteHandler?: boolean
   descriptionLabel?: string
   disableScrubbing?: boolean
+  clampOnSubmitValue?: boolean
 }
 
 export interface AbstractNumberInputProps<T extends CSSNumber | number>
@@ -190,6 +190,7 @@ export const NumberInput = React.memo<NumberInputProps>(
     invalid,
     pasteHandler,
     disableScrubbing = false,
+    clampOnSubmitValue,
   }) => {
     const ref = React.useRef<HTMLInputElement>(null)
     const colorTheme = useColorTheme()
@@ -511,7 +512,12 @@ export const NumberInput = React.memo<NumberInputProps>(
           if (isLeft(parsed)) {
             return unknownInputValue(displayValue)
           }
-          return parsed.value
+          return clampOnSubmitValue
+            ? {
+                ...parsed.value,
+                value: clampValue(parsed.value.value, minimum, maximum),
+              }
+            : parsed.value
         }
 
         const newValue = getNewValue()
@@ -540,6 +546,9 @@ export const NumberInput = React.memo<NumberInputProps>(
         updateValue,
         value,
         displayValue,
+        minimum,
+        maximum,
+        clampOnSubmitValue,
       ],
     )
 

From 76631a682c7952a6e558d16dfce0a91a6ccfdd1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Tue, 1 Oct 2024 16:18:51 +0200
Subject: [PATCH 066/272] Remove the code related to the Preview pane (#6426)

## Description
This PR removes a lot of code related to the preview pane. No guarantees
for exhaustiveness
---
 .github/pull_request_template.md              |   2 +-
 editor/src/components/canvas/stored-layout.ts |   7 +-
 editor/src/components/common/actions/index.ts |   7 +-
 editor/src/components/editor/action-types.ts  |  11 -
 .../editor/actions/action-creators.ts         |  15 -
 .../components/editor/actions/action-utils.ts |   2 -
 .../src/components/editor/actions/actions.tsx |  35 --
 .../components/editor/editor-component.tsx    |  43 --
 .../editor/preview-report-handler.ts          |  31 --
 .../src/components/editor/store/dispatch.tsx  |  31 +-
 .../components/editor/store/editor-state.ts   |  23 -
 .../editor/store/editor-update.spec.tsx       |  32 --
 .../components/editor/store/editor-update.tsx |   4 -
 .../store/store-deep-equality-instances.ts    |  14 -
 .../store/store-hook-substore-helpers.ts      |   4 -
 .../src/components/preview/preview-pane.tsx   | 407 ------------------
 editor/src/core/shared/redux-devtools.ts      |   3 -
 editor/src/templates/editor.tsx               |  19 +-
 editor/src/templates/preview/index.html       |  89 ----
 editor/src/templates/preview/preview.tsx      | 338 ---------------
 editor/webpack.config.js                      |  13 -
 .../components/common/preview-devices.tsx     | 151 -------
 .../preview/preview-page-component.tsx        | 335 --------------
 website-next/pages/preview/[id].tsx           |  12 -
 24 files changed, 5 insertions(+), 1623 deletions(-)
 delete mode 100644 editor/src/components/editor/preview-report-handler.ts
 delete mode 100644 editor/src/components/preview/preview-pane.tsx
 delete mode 100644 editor/src/templates/preview/index.html
 delete mode 100644 editor/src/templates/preview/preview.tsx
 delete mode 100644 website-next/components/common/preview-devices.tsx
 delete mode 100644 website-next/components/preview/preview-page-component.tsx
 delete mode 100644 website-next/pages/preview/[id].tsx

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 2816a36f4fa5..0652827a898c 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -14,6 +14,6 @@ Describe the fix you have made as succinctly as possible.
 I hereby swear that:
 
 - [ ] I opened a hydrogen project and it loaded
-- [ ] I could navigate to various routes in Preview mode
+- [ ] I could navigate to various routes in Play mode
 
 Fixes #[ticket_number] (<< pls delete this line if it's not relevant)
diff --git a/editor/src/components/canvas/stored-layout.ts b/editor/src/components/canvas/stored-layout.ts
index 595716a5efd2..bb2426034158 100644
--- a/editor/src/components/canvas/stored-layout.ts
+++ b/editor/src/components/canvas/stored-layout.ts
@@ -24,12 +24,7 @@ export const GridPanelsNumberOfRows = 12
 export type Menu = 'inspector' | 'navigator'
 export type Pane = 'code-editor'
 
-export const allMenusAndPanels: Array<Menu | Pane> = [
-  'navigator',
-  'code-editor',
-  'inspector',
-  // 'preview', // Does this exist?
-]
+export const allMenusAndPanels: Array<Menu | Pane> = ['navigator', 'code-editor', 'inspector']
 
 export interface GridPanelData {
   panel: StoredPanel
diff --git a/editor/src/components/common/actions/index.ts b/editor/src/components/common/actions/index.ts
index b58160a0e349..9272ebc26903 100644
--- a/editor/src/components/common/actions/index.ts
+++ b/editor/src/components/common/actions/index.ts
@@ -1,5 +1,3 @@
-export type PreviewPanel = 'preview'
-
 export type LeftMenuPanel =
   | 'filebrowser'
   | 'dependencylist'
@@ -22,10 +20,9 @@ export type EditorPanel =
   | CenterPanel
   | CodeEditorPanel
   | InspectorPanel
-  | PreviewPanel
   | NavigatorPanel
 
-export type EditorPane = 'leftmenu' | 'center' | 'inspector' | 'preview' | 'rightmenu'
+export type EditorPane = 'leftmenu' | 'center' | 'inspector' | 'rightmenu'
 
 export function paneForPanel(panel: EditorPanel | null): EditorPane | null {
   switch (panel) {
@@ -55,8 +52,6 @@ export function paneForPanel(panel: EditorPanel | null): EditorPane | null {
       return 'rightmenu'
     case 'codeEditor':
       return 'center'
-    case 'preview':
-      return 'preview'
     default:
       const _exhaustiveCheck: never = panel
       throw new Error(`Unhandled panel ${panel}`)
diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts
index 94190c524369..757fa6769497 100644
--- a/editor/src/components/editor/action-types.ts
+++ b/editor/src/components/editor/action-types.ts
@@ -602,11 +602,6 @@ export interface SetProjectDescription {
   description: string
 }
 
-export interface UpdatePreviewConnected {
-  action: 'UPDATE_PREVIEW_CONNECTED'
-  connected: boolean
-}
-
 export interface AlignSelectedViews {
   action: 'ALIGN_SELECTED_VIEWS'
   alignment: Alignment
@@ -628,10 +623,6 @@ export interface SetCursorOverlay {
   cursor: CSSCursor | null
 }
 
-export interface SendPreviewModel {
-  action: 'SEND_PREVIEW_MODEL'
-}
-
 export interface UpdateFilePath {
   action: 'UPDATE_FILE_PATH'
   oldPath: string
@@ -1278,13 +1269,11 @@ export type EditorAction =
   | OpenCodeEditor
   | SetProjectName
   | SetProjectDescription
-  | UpdatePreviewConnected
   | AlignSelectedViews
   | DistributeSelectedViews
   | SetCursorOverlay
   | DuplicateSpecificElements
   | UpdateDuplicationState
-  | SendPreviewModel
   | UpdateFilePath
   | UpdateRemixRoute
   | OpenCodeEditorFile
diff --git a/editor/src/components/editor/actions/action-creators.ts b/editor/src/components/editor/actions/action-creators.ts
index fa9ad247a85b..723c48306606 100644
--- a/editor/src/components/editor/actions/action-creators.ts
+++ b/editor/src/components/editor/actions/action-creators.ts
@@ -92,7 +92,6 @@ import type {
   SaveImageSwitchMode,
   SelectAllSiblings,
   SelectComponents,
-  SendPreviewModel,
   SetAspectRatioLock,
   SetCanvasFrames,
   SetCodeEditorBuildErrors,
@@ -144,7 +143,6 @@ import type {
   UpdateKeysPressed,
   UpdateNodeModulesContents,
   UpdatePackageJson,
-  UpdatePreviewConnected,
   UpdatePropertyControlsInfo,
   CloseDesignerFile,
   SetFocusedElement,
@@ -974,13 +972,6 @@ export function setProjectDescription(projectDescription: string): SetProjectDes
   }
 }
 
-export function updatePreviewConnected(connected: boolean): UpdatePreviewConnected {
-  return {
-    action: 'UPDATE_PREVIEW_CONNECTED',
-    connected: connected,
-  }
-}
-
 export function alignSelectedViews(alignment: Alignment): AlignSelectedViews {
   return {
     action: 'ALIGN_SELECTED_VIEWS',
@@ -1006,12 +997,6 @@ export function showContextMenu(
   }
 }
 
-export function sendPreviewModel(): SendPreviewModel {
-  return {
-    action: 'SEND_PREVIEW_MODEL',
-  }
-}
-
 export function updateFilePath(oldPath: string, newPath: string): UpdateFilePath {
   return {
     action: 'UPDATE_FILE_PATH',
diff --git a/editor/src/components/editor/actions/action-utils.ts b/editor/src/components/editor/actions/action-utils.ts
index 6b4e6b7c33ec..a695b30ad16a 100644
--- a/editor/src/components/editor/actions/action-utils.ts
+++ b/editor/src/components/editor/actions/action-utils.ts
@@ -62,8 +62,6 @@ export function isTransientAction(action: EditorAction): boolean {
     case 'SET_PROJECT_ID':
     case 'SET_CODE_EDITOR_VISIBILITY':
     case 'OPEN_CODE_EDITOR':
-    case 'UPDATE_PREVIEW_CONNECTED':
-    case 'SEND_PREVIEW_MODEL':
     case 'CLOSE_DESIGNER_FILE':
     case 'UPDATE_CODE_RESULT_CACHE':
     case 'SET_CODE_EDITOR_BUILD_ERRORS':
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index dc5a7ed77b80..7baaa1b2848c 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -239,7 +239,6 @@ import type {
   ScrollToElement,
   SelectAllSiblings,
   SelectComponents,
-  SendPreviewModel,
   SetAspectRatioLock,
   SetCanvasFrames,
   SetCodeEditorBuildErrors,
@@ -304,7 +303,6 @@ import type {
   UpdateMouseButtonsPressed,
   UpdateNodeModulesContents,
   UpdatePackageJson,
-  UpdatePreviewConnected,
   UpdateProjectContents,
   UpdatePropertyControlsInfo,
   WrapInElement,
@@ -1000,10 +998,6 @@ export function restoreEditorState(
       formulaBarMode: desiredEditor.topmenu.formulaBarMode,
       formulaBarFocusCounter: currentEditor.topmenu.formulaBarFocusCounter,
     },
-    preview: {
-      visible: currentEditor.preview.visible,
-      connected: currentEditor.preview.connected,
-    },
     home: {
       visible: currentEditor.home.visible,
     },
@@ -2966,14 +2960,6 @@ export const UPDATE_FNS = {
             visible: action.visible,
           },
         }
-      case 'preview':
-        return {
-          ...editor,
-          preview: {
-            ...editor.preview,
-            visible: action.visible,
-          },
-        }
       case 'codeEditor':
         return {
           ...editor,
@@ -3069,14 +3055,6 @@ export const UPDATE_FNS = {
             visible: !editor.inspector.visible,
           },
         }
-      case 'preview':
-        return {
-          ...editor,
-          preview: {
-            ...editor.preview,
-            visible: !editor.preview.visible,
-          },
-        }
       case 'projectsettings':
         return {
           ...editor,
@@ -3743,12 +3721,6 @@ export const UPDATE_FNS = {
       projectDescription: action.description,
     }
   },
-
-  UPDATE_PREVIEW_CONNECTED: (action: UpdatePreviewConnected, editor: EditorModel): EditorModel => {
-    return produce(editor, (editorState) => {
-      editorState.preview.connected = action.connected
-    })
-  },
   ALIGN_SELECTED_VIEWS: (action: AlignSelectedViews, editor: EditorModel): EditorModel => {
     return alignOrDistributeSelectedViews(editor, action.alignment)
   },
@@ -3763,9 +3735,6 @@ export const UPDATE_FNS = {
     openMenu(action.menuName, action.event)
     return editor
   },
-  SEND_PREVIEW_MODEL: (action: SendPreviewModel, editor: EditorModel): EditorModel => {
-    return editor
-  },
   UPDATE_FILE_PATH: (
     action: UpdateFilePath,
     editor: EditorModel,
@@ -6398,10 +6367,6 @@ export async function load(
   )
 }
 
-export function isSendPreviewModel(action: any): action is SendPreviewModel {
-  return action != null && (action as SendPreviewModel).action === 'SEND_PREVIEW_MODEL'
-}
-
 function saveFileInProjectContents(
   projectContents: ProjectContentTreeRoot,
   filePath: string,
diff --git a/editor/src/components/editor/editor-component.tsx b/editor/src/components/editor/editor-component.tsx
index c87d105ed4d7..e4d1cfacfe0b 100644
--- a/editor/src/components/editor/editor-component.tsx
+++ b/editor/src/components/editor/editor-component.tsx
@@ -39,7 +39,6 @@ import { ConfirmDeleteDialog } from '../filebrowser/confirm-delete-dialog'
 import { ConfirmOverwriteDialog } from '../filebrowser/confirm-overwrite-dialog'
 import { ConfirmRevertDialog } from '../filebrowser/confirm-revert-dialog'
 import { ConfirmRevertAllDialog } from '../filebrowser/confirm-revert-all-dialog'
-import { PreviewColumn } from '../preview/preview-pane'
 import * as EditorActions from './actions/action-creators'
 import { FatalIndexedDBErrorComponent } from './fatal-indexeddb-error-component'
 import { editorIsTarget, handleKeyDown, handleKeyUp } from './global-shortcuts'
@@ -377,12 +376,6 @@ export const EditorComponentInner = React.memo((props: EditorProps) => {
     (store) => store.editor.id,
     'EditorComponentInner projectId',
   )
-  const previewVisible = useEditorState(
-    Substores.restOfEditor,
-    (store) => store.editor.preview.visible,
-    'EditorComponentInner previewVisible',
-  )
-
   const yDoc = useEditorState(
     Substores.restOfStore,
     (store) => store.collaborativeEditingSupport.session?.mergeDoc,
@@ -417,11 +410,6 @@ export const EditorComponentInner = React.memo((props: EditorProps) => {
     }
   }, [projectName, projectId, forking])
 
-  const onClosePreview = React.useCallback(
-    () => dispatch([EditorActions.setPanelVisibility('preview', false)]),
-    [dispatch],
-  )
-
   const startDragInsertion = React.useCallback(
     (event: React.DragEvent<HTMLDivElement>) => {
       const draggedTypes = event.nativeEvent?.dataTransfer?.types
@@ -524,37 +512,6 @@ export const EditorComponentInner = React.memo((props: EditorProps) => {
                 <DesignPanelRoot />
               </SimpleFlexRow>
               {/* insert more columns here */}
-
-              {previewVisible ? (
-                <ResizableFlexColumn
-                  style={{ borderLeft: `1px solid ${colorTheme.secondaryBorder.value}` }}
-                  enable={{
-                    left: true,
-                    right: false,
-                  }}
-                  defaultSize={{
-                    width: 350,
-                    height: '100%',
-                  }}
-                >
-                  <SimpleFlexRow
-                    id='PreviewTabRail'
-                    style={{
-                      height: UtopiaTheme.layout.rowHeight.smaller,
-                      borderBottom: `1px solid ${colorTheme.subduedBorder.value}`,
-                      alignItems: 'stretch',
-                    }}
-                  >
-                    <TabComponent
-                      label='Preview'
-                      selected
-                      icon={<LargerIcons.PreviewPane color='primary' />}
-                      onClose={onClosePreview}
-                    />
-                  </SimpleFlexRow>
-                  <PreviewColumn />
-                </ResizableFlexColumn>
-              ) : null}
             </SimpleFlexRow>
           </SimpleFlexRow>
         </SimpleFlexColumn>
diff --git a/editor/src/components/editor/preview-report-handler.ts b/editor/src/components/editor/preview-report-handler.ts
deleted file mode 100644
index f7bfd86fa05b..000000000000
--- a/editor/src/components/editor/preview-report-handler.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { EditorDispatch } from './action-types'
-import { updatePreviewConnected } from './actions/action-creators'
-
-export const InternalPreviewTimeout = 500
-
-let lastReportFromPreviewTS = 0
-let timeout = 0
-let intervalId: number
-
-export function previewIsAlive(newTimeout: number) {
-  timeout = newTimeout
-  lastReportFromPreviewTS = Date.now()
-}
-
-export function handlePreviewDisconnected() {
-  lastReportFromPreviewTS = 0
-}
-
-export function startPreviewConnectedMonitoring(dispatch: EditorDispatch) {
-  let previousPreviewConnected: boolean
-
-  window.clearInterval(intervalId)
-  intervalId = window.setInterval(() => {
-    const stillConnected =
-      lastReportFromPreviewTS > 0 && Date.now() - lastReportFromPreviewTS < timeout
-    if (stillConnected !== previousPreviewConnected) {
-      dispatch([updatePreviewConnected(stillConnected)], 'everyone')
-    }
-    previousPreviewConnected = stillConnected
-  }, 200)
-}
diff --git a/editor/src/components/editor/store/dispatch.tsx b/editor/src/components/editor/store/dispatch.tsx
index b4c4b2153a6d..c0e1a99e29a6 100644
--- a/editor/src/components/editor/store/dispatch.tsx
+++ b/editor/src/components/editor/store/dispatch.tsx
@@ -6,7 +6,6 @@ import { runLocalNavigatorAction } from '../../../templates/editor-navigator'
 import { optionalDeepFreeze } from '../../../utils/deep-freeze'
 import type { CanvasAction } from '../../canvas/canvas-types'
 import type { LocalNavigatorAction } from '../../navigator/actions'
-import { PreviewIframeId, projectContentsUpdateMessage } from '../../preview/preview-pane'
 import type { EditorAction, EditorDispatch, UpdateMetadataInEditorState } from '../action-types'
 import { isLoggedIn } from '../action-types'
 import {
@@ -46,7 +45,7 @@ import { isBrowserEnvironment } from '../../../core/shared/utils'
 import type { UiJsxCanvasContextData } from '../../canvas/ui-jsx-canvas'
 import type { ProjectContentTreeRoot } from '../../assets'
 import { treeToContents } from '../../assets'
-import { isSendPreviewModel, restoreDerivedState, UPDATE_FNS } from '../actions/actions'
+import { restoreDerivedState, UPDATE_FNS } from '../actions/actions'
 import { getTransitiveReverseDependencies } from '../../../core/shared/project-contents-dependencies'
 import {
   reduxDevtoolsSendActions,
@@ -309,26 +308,6 @@ function processActions(
   }, working)
 }
 
-export function updateEmbeddedPreview(
-  modelId: string | null,
-  projectContents: ProjectContentTreeRoot,
-): void {
-  const embeddedPreviewElement = document.getElementById(PreviewIframeId)
-  if (embeddedPreviewElement != null) {
-    const embeddedPreviewIframe = embeddedPreviewElement as any as HTMLIFrameElement
-    const contentWindow = embeddedPreviewIframe.contentWindow
-    if (contentWindow != null) {
-      try {
-        contentWindow.postMessage(projectContentsUpdateMessage(projectContents), '*')
-      } catch (exception) {
-        // Don't nuke the editor if there's an exception posting the message.
-        // This can happen if a value can't be cloned when posted.
-        console.error('Error updating preview.', exception)
-      }
-    }
-  }
-}
-
 function maybeRequestModelUpdate(
   projectContents: ProjectContentTreeRoot,
   workers: UtopiaTsWorkers,
@@ -525,7 +504,6 @@ export function editorDispatchClosingOut(
   })
   const anyWorkerUpdates = checkAnyWorkerUpdates(dispatchedActions)
   const anyUndoOrRedo = dispatchedActions.some(isUndoOrRedo)
-  const anySendPreviewModel = dispatchedActions.some(isSendPreviewModel)
 
   // The FINISH_CHECKPOINT_TIMER action effectively overrides the case where nothing changed,
   // as it's likely that action on it's own didn't change anything, but the actions that paired with
@@ -723,13 +701,6 @@ export function editorDispatchClosingOut(
     }
   }
 
-  const shouldUpdatePreview =
-    anySendPreviewModel ||
-    frozenEditorState.projectContents !== storedState.unpatchedEditor.projectContents
-  if (shouldUpdatePreview) {
-    updateEmbeddedPreview(frozenEditorState.id, frozenEditorState.projectContents)
-  }
-
   if (frozenEditorState.id != null && frozenEditorState.id != storedState.unpatchedEditor.id) {
     storedState.workers.initWatchdogWorker(frozenEditorState.id)
   }
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index d6090a49e8bb..633fe15505e7 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -1089,18 +1089,6 @@ export function editorStateTopMenu(
   }
 }
 
-export interface EditorStatePreview {
-  visible: boolean
-  connected: boolean
-}
-
-export function editorStatePreview(visible: boolean, connected: boolean): EditorStatePreview {
-  return {
-    visible: visible,
-    connected: connected,
-  }
-}
-
 export interface EditorStateHome {
   visible: boolean
 }
@@ -1446,7 +1434,6 @@ export interface EditorState {
   projectSettings: EditorStateProjectSettings
   navigator: NavigatorState
   topmenu: EditorStateTopMenu
-  preview: EditorStatePreview
   home: EditorStateHome
   lastUsedFont: FontSettings | null
   modal: ModalDialog | null
@@ -1530,7 +1517,6 @@ export function editorState(
   projectSettings: EditorStateProjectSettings,
   editorStateNavigator: NavigatorState,
   topmenu: EditorStateTopMenu,
-  preview: EditorStatePreview,
   home: EditorStateHome,
   lastUsedFont: FontSettings | null,
   modal: ModalDialog | null,
@@ -1615,7 +1601,6 @@ export function editorState(
     projectSettings: projectSettings,
     navigator: editorStateNavigator,
     topmenu: topmenu,
-    preview: preview,
     home: home,
     lastUsedFont: lastUsedFont,
     modal: modal,
@@ -2687,10 +2672,6 @@ export function createEditorState(dispatch: EditorDispatch): EditorState {
       formulaBarMode: 'content',
       formulaBarFocusCounter: 0,
     },
-    preview: {
-      visible: false,
-      connected: false,
-    },
     home: {
       visible: false,
     },
@@ -3049,10 +3030,6 @@ export function editorModelFromPersistentModel(
       formulaBarMode: 'content',
       formulaBarFocusCounter: 0,
     },
-    preview: {
-      visible: false,
-      connected: false,
-    },
     home: {
       visible: false,
     },
diff --git a/editor/src/components/editor/store/editor-update.spec.tsx b/editor/src/components/editor/store/editor-update.spec.tsx
index 855542efe4d1..fe59fde9219a 100644
--- a/editor/src/components/editor/store/editor-update.spec.tsx
+++ b/editor/src/components/editor/store/editor-update.spec.tsx
@@ -308,38 +308,6 @@ describe('action TOGGLE_PANE', () => {
     )
     chaiExpect(updatedEditor2.inspector.visible).to.not.equal(updatedEditor.inspector.visible)
   })
-
-  it('can toggle preview visibility', () => {
-    const { editor, derivedState, dispatch } = createEditorStates()
-    const action = togglePanel('preview')
-    const updatedEditor = runLocalEditorAction(
-      editor,
-      derivedState,
-      defaultUserState,
-      workers,
-      action,
-      History.init(editor, derivedState),
-      dispatch,
-      emptyUiJsxCanvasContextData(),
-      builtInDependencies,
-      emptyCollaborativeEditingSupport(),
-      emptyProjectServerState(),
-    )
-    const updatedEditor2 = runLocalEditorAction(
-      updatedEditor,
-      derivedState,
-      defaultUserState,
-      workers,
-      action,
-      History.init(editor, derivedState),
-      dispatch,
-      emptyUiJsxCanvasContextData(),
-      builtInDependencies,
-      emptyCollaborativeEditingSupport(),
-      emptyProjectServerState(),
-    )
-    chaiExpect(updatedEditor2.preview.visible).to.not.equal(updatedEditor.preview.visible)
-  })
 })
 
 describe('action DUPLICATE_SPECIFIC_ELEMENTS', () => {
diff --git a/editor/src/components/editor/store/editor-update.tsx b/editor/src/components/editor/store/editor-update.tsx
index f2b5e82c80d0..e663daa121e8 100644
--- a/editor/src/components/editor/store/editor-update.tsx
+++ b/editor/src/components/editor/store/editor-update.tsx
@@ -262,14 +262,10 @@ export function runSimpleLocalEditorAction(
       return UPDATE_FNS.SET_PROJECT_NAME(action, state)
     case 'SET_PROJECT_DESCRIPTION':
       return UPDATE_FNS.SET_PROJECT_DESCRIPTION(action, state)
-    case 'UPDATE_PREVIEW_CONNECTED':
-      return UPDATE_FNS.UPDATE_PREVIEW_CONNECTED(action, state)
     case 'SHOW_CONTEXT_MENU':
       return UPDATE_FNS.SHOW_CONTEXT_MENU(action, state)
     case 'DUPLICATE_SPECIFIC_ELEMENTS':
       return UPDATE_FNS.DUPLICATE_SPECIFIC_ELEMENTS(action, state, dispatch)
-    case 'SEND_PREVIEW_MODEL':
-      return UPDATE_FNS.SEND_PREVIEW_MODEL(action, state)
     case 'UPDATE_FILE_PATH':
       return UPDATE_FNS.UPDATE_FILE_PATH(action, state, userState)
     case 'UPDATE_REMIX_ROUTE':
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index f379de57390f..06e57d5b3d14 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -313,7 +313,6 @@ import type {
   EditorStateGoogleFontsResources,
   EditorStateProjectSettings,
   EditorStateTopMenu,
-  EditorStatePreview,
   EditorStateHome,
   FileDeleteModal,
   ModalDialog,
@@ -398,7 +397,6 @@ import {
   editorStateGoogleFontsResources,
   editorStateProjectSettings,
   editorStateTopMenu,
-  editorStatePreview,
   editorStateHome,
   fileDeleteModal,
   fileOverwriteModal,
@@ -4397,15 +4395,6 @@ export const EditorStateTopMenuKeepDeepEquality: KeepDeepEqualityCall<EditorStat
     editorStateTopMenu,
   )
 
-export const EditorStatePreviewKeepDeepEquality: KeepDeepEqualityCall<EditorStatePreview> =
-  combine2EqualityCalls(
-    (preview) => preview.visible,
-    BooleanKeepDeepEquality,
-    (preview) => preview.connected,
-    BooleanKeepDeepEquality,
-    editorStatePreview,
-  )
-
 export const EditorStateHomeKeepDeepEquality: KeepDeepEqualityCall<EditorStateHome> =
   combine1EqualityCall((preview) => preview.visible, BooleanKeepDeepEquality, editorStateHome)
 
@@ -5241,7 +5230,6 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
   )
   const navigatorResults = NavigatorStateKeepDeepEquality(oldValue.navigator, newValue.navigator)
   const topmenuResults = EditorStateTopMenuKeepDeepEquality(oldValue.topmenu, newValue.topmenu)
-  const previewResults = EditorStatePreviewKeepDeepEquality(oldValue.preview, newValue.preview)
   const homeResults = EditorStateHomeKeepDeepEquality(oldValue.home, newValue.home)
   const lastUsedFontResults = nullableDeepEquality(FontSettingsKeepDeepEquality)(
     oldValue.lastUsedFont,
@@ -5436,7 +5424,6 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
     projectSettingsResults.areEqual &&
     navigatorResults.areEqual &&
     topmenuResults.areEqual &&
-    previewResults.areEqual &&
     homeResults.areEqual &&
     lastUsedFontResults.areEqual &&
     modalResults.areEqual &&
@@ -5522,7 +5509,6 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
       projectSettingsResults.value,
       navigatorResults.value,
       topmenuResults.value,
-      previewResults.value,
       homeResults.value,
       lastUsedFontResults.value,
       modalResults.value,
diff --git a/editor/src/components/editor/store/store-hook-substore-helpers.ts b/editor/src/components/editor/store/store-hook-substore-helpers.ts
index 7e41cf6cc104..bd45ce5dd768 100644
--- a/editor/src/components/editor/store/store-hook-substore-helpers.ts
+++ b/editor/src/components/editor/store/store-hook-substore-helpers.ts
@@ -124,10 +124,6 @@ export const EmptyEditorStateForKeysOnly: EditorState = {
     formulaBarMode: 'content',
     formulaBarFocusCounter: 0,
   },
-  preview: {
-    visible: false,
-    connected: false,
-  },
   home: {
     visible: false,
   },
diff --git a/editor/src/components/preview/preview-pane.tsx b/editor/src/components/preview/preview-pane.tsx
deleted file mode 100644
index 18668969db60..000000000000
--- a/editor/src/components/preview/preview-pane.tsx
+++ /dev/null
@@ -1,407 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-import React from 'react'
-import type { DeviceInfo } from '../../common/devices'
-import { deviceInfoList } from '../../common/devices'
-import { BASE_URL, FLOATING_PREVIEW_BASE_URL } from '../../common/env-vars'
-import { Substores, useEditorState } from '../editor/store/store-hook'
-import type { SelectOption } from '../inspector/controls/select-control'
-import type { TextFile } from '../../core/shared/project-file-types'
-import { isTextFile, ProjectContents } from '../../core/shared/project-file-types'
-import { objectKeyParser, parseString } from '../../utils/value-parser-utils'
-import { eitherToMaybe } from '../../core/shared/either'
-import { shareURLForProject } from '../../core/shared/utils'
-import { getMainJSFilename } from '../../core/shared/project-contents-utils'
-import type { ProjectContentTreeRoot } from '../assets'
-import {
-  FlexRow,
-  Button,
-  //TODO: switch to functional component and make use of 'useColorTheme':
-  colorTheme,
-  FlexColumn,
-  UtopiaTheme,
-  SquareButton,
-  LargerIcons,
-  Subdued,
-  PopupList,
-  Icn,
-  UIRow,
-} from '../../uuiui'
-import { setBranchNameFromURL } from '../../utils/branches'
-
-export const PreviewIframeId = 'preview-column-container'
-
-export interface ProjectContentsUpdateMessage {
-  type: 'PROJECT_CONTENTS_UPDATE'
-  projectContents: ProjectContentTreeRoot
-}
-
-export function projectContentsUpdateMessage(
-  projectContents: ProjectContentTreeRoot,
-): ProjectContentsUpdateMessage {
-  return {
-    type: 'PROJECT_CONTENTS_UPDATE',
-    projectContents: projectContents,
-  }
-}
-
-export function isProjectContentsUpdateMessage(
-  data: unknown,
-): data is ProjectContentsUpdateMessage {
-  return (
-    data != null &&
-    typeof data === 'object' &&
-    !Array.isArray(data) &&
-    (data as ProjectContentsUpdateMessage).type === 'PROJECT_CONTENTS_UPDATE'
-  )
-}
-
-interface IntermediatePreviewColumnProps {
-  id: string | null
-  projectName: string
-  connected: boolean
-  packageJSONFile: TextFile | null
-}
-
-export interface PreviewColumnProps {
-  id: string | null
-  projectName: string
-  connected: boolean
-  editedFilename: string | null
-}
-
-export interface PreviewColumnState {
-  selectedBackgroundOptionIndex: number
-  running: boolean
-  useDevice: boolean
-  scale: number
-  selectedScaleOption: number
-  deviceInfo: DeviceInfo
-  rotated: boolean
-  refreshCount: number
-  width: number
-  height: number
-}
-
-export const PreviewColumn = React.memo(() => {
-  const mainJSFilename = useEditorState(
-    Substores.projectContents,
-    (store) => getMainJSFilename(store.editor.projectContents),
-    'PreviewColumn mainJSFilename',
-  )
-  const { id, projectName, connected } = useEditorState(
-    Substores.restOfEditor,
-    (store) => {
-      return {
-        id: store.editor.id,
-        projectName: store.editor.projectName,
-        connected: store.editor.preview.connected,
-      }
-    },
-    'PreviewColumn',
-  )
-  return (
-    <PreviewColumnContent
-      id={id}
-      projectName={projectName}
-      connected={connected}
-      editedFilename={mainJSFilename}
-    />
-  )
-})
-PreviewColumn.displayName = 'PreviewColumn'
-
-class PreviewColumnContent extends React.Component<PreviewColumnProps, PreviewColumnState> {
-  scaleOptions: number[]
-  scaleDropdownOptions: any
-  backgroundOptions: any
-  constructor(props: PreviewColumnProps) {
-    super(props)
-
-    this.scaleOptions = [0.25, 0.5, 0.67, 1, 1.25, 1.5, 2, 3, 4]
-    this.backgroundOptions = [
-      {
-        label: 'White',
-        value: { backgroundColor: '#ffffff' },
-      },
-      {
-        label: 'Checkerboard (light)',
-        value: {
-          backgroundImage:
-            'linear-gradient(45deg, #d4d4d4 25%, transparent 25%), linear-gradient(-45deg, #d4d4d4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d4d4d4 75%), linear-gradient(-45deg, transparent 75%, #d4d4d4 75%)',
-          backgroundSize: '10px 10px',
-          backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0px',
-        },
-      },
-      {
-        label: 'Light Grey',
-        value: { backgroundColor: '#f4f4f4' },
-      },
-      {
-        label: 'Mid Grey',
-        value: { backgroundColor: '#888888' },
-      },
-      { label: 'Dark Grey', value: { backgroundColor: '#333' } },
-      { label: 'Black', value: { backgroundColor: '#000' } },
-    ]
-
-    this.scaleDropdownOptions = this.scaleOptions.map((s) => ({
-      value: s,
-      label: `${Math.round(s * 100)}%`,
-    }))
-
-    this.state = {
-      selectedBackgroundOptionIndex: 0,
-      running: true,
-      useDevice: false,
-      scale: 1,
-      selectedScaleOption: 4,
-      deviceInfo: deviceInfoList.iPhoneXS,
-      rotated: false,
-      refreshCount: 0,
-      width: deviceInfoList.iPhoneXS.width as number,
-      height: deviceInfoList.iPhoneXS.height as number,
-    }
-  }
-
-  scaleDown = () => {
-    this.setState((prevState) => ({ scale: Math.max(0.25, prevState.scale * 0.5) }))
-  }
-
-  scaleUp = () => {
-    this.setState((prevState) => ({ scale: Math.min(8, prevState.scale * 2) }))
-  }
-
-  setSelectedValue = (selectedValue: SelectOption) => this.setState({ scale: selectedValue.value })
-
-  onRestartClick = () => {
-    this.setState((prevState) => ({
-      refreshCount: prevState.refreshCount + 1,
-    }))
-  }
-
-  handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      e.stopPropagation()
-      this.onRestartClick()
-    }
-  }
-
-  toggleRunning = () => {
-    this.setState((prevState) => ({ running: !prevState.running }))
-  }
-
-  render() {
-    const ColorButtonGroup = () => (
-      <FlexRow
-        css={{
-          marginLeft: 4,
-          marginRight: 4,
-          '& > *': {
-            marginRight: 8,
-          },
-        }}
-      >
-        {this.backgroundOptions.map((background: any, i: number) => (
-          <Button
-            key={`colorbutton${i}`}
-            // eslint-disable-next-line react/jsx-no-bind
-            onClick={() => this.setState(() => ({ selectedBackgroundOptionIndex: i }))}
-          >
-            <div
-              style={{
-                width: 18,
-                height: 18,
-                borderRadius: '50%',
-                border:
-                  i === this.state.selectedBackgroundOptionIndex
-                    ? `1px solid ${colorTheme.primary.value}`
-                    : `1px solid ${colorTheme.secondaryBorder.value}`,
-                ...background.value,
-              }}
-            />
-          </Button>
-        ))}
-      </FlexRow>
-    )
-
-    function addInBranchNames(url: string): string {
-      if (url === '') {
-        return url
-      } else {
-        const parsedURL = new URL(url)
-        setBranchNameFromURL(parsedURL.searchParams)
-        return parsedURL.toString()
-      }
-    }
-    let floatingPreviewURL =
-      this.props.id == null
-        ? ''
-        : shareURLForProject(FLOATING_PREVIEW_BASE_URL, this.props.id, this.props.projectName)
-    floatingPreviewURL = addInBranchNames(floatingPreviewURL)
-    let iframePreviewURL =
-      this.props.id == null
-        ? ''
-        : `${floatingPreviewURL}?embedded=true&refreshCount=${this.state.refreshCount}`
-    iframePreviewURL = addInBranchNames(iframePreviewURL)
-    let popoutPreviewURL =
-      this.props.id == null
-        ? ''
-        : shareURLForProject(BASE_URL, this.props.id, this.props.projectName)
-    popoutPreviewURL = addInBranchNames(popoutPreviewURL)
-
-    const iFrame = (
-      <iframe
-        key={PreviewIframeId}
-        id={PreviewIframeId}
-        width={this.state.useDevice ? this.state.width : '100%'}
-        height={this.state.useDevice ? this.state.height : '100%'}
-        src={iframePreviewURL}
-        allow='autoplay'
-        style={{
-          backgroundColor: 'transparent',
-          width: this.state.useDevice ? this.state.width : '100%',
-          height: this.state.useDevice ? this.state.height : '100%',
-          borderWidth: 0,
-          transform: `scale(${this.state.scale})`,
-          transformOrigin: 'top left',
-        }}
-      />
-    )
-
-    return (
-      <FlexColumn
-        style={{
-          height: '100%',
-          overflow: 'scroll',
-        }}
-      >
-        <UIRow
-          rowHeight={'normal'}
-          css={{
-            flexShrink: 0,
-            paddingLeft: 4,
-            paddingRight: 4,
-            overflowX: 'scroll',
-            '& > *': {
-              marginRight: 8,
-            },
-          }}
-        >
-          <SquareButton highlight onClick={this.onRestartClick}>
-            <LargerIcons.Refresh />
-          </SquareButton>
-          <input
-            onKeyPress={this.handleKeyPress}
-            value={popoutPreviewURL}
-            css={{
-              fontSize: 11,
-              borderRadius: '20px',
-              height: 23,
-              fontFamily: 'utopian-inter',
-              transition: 'all .2s ease-in-out',
-              padding: '2px 8px',
-              border: '1px solid transparent',
-              background: colorTheme.secondaryBackground.value,
-              minWidth: 240,
-              '&:focus': {
-                background: 'white',
-                border: `1px solid ${colorTheme.primary.value}`,
-              },
-            }}
-          />
-          {this.props.editedFilename == null ? null : (
-            <Subdued>{this.props.editedFilename}</Subdued>
-          )}
-          <SquareButton highlight onClick={this.toggleRunning}>
-            {this.state.running ? <LargerIcons.StopButton /> : <LargerIcons.PlayButton />}
-          </SquareButton>
-          <a target='_blank' rel='noopener noreferrer' href={floatingPreviewURL}>
-            <SquareButton highlight>
-              <LargerIcons.ExternalLink />
-            </SquareButton>
-          </a>
-        </UIRow>
-        <UIRow
-          className='preview-menu'
-          rowHeight={'normal'}
-          style={{
-            borderBottom: `1px solid ${colorTheme.subduedBorder.value}`,
-            flexShrink: 0,
-            flexGrow: 0,
-          }}
-        >
-          <UIRow
-            rowHeight={'normal'}
-            css={{
-              flexShrink: 0,
-              paddingLeft: 4,
-              paddingRight: 4,
-              overflowX: 'scroll',
-              '& > *': {
-                marginRight: 8,
-              },
-            }}
-          >
-            <SquareButton
-              highlight
-              disabled={!this.state.running || this.state.scale <= 0.25}
-              onMouseUp={this.scaleDown}
-            >
-              <LargerIcons.MagnifyingGlassMinus />
-            </SquareButton>
-            <PopupList
-              style={{ minWidth: 56 }}
-              value={{
-                value: this.state.scale,
-                label: `${Math.round(this.state.scale * 100)}%`,
-              }}
-              onSubmitValue={this.setSelectedValue}
-              options={this.scaleDropdownOptions}
-              containerMode='noBorder'
-            />
-            <SquareButton
-              highlight
-              disabled={!this.state.running || this.state.scale >= 4}
-              onClick={this.scaleUp}
-            >
-              <LargerIcons.MagnifyingGlassPlus />
-            </SquareButton>
-            <LargerIcons.Divider width={5} height={18} style={{ marginLeft: 4, marginRight: 8 }} />
-            <ColorButtonGroup />
-          </UIRow>
-        </UIRow>
-        <FlexRow
-          style={{
-            ...this.backgroundOptions[this.state.selectedBackgroundOptionIndex].value,
-            justifyContent: 'flex-start',
-            alignItems: 'flex-start',
-            flexGrow: 1,
-            flexShrink: 0,
-          }}
-        >
-          {this.state.running ? (
-            iFrame
-          ) : (
-            <FlexColumn
-              style={{
-                justifyContent: 'center',
-                alignItems: 'center',
-                flexGrow: 1,
-                flexShrink: 0,
-                height: '100%',
-                backgroundColor: colorTheme.secondaryBackground.value,
-              }}
-            >
-              <Button onClick={this.toggleRunning} spotlight>
-                <Icn category='semantic' type='playbutton' width={24} height={24} />
-              </Button>
-              <Subdued style={{ marginTop: 8 }}>Start Preview</Subdued>
-            </FlexColumn>
-          )}
-        </FlexRow>
-      </FlexColumn>
-    )
-  }
-}
diff --git a/editor/src/core/shared/redux-devtools.ts b/editor/src/core/shared/redux-devtools.ts
index 851523157c71..41486b19b947 100644
--- a/editor/src/core/shared/redux-devtools.ts
+++ b/editor/src/core/shared/redux-devtools.ts
@@ -131,9 +131,6 @@ export function reduxDevtoolsSendActions(
     const filteredActions = mapDropNulls((action) => {
       switch (action.action) {
         //Actions to be completely omitted from logging to redux devtools, to avoid noise
-        case 'UPDATE_PREVIEW_CONNECTED': {
-          return null
-        }
         // These actions will be logged with all of their payload. Be careful: large payloads choke the Redux Devtool logging
         case 'SELECT_COMPONENTS':
         case 'CREATE_INTERACTION_SESSION':
diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index 0d2aa892c21d..6185db8ee773 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -26,11 +26,6 @@ import { actionActionsOptic, isLoggedIn } from '../components/editor/action-type
 import * as EditorActions from '../components/editor/actions/action-creators'
 import { EditorComponent } from '../components/editor/editor-component'
 import * as History from '../components/editor/history'
-import {
-  InternalPreviewTimeout,
-  previewIsAlive,
-  startPreviewConnectedMonitoring,
-} from '../components/editor/preview-report-handler'
 import {
   getLoginState,
   getUserConfiguration,
@@ -83,7 +78,7 @@ import {
 } from '../components/canvas/ui-jsx-canvas'
 import { foldEither } from '../core/shared/either'
 import { getURLImportDetails, reuploadAssets } from '../core/model/project-import'
-import { isSendPreviewModel, load } from '../components/editor/actions/actions'
+import { load } from '../components/editor/actions/actions'
 import { UtopiaStyles } from '../uuiui'
 import { reduxDevtoolsSendInitialState } from '../core/shared/redux-devtools'
 import type { LoginState } from '../common/user'
@@ -216,8 +211,6 @@ export class Editor {
   domWalkerMutableState: DomWalkerMutableStateData
 
   constructor() {
-    startPreviewConnectedMonitoring(this.boundDispatch)
-
     let emptyEditorState = createEditorState(this.boundDispatch)
     const derivedState = deriveState(
       emptyEditorState,
@@ -232,8 +225,6 @@ export class Editor {
 
     window.addEventListener('blur', this.resetStateOnBlur)
 
-    window.addEventListener('message', this.onMessage)
-
     const watchdogWorker = new RealWatchdogWorker()
 
     const renderRootEditor = () =>
@@ -403,14 +394,6 @@ export class Editor {
     })
   }
 
-  onMessage = (event: MessageEvent): void => {
-    const eventData = event.data
-    if (isSendPreviewModel(eventData)) {
-      previewIsAlive(InternalPreviewTimeout)
-      this.boundDispatch([eventData], 'noone')
-    }
-  }
-
   resetStateOnBlur = (): void => {
     this.boundDispatch(
       [
diff --git a/editor/src/templates/preview/index.html b/editor/src/templates/preview/index.html
deleted file mode 100644
index afc4bfac7977..000000000000
--- a/editor/src/templates/preview/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <!--ogTags-->
-
-    <link
-      rel="preload"
-      type="image/png"
-      href="<%- UTOPIA_DOMAIN %>/editor/pyramid_fullsize@2x.png?hash=<%- UTOPIA_SHA %>"
-      as="image"
-    />
-
-    <!--editorScript-->
-    <% if (VITE) { %>
-    <script defer type="module" src="/preview/preview.tsx"></script>
-    <% } %>
-
-    <!--preloadProjectDependencies-->
-
-    <style>
-      @keyframes animation-keyframes {
-        from {
-          transform: translateX(-212px);
-        }
-        to {
-          transform: translateX(0px);
-        }
-      }
-
-      .animation-progress {
-        animation-name: animation-keyframes;
-        animation-duration: 10s;
-        animation-iteration-count: infinite;
-        animation-direction: alternate;
-      }
-    </style>
-  </head>
-  <body>
-    <!--projectIDScript-->
-    <div id="preview">
-      <!-- loading content-->
-      <div
-        style="
-          position: fixed;
-          left: 0px;
-          top: 0px;
-          bottom: 0px;
-          right: 0px;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          border: 1px solid beige;
-        "
-      >
-        <img
-          src="<%- UTOPIA_DOMAIN %>/editor/pyramid_fullsize@2x.png?hash=<%- UTOPIA_SHA %>"
-          height="128px"
-          alt="Utopia Logo"
-        />
-
-        <div
-          class="progress-bar-shell"
-          style="
-            margin-top: 64px;
-            width: 212px;
-            height: 11px;
-            border: 1px solid black;
-            border-radius: 8px;
-            overflow: hidden;
-            box-sizing: border-box !important;
-          "
-        >
-          <div
-            class="progress-bar-progress animation-progress"
-            style="
-              background-color: black;
-              border-radius: 6px;
-              height: 9px;
-              transform: translateX(-212px);
-            "
-          />
-        </div>
-      </div>
-      <!-- ends loading content-->
-    </div>
-    <div id="preview-ui"></div>
-  </body>
-</html>
diff --git a/editor/src/templates/preview/preview.tsx b/editor/src/templates/preview/preview.tsx
deleted file mode 100644
index c2db43f38fb9..000000000000
--- a/editor/src/templates/preview/preview.tsx
+++ /dev/null
@@ -1,338 +0,0 @@
-import '../../vite-shims'
-import fastDeepEquals from 'fast-deep-equal'
-import * as ReactErrorOverlay from 'react-error-overlay'
-import { BASE_URL, getProjectID, getQueryParam, PREVIEW_IS_EMBEDDED } from '../../common/env-vars'
-import { fetchLocalProject } from '../../common/persistence'
-import type { ProjectContentTreeRoot } from '../../components/assets'
-import { getProjectFileByFilePath } from '../../components/assets'
-import { incorporateBuildResult } from '../../components/custom-code/code-file'
-import { sendPreviewModel } from '../../components/editor/actions/action-creators'
-import { dependenciesWithEditorRequirements } from '../../components/editor/npm-dependency/npm-dependency'
-import { projectIsStoredLocally } from '../../components/editor/persistence/persistence-backend'
-import { loadProject } from '../../components/editor/server'
-import { isProjectContentsUpdateMessage } from '../../components/preview/preview-pane'
-import { createBuiltInDependenciesList } from '../../core/es-modules/package-manager/built-in-dependencies-list'
-import { fetchNodeModules } from '../../core/es-modules/package-manager/fetch-packages'
-import {
-  getRequireFn,
-  ResolvingRemoteDependencyErrorName,
-} from '../../core/es-modules/package-manager/package-manager'
-import { pluck } from '../../core/shared/array-utils'
-import { getMainHTMLFilename, getMainJSFilename } from '../../core/shared/project-contents-utils'
-import type { NodeModules } from '../../core/shared/project-file-types'
-import { isTextFile } from '../../core/shared/project-file-types'
-import { NewBundlerWorker, RealBundlerWorker } from '../../core/workers/bundler-bridge'
-import { createBundle } from '../../core/workers/bundler-promise'
-import Utils from '../../utils/utils'
-
-interface PolledLoadParams {
-  projectId: string
-  onStartLoad: () => void
-  onModelChanged: (model: ProjectContentTreeRoot) => void
-  onModelUnchanged: () => void
-  onError: (error: Error) => void
-}
-
-export async function startPolledLoad({
-  projectId,
-  onStartLoad,
-  onModelChanged,
-  onModelUnchanged,
-  onError,
-}: PolledLoadParams) {
-  let keepPolling = true
-  let isLocal = await projectIsStoredLocally(projectId)
-  let pollInterval = isLocal ? 250 : 1000
-
-  let lastSavedTS: string | null = null
-  let isLoading = false
-
-  const loadServerProject = async () => {
-    if (!isLoading) {
-      isLoading = true
-      onStartLoad()
-      const project = await loadProject(projectId, lastSavedTS)
-      if (project.type === 'ProjectLoaded') {
-        // eslint-disable-next-line require-atomic-updates
-        lastSavedTS = project.modifiedAt
-        onModelChanged(project.content.projectContents)
-      } else if (project.type === 'ProjectUnchanged') {
-        onModelUnchanged()
-      }
-      // eslint-disable-next-line require-atomic-updates
-      isLoading = false
-    }
-  }
-
-  const loadLocalProject = async () => {
-    const project = await fetchLocalProject(projectId)
-    const model = Utils.forceNotNull(`Local project ${projectId} could not be found.`, project)
-      .model.projectContents
-    onModelChanged(model)
-  }
-
-  let intervalHandle: number | null = null
-
-  async function onTimeout() {
-    // eslint-disable-next-line require-atomic-updates
-    isLocal = isLocal && (await projectIsStoredLocally(projectId))
-    pollInterval = isLocal ? 250 : 1000
-
-    const polledLoad = isLocal ? loadLocalProject : loadServerProject
-    try {
-      if (keepPolling) {
-        await polledLoad()
-      } else if (intervalHandle != null) {
-        window.clearInterval(intervalHandle)
-      }
-    } catch (e: any) {
-      onError(e)
-    }
-  }
-  intervalHandle = window.setInterval(onTimeout, pollInterval)
-  void onTimeout()
-}
-
-function addOpenInUtopiaButton(): void {
-  // Avoid doing this in the embedded preview, as it makes
-  // no sense having it in there.
-  if (getQueryParam('embedded') != 'true') {
-    const projectId = getProjectID()
-    if (projectId != null) {
-      const openIcon = document.createElement('img')
-      openIcon.setAttribute('src', `${BASE_URL}open_in_utopia@2x.png`)
-      openIcon.setAttribute('style', 'width: 186px; height: 40px')
-      openIcon.setAttribute('alt', 'Open this project in the Utopia editor')
-
-      const openInUtopiaButton = document.createElement('div')
-      const buttonStyle = [
-        'position: fixed',
-        'right: 20px',
-        'bottom: 20px',
-        'cursor: pointer',
-      ].join('; ')
-      openInUtopiaButton.setAttribute('style', buttonStyle)
-      openInUtopiaButton.setAttribute(
-        'onclick',
-        `window.open('${BASE_URL}project/${projectId}/', 'mywindow')`,
-      )
-
-      openInUtopiaButton.append(openIcon)
-
-      document.body.append(openInUtopiaButton)
-    }
-  }
-}
-
-let lastRenderedModel: ProjectContentTreeRoot | null = null
-let queuedModel: ProjectContentTreeRoot | null = null
-let loadingModel: boolean = false
-let cachedDependencies: NodeModules = {}
-
-const initPreview = () => {
-  loadingModel = false
-  queuedModel = null
-  cachedDependencies = {}
-  const bundlerWorker = new NewBundlerWorker(new RealBundlerWorker())
-  const builtInDependencies = createBuiltInDependenciesList(null)
-
-  const startPollingFromServer = (appID: string | null) => {
-    if (appID != null) {
-      void startPolledLoad({
-        projectId: appID,
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onStartLoad: () => {},
-        onModelChanged: modelUpdated,
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onModelUnchanged: () => {},
-        onError: (error) => {
-          console.error('received error', error, error.message)
-        },
-      })
-    }
-  }
-
-  const modelUpdated = async (model: ProjectContentTreeRoot) => {
-    if (loadingModel) {
-      queuedModel = model
-    } else {
-      renderProject(model)
-    }
-  }
-
-  const handleModelUpdateEvent = (event: MessageEvent) => {
-    // Received a model from the containing page.
-    const eventData = event.data
-    if (isProjectContentsUpdateMessage(eventData)) {
-      void modelUpdated(eventData.projectContents)
-    }
-  }
-
-  const handlePossiblyQueuedModel = () => {
-    if (queuedModel == null) {
-      loadingModel = false
-    } else {
-      renderProject(queuedModel)
-    }
-  }
-
-  const renderProject = (projectContents: ProjectContentTreeRoot): void => {
-    loadingModel = true
-    queuedModel = null
-    void previewRender(projectContents).finally(handlePossiblyQueuedModel)
-  }
-
-  const rerenderPreview = () => {
-    if (lastRenderedModel != null) {
-      void previewRender(lastRenderedModel)
-    }
-  }
-
-  const onRemoteModuleDownload = (moduleDownload: Promise<NodeModules>) => {
-    void moduleDownload.then((downloadedModules: NodeModules) => {
-      // MUTATION
-      Object.assign(cachedDependencies, downloadedModules)
-      rerenderPreview()
-    })
-  }
-
-  const previewRender = async (projectContents: ProjectContentTreeRoot) => {
-    const isRerender = projectContents === lastRenderedModel
-    let nodeModules: NodeModules = {}
-
-    if (isRerender) {
-      nodeModules = { ...cachedDependencies }
-    } else {
-      const lastDependencies =
-        lastRenderedModel == null ? [] : dependenciesWithEditorRequirements(lastRenderedModel)
-      const npmDependencies = dependenciesWithEditorRequirements(projectContents)
-      if (fastDeepEquals(lastDependencies, npmDependencies)) {
-        nodeModules = { ...cachedDependencies }
-      } else {
-        const fetchNodeModulesResult = await fetchNodeModules(
-          npmDependencies,
-          builtInDependencies,
-          true,
-        )
-
-        if (fetchNodeModulesResult.dependenciesWithError.length > 0) {
-          const errorToThrow = Error(
-            `Could not load the following npm dependencies: ${JSON.stringify(
-              pluck(fetchNodeModulesResult.dependenciesWithError, 'name'),
-            )}`,
-          )
-          ReactErrorOverlay.reportRuntimeError(errorToThrow)
-          throw errorToThrow
-        }
-
-        cachedDependencies = {
-          ...cachedDependencies,
-          ...fetchNodeModulesResult.nodeModules,
-        }
-        nodeModules = { ...cachedDependencies }
-      }
-    }
-
-    lastRenderedModel = projectContents
-
-    /**
-     * please note that we are passing in an empty object instead of the .d.ts files
-     * the reason for this is that we only use the bundler as a transpiler here
-     * and we don't care about static type errors
-     *
-     * some libraries, ie Antd have so massive definitions that it took more than 20 seconds
-     * for the bundler to process it, basically with no upside
-     */
-    const emptyTypeDefinitions = {}
-    const bundledProjectFiles = (
-      await createBundle(bundlerWorker, emptyTypeDefinitions, projectContents)
-    ).buildResult
-
-    incorporateBuildResult(nodeModules, projectContents, bundledProjectFiles)
-
-    const requireFn = getRequireFn(
-      onRemoteModuleDownload,
-      projectContents,
-      nodeModules,
-      {},
-      builtInDependencies,
-    )
-
-    // replacing the document body first
-    const previewHTMLFileName = getMainHTMLFilename(projectContents)
-    const previewHTMLFile = getProjectFileByFilePath(projectContents, `/${previewHTMLFileName}`)
-    if (previewHTMLFile != null && isTextFile(previewHTMLFile)) {
-      try {
-        try {
-          ReactErrorOverlay.stopReportingRuntimeErrors()
-        } catch (e) {
-          // we don't care
-        }
-        document.open()
-        document.write(previewHTMLFile.fileContents.code)
-        document.close()
-        addOpenInUtopiaButton()
-        addWindowListeners()
-        ReactErrorOverlay.startReportingRuntimeErrors({})
-      } catch (e) {
-        console.warn(`no body found in html`, e)
-      }
-    }
-
-    const previewJSFileName = getMainJSFilename(projectContents)
-    const previewJSFilePath = `/${previewJSFileName}`
-    const previewJSFile = getProjectFileByFilePath(projectContents, previewJSFilePath)
-    if (previewJSFile != null && isTextFile(previewJSFile)) {
-      if (bundledProjectFiles[previewJSFilePath] == null) {
-        throw new Error(
-          `Error processing the project files: the build result does not contain the preview file: ${previewJSFilePath}`,
-        )
-      } else {
-        try {
-          /**
-           * require the js entry point file which will evaluate the module.
-           * the React entry point js file traditionally has a top level side effect,
-           * calling ReactDOM.render() which starts the Preview app.
-           */
-          requireFn('/', previewJSFilePath)
-        } catch (e: any) {
-          if (e?.name === ResolvingRemoteDependencyErrorName && e?.message != null) {
-            const loadingMessageDiv = document.createElement('div')
-            loadingMessageDiv.innerHTML = e.message
-            const loadingMessageStyle = [
-              `font-family: -apple-system, BlinkMacSystemFont, Helvetica, 'Segoe UI', Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`,
-              'font-size: 11px',
-              'cursor: default',
-            ].join('; ')
-            loadingMessageDiv.setAttribute('style', loadingMessageStyle)
-            document.body.append(loadingMessageDiv)
-          } else {
-            throw e
-          }
-        }
-      }
-    } else {
-      throw new Error(
-        `Error processing the project files: the preview path (${previewJSFilePath}) did not point to a valid file`,
-      )
-    }
-  }
-
-  const addWindowListeners = () => {
-    window.addEventListener('message', handleModelUpdateEvent)
-  }
-
-  const loadPreviewContent = () => {
-    const projectId = getProjectID()
-    addWindowListeners()
-
-    if (PREVIEW_IS_EMBEDDED) {
-      // Tell the editor we'd like to be sent the initial model.
-      window.parent.postMessage(sendPreviewModel(), '*')
-    } else {
-      startPollingFromServer(projectId)
-    }
-  }
-  loadPreviewContent()
-}
-initPreview()
diff --git a/editor/webpack.config.js b/editor/webpack.config.js
index 77c9e4cf1c5f..f0c7d9af5995 100644
--- a/editor/webpack.config.js
+++ b/editor/webpack.config.js
@@ -68,9 +68,6 @@ const config = {
     editor: hot
       ? ['react-hot-loader/patch', './src/templates/editor-entry-point.tsx']
       : './src/templates/editor-entry-point.tsx',
-    preview: hot
-      ? ['react-hot-loader/patch', './src/templates/preview/preview.tsx']
-      : './src/templates/preview/preview.tsx',
   },
 
   output: {
@@ -100,16 +97,6 @@ const config = {
       minify: false,
       templateParameters: htmlTemplateParameters,
     }),
-    new HtmlWebpackPlugin({
-      // Run it again to generate the preview.html
-      chunks: ['preview'],
-      inject: 'head', // Add the script tags to the end of the <head>
-      scriptLoading: 'defer',
-      template: './src/templates/preview/index.html',
-      filename: 'preview/index.html',
-      minify: false,
-      templateParameters: htmlTemplateParameters,
-    }),
     new HtmlWebpackPlugin({
       chunks: [],
       inject: 'head', // Add the script tags to the end of the <head>
diff --git a/website-next/components/common/preview-devices.tsx b/website-next/components/common/preview-devices.tsx
deleted file mode 100644
index 07d035cf5ef0..000000000000
--- a/website-next/components/common/preview-devices.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React from 'react'
-import type { ValueType } from 'react-select'
-import { components } from 'react-select'
-import Select from 'react-select'
-import type { DeviceID } from './devices'
-import { deviceInfoList } from './devices'
-
-export const getDeviceReactSelectOption = (deviceID: DeviceID): DeviceReactSelectOption => {
-  const device = deviceInfoList[deviceID]
-  return {
-    value: deviceID,
-    label: `${device.prettyName}`,
-  }
-}
-
-export type DeviceReactSelectOption = { value: DeviceID; label: string }
-export type DeviceReactSelectList = Array<DeviceReactSelectOption>
-export const deviceReactSelectOptionList: DeviceReactSelectList = (
-  Object.keys(deviceInfoList) as Array<DeviceID>
-).map((value): DeviceReactSelectOption => getDeviceReactSelectOption(value))
-
-interface PreviewReactSelectDeviceSelectorProps {
-  value: DeviceReactSelectOption
-  onChange: (value: DeviceReactSelectOption) => void
-  caratOffset: number
-}
-
-export const PreviewReactSelectDeviceSelector: React.FunctionComponent<
-  React.PropsWithChildren<PreviewReactSelectDeviceSelectorProps>
-> = ({ value, onChange, caratOffset }) => {
-  const PreviewReactSelectSingleValue = (singleValueProps: any) => {
-    return components.SingleValue == null ? null : (
-      <components.SingleValue {...singleValueProps}>
-        <span
-          style={{
-            whiteSpace: 'nowrap',
-            maxWidth: '10em',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            display: 'inline-block',
-            paddingRight: '.3em',
-          }}
-        >
-          {singleValueProps.children}
-        </span>
-        <svg
-          width='9'
-          height='5'
-          viewBox='0 0 9 5'
-          xmlns='http://www.w3.org/2000/svg'
-          style={{
-            position: 'relative',
-            bottom: caratOffset,
-          }}
-        >
-          <path
-            id='dropdown_control'
-            d='M1,1 C5,4.66 3,4.66 7,1'
-            strokeWidth='1'
-            fill='none'
-            stroke='rgb(155, 155, 155)'
-          />
-        </svg>
-      </components.SingleValue>
-    )
-  }
-
-  const selectOnChange = React.useCallback(
-    (newValue: ValueType<DeviceReactSelectOption>) => {
-      if (newValue != null && !Array.isArray(newValue)) {
-        onChange(newValue as DeviceReactSelectOption)
-      }
-    },
-    [onChange],
-  )
-
-  return (
-    <Select
-      className={``}
-      classNamePrefix='preview-lightselect'
-      menuShouldScrollIntoView={true}
-      menuPlacement='auto'
-      value={value}
-      isClearable={false}
-      isSearchable={false}
-      isDisabled={false}
-      components={{ SingleValue: PreviewReactSelectSingleValue }}
-      onChange={selectOnChange}
-      options={deviceReactSelectOptionList}
-      styles={{
-        container: (base: any, state: any) => {
-          return {
-            ...base,
-            backgroundColor: 'transparent',
-            boxShadow: 'none',
-            textAlign: 'left',
-            cursor: 'default',
-          }
-        },
-        menu: (base: any, state: any) => {
-          return {
-            ...base,
-            width: '200px !important',
-            left: -12,
-          }
-        },
-        control: (base: any, state: any) => {
-          return {
-            display: 'inline-block',
-          }
-        },
-        valueContainer: (base: any, state: any) => {
-          return {
-            display: 'inline-block',
-          }
-        },
-        singleValue: (base: any, state: any) => {
-          return {
-            display: 'inline-block',
-            height: 18,
-            position: 'relative',
-          }
-        },
-        indicatorsContainer: () => {
-          return {
-            display: 'none',
-          }
-        },
-      }}
-    />
-  )
-}
-
-type Dimensions = { width: number; height: number }
-
-export const calculatePreviewScale = (
-  viewport: Dimensions,
-  edgePadding: number,
-  sourceWidth: number,
-  sourceHeight: number,
-): number => {
-  const destinationWidth = viewport.width - 2 * edgePadding
-  const destinationHeight = viewport.height - 2 * edgePadding
-
-  if (sourceWidth > 0 && sourceHeight > 0) {
-    const scale = Math.min(destinationWidth / sourceWidth, destinationHeight / sourceHeight)
-    return Math.min(scale, 1)
-  } else {
-    return 1
-  }
-}
diff --git a/website-next/components/preview/preview-page-component.tsx b/website-next/components/preview/preview-page-component.tsx
deleted file mode 100644
index cb002dd4910c..000000000000
--- a/website-next/components/preview/preview-page-component.tsx
+++ /dev/null
@@ -1,335 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import React from 'react'
-import { jsx } from '@emotion/react'
-import { Global } from '@emotion/react'
-import type { DeviceReactSelectOption } from '../common/preview-devices'
-import {
-  PreviewReactSelectDeviceSelector,
-  getDeviceReactSelectOption,
-  calculatePreviewScale,
-} from '../common/preview-devices'
-import type { DeviceInfo } from '../common/devices'
-import { deviceInfoList } from '../common/devices'
-
-export type PreviewWindowProps = {
-  id: string
-}
-
-export type PreviewWindowState = {
-  scale: number
-  scaleToFit: boolean
-  deviceInfo: DeviceInfo
-  width: number
-  height: number
-  fullscreenViewportOverride: boolean
-}
-
-export class PreviewWindow extends React.Component<PreviewWindowProps, PreviewWindowState> {
-  private previewWrapperRef: React.RefObject<HTMLDivElement>
-  private iFrameRef: React.RefObject<HTMLIFrameElement>
-  private edgePaddingSetting = 20
-
-  constructor(props: PreviewWindowProps) {
-    super(props)
-
-    this.previewWrapperRef = React.createRef<HTMLDivElement>()
-    this.iFrameRef = React.createRef<HTMLIFrameElement>()
-
-    this.state = {
-      scale: 1,
-      scaleToFit: true,
-      deviceInfo: deviceInfoList.iPhoneXS,
-      width: deviceInfoList.iPhoneXS.width as number,
-      height: deviceInfoList.iPhoneXS.height as number,
-      fullscreenViewportOverride: false,
-    }
-  }
-
-  shouldBeFullscreen() {
-    // eslint-disable-next-line no-restricted-globals
-    const userAgentIsMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
-    const isBelowThreshold = window.innerWidth <= this.state.width
-    return userAgentIsMobile || isBelowThreshold
-  }
-
-  resizePreviewWindow = () => {
-    if (this.previewWrapperRef.current != null) {
-      const previewWindowDimensions = {
-        width: this.previewWrapperRef.current.clientWidth,
-        height: this.previewWrapperRef.current.clientHeight,
-      }
-      if (this.shouldBeFullscreen()) {
-        this.setState({
-          scale: 1,
-          fullscreenViewportOverride: true,
-        })
-      } else {
-        this.setState((previousState) => {
-          const scale = calculatePreviewScale(
-            previewWindowDimensions,
-            this.edgePaddingSetting,
-            previousState.width,
-            previousState.height,
-          )
-          return {
-            scale,
-            fullscreenViewportOverride: false,
-          }
-        })
-      }
-    }
-  }
-
-  componentDidMount() {
-    if (this.previewWrapperRef.current != null) {
-      this.resizePreviewWindow()
-      window.addEventListener('resize', this.resizePreviewWindow)
-    }
-  }
-
-  onRestartClick = () => {
-    if (this.iFrameRef.current != null && this.iFrameRef.current.contentWindow != null) {
-      this.iFrameRef.current.contentWindow.location.reload()
-    }
-  }
-
-  onDeviceChange = (newValue: DeviceReactSelectOption) => {
-    if (this.previewWrapperRef.current != null) {
-      const newDevice = deviceInfoList[newValue.value]
-      const viewport = {
-        width: this.previewWrapperRef.current.clientWidth,
-        height: this.previewWrapperRef.current.clientHeight,
-      }
-
-      this.setState((previousState) => {
-        const edgePadding = window.innerWidth > previousState.width ? this.edgePaddingSetting : 0
-        return {
-          scale: calculatePreviewScale(
-            viewport,
-            edgePadding,
-            previousState.width,
-            previousState.height,
-          ),
-          deviceInfo: newDevice,
-          width: newDevice.width,
-          height: newDevice.height,
-          fullscreenViewportOverride: false,
-        }
-      })
-    }
-  }
-
-  render() {
-    const TopBarHeight = 44
-
-    let previewBoxShadow: string
-    let previewWrapperAlignItems: string
-    let previewBorderRadius: number
-
-    if (this.state.fullscreenViewportOverride) {
-      previewBoxShadow = ''
-      previewWrapperAlignItems = 'flex-start'
-      previewBorderRadius = 0
-    } else {
-      previewBoxShadow = '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
-      previewWrapperAlignItems = 'center'
-      previewBorderRadius = 4
-    }
-
-    const idString = this.props.id !== '' ? ` (${this.props.id})` : null
-
-    const displayWidth = this.state.fullscreenViewportOverride ? '100%' : this.state.width
-    const displayHeight = this.state.fullscreenViewportOverride ? '100%' : this.state.height
-    const scaledDisplayWidth = this.state.fullscreenViewportOverride
-      ? '100%'
-      : this.state.width * this.state.scale
-    const scaledDisplayHeight = this.state.fullscreenViewportOverride
-      ? '100%'
-      : this.state.height * this.state.scale
-
-    return (
-      <React.Fragment>
-        <Global
-          styles={{
-            html: {
-              height: '100%',
-            },
-            body: {
-              margin: 0,
-              height: '100%',
-              overflow: 'hidden',
-            },
-            '@media screen and (max-width: 425px)': {
-              '.preview-topbar': {
-                display: 'none !important',
-              },
-            },
-          }}
-        />
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            height: '100%',
-          }}
-        >
-          <div
-            className='preview-topbar'
-            css={{
-              backgroundColor: '#F5F5F5',
-              height: TopBarHeight,
-              width: '100%',
-              boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              fontFamily:
-                '-apple-system, BlinkMacSystemFont, Helvetica, "Segoe UI", Roboto,  Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-              fontSize: 12,
-              lineHeight: '18px',
-            }}
-          >
-            <div
-              style={{
-                margin: '0 5px',
-              }}
-            >
-              Untitled{idString}
-            </div>
-            <div
-              style={{
-                margin: '0 5px',
-                opacity: 0.25,
-              }}
-            >
-              |
-            </div>
-            <div
-              style={{
-                margin: '0 5px',
-                display: 'block',
-                textAlign: 'center',
-                height: 18,
-              }}
-            >
-              <img
-                src='/editor/icons/icon-preview-rotatePreview-vertical-gray-18x18@2x.png'
-                width={18}
-                height={18}
-                style={{
-                  marginRight: 5,
-                }}
-              />
-              <div
-                style={{
-                  display: 'inline-block',
-                  height: 18,
-                }}
-              >
-                {
-                  <PreviewReactSelectDeviceSelector
-                    value={getDeviceReactSelectOption(this.state.deviceInfo.id)}
-                    onChange={this.onDeviceChange}
-                    caratOffset={7}
-                  />
-                }
-              </div>
-            </div>
-            <div
-              style={{
-                margin: '0 5px',
-                opacity: 0.25,
-              }}
-            >
-              |
-            </div>
-            <div
-              style={{
-                margin: '0 5px',
-                textAlign: 'center',
-              }}
-            >
-              Scale{' '}
-              {this.state.scale != null ? `(${Number((this.state.scale * 100).toFixed(2))}%)` : ''}
-            </div>
-            <div
-              style={{
-                margin: '0 5px',
-                opacity: 0.25,
-              }}
-            >
-              |
-            </div>
-            <div
-              style={{
-                margin: '0 5px',
-              }}
-            >
-              <img
-                onClick={this.onRestartClick}
-                src='/editor/icons/icon-preview-restart-gray-18x18@2x.png'
-                width={18}
-                height={18}
-                style={{
-                  position: 'relative',
-                  top: 3,
-                }}
-              />
-            </div>
-          </div>
-          <div
-            ref={this.previewWrapperRef}
-            className='preview-wrapper'
-            style={{
-              display: 'flex',
-              flex: 1,
-              width: '100%',
-              height: '100%',
-              alignItems: previewWrapperAlignItems,
-              justifyContent: 'center',
-              overflow: 'hidden',
-            }}
-          >
-            {!(this.state.scale != null) ? null : (
-              <div
-                className='preview-box'
-                style={{
-                  width: scaledDisplayWidth,
-                  height: scaledDisplayHeight,
-                  backgroundColor: '#d6d6d6',
-                }}
-              >
-                <iframe
-                  ref={this.iFrameRef}
-                  width={displayWidth}
-                  height={displayHeight}
-                  src={`/share/${this.props.id}/`}
-                  allow='autoplay'
-                  style={{
-                    width: displayWidth,
-                    height: displayHeight,
-                    borderWidth: 0,
-                    borderRadius: previewBorderRadius,
-                    boxShadow: previewBoxShadow,
-                    zoom: this.state.scale,
-                    transformOrigin: 'top left',
-                  }}
-                />
-              </div>
-            )}
-          </div>
-        </div>
-      </React.Fragment>
-    )
-  }
-}
-
-export function PreviewPage({ projectId }: { projectId?: string }) {
-  if (projectId != null) {
-    return <PreviewWindow id={projectId} />
-  } else {
-    return null
-  }
-}
diff --git a/website-next/pages/preview/[id].tsx b/website-next/pages/preview/[id].tsx
deleted file mode 100644
index 8b1514d8847e..000000000000
--- a/website-next/pages/preview/[id].tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-import { useRouter } from 'next/router'
-import { PreviewPage } from '../../components/preview/preview-page-component'
-
-export default function Preview() {
-  const router = useRouter()
-  const { id } = router.query
-
-  const projectId = Array.isArray(id) ? id[0] : id
-
-  return <PreviewPage projectId={projectId} />
-}

From 41537c1552ba378395670a3d8d0c61f395ffa425 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 1 Oct 2024 16:36:38 +0200
Subject: [PATCH 067/272] Don't show active alignment for flow elements, grey
 out XY controls for grid/flex children (#6433)

**Problem:**

1. Alignment controls should not look active for flow elements
2. XY controls should be greyed out for flex/grid children

**Fix:**

Do that.

Fixes #6431 #6432
---
 .../inspector/alignment-buttons.tsx           |  8 +++++
 .../frame-updating-layout-section.tsx         | 10 ++++++
 ...performance-regression-tests.spec.tsx.snap | 32 -------------------
 .../performance-regression-tests.spec.tsx     |  8 ++---
 4 files changed, 22 insertions(+), 36 deletions(-)

diff --git a/editor/src/components/inspector/alignment-buttons.tsx b/editor/src/components/inspector/alignment-buttons.tsx
index b99efdfd7de9..b3c9c51d4d73 100644
--- a/editor/src/components/inspector/alignment-buttons.tsx
+++ b/editor/src/components/inspector/alignment-buttons.tsx
@@ -252,6 +252,14 @@ function useActiveAlignments(): ActiveAlignments {
       if (selectedViews.current.length === 0) {
         return false
       }
+
+      // Only flex/grid children can have active alignments, because they would mean nothing for flow elements.
+      if (
+        !selectedViews.current.every((view) => MetadataUtils.isFlexOrGridChild(jsxMetadata, view))
+      ) {
+        return false
+      }
+
       return selectedViews.current.every((view) => {
         const isFlexOrGridChild = MetadataUtils.isFlexOrGridChild(jsxMetadata, view)
         const { align, justify } = MetadataUtils.getRelativeAlignJustify(jsxMetadata, view)
diff --git a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
index 794b24cbe1d9..92d1aaa6f306 100644
--- a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
+++ b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
@@ -285,6 +285,12 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
     [dispatch, metadataRef, originalGlobalFrame, projectContentsRef, selectedViewsRef],
   )
 
+  const disableXYControls = React.useMemo(() => {
+    return selectedViewsRef.current.some((view) =>
+      MetadataUtils.isFlexOrGridChild(metadataRef.current, view),
+    )
+  }, [selectedViewsRef, metadataRef])
+
   return (
     <>
       <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
@@ -294,6 +300,7 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
           updateFrame={updateFrame}
           currentValues={originalLTWHValues.left}
           invalid={invalidPins.left || invalidPins.right} // currently showing red for BOTH directions
+          disabled={disableXYControls}
         />
         <FrameUpdatingLayoutControl
           property='top'
@@ -301,6 +308,7 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
           updateFrame={updateFrame}
           currentValues={originalLTWHValues.top}
           invalid={invalidPins.top || invalidPins.bottom} // currently showing red for BOTH directions
+          disabled={disableXYControls}
         />
       </UIGridRow>
       <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
@@ -363,6 +371,7 @@ interface LayoutPinPropertyControlProps {
   currentValues: Array<number>
   updateFrame: (frameUpdate: FrameUpdate, transient: boolean) => void
   invalid?: boolean
+  disabled?: boolean
 }
 
 function getSingleCommonValue(currentValues: Array<number>): number | null {
@@ -449,6 +458,7 @@ const FrameUpdatingLayoutControl = React.memo((props: LayoutPinPropertyControlPr
         defaultUnitToHide={'px'}
         stepSize={1}
         innerLabel={props.label}
+        style={{ opacity: props.disabled ? 0.5 : 1 }}
       />
     </InspectorContextMenuWrapper>
   )
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 8f9197517fbc..3ad187ea0f3f 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -385,14 +385,6 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
@@ -1111,14 +1103,6 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
@@ -2001,14 +1985,6 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
@@ -3050,14 +3026,6 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-unset'",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)(Separator)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index b5f21e06e6c8..0398f133d305 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`864`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`856`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1116`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1108`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`657`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`649`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`782`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`774`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })

From 2d558b0a8488fdad783c32cb7c5000758394005b Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Tue, 1 Oct 2024 17:59:00 +0200
Subject: [PATCH 068/272] Draw-to-insert to grid cell should not be absolute
 (#6442)

**Problem:**
Draw to insert into a grid cell should just define the size of the
inserted element, but not the position.

**Fix:**
Made draw-to-insert similar to click-to-insert

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../draw-to-insert-strategy.spec.browser2.tsx  | 12 ++++++------
 .../grid-draw-to-insert-strategy.tsx           | 18 ++----------------
 2 files changed, 8 insertions(+), 22 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
index af5ab649508d..9c26194be566 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
@@ -324,9 +324,9 @@ export var storyboard = (
         gridColumn: '2',
         gridRow: '1',
         height: '60px',
-        left: '84px',
-        position: 'absolute',
-        top: '151px',
+        left: '',
+        position: '',
+        top: '',
         width: '40px',
       })
     })
@@ -371,9 +371,9 @@ export var storyboard = (
         gridColumn: '1',
         gridRow: '1',
         height: '30px',
-        left: '126px',
-        position: 'absolute',
-        top: '76px',
+        left: '',
+        position: '',
+        top: '',
         width: '20px',
       })
     })
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index 7036621bc9c1..50965cc71a8e 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -47,6 +47,7 @@ import { setGridPropsCommands } from './grid-helpers'
 import { newReparentSubjects } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentTargetUnified } from './reparent-helpers/reparent-strategy-parent-lookup'
 import { getGridCellUnderMouseFromMetadata } from './grid-cell-bounds'
+import { nukeAllAbsolutePositioningPropsCommands } from '../../../inspector/inspector-common'
 
 export const gridDrawToInsertText: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -211,25 +212,10 @@ const gridDrawToInsertStrategyInner =
             ? []
             : getWrappingCommands(insertedElementPath, maybeWrapperWithUid)
 
-        const isClick = interactionData.type === 'DRAG' && interactionData.drag == null
-
-        // for click-to-insert, don't use absolute positioning
-        const clickToInsertCommands = isClick
-          ? [
-              deleteProperties('always', insertedElementPath, [
-                PP.create('style', 'position'),
-                PP.create('style', 'top'),
-                PP.create('style', 'left'),
-                PP.create('style', 'bottom'),
-                PP.create('style', 'right'),
-              ]),
-            ]
-          : []
-
         return strategyApplicationResult(
           [
             insertionCommand,
-            ...clickToInsertCommands,
+            ...nukeAllAbsolutePositioningPropsCommands(insertedElementPath), // do not use absolute positioning in grid cells
             ...setGridPropsCommands(insertedElementPath, gridTemplate, {
               gridRowStart: { numericalPosition: gridCellCoordinates.row },
               gridColumnStart: { numericalPosition: gridCellCoordinates.column },

From 9dc2fa3ce419452ffc4bd5b4d14eebb1ed392710 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Wed, 2 Oct 2024 10:09:49 +0200
Subject: [PATCH 069/272] Specify elements to rerender in grid strategies
 (#6443)

## Problem
The grid strategies opt to rerender all elements in their strategy
result, which is adds a performance penalty.

## Fix
Only re-render the elements affected by a given strategy
---
 .../strategies/grid-draw-to-insert-strategy.tsx           | 5 +----
 .../strategies/grid-rearrange-keyboard-strategy.ts        | 5 +----
 .../strategies/grid-rearrange-move-strategy.ts            | 5 +----
 .../strategies/grid-resize-element-strategy.ts            | 5 +----
 .../strategies/rearrange-grid-swap-strategy.ts            | 8 +-------
 .../canvas-strategies/strategies/resize-grid-strategy.ts  | 5 +----
 .../strategies/set-grid-gap-strategy.tsx                  | 5 +----
 7 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index 50965cc71a8e..8846b941cb08 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -245,10 +245,7 @@ const gridDrawToInsertStrategyInner =
                 : null,
             ]),
           ],
-          // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-          // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-          // appropriate to this particular case.
-          'rerender-all-elements',
+          [targetParent],
           {
             strategyGeneratedUidsCache: {
               [insertionSubject.uid]: maybeWrapperWithUid?.uid,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
index 2b34b4cddc36..082370c9d723 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
@@ -133,10 +133,7 @@ export function gridRearrangeResizeKeyboardStrategy(
           gridRowStart,
           gridRowEnd,
         }),
-        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-        // appropriate to this particular case.
-        'rerender-all-elements',
+        [parentGridPath],
       )
     },
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index c9ab491743f1..f3bc35a2a0a9 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -155,10 +155,7 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
 
       return strategyApplicationResult(
         [...midInteractionCommands, ...onCompleteCommands, ...commands],
-        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-        // appropriate to this particular case.
-        'rerender-all-elements',
+        [parentGridPath],
         patch,
       )
     },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index daa9996bc207..c3324fbacabc 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -138,10 +138,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
 
       return strategyApplicationResult(
         setGridPropsCommands(selectedElement, gridTemplate, gridPropsWithDragOver(gridProps)),
-        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-        // appropriate to this particular case.
-        'rerender-all-elements',
+        [parentGridPath],
         {
           grid: { ...customState.grid, targetCellData: targetCell },
         },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
index ef9bf83e2afe..c11d53c4b6d1 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
@@ -121,13 +121,7 @@ export const rearrangeGridSwapStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
-      return strategyApplicationResult(
-        commands,
-        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-        // appropriate to this particular case.
-        'rerender-all-elements',
-      )
+      return strategyApplicationResult(commands, [EP.parentPath(selectedElement)])
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index 6a0d12b74acc..ae80e5b24252 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -118,10 +118,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       }
 
       if (!canResizeGridTemplate(originalValues)) {
-        return strategyApplicationResult(
-          [setCursorCommand(CSSCursor.NotPermitted)],
-          'rerender-all-elements',
-        )
+        return strategyApplicationResult([setCursorCommand(CSSCursor.NotPermitted)], [])
       }
 
       const expandedOriginalValues = expandGridDimensions(originalValues.dimensions)
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
index cb2afe25f6de..9b9b5d2b3ef5 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
@@ -173,10 +173,7 @@ export const setGridGapStrategy: CanvasStrategyFactory = (
       if (shouldTearOffGapByAxis) {
         return strategyApplicationResult(
           [deleteProperties('always', selectedElement, [axisStyleProp])],
-          // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-          // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-          // appropriate to this particular case.
-          'rerender-all-elements',
+          selectedElements,
         )
       }
 

From 9d2f887c79a4a0aac38bf1efce897ed7491534d4 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 2 Oct 2024 10:56:54 +0200
Subject: [PATCH 070/272] Dom sampler measures grid placeholders to store grid
 cell global frames (#6410)

**Problem:**
Setting `justifyContent` or `alignContent` etc properties is not
reflected in the calculated grid cell bounds (and that ruins most grid
interactions and controls).

**Fix:**
So it turned out that calculating the grid cell bounds from the
computedStyle is just too complicated and error prone. Calculating the
grid cell width/height is easy, but to get the position we would need to
reimplement some of the grid layouting algorithm of the browser.
The solution is to go back to measure the placeholders of the grid
control in the DOM, but let's do it in the dom sampler, and save the
measurements in the metadata. This way we can keep the advantages of the
domquery -> metadata refactor (because all strategies and controls still
use the metadata to get the cell bounds), but we can still rely on the
precise dom measurements. Using the dom api is fine, because we keep it
inside the dom sampler which does dom measurements anyway.

This solution needs 2 extra hacks to work properly:

- sometimes the grid controls are not on the screen when an interaction
starts. In these cases the startingMetadata does not contain the grid
cell bounds. As a workaround I wrote a helper which gets the bounds from
either the startingMetadata or the latestMetadata, and stores it in the
custom strategy state. So in these grid strategies we don't really use
the startingMetadata, but the first metadata which already contains the
grid bounds.

- the grid cells are measured on the grid controls, but the controls
render later than then canvas. First canvas store is flushed, then the
dom sampler runs, then the editor store is flushed and the controls are
rendered. This order is important, because the controls rely on the
metadata produced by the dom sampler. This means that after certain
changes (e.g. a zoom in) the grid controls are outdated when the dom
sampler runs, and we can't measure the correct cell bounds. To
circumvent this, I added an observer to the grid controls, which
triggers another dom sampling after a grid control change.

**Commit Details:**

- Introduced new field `gridCellGlobalFrames` in
`specialSizeMeasurements`
- Filling in `gridCellGlobalFrames` in `getSpecialMeasurements` by
finding the grid placeholders in the canvas control.
- Removed `getGlobalFramesOfGridCells`, because it would just need to
return `specialSizeMeasurements.gridCellGlobalFrames`
- Introduced `getMetadataWithGridCellBounds` which gets the metadata
either from startingMetadata or latestMetadada, and chooses the one with
grid cell bounds in it (if possible)
- Added new observer to `DomWalkerMutableState` called
`gridControlObserver`
- Added a parameter to `runDOMWalker` action which makes it possible to
restrict the dom sampler run to a given array of element paths
(necessary so we can trigger a dom walker run only on the grid).

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../ui-jsx-canvas-bugs.spec.tsx.snap          |   2 +
 .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 257 ++++++++++++++++
 .../canvas-strategy-types.ts                  |   7 +-
 .../strategies/grid-cell-bounds.ts            |  12 +-
 .../grid-draw-to-insert-strategy.tsx          |  45 ++-
 .../strategies/grid-helpers.spec.browser2.tsx | 262 ----------------
 .../strategies/grid-helpers.ts                | 112 ++++---
 .../grid-rearrange-move-duplicate-strategy.ts |   1 +
 ...-rearrange-move-strategy.spec.browser2.tsx |  21 ++
 .../grid-rearrange-move-strategy.ts           |   2 +
 ...grid-reparent-strategies.spec.browser2.tsx |  61 +++-
 .../strategies/grid-reparent-strategy.tsx     |  41 ++-
 ...-resize-element-strategy.spec.browser2.tsx |   3 +
 .../canvas/controls/grid-controls.tsx         |   7 +-
 .../select-mode/select-mode-hooks.tsx         |   2 +-
 .../canvas/dom-sampler.spec.browser2.tsx      | 279 +++++++++++++++++-
 editor/src/components/canvas/dom-walker.ts    | 118 +++++++-
 .../canvas/editor-dispatch-flow.tsx           |  12 +-
 editor/src/components/canvas/gap-utils.ts     |   3 +-
 .../remix/remix-error-handling.test-utils.tsx |   2 +-
 .../remix/remix-navigator.spec.browser2.tsx   |   2 +-
 .../remix/remix-rendering.spec.browser2.tsx   |   6 +-
 editor/src/components/editor/action-types.ts  |   1 +
 .../editor/actions/action-creators.ts         |   3 +-
 .../remix-navigation-bar.spec.browser2.tsx    |   2 +-
 .../editor/store/dispatch-strategies.spec.tsx |   8 +
 .../store-deep-equality-instances-3.spec.ts   |   7 +
 .../store/store-deep-equality-instances.ts    |   1 +
 .../left-pane/settings-pane.spec.browser2.tsx |   2 +-
 editor/src/core/shared/element-template.ts    |   4 +
 editor/src/templates/editor.tsx               |  71 ++++-
 31 files changed, 953 insertions(+), 403 deletions(-)
 delete mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.spec.browser2.tsx

diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
index c0e3d91a1384..e945250df896 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
@@ -209,6 +209,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -358,6 +359,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
index 0e6854cbdb80..1bfd4ad728a5 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
@@ -250,6 +250,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -422,6 +423,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -889,6 +891,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -1205,6 +1208,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -1376,6 +1380,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -1547,6 +1552,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -1718,6 +1724,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -1994,6 +2001,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -2166,6 +2174,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -2444,6 +2453,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -2719,6 +2729,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -2891,6 +2902,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -3043,6 +3055,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -3336,6 +3349,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -3508,6 +3522,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -3887,6 +3902,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -4232,6 +4248,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -4432,6 +4449,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -4598,6 +4616,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -4798,6 +4817,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -4964,6 +4984,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -5164,6 +5185,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -5330,6 +5352,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -5674,6 +5697,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -5846,6 +5870,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -6446,6 +6471,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -7012,6 +7038,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -7418,6 +7445,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -7790,6 +7818,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -8010,6 +8039,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -8196,6 +8226,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -8416,6 +8447,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -8602,6 +8634,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -8822,6 +8855,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -9008,6 +9042,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -9414,6 +9449,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -9786,6 +9822,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -10006,6 +10043,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -10192,6 +10230,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -10412,6 +10451,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -10598,6 +10638,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -10818,6 +10859,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -11004,6 +11046,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -11410,6 +11453,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -11782,6 +11826,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -12002,6 +12047,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -12188,6 +12234,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -12408,6 +12455,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -12594,6 +12642,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -12814,6 +12863,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -13000,6 +13050,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -13287,6 +13338,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -13459,6 +13511,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -13672,6 +13725,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -13825,6 +13879,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -13978,6 +14033,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -14253,6 +14309,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -14425,6 +14482,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -14690,6 +14748,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -14983,6 +15042,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -15155,6 +15215,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -15551,6 +15612,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -15912,6 +15974,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -16132,6 +16195,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -16352,6 +16416,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -16572,6 +16637,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -16865,6 +16931,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -17037,6 +17104,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -17433,6 +17501,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -17794,6 +17863,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -18014,6 +18084,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -18234,6 +18305,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -18454,6 +18526,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -18741,6 +18814,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -18913,6 +18987,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -19126,6 +19201,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -19279,6 +19355,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -19432,6 +19509,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -19719,6 +19797,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -19891,6 +19970,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -20209,6 +20289,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -20493,6 +20574,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -20647,6 +20729,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -20801,6 +20884,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -21104,6 +21188,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -21291,6 +21376,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -21757,6 +21843,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -22042,6 +22129,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -22344,6 +22432,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -22531,6 +22620,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -22997,6 +23087,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -23282,6 +23373,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -23585,6 +23677,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -23772,6 +23865,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -24289,6 +24383,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -24625,6 +24720,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -24928,6 +25024,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -25115,6 +25212,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -25632,6 +25730,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -25968,6 +26067,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -26242,6 +26342,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -26414,6 +26515,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -26566,6 +26668,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -26963,6 +27066,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -27135,6 +27239,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -29065,6 +29170,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -30541,6 +30647,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -31983,6 +32090,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -32607,6 +32715,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -32959,6 +33068,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -33583,6 +33693,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -33935,6 +34046,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -34559,6 +34671,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -34911,6 +35024,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -35573,6 +35687,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -35967,6 +36082,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -36629,6 +36745,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -37023,6 +37140,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -37685,6 +37803,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -38079,6 +38198,7 @@ export var storyboard = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -38376,6 +38496,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -38548,6 +38669,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -38795,6 +38917,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -38965,6 +39088,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -39135,6 +39259,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -39411,6 +39536,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -39583,6 +39709,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -39802,6 +39929,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -40077,6 +40205,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -40249,6 +40378,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -40572,6 +40702,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -40893,6 +41024,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -41065,6 +41197,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -41345,6 +41478,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -41574,6 +41708,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -41752,6 +41887,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -42055,6 +42191,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -42242,6 +42379,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -42599,6 +42737,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -42778,6 +42917,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -43234,6 +43374,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -43421,6 +43562,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -43780,6 +43922,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -43959,6 +44102,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -44346,6 +44490,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -44517,6 +44662,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -45313,6 +45459,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -45467,6 +45614,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -45621,6 +45769,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -45775,6 +45924,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -45931,6 +46081,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -46085,6 +46236,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -46239,6 +46391,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -46393,6 +46546,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -46615,6 +46769,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -46798,6 +46953,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -46954,6 +47110,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -47108,6 +47265,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -47262,6 +47420,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -47416,6 +47575,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -47570,6 +47730,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -47724,6 +47885,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -47878,6 +48040,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -48032,6 +48195,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -48186,6 +48350,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -48340,6 +48505,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -48494,6 +48660,7 @@ export var App = (props) => {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -48787,6 +48954,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -48959,6 +49127,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -49355,6 +49524,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -49716,6 +49886,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -49936,6 +50107,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -50156,6 +50328,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -50376,6 +50549,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -50669,6 +50843,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -50841,6 +51016,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -51236,6 +51412,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -51596,6 +51773,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -51816,6 +51994,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -52036,6 +52215,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -52256,6 +52436,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -52549,6 +52730,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -52721,6 +52903,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -53160,6 +53343,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -53564,6 +53748,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -53784,6 +53969,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -54004,6 +54190,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -54224,6 +54411,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -54523,6 +54711,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -54710,6 +54899,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -54976,6 +55166,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -55155,6 +55346,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -55432,6 +55624,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -55581,6 +55774,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -55778,6 +55972,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -55937,6 +56132,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -56096,6 +56292,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -56360,6 +56557,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -56509,6 +56707,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -56764,6 +56963,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -56961,6 +57161,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -57121,6 +57322,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -57373,6 +57575,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -57522,6 +57725,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -57787,6 +57991,7 @@ export var storyboard = (
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -57961,6 +58166,7 @@ export var storyboard = (
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -58213,6 +58419,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -58362,6 +58569,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -58514,6 +58722,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -58774,6 +58983,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -58923,6 +59133,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -59153,6 +59364,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -59332,6 +59544,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -59586,6 +59799,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -59735,6 +59949,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -60062,6 +60277,7 @@ export var storyboard = (
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -60255,6 +60471,7 @@ export var storyboard = (
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -60448,6 +60665,7 @@ export var storyboard = (
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -60701,6 +60919,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -60850,6 +61069,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -61019,6 +61239,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -61317,6 +61538,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -61489,6 +61711,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -61998,6 +62221,7 @@ export var storyboard = (
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -62157,6 +62381,7 @@ export var storyboard = (
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -62430,6 +62655,7 @@ export var storyboard = (
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -62701,6 +62927,7 @@ export var storyboard = (
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -62896,6 +63123,7 @@ export var storyboard = (
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -63089,6 +63317,7 @@ export var storyboard = (
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -63369,6 +63598,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -63541,6 +63771,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -63742,6 +63973,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -63912,6 +64144,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -64190,6 +64423,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -64362,6 +64596,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -64514,6 +64749,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -64822,6 +65058,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -64994,6 +65231,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -65415,6 +65653,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -65801,6 +66040,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -66035,6 +66275,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -66239,6 +66480,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -66409,6 +66651,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -66643,6 +66886,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -66847,6 +67091,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -67017,6 +67262,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -67251,6 +67497,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -67455,6 +67702,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -67625,6 +67873,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -67902,6 +68151,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -68074,6 +68324,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -68226,6 +68477,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -68513,6 +68765,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -68685,6 +68938,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -68905,6 +69159,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -69095,6 +69350,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
@@ -69255,6 +69511,7 @@ Object {
       "gap": null,
       "globalContentBoxForChildren": null,
       "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
       "hasPositionOffset": false,
       "hasTransform": false,
       "htmlElementName": "div",
diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
index 4a0686b16e2c..cbf09892f86c 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
@@ -1,7 +1,10 @@
 import React from 'react'
 import type { BuiltInDependencies } from '../../../core/es-modules/package-manager/built-in-dependencies-list'
 import type { ElementPathTrees } from '../../../core/shared/element-path-tree'
-import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template'
+import type {
+  ElementInstanceMetadata,
+  ElementInstanceMetadataMap,
+} from '../../../core/shared/element-template'
 import type { CanvasVector } from '../../../core/shared/math-utils'
 import type { ElementPath, NodeModules } from '../../../core/shared/project-file-types'
 import type { ProjectContentTreeRoot } from '../../assets'
@@ -30,6 +33,7 @@ export type GridCustomStrategyState = {
   draggingFromCell: GridCellCoordinates | null
   originalRootCell: GridCellCoordinates | null
   currentRootCell: GridCellCoordinates | null
+  metadataCacheForGrids: { [gridPath: string]: ElementInstanceMetadata }
 }
 
 export type CustomStrategyStatePatch = Partial<CustomStrategyState>
@@ -47,6 +51,7 @@ export function defaultCustomStrategyState(): CustomStrategyState {
       draggingFromCell: null,
       originalRootCell: null,
       currentRootCell: null,
+      metadataCacheForGrids: {},
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
index f90d461ddae0..29f819d35a98 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -4,14 +4,10 @@ import {
   canvasPoint,
   isInfinityRectangle,
   offsetPoint,
-  rectContainsPoint,
+  rectContainsPointInclusive,
 } from '../../../../core/shared/math-utils'
 import * as EP from '../../../../core/shared/element-path'
-import {
-  getGlobalFramesOfGridCells,
-  type GridCellGlobalFrames,
-  type TargetGridCellData,
-} from './grid-helpers'
+import { type GridCellGlobalFrames, type TargetGridCellData } from './grid-helpers'
 import type { CanvasPoint } from '../../../../core/shared/math-utils'
 
 export type GridCellCoordinates = { row: number; column: number }
@@ -34,7 +30,7 @@ export function getGridCellUnderMouseFromMetadata(
   grid: ElementInstanceMetadata,
   point: CanvasPoint,
 ): TargetGridCellData | null {
-  const gridCellGlobalFrames = getGlobalFramesOfGridCells(grid)
+  const gridCellGlobalFrames = grid.specialSizeMeasurements.gridCellGlobalFrames
 
   if (gridCellGlobalFrames == null) {
     return null
@@ -50,7 +46,7 @@ function getGridCellUnderPoint(
 ): TargetGridCellData | null {
   for (let i = 0; i < gridCellGlobalFrames.length; i++) {
     for (let j = 0; j < gridCellGlobalFrames[i].length; j++) {
-      if (rectContainsPoint(gridCellGlobalFrames[i][j], point)) {
+      if (rectContainsPointInclusive(gridCellGlobalFrames[i][j], point)) {
         return {
           gridCellCoordinates: gridCellCoordinates(i + 1, j + 1),
           cellCanvasRectangle: gridCellGlobalFrames[i][j],
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index 8846b941cb08..1e1ed0429722 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -43,7 +43,7 @@ import {
   getStyleAttributesForFrameInAbsolutePosition,
   updateInsertionSubjectWithAttributes,
 } from './draw-to-insert-metastrategy'
-import { setGridPropsCommands } from './grid-helpers'
+import { getMetadataWithGridCellBounds, setGridPropsCommands } from './grid-helpers'
 import { newReparentSubjects } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentTargetUnified } from './reparent-helpers/reparent-strategy-parent-lookup'
 import { getGridCellUnderMouseFromMetadata } from './grid-cell-bounds'
@@ -132,9 +132,11 @@ const gridDrawToInsertStrategyInner =
       canvasState.propertyControlsInfo,
     )?.newParent.intendedParentPath
 
-    const parent = MetadataUtils.findElementByElementPath(
-      canvasState.startingMetadata,
+    const { metadata: parent, foundIn } = getMetadataWithGridCellBounds(
       targetParent,
+      canvasState.startingMetadata,
+      interactionSession.latestMetadata,
+      customStrategyState,
     )
 
     if (targetParent == null || parent == null || !MetadataUtils.isGridLayoutedContainer(parent)) {
@@ -158,6 +160,32 @@ const gridDrawToInsertStrategyInner =
         const newTargetCell = getGridCellUnderMouseFromMetadata(parent, canvasPointToUse)
 
         if (strategyLifecycle === 'mid-interaction' && interactionData.type === 'HOVER') {
+          const customStatePatch =
+            foundIn === 'latestMetadata'
+              ? {
+                  ...customStrategyState,
+                  grid: {
+                    ...customStrategyState.grid,
+                    // this is added here during the hover interaction so that
+                    // `GridControls` can render the hover highlight based on the
+                    // coordinates in `targetCellData`
+                    targetCellData: newTargetCell ?? customStrategyState.grid.targetCellData,
+                    metadataCacheForGrids: {
+                      ...customStrategyState.grid.metadataCacheForGrids,
+                      [EP.toString(targetParent)]: parent,
+                    },
+                  },
+                }
+              : {
+                  ...customStrategyState,
+                  grid: {
+                    ...customStrategyState.grid,
+                    // this is added here during the hover interaction so that
+                    // `GridControls` can render the hover highlight based on the
+                    // coordinates in `targetCellData`
+                    targetCellData: newTargetCell ?? customStrategyState.grid.targetCellData,
+                  },
+                }
           return strategyApplicationResult(
             [
               wildcardPatch('mid-interaction', {
@@ -167,16 +195,7 @@ const gridDrawToInsertStrategyInner =
               updateHighlightedViews('mid-interaction', [targetParent]),
             ],
             [],
-            {
-              ...customStrategyState,
-              grid: {
-                ...customStrategyState.grid,
-                // this is added here during the hover interaction so that
-                // `GridControls` can render the hover highlight based on the
-                // coordinates in `targetCellData`
-                targetCellData: newTargetCell ?? customStrategyState.grid.targetCellData,
-              },
-            },
+            customStatePatch,
           )
         }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.spec.browser2.tsx
deleted file mode 100644
index c7232d1373e2..000000000000
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.spec.browser2.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import { matchInlineSnapshotBrowser } from '../../../../../test/karma-snapshots'
-import { runDOMWalker } from '../../../editor/actions/action-creators'
-import { makeTestProjectCodeWithSnippet, renderTestEditorWithCode } from '../../ui-jsx.test-utils'
-import { getGlobalFramesOfGridCells } from './grid-helpers'
-
-describe('Grids', () => {
-  it('can calculate global frames of grid cells', async () => {
-    const editor = await renderTestEditorWithCode(
-      makeTestProjectCodeWithSnippet(`<div
-      style={{
-        backgroundColor: '#fff',
-        position: 'absolute',
-        left: 127,
-        top: 84,
-        width: 519,
-        height: 443,
-        display: 'grid',
-        gridTemplateColumns: '150px min-content 1fr 1fr',
-        gridTemplateRows: 'min-content 1fr 1fr 1fr 1fr',
-        rowGap: 10,
-        columnGap: 20,
-        padding: 5,
-      }}
-      data-uid={'grid'}
-    >
-      <div
-        style={{
-          backgroundColor: '#09f',
-          width: '100%',
-          height: '100%',
-          gridColumn: 1,
-          gridRow: 1,
-          borderRadius: 10,
-        }}
-        data-uid={'child'}
-      />
-      <div
-        style={{
-          backgroundColor: '#9f0',
-          width: 80,
-          height: 50,
-          gridColumn: 2,
-          gridRow: 1,
-          borderTopLeftRadius: 10,
-          borderTopRightRadius: 10,
-          borderBottomRightRadius: 10,
-          borderBottomLeftRadius: 10,
-        }}
-      />
-      <div
-        style={{
-          backgroundColor: '#f09',
-          width: '100%',
-          height: '100%',
-          gridColumn: 1,
-          gridRowStart: 2,
-          gridRowEnd: 6,
-          borderTopLeftRadius: 10,
-          borderTopRightRadius: 10,
-          borderBottomRightRadius: 10,
-          borderBottomLeftRadius: 10,
-        }}
-      />
-      <div
-        style={{
-          backgroundColor: '#f90',
-          width: '100%',
-          height: '100%',
-          gridColumn: 2,
-          gridRow: 3,
-          borderRadius: 10,
-        }}
-      />
-      <div
-        style={{
-          backgroundColor: '#f90',
-          width: '100%',
-          height: '100%',
-          gridColumn: 2,
-          gridRow: 3,
-          borderRadius: 10,
-        }}
-      />
-      <div
-        style={{
-          backgroundColor: '#90f',
-          width: '100%',
-          height: '100%',
-          gridColumn: 2,
-          gridRow: 4,
-          borderRadius: 10,
-        }}
-      />
-      <div
-        style={{
-          backgroundColor: '#0f9',
-          width: 39,
-          height: 39,
-          alignSelf: 'center',
-          justifySelf: 'center',
-          gridColumn: 2,
-          gridRow: 5,
-          borderRadius: 10,
-        }}
-      />
-    </div>`),
-      'await-first-dom-report',
-    )
-
-    await editor.dispatch([runDOMWalker()], true)
-
-    // non-grids don't have cell measurements:
-    expect(
-      getGlobalFramesOfGridCells(
-        editor.getEditorState().editor.jsxMetadata[
-          'utopia-storyboard-uid/scene-aaa/app-entity:grid/child'
-        ],
-      ),
-    ).toBeNull()
-
-    // grids have cell measurements:
-    matchInlineSnapshotBrowser(
-      getGlobalFramesOfGridCells(
-        editor.getEditorState().editor.jsxMetadata[
-          'utopia-storyboard-uid/scene-aaa/app-entity:grid'
-        ],
-      ),
-      `Array [
-  Array [
-    Object {
-      \"height\": 50,
-      \"width\": 150,
-      \"x\": 132,
-      \"y\": 89,
-    },
-    Object {
-      \"height\": 50,
-      \"width\": 80,
-      \"x\": 302,
-      \"y\": 89,
-    },
-    Object {
-      \"height\": 50,
-      \"width\": 109.5,
-      \"x\": 402,
-      \"y\": 89,
-    },
-    Object {
-      \"height\": 50,
-      \"width\": 109.5,
-      \"x\": 531.5,
-      \"y\": 89,
-    },
-  ],
-  Array [
-    Object {
-      \"height\": 85.75,
-      \"width\": 150,
-      \"x\": 132,
-      \"y\": 149,
-    },
-    Object {
-      \"height\": 85.75,
-      \"width\": 80,
-      \"x\": 302,
-      \"y\": 149,
-    },
-    Object {
-      \"height\": 85.75,
-      \"width\": 109.5,
-      \"x\": 402,
-      \"y\": 149,
-    },
-    Object {
-      \"height\": 85.75,
-      \"width\": 109.5,
-      \"x\": 531.5,
-      \"y\": 149,
-    },
-  ],
-  Array [
-    Object {
-      \"height\": 85.75,
-      \"width\": 150,
-      \"x\": 132,
-      \"y\": 244.75,
-    },
-    Object {
-      \"height\": 85.75,
-      \"width\": 80,
-      \"x\": 302,
-      \"y\": 244.75,
-    },
-    Object {
-      \"height\": 85.75,
-      \"width\": 109.5,
-      \"x\": 402,
-      \"y\": 244.75,
-    },
-    Object {
-      \"height\": 85.75,
-      \"width\": 109.5,
-      \"x\": 531.5,
-      \"y\": 244.75,
-    },
-  ],
-  Array [
-    Object {
-      \"height\": 85.75,
-      \"width\": 150,
-      \"x\": 132,
-      \"y\": 340.5,
-    },
-    Object {
-      \"height\": 85.75,
-      \"width\": 80,
-      \"x\": 302,
-      \"y\": 340.5,
-    },
-    Object {
-      \"height\": 85.75,
-      \"width\": 109.5,
-      \"x\": 402,
-      \"y\": 340.5,
-    },
-    Object {
-      \"height\": 85.75,
-      \"width\": 109.5,
-      \"x\": 531.5,
-      \"y\": 340.5,
-    },
-  ],
-  Array [
-    Object {
-      \"height\": 85.75,
-      \"width\": 150,
-      \"x\": 132,
-      \"y\": 436.25,
-    },
-    Object {
-      \"height\": 85.75,
-      \"width\": 80,
-      \"x\": 302,
-      \"y\": 436.25,
-    },
-    Object {
-      \"height\": 85.75,
-      \"width\": 109.5,
-      \"x\": 402,
-      \"y\": 436.25,
-    },
-    Object {
-      \"height\": 85.75,
-      \"width\": 109.5,
-      \"x\": 531.5,
-      \"y\": 436.25,
-    },
-  ],
-]`,
-    )
-  })
-})
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 210964ae37dc..aa54f900d266 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -4,7 +4,6 @@ import * as EP from '../../../../core/shared/element-path'
 import type {
   ElementInstanceMetadataMap,
   GridPositionValue,
-  GridTemplate,
 } from '../../../../core/shared/element-template'
 import {
   gridPositionValue,
@@ -16,7 +15,6 @@ import {
 import type { CanvasRectangle } from '../../../../core/shared/math-utils'
 import {
   canvasPoint,
-  canvasRectangle,
   canvasVector,
   isInfinityRectangle,
   offsetPoint,
@@ -36,11 +34,14 @@ import { deleteProperties } from '../../commands/delete-properties-command'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { setCssLengthProperty } from '../../commands/set-css-length-command'
 import { setProperty } from '../../commands/set-property-command'
-import type { GridCustomStrategyState } from '../canvas-strategy-types'
+import type {
+  CustomStrategyState,
+  CustomStrategyStatePatch,
+  GridCustomStrategyState,
+} from '../canvas-strategy-types'
 import type { DragInteractionData } from '../interaction-state'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 import { getGridCellUnderMouseFromMetadata, gridCellCoordinates } from './grid-cell-bounds'
-import { memoize } from '../../../../core/shared/memoize'
 import { mapDropNulls } from '../../../../core/shared/array-utils'
 import { assertNever } from '../../../../core/shared/utils'
 
@@ -580,48 +581,11 @@ function getGridPositionIndex(props: {
 
 export type GridCellGlobalFrames = Array<Array<CanvasRectangle>>
 
-function getGlobalFramesOfGridCellsInner(
-  metadata: ElementInstanceMetadata,
-): GridCellGlobalFrames | null {
-  const { globalFrame } = metadata
-  if (globalFrame == null || isInfinityRectangle(globalFrame)) {
-    return null
-  }
-
-  const { containerGridProperties, padding, rowGap, columnGap } = metadata.specialSizeMeasurements
-
-  const columnWidths = gridTemplateToNumbers(containerGridProperties.gridTemplateColumns)
-
-  const rowHeights = gridTemplateToNumbers(containerGridProperties.gridTemplateRows)
-
-  if (columnWidths == null || rowHeights == null) {
-    return null
-  }
-
-  const cellRects: Array<Array<CanvasRectangle>> = []
-  let yOffset = globalFrame.y + (padding.top ?? 0)
-  rowHeights.forEach((height) => {
-    let xOffset = globalFrame.x + (padding.left ?? 0)
-    const rowRects: CanvasRectangle[] = []
-    columnWidths.forEach((width) => {
-      const rect = canvasRectangle({ x: xOffset, y: yOffset, width: width, height: height })
-      rowRects.push(rect)
-      xOffset += width + (columnGap ?? 0)
-    })
-    cellRects.push(rowRects)
-    yOffset += height + (rowGap ?? 0)
-  })
-
-  return cellRects
-}
-
-export const getGlobalFramesOfGridCells = memoize(getGlobalFramesOfGridCellsInner)
-
 export function getGlobalFrameOfGridCell(
   grid: ElementInstanceMetadata,
   coords: GridCellCoordinates,
 ): CanvasRectangle | null {
-  const gridCellGlobalFrames = getGlobalFramesOfGridCells(grid)
+  const gridCellGlobalFrames = grid.specialSizeMeasurements.gridCellGlobalFrames
   if (gridCellGlobalFrames == null) {
     return null
   }
@@ -629,23 +593,6 @@ export function getGlobalFrameOfGridCell(
   return gridCellGlobalFrames[coords.row - 1]?.[coords.column - 1] ?? null
 }
 
-function gridTemplateToNumbers(gridTemplate: GridTemplate | null): Array<number> | null {
-  if (gridTemplate?.type !== 'DIMENSIONS') {
-    return null
-  }
-
-  const result: Array<number> = []
-
-  for (const dimension of gridTemplate.dimensions) {
-    if (dimension.type !== 'NUMBER') {
-      return null
-    }
-    result.push(dimension.value.value)
-  }
-
-  return result
-}
-
 type DimensionIndexes = {
   originalIndex: number // the index of this element in the original values
   repeatedIndex: number // the index of this element, if it's generated via a repeat, inside the repeated values array definition
@@ -815,3 +762,50 @@ export function getGridRelatedIndexes(params: {
 
   return expandedRelatedIndexes[params.index] ?? []
 }
+
+export function getMetadataWithGridCellBounds(
+  path: ElementPath | null | undefined,
+  startingMetadata: ElementInstanceMetadataMap,
+  latestMetadata: ElementInstanceMetadataMap,
+  customStrategyState: CustomStrategyState,
+): {
+  metadata: ElementInstanceMetadata | null
+  foundIn: 'startingMetadata' | 'latestMetadata' | 'strategyState' | null
+} {
+  if (path == null) {
+    return {
+      metadata: null,
+      foundIn: null,
+    }
+  }
+
+  const fromStartingMetadata = MetadataUtils.findElementByElementPath(startingMetadata, path)
+
+  if (fromStartingMetadata?.specialSizeMeasurements.gridCellGlobalFrames != null) {
+    return {
+      metadata: fromStartingMetadata,
+      foundIn: 'startingMetadata',
+    }
+  }
+
+  const fromStrategyState = customStrategyState.grid.metadataCacheForGrids[EP.toString(path)]
+  if (fromStrategyState != null) {
+    return {
+      metadata: fromStrategyState,
+      foundIn: 'strategyState',
+    }
+  }
+
+  const fromLatestMetadata = MetadataUtils.findElementByElementPath(latestMetadata, path)
+  if (fromLatestMetadata?.specialSizeMeasurements.gridCellGlobalFrames != null) {
+    return {
+      metadata: fromLatestMetadata,
+      foundIn: 'latestMetadata',
+    }
+  }
+
+  return {
+    metadata: fromStartingMetadata,
+    foundIn: 'startingMetadata',
+  }
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
index 671f74fe51f6..bf8d3fa9fb23 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
@@ -100,6 +100,7 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
         [...selectedElements, targetElement],
         {
           grid: {
+            ...customState.grid,
             targetCellData: targetGridCellData,
             draggingFromCell: draggingFromCell,
             originalRootCell: originalRootCell,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
index 2a84da3a561e..f72f00a4ef17 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
@@ -187,6 +187,9 @@ export var storyboard = (
             height: targetRect.height,
           }),
         ),
+        {
+          moveBeforeMouseDown: true,
+        },
       )
 
       const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
@@ -281,6 +284,9 @@ export var storyboard = (
           editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
           childCenter,
           offsetPoint(childCenter, windowPoint({ x: 20, y: 20 })),
+          {
+            moveBeforeMouseDown: true,
+          },
         )
 
         {
@@ -323,6 +329,9 @@ export var storyboard = (
           editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
           childCenter,
           offsetPoint(childCenter, windowPoint({ x: 240, y: 240 })),
+          {
+            moveBeforeMouseDown: true,
+          },
         )
 
         {
@@ -363,6 +372,9 @@ export var storyboard = (
           editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
           childCenter,
           offsetPoint(childCenter, windowPoint({ x: 240, y: 240 })),
+          {
+            moveBeforeMouseDown: true,
+          },
         )
 
         {
@@ -446,6 +458,9 @@ export var storyboard = (
           editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
           startPoint,
           offsetPoint(startPoint, windowPoint({ x: -100, y: -100 })),
+          {
+            moveBeforeMouseDown: true,
+          },
         )
 
         {
@@ -536,6 +551,9 @@ export var storyboard = (
           editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
           childCenter,
           offsetPoint(childCenter, windowPoint({ x: 280, y: 120 })),
+          {
+            moveBeforeMouseDown: true,
+          },
         )
 
         {
@@ -712,6 +730,9 @@ async function runMoveTest(
         height: targetRect.height,
       }),
     ),
+    {
+      moveBeforeMouseDown: true,
+    },
   )
 
   return editor.renderedDOM.getByTestId(props.testId).style
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index f3bc35a2a0a9..dd30a943a8b4 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -190,6 +190,7 @@ function getCommandsAndPatchForGridRearrange(
     commands: commands,
     patch: {
       grid: {
+        ...customState.grid,
         targetCellData: targetGridCell,
         draggingFromCell: draggingFromCell,
         originalRootCell: originalRootCell,
@@ -229,6 +230,7 @@ function getCommandsAndPatchForReparent(
         return applyGridReparent(
           canvasState,
           interactionData,
+          interactionSession,
           customState,
           strategy.target,
           [targetElement],
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
index 8b65e186af9c..f0a5fda43079 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
@@ -10,7 +10,9 @@ import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
 import type { Point } from '../../event-helpers.test-utils'
 import {
   mouseClickAtPoint,
+  mouseDownAtPoint,
   mouseDragFromPointToPoint,
+  mouseMoveToPoint,
   mouseUpAtPoint,
 } from '../../event-helpers.test-utils'
 import type { EditorRenderResult } from '../../ui-jsx.test-utils'
@@ -627,8 +629,15 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2200, y: 2200 })
-
+      await dragOutToAnotherGrid(
+        editor,
+        'another-grid',
+        {
+          x: 10,
+          y: 180,
+        },
+        EP.fromString('sb/grid/dragme'),
+      )
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
           makeTestProjectCode({
@@ -814,3 +823,51 @@ async function dragOut(
   })
   await mouseUpAtPoint(grid, gridRect, { modifiers: cmdModifier })
 }
+
+async function dragOutToAnotherGrid(
+  renderResult: EditorRenderResult,
+  anotherGridTestId: string,
+  offsetInAnotherGrid: Point,
+  cell: ElementPath,
+) {
+  const sourceGridCell = renderResult.renderedDOM.getByTestId(GridCellTestId(cell))
+  const sourceRect = sourceGridCell.getBoundingClientRect()
+
+  const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
+  const anotherGrid = renderResult.renderedDOM.getByTestId(anotherGridTestId)
+  const anotherGridRect = anotherGrid.getBoundingClientRect()
+
+  // selecting the cell
+  await mouseClickAtPoint(
+    sourceGridCell,
+    { x: sourceRect.x + 5, y: sourceRect.y + 5 },
+    { modifiers: cmdModifier },
+  )
+
+  // starting the drag
+  await mouseDownAtPoint(
+    sourceGridCell,
+    { x: sourceRect.x + 5, y: sourceRect.y + 5 },
+    { modifiers: cmdModifier },
+  )
+
+  // first move over target grid hovers the grid controls, so the dom sampler can run
+  await mouseMoveToPoint(
+    canvasControlsLayer,
+    { x: anotherGridRect.x + offsetInAnotherGrid.x, y: anotherGridRect.y + offsetInAnotherGrid.y },
+    { modifiers: cmdModifier },
+  )
+
+  // second move runs the strategy for the first time with cell metadata
+  await mouseMoveToPoint(
+    canvasControlsLayer,
+    { x: anotherGridRect.x + offsetInAnotherGrid.x, y: anotherGridRect.y + offsetInAnotherGrid.y },
+    { modifiers: cmdModifier },
+  )
+
+  await mouseUpAtPoint(
+    canvasControlsLayer,
+    { x: anotherGridRect.x + offsetInAnotherGrid.x, y: anotherGridRect.y + offsetInAnotherGrid.y },
+    { modifiers: cmdModifier },
+  )
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index e348e82132ac..f2829f667c44 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -8,7 +8,7 @@ import {
   gridPositionValue,
   type ElementInstanceMetadataMap,
 } from '../../../../core/shared/element-template'
-import type { CanvasRectangle, CanvasVector } from '../../../../core/shared/math-utils'
+import type { CanvasRectangle } from '../../../../core/shared/math-utils'
 import { canvasVector, isInfinityRectangle, offsetPoint } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 import * as PP from '../../../../core/shared/property-path'
@@ -39,7 +39,7 @@ import {
 import type { DragInteractionData, InteractionSession, UpdatedPathMap } from '../interaction-state'
 import { honoursPropsPosition, shouldKeepMovingDraggedGroupChildren } from './absolute-utils'
 import { replaceFragmentLikePathsWithTheirChildrenRecursive } from './fragment-like-helpers'
-import { setGridPropsCommands } from './grid-helpers'
+import { getMetadataWithGridCellBounds, setGridPropsCommands } from './grid-helpers'
 import { ifAllowedToReparent, isAllowedToReparent } from './reparent-helpers/reparent-helpers'
 import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-property-changes'
 import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers'
@@ -105,6 +105,7 @@ export function gridReparentStrategy(
       apply: applyGridReparent(
         canvasState,
         dragInteractionData,
+        interactionSession,
         customStrategyState,
         reparentTarget,
         filteredSelectedElements,
@@ -141,6 +142,7 @@ export function controlsForGridReparent(reparentTarget: ReparentTarget): Control
 export function applyGridReparent(
   canvasState: InteractionCanvasState,
   interactionData: DragInteractionData,
+  interactionSession: InteractionSession,
   customStrategyState: CustomStrategyState,
   reparentTarget: ReparentTarget,
   selectedElements: ElementPath[],
@@ -163,9 +165,11 @@ export function applyGridReparent(
           return emptyStrategyApplicationResult
         }
 
-        const grid = MetadataUtils.findElementByElementPath(
-          canvasState.startingMetadata,
+        const { metadata: grid, foundIn } = getMetadataWithGridCellBounds(
           newParent.intendedParentPath,
+          canvasState.startingMetadata,
+          interactionSession.latestMetadata,
+          customStrategyState,
         )
 
         if (grid == null) {
@@ -237,6 +241,27 @@ export function applyGridReparent(
           ...selectedElements.map(EP.parentPath),
         ])
 
+        const customStrategyStatePatch =
+          foundIn === 'latestMetadata'
+            ? {
+                elementsToRerender: elementsToRerender,
+                grid: {
+                  ...customStrategyState.grid,
+                  targetCellData: targetCellData,
+                  metadataCacheForGrids: {
+                    ...customStrategyState.grid.metadataCacheForGrids,
+                    [EP.toString(newParent.intendedParentPath)]: grid,
+                  },
+                },
+              }
+            : {
+                elementsToRerender: elementsToRerender,
+                grid: {
+                  ...customStrategyState.grid,
+                  targetCellData: targetCellData,
+                },
+              }
+
         return strategyApplicationResult(
           [
             ...outcomes.flatMap((c) => c.commands),
@@ -246,13 +271,7 @@ export function applyGridReparent(
             showGridControls('mid-interaction', reparentTarget.newParent.intendedParentPath),
           ],
           elementsToRerender,
-          {
-            elementsToRerender: elementsToRerender,
-            grid: {
-              ...customStrategyState.grid,
-              targetCellData: targetCellData,
-            },
-          },
+          customStrategyStatePatch,
         )
       },
     )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 7b39be3806b6..67897cb9e309 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -41,6 +41,9 @@ async function runCellResizeTest(
         height: targetGridCell.getBoundingClientRect().height,
       }),
     ),
+    {
+      moveBeforeMouseDown: true,
+    },
   )
 }
 
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index bbdba72e9a10..556b3fab8f1c 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -898,7 +898,7 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
   }
 
   return (
-    <React.Fragment>
+    <div id={'grid-controls'}>
       <CanvasOffsetWrapper>
         {/* grid lines */}
         {grids.map((grid) => {
@@ -949,6 +949,7 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
             <div
               key={gridKeyFromPath(grid.elementPath)}
               id={gridKeyFromPath(grid.elementPath)}
+              data-grid-path={EP.toString(grid.elementPath)}
               style={style}
             >
               {placeholders.map((cell) => {
@@ -992,6 +993,8 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
                       position: 'relative',
                       pointerEvents: 'initial',
                     }}
+                    data-grid-row={countedRow}
+                    data-grid-column={countedColumn}
                   >
                     {when(
                       features.Grid.dotgrid,
@@ -1120,7 +1123,7 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
         ) : null}
         <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
       </CanvasOffsetWrapper>
-    </React.Fragment>
+    </div>
   )
 })
 
diff --git a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
index 83047c82baf1..48b74f4fb8ae 100644
--- a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
+++ b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
@@ -805,7 +805,7 @@ function useSelectOrLiveModeSelectAndHover(
         dispatch(editorActions, 'canvas-fast-selection-hack') // first we dispatch only to update the editor state, but not run the expensive parts
         await new Promise((resolve) => requestAnimationFrame(resolve)) // the first requestAnimationFrame fires in the same animation frame we are in, so we need to wait one more
         await new Promise((resolve) => requestAnimationFrame(resolve)) // the second requestAnimationFrame is fired in the next actual animation frame, at which point it is safe to run the expensive parts
-        dispatch([runDOMWalker()], 'resume-canvas-fast-selection-hack') // then we dispatch to run the expensive parts
+        dispatch([runDOMWalker(null)], 'resume-canvas-fast-selection-hack') // then we dispatch to run the expensive parts
       } else {
         dispatch(editorActions)
       }
diff --git a/editor/src/components/canvas/dom-sampler.spec.browser2.tsx b/editor/src/components/canvas/dom-sampler.spec.browser2.tsx
index 3b93654cda41..43ff3cfbcdfb 100644
--- a/editor/src/components/canvas/dom-sampler.spec.browser2.tsx
+++ b/editor/src/components/canvas/dom-sampler.spec.browser2.tsx
@@ -5,6 +5,7 @@ import { BakedInStoryboardVariableName } from '../../core/model/scene-utils'
 import * as EP from '../../core/shared/element-path'
 import { objectMap } from '../../core/shared/object-utils'
 import { optionalMap } from '../../core/shared/optional-utils'
+import { selectComponentsForTest } from '../../utils/utils.test-utils'
 import { runDOMWalker, setFocusedElement } from '../editor/actions/action-creators'
 import { navigatorEntryToKey } from '../editor/store/editor-state'
 import { getNavigatorTargetsFromEditorState } from '../navigator/navigator-utils'
@@ -82,7 +83,7 @@ export var Playground = ({ style }) => {
       'await-first-dom-report',
     )
 
-    await editor.dispatch([runDOMWalker()], true)
+    await editor.dispatch([runDOMWalker(null)], true)
 
     matchInlineSnapshotBrowser(
       Object.keys(editor.getEditorState().editor.jsxMetadata),
@@ -457,3 +458,279 @@ function makeTestProjectCodeWithStoryboard(codeForComponents: string): string {
 
   return formatTestProjectCode(code)
 }
+
+describe('Grid dom sampler tests', () => {
+  it('gridCellGlobalFrames calculated correctly', async () => {
+    const editor = await renderTestEditorWithCode(
+      `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid={'storyboard'}>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 700,
+        height: 759,
+        position: 'absolute',
+        left: 212,
+        top: 128,
+      }}
+      data-label='Playground'
+      data-uid={'scene'}
+    >
+      <div
+        style={{
+          backgroundColor: '#fff',
+          position: 'absolute',
+          left: 46,
+          top: 36,
+          width: 553,
+          height: 499,
+          display: 'grid',
+          gridTemplateColumns: '150px min-content 1fr 1fr',
+          gridTemplateRows: 'min-content 1fr 1fr 1fr 1fr',
+          gridGap: 20,
+          padding: 10,
+          justifyContent: 'space-between',
+          justifyItems: 'space-evenly',
+        }}
+        data-uid='grid'
+      >
+        <div
+          style={{
+            backgroundColor: '#09f',
+            width: '100%',
+            height: '100%',
+            gridColumn: 1,
+            gridRow: 1,
+            borderRadius: 10,
+          }}
+          data-uid='child'
+        />
+        <div
+          style={{
+            backgroundColor: '#9f0',
+            width: 80,
+            height: 50,
+            gridColumn: 2,
+            gridRow: 1,
+            borderTopLeftRadius: 10,
+            borderTopRightRadius: 10,
+            borderBottomRightRadius: 10,
+            borderBottomLeftRadius: 10,
+          }}
+        />
+        <div
+          style={{
+            backgroundColor: '#f09',
+            width: '100%',
+            height: '100%',
+            gridColumn: 1,
+            gridRowStart: 2,
+            gridRowEnd: 6,
+            borderTopLeftRadius: 10,
+            borderTopRightRadius: 10,
+            borderBottomRightRadius: 10,
+            borderBottomLeftRadius: 10,
+          }}
+        />
+        <div
+          style={{
+            backgroundColor: '#f90',
+            width: '100%',
+            height: '100%',
+            gridColumn: 2,
+            gridRow: 3,
+            borderRadius: 10,
+          }}
+        />
+        <div
+          style={{
+            backgroundColor: '#f90',
+            width: '100%',
+            height: '100%',
+            gridColumn: 2,
+            gridRow: 3,
+            borderRadius: 10,
+          }}
+        />
+        <div
+          style={{
+            backgroundColor: '#90f',
+            width: '100%',
+            height: '100%',
+            gridColumn: 2,
+            gridRow: 4,
+            borderRadius: 10,
+          }}
+        />
+        <div
+          style={{
+            backgroundColor: '#0f9',
+            width: 39,
+            height: 39,
+            alignSelf: 'center',
+            justifySelf: 'center',
+            gridColumn: 2,
+            gridRow: 5,
+            borderRadius: 10,
+          }}
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`,
+      'await-first-dom-report',
+    )
+
+    await selectComponentsForTest(editor, [EP.fromString('storyboard/scene/grid')])
+    await editor.dispatch([runDOMWalker(null)], true)
+
+    // non-grids don't have cell measurements:
+    expect(
+      editor.getEditorState().editor.jsxMetadata['storyboard/scene/grid/child']
+        .specialSizeMeasurements.gridCellGlobalFrames,
+    ).toBeNull()
+
+    // grids have cell measurements:
+    matchInlineSnapshotBrowser(
+      editor.getEditorState().editor.jsxMetadata['storyboard/scene/grid'].specialSizeMeasurements
+        .gridCellGlobalFrames,
+      `Array [
+  Array [
+    Object {
+      \"height\": 50,
+      \"width\": 150,
+      \"x\": 268,
+      \"y\": 174,
+    },
+    Object {
+      \"height\": 50,
+      \"width\": 80,
+      \"x\": 438,
+      \"y\": 174,
+    },
+    Object {
+      \"height\": 50,
+      \"width\": 121.5,
+      \"x\": 538,
+      \"y\": 174,
+    },
+    Object {
+      \"height\": 50,
+      \"width\": 121.5,
+      \"x\": 679.5,
+      \"y\": 174,
+    },
+  ],
+  Array [
+    Object {
+      \"height\": 87.5,
+      \"width\": 150,
+      \"x\": 268,
+      \"y\": 244,
+    },
+    Object {
+      \"height\": 87.5,
+      \"width\": 80,
+      \"x\": 438,
+      \"y\": 244,
+    },
+    Object {
+      \"height\": 87.5,
+      \"width\": 121.5,
+      \"x\": 538,
+      \"y\": 244,
+    },
+    Object {
+      \"height\": 87.5,
+      \"width\": 121.5,
+      \"x\": 679.5,
+      \"y\": 244,
+    },
+  ],
+  Array [
+    Object {
+      \"height\": 87.5,
+      \"width\": 150,
+      \"x\": 268,
+      \"y\": 351.5,
+    },
+    Object {
+      \"height\": 87.5,
+      \"width\": 80,
+      \"x\": 438,
+      \"y\": 351.5,
+    },
+    Object {
+      \"height\": 87.5,
+      \"width\": 121.5,
+      \"x\": 538,
+      \"y\": 351.5,
+    },
+    Object {
+      \"height\": 87.5,
+      \"width\": 121.5,
+      \"x\": 679.5,
+      \"y\": 351.5,
+    },
+  ],
+  Array [
+    Object {
+      \"height\": 87.5,
+      \"width\": 150,
+      \"x\": 268,
+      \"y\": 458.5,
+    },
+    Object {
+      \"height\": 87.5,
+      \"width\": 80,
+      \"x\": 438,
+      \"y\": 458.5,
+    },
+    Object {
+      \"height\": 87.5,
+      \"width\": 121.5,
+      \"x\": 538,
+      \"y\": 458.5,
+    },
+    Object {
+      \"height\": 87.5,
+      \"width\": 121.5,
+      \"x\": 679.5,
+      \"y\": 458.5,
+    },
+  ],
+  Array [
+    Object {
+      \"height\": 87.5,
+      \"width\": 150,
+      \"x\": 268,
+      \"y\": 566,
+    },
+    Object {
+      \"height\": 87.5,
+      \"width\": 80,
+      \"x\": 438,
+      \"y\": 566,
+    },
+    Object {
+      \"height\": 87.5,
+      \"width\": 121.5,
+      \"x\": 538,
+      \"y\": 566,
+    },
+    Object {
+      \"height\": 87.5,
+      \"width\": 121.5,
+      \"x\": 679.5,
+      \"y\": 566,
+    },
+  ],
+]`,
+    )
+  })
+})
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 5b2ea0ba4de3..3a0e979335fe 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -4,16 +4,13 @@ import * as ResizeObserverSyntheticDefault from 'resize-observer-polyfill'
 import * as EP from '../../core/shared/element-path'
 import type {
   DetectedLayoutSystem,
-  ComputedStyle,
   SpecialSizeMeasurements,
-  StyleAttributeMetadata,
   ElementInstanceMetadataMap,
   GridContainerProperties,
   GridElementProperties,
   DomElementMetadata,
 } from '../../core/shared/element-template'
 import {
-  elementInstanceMetadata,
   specialSizeMeasurements,
   gridContainerProperties,
   gridElementProperties,
@@ -47,7 +44,6 @@ import type { CSSNumber, CSSPosition } from '../inspector/common/css-utils'
 import {
   parseCSSLength,
   positionValues,
-  computedStyleKeys,
   parseDirection,
   parseFlexDirection,
   parseCSSPx,
@@ -57,17 +53,18 @@ import {
   parseGridAutoFlow,
   isCSSKeyword,
 } from '../inspector/common/css-utils'
-import { camelCaseToDashed } from '../../core/shared/string-utils'
 import type { UtopiaStoreAPI } from '../editor/store/store-hook'
-import { UTOPIA_SCENE_ID_KEY, UTOPIA_UID_KEY } from '../../core/model/utopia-constants'
+import {
+  UTOPIA_PATH_KEY,
+  UTOPIA_SCENE_ID_KEY,
+  UTOPIA_UID_KEY,
+} from '../../core/model/utopia-constants'
 import { emptySet } from '../../core/shared/set-utils'
-import type { PathWithString } from '../../core/shared/uid-utils'
 import { getDeepestPathOnDomElement, getPathStringsOnDomElement } from '../../core/shared/uid-utils'
 import { forceNotNull } from '../../core/shared/optional-utils'
 import { fastForEach } from '../../core/shared/utils'
 import type { EditorState, EditorStorePatched } from '../editor/store/editor-state'
 import { shallowEqual } from '../../core/shared/equality-utils'
-import { pick } from '../../core/shared/object-utils'
 import {
   getFlexAlignment,
   getFlexJustifyContent,
@@ -78,6 +75,7 @@ import type { EditorDispatch } from '../editor/action-types'
 import { runDOMWalker } from '../editor/actions/action-creators'
 import { CanvasContainerOuterId } from './canvas-component-entry'
 import { ElementsToRerenderGLOBAL } from './ui-jsx-canvas'
+import type { GridCellGlobalFrames } from './canvas-strategies/strategies/grid-helpers'
 
 export const ResizeObserver =
   window.ResizeObserver ?? ResizeObserverSyntheticDefault.default ?? ResizeObserverSyntheticDefault
@@ -264,6 +262,7 @@ export interface DomWalkerMutableStateData {
   initComplete: boolean
   mutationObserver: MutationObserver
   resizeObserver: ResizeObserver
+  gridControlObserver: MutationObserver
 }
 
 export function createDomWalkerMutableState(
@@ -276,12 +275,13 @@ export function createDomWalkerMutableState(
     initComplete: true,
     mutationObserver: null as any,
     resizeObserver: null as any,
+    gridControlObserver: null as any,
   }
 
   const observers = initDomWalkerObservers(mutableData, editorStoreApi, dispatch)
   mutableData.mutationObserver = observers.mutationObserver
   mutableData.resizeObserver = observers.resizeObserver
-
+  mutableData.gridControlObserver = observers.gridControlObserver
   return mutableData
 }
 
@@ -296,8 +296,10 @@ function useDomWalkerMutableStateContext() {
 export function resubscribeObservers(domWalkerMutableState: {
   mutationObserver: MutationObserver
   resizeObserver: ResizeObserver
+  gridControlObserver: MutationObserver
 }) {
   const canvasRootContainer = document.getElementById(CanvasContainerOuterId)
+  const gridControls = document.getElementById('grid-controls')
 
   if (
     ObserversAvailable &&
@@ -309,6 +311,9 @@ export function resubscribeObservers(domWalkerMutableState: {
       domWalkerMutableState.resizeObserver.observe(elem)
     })
     domWalkerMutableState.mutationObserver.observe(canvasRootContainer, MutationObserverConfig)
+    if (gridControls != null) {
+      domWalkerMutableState.gridControlObserver.observe(gridControls, MutationObserverConfig)
+    }
   }
 }
 
@@ -321,12 +326,16 @@ export function initDomWalkerObservers(
   domWalkerMutableState: DomWalkerMutableStateData,
   editorStore: UtopiaStoreAPI,
   dispatch: EditorDispatch,
-): { resizeObserver: ResizeObserver; mutationObserver: MutationObserver } {
+): {
+  resizeObserver: ResizeObserver
+  mutationObserver: MutationObserver
+  gridControlObserver: MutationObserver
+} {
   let domWalkerTimeoutID: number | null = null
-  function queueUpDomWalker(): void {
+  function queueUpDomWalker(restrictToElements: Array<ElementPath> | null): void {
     if (domWalkerTimeoutID == null) {
       domWalkerTimeoutID = window.setTimeout(() => {
-        dispatch([runDOMWalker()])
+        dispatch([runDOMWalker(restrictToElements)])
         domWalkerTimeoutID = null
       })
     }
@@ -362,7 +371,7 @@ export function initDomWalkerObservers(
         }
       }
       if (shouldRunDOMWalker) {
-        queueUpDomWalker()
+        queueUpDomWalker(null)
       }
     }
   })
@@ -394,12 +403,29 @@ export function initDomWalkerObservers(
         }
       }
       if (shouldRunDOMWalker) {
-        queueUpDomWalker()
+        queueUpDomWalker(null)
       }
     }
   })
 
-  return { resizeObserver, mutationObserver }
+  const gridControlObserver = new window.MutationObserver((mutations: MutationRecord[]) => {
+    let shouldRunDOMWalkerOnPath = null
+    mutations.forEach((mutation) => {
+      if (mutation.target instanceof HTMLElement) {
+        for (const child of mutation.target.children) {
+          const gridPath = child.getAttribute('data-grid-path')
+          if (gridPath != null) {
+            shouldRunDOMWalkerOnPath = EP.fromString(gridPath)
+          }
+        }
+      }
+    })
+    if (shouldRunDOMWalkerOnPath != null) {
+      queueUpDomWalker([shouldRunDOMWalkerOnPath])
+    }
+  })
+
+  return { resizeObserver, mutationObserver, gridControlObserver }
 }
 
 export function invalidateDomWalkerIfNecessary(
@@ -857,6 +883,21 @@ function getSpecialMeasurements(
   const parentContainerGridProperties = getGridContainerProperties(parentElementStyle)
 
   const containerGridProperties = getGridContainerProperties(elementStyle)
+
+  const paddingValue = isRight(padding)
+    ? padding.value
+    : sides(undefined, undefined, undefined, undefined)
+
+  const gridCellGlobalFrames =
+    layoutSystemForChildren === 'grid'
+      ? measureGlobalFramesOfGridCellsFromControl(
+          element,
+          scale,
+          containerRectLazy,
+          elementCanvasRectangleCache,
+        )
+      : null
+
   const containerElementProperties = getGridElementProperties(
     parentContainerGridProperties,
     elementStyle,
@@ -881,7 +922,7 @@ function getSpecialMeasurements(
     elementStyle.display,
     position,
     isRight(margin) ? margin.value : sides(undefined, undefined, undefined, undefined),
-    isRight(padding) ? padding.value : sides(undefined, undefined, undefined, undefined),
+    paddingValue,
     naturalWidth,
     naturalHeight,
     clientWidth,
@@ -918,6 +959,7 @@ function getSpecialMeasurements(
     containerElementPropertiesFromProps,
     rowGap,
     columnGap,
+    gridCellGlobalFrames,
     justifySelf,
     alignSelf,
   )
@@ -976,3 +1018,47 @@ function getClosestOffsetParent(element: HTMLElement): Element | null {
   }
   return null
 }
+
+function measureGlobalFramesOfGridCellsFromControl(
+  grid: HTMLElement,
+  scale: number,
+  containerRectLazy: CanvasPoint | (() => CanvasPoint),
+  elementCanvasRectangleCache: ElementCanvasRectangleCache,
+): GridCellGlobalFrames | null {
+  const path = grid.getAttribute(UTOPIA_PATH_KEY)
+  let gridCellGlobalFrames: Array<Array<CanvasRectangle>> | null = null
+  if (path != null) {
+    const gridControlElement = document.getElementById(`grid-${path}`)
+    if (gridControlElement != null) {
+      gridCellGlobalFrames = []
+      for (const cell of gridControlElement.children) {
+        if (!(cell instanceof HTMLElement)) {
+          continue
+        }
+        const rowIndexAttr = cell.getAttribute('data-grid-row')
+        const columnIndexAttr = cell.getAttribute('data-grid-column')
+        if (rowIndexAttr == null || columnIndexAttr == null) {
+          continue
+        }
+        const rowIndex = parseInt(rowIndexAttr)
+        const columnIndex = parseInt(columnIndexAttr)
+        if (!isFinite(rowIndex) || !isFinite(columnIndex)) {
+          continue
+        }
+        const row = gridCellGlobalFrames[rowIndex - 1]
+        if (row == null) {
+          gridCellGlobalFrames[rowIndex - 1] = []
+        }
+        gridCellGlobalFrames[rowIndex - 1][columnIndex - 1] = globalFrameForElement(
+          cell,
+          scale,
+          containerRectLazy,
+          'without-text-content',
+          'nearest-half',
+          elementCanvasRectangleCache,
+        )
+      }
+    }
+  }
+  return gridCellGlobalFrames
+}
diff --git a/editor/src/components/canvas/editor-dispatch-flow.tsx b/editor/src/components/canvas/editor-dispatch-flow.tsx
index eadd05a9ed58..fbfdf7987849 100644
--- a/editor/src/components/canvas/editor-dispatch-flow.tsx
+++ b/editor/src/components/canvas/editor-dispatch-flow.tsx
@@ -1,3 +1,4 @@
+import type { ElementPath } from 'utopia-shared/src/types'
 import type { EditorDispatch } from '../editor/action-types'
 import { updateMetadataInEditorState } from '../editor/actions/action-creators'
 import type { DispatchResult } from '../editor/store/dispatch'
@@ -29,11 +30,20 @@ export function runDomSamplerAndSaveResults(
   domWalkerMutableState: {
     mutationObserver: MutationObserver
     resizeObserver: ResizeObserver
+    gridControlObserver: MutationObserver
   },
   spyCollector: UiJsxCanvasContextData,
+  restrictToElements:
+    | 'run-full'
+    | {
+        restrictToElements: Array<ElementPath>
+      },
 ) {
   const metadataResult = runDomSamplerRegular({
-    elementsToFocusOn: ElementsToRerenderGLOBAL.current,
+    elementsToFocusOn:
+      restrictToElements === 'run-full'
+        ? ElementsToRerenderGLOBAL.current
+        : restrictToElements.restrictToElements,
     domWalkerAdditionalElementsToFocusOn:
       storedState.patchedEditor.canvas.domWalkerAdditionalElementsToUpdate,
     scale: storedState.patchedEditor.canvas.scale,
diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
index cddd81efd7a6..07a945aae2b8 100644
--- a/editor/src/components/canvas/gap-utils.ts
+++ b/editor/src/components/canvas/gap-utils.ts
@@ -33,7 +33,6 @@ import { treatElementAsFragmentLike } from './canvas-strategies/strategies/fragm
 import type { AllElementProps } from '../editor/store/editor-state'
 import type { GridData } from './controls/grid-controls'
 import { getNullableAutoOrTemplateBaseString } from './controls/grid-controls'
-import { getGlobalFramesOfGridCells } from './canvas-strategies/strategies/grid-helpers'
 
 export interface PathWithBounds {
   bounds: CanvasRectangle
@@ -221,7 +220,7 @@ export function gridGapControlBoundsFromMetadata(
     gridRowColumnInfo.gridTemplateColumns,
   )
 
-  const gridCellBounds = getGlobalFramesOfGridCells(grid)
+  const gridCellBounds = grid.specialSizeMeasurements.gridCellGlobalFrames
 
   if (gridCellBounds == null) {
     return emptyResult
diff --git a/editor/src/components/canvas/remix/remix-error-handling.test-utils.tsx b/editor/src/components/canvas/remix/remix-error-handling.test-utils.tsx
index 492b757571c9..e1d229403149 100644
--- a/editor/src/components/canvas/remix/remix-error-handling.test-utils.tsx
+++ b/editor/src/components/canvas/remix/remix-error-handling.test-utils.tsx
@@ -25,7 +25,7 @@ export async function renderRemixProject(project: PersistentModel) {
     notLoggedIn,
     false,
   )
-  await renderResult.dispatch([runDOMWalker()], true)
+  await renderResult.dispatch([runDOMWalker(null)], true)
   return renderResult
 }
 
diff --git a/editor/src/components/canvas/remix/remix-navigator.spec.browser2.tsx b/editor/src/components/canvas/remix/remix-navigator.spec.browser2.tsx
index b56940dc5344..982859397dac 100644
--- a/editor/src/components/canvas/remix/remix-navigator.spec.browser2.tsx
+++ b/editor/src/components/canvas/remix/remix-navigator.spec.browser2.tsx
@@ -23,7 +23,7 @@ const RootTextContent = 'This is root!'
 
 async function renderRemixProject(project: PersistentModel) {
   const renderResult = await renderTestEditorWithModel(project, 'await-first-dom-report')
-  await renderResult.dispatch([runDOMWalker()], true)
+  await renderResult.dispatch([runDOMWalker(null)], true)
   return renderResult
 }
 
diff --git a/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx b/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx
index 197fe32db18f..d31daf6c75b0 100644
--- a/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx
+++ b/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx
@@ -81,7 +81,7 @@ async function renderRemixProject(
     undefined,
     strategiesToUse,
   )
-  await renderResult.dispatch([runDOMWalker()], true)
+  await renderResult.dispatch([runDOMWalker(null)], true)
   return renderResult
 }
 
@@ -1765,7 +1765,7 @@ export default function Index() {
   it('flex reorder elements inside Remix', async () => {
     const renderResult = await renderRemixProject(remixProjectForEditingTests)
 
-    await renderResult.dispatch([runDOMWalker()], true)
+    await renderResult.dispatch([runDOMWalker(null)], true)
 
     expect(
       getNavigatorTargetsFromEditorState(renderResult.getEditorState().editor).navigatorTargets.map(
@@ -1871,7 +1871,7 @@ export default function Index() {
   it('draw to insert into Remix', async () => {
     const renderResult = await renderRemixProject(remixProjectForEditingTests)
 
-    await renderResult.dispatch([runDOMWalker()], true)
+    await renderResult.dispatch([runDOMWalker(null)], true)
 
     expect(
       getNavigatorTargetsFromEditorState(renderResult.getEditorState().editor).navigatorTargets.map(
diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts
index 757fa6769497..ca9ef5a0290c 100644
--- a/editor/src/components/editor/action-types.ts
+++ b/editor/src/components/editor/action-types.ts
@@ -788,6 +788,7 @@ export interface UpdateMetadataInEditorState {
 
 export interface RunDOMWalker {
   action: 'RUN_DOM_WALKER'
+  restrictToElements: Array<ElementPath> | null
 }
 
 export interface TrueUpElements {
diff --git a/editor/src/components/editor/actions/action-creators.ts b/editor/src/components/editor/actions/action-creators.ts
index 723c48306606..f78aa83dba6b 100644
--- a/editor/src/components/editor/actions/action-creators.ts
+++ b/editor/src/components/editor/actions/action-creators.ts
@@ -1246,9 +1246,10 @@ export function updateMetadataInEditorState(
   }
 }
 
-export function runDOMWalker(): RunDOMWalker {
+export function runDOMWalker(restrictToElements: Array<ElementPath> | null): RunDOMWalker {
   return {
     action: 'RUN_DOM_WALKER',
+    restrictToElements: restrictToElements,
   }
 }
 
diff --git a/editor/src/components/editor/remix-navigation-bar.spec.browser2.tsx b/editor/src/components/editor/remix-navigation-bar.spec.browser2.tsx
index f14856bb17c8..116b3e904569 100644
--- a/editor/src/components/editor/remix-navigation-bar.spec.browser2.tsx
+++ b/editor/src/components/editor/remix-navigation-bar.spec.browser2.tsx
@@ -13,7 +13,7 @@ import { getFeaturedRoutesFromPackageJSON } from '../../printer-parsers/html/ext
 
 async function renderRemixProject(project: PersistentModel): Promise<EditorRenderResult> {
   const renderResult = await renderTestEditorWithModel(project, 'await-first-dom-report')
-  await renderResult.dispatch([runDOMWalker()], true)
+  await renderResult.dispatch([runDOMWalker(null)], true)
   return renderResult
 }
 
diff --git a/editor/src/components/editor/store/dispatch-strategies.spec.tsx b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
index a3ffdb94c054..dbb51ea5f9cb 100644
--- a/editor/src/components/editor/store/dispatch-strategies.spec.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
@@ -201,6 +201,7 @@ describe('interactionStart', () => {
           "grid": Object {
             "currentRootCell": null,
             "draggingFromCell": null,
+            "metadataCacheForGrids": Object {},
             "originalRootCell": null,
             "targetCellData": null,
           },
@@ -269,6 +270,7 @@ describe('interactionStart', () => {
           "grid": Object {
             "currentRootCell": null,
             "draggingFromCell": null,
+            "metadataCacheForGrids": Object {},
             "originalRootCell": null,
             "targetCellData": null,
           },
@@ -357,6 +359,7 @@ describe('interactionUpdate', () => {
           "grid": Object {
             "currentRootCell": null,
             "draggingFromCell": null,
+            "metadataCacheForGrids": Object {},
             "originalRootCell": null,
             "targetCellData": null,
           },
@@ -445,6 +448,7 @@ describe('interactionUpdate', () => {
           "grid": Object {
             "currentRootCell": null,
             "draggingFromCell": null,
+            "metadataCacheForGrids": Object {},
             "originalRootCell": null,
             "targetCellData": null,
           },
@@ -527,6 +531,7 @@ describe('interactionHardReset', () => {
           "grid": Object {
             "currentRootCell": null,
             "draggingFromCell": null,
+            "metadataCacheForGrids": Object {},
             "originalRootCell": null,
             "targetCellData": null,
           },
@@ -617,6 +622,7 @@ describe('interactionHardReset', () => {
           "grid": Object {
             "currentRootCell": null,
             "draggingFromCell": null,
+            "metadataCacheForGrids": Object {},
             "originalRootCell": null,
             "targetCellData": null,
           },
@@ -713,6 +719,7 @@ describe('interactionUpdate with user changed strategy', () => {
           "grid": Object {
             "currentRootCell": null,
             "draggingFromCell": null,
+            "metadataCacheForGrids": Object {},
             "originalRootCell": null,
             "targetCellData": null,
           },
@@ -804,6 +811,7 @@ describe('interactionUpdate with user changed strategy', () => {
           "grid": Object {
             "currentRootCell": null,
             "draggingFromCell": null,
+            "metadataCacheForGrids": Object {},
             "originalRootCell": null,
             "targetCellData": null,
           },
diff --git a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
index cd020e303e72..7d92822b622e 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
@@ -322,6 +322,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     },
     rowGap: null,
     columnGap: null,
+    gridCellGlobalFrames: null,
     justifySelf: null,
     alignSelf: null,
   }
@@ -443,6 +444,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     },
     rowGap: null,
     columnGap: null,
+    gridCellGlobalFrames: null,
     justifySelf: null,
     alignSelf: null,
   }
@@ -619,6 +621,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       },
       rowGap: null,
       columnGap: null,
+      gridCellGlobalFrames: null,
       justifySelf: null,
       alignSelf: null,
     },
@@ -772,6 +775,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       },
       rowGap: null,
       columnGap: null,
+      gridCellGlobalFrames: null,
       justifySelf: null,
       alignSelf: null,
     },
@@ -950,6 +954,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         },
         rowGap: null,
         columnGap: null,
+        gridCellGlobalFrames: null,
         justifySelf: null,
         alignSelf: null,
       },
@@ -1105,6 +1110,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         },
         rowGap: null,
         columnGap: null,
+        gridCellGlobalFrames: null,
         justifySelf: null,
         alignSelf: null,
       },
@@ -1260,6 +1266,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         },
         rowGap: null,
         columnGap: null,
+        gridCellGlobalFrames: null,
         justifySelf: null,
         alignSelf: null,
       },
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 06e57d5b3d14..9bf286061a5c 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -2366,6 +2366,7 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
         newSize.elementGridPropertiesFromProps,
         newSize.rowGap,
         newSize.columnGap,
+        newSize.gridCellGlobalFrames,
         newSize.justifySelf,
         newSize.alignSelf,
       )
diff --git a/editor/src/components/navigator/left-pane/settings-pane.spec.browser2.tsx b/editor/src/components/navigator/left-pane/settings-pane.spec.browser2.tsx
index a9c311417bfb..b76adcba9ef4 100644
--- a/editor/src/components/navigator/left-pane/settings-pane.spec.browser2.tsx
+++ b/editor/src/components/navigator/left-pane/settings-pane.spec.browser2.tsx
@@ -7,7 +7,7 @@ import { StoryboardFilePath } from '../../editor/store/editor-state'
 
 async function renderRemixProject(project: PersistentModel) {
   const renderResult = await renderTestEditorWithModel(project, 'await-first-dom-report')
-  await renderResult.dispatch([runDOMWalker()], true)
+  await renderResult.dispatch([runDOMWalker(null)], true)
   return renderResult
 }
 
diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts
index f0c68e7b10f1..8a7b76c2d1e9 100644
--- a/editor/src/core/shared/element-template.ts
+++ b/editor/src/core/shared/element-template.ts
@@ -2837,6 +2837,7 @@ export interface SpecialSizeMeasurements {
   elementGridPropertiesFromProps: GridElementProperties
   rowGap: number | null
   columnGap: number | null
+  gridCellGlobalFrames: Array<Array<CanvasRectangle>> | null
 }
 
 export function specialSizeMeasurements(
@@ -2888,6 +2889,7 @@ export function specialSizeMeasurements(
   elementGridPropertiesFromProps: GridElementProperties,
   rowGap: number | null,
   columnGap: number | null,
+  gridCellGlobalFrames: Array<Array<CanvasRectangle>> | null,
   justifySelf: SelfAlignment | null,
   alignSelf: SelfAlignment | null,
 ): SpecialSizeMeasurements {
@@ -2940,6 +2942,7 @@ export function specialSizeMeasurements(
     elementGridPropertiesFromProps,
     rowGap,
     columnGap,
+    gridCellGlobalFrames,
     justifySelf,
     alignSelf,
   }
@@ -3021,6 +3024,7 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements(
   null,
   null,
   null,
+  null,
 )
 
 export function walkElement(
diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index 6185db8ee773..07ede0693cff 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -21,6 +21,7 @@ import type {
   DispatchPriority,
   EditorAction,
   EditorDispatch,
+  RunDOMWalker,
 } from '../components/editor/action-types'
 import { actionActionsOptic, isLoggedIn } from '../components/editor/action-types'
 import * as EditorActions from '../components/editor/actions/action-creators'
@@ -100,7 +101,7 @@ import * as EP from '../core/shared/element-path'
 import { waitUntil } from '../core/shared/promise-utils'
 import { sendSetVSCodeTheme } from '../core/vscode/vscode-bridge'
 import type { ElementPath } from '../core/shared/project-file-types'
-import { mapDropNulls, uniqBy } from '../core/shared/array-utils'
+import { uniq, uniqBy } from '../core/shared/array-utils'
 import { updateUserDetailsWhenAuthenticated } from '../core/shared/github/helpers'
 import { DispatchContext } from '../components/editor/store/dispatch-context'
 import {
@@ -123,12 +124,8 @@ import { InitialOnlineState, startOnlineStatusPolling } from '../components/edit
 import { useAnimate } from 'framer-motion'
 import { AnimationContext } from '../components/canvas/ui-jsx-canvas-renderer/animation-context'
 import { anyCodeAhead } from '../components/assets'
-import { anyBy, toArrayOf } from '../core/shared/optics/optic-utilities'
-import {
-  fromField,
-  traverseArray,
-  traverseReadOnlyArray,
-} from '../core/shared/optics/optic-creators'
+import { toArrayOf } from '../core/shared/optics/optic-utilities'
+import { fromTypeGuard, traverseReadOnlyArray } from '../core/shared/optics/optic-creators'
 import { keysEqualityExhaustive, shallowEqual } from '../core/shared/equality-utils'
 import {
   resetDomSamplerExecutionCounts,
@@ -478,17 +475,18 @@ export class Editor {
         })
       }
 
-      const runDomWalker =
-        shouldRunDOMWalker(dispatchedActions, oldEditorState, this.storedState) &&
-        !this.temporarilyDisableStoreUpdates
+      const runDomWalker = this.temporarilyDisableStoreUpdates
+        ? 'dont-run'
+        : shouldRunDOMWalker(dispatchedActions, oldEditorState, this.storedState)
 
       // run the dom-walker
-      if (runDomWalker) {
+      if (runDomWalker !== 'dont-run') {
         const metadataUpdateDispatchResult = runDomSamplerAndSaveResults(
           this.boundDispatch,
           this.storedState,
           this.domWalkerMutableState,
           this.spyCollector,
+          runDomWalker,
         )
 
         this.storedState = metadataUpdateDispatchResult
@@ -853,7 +851,12 @@ export function shouldRunDOMWalker(
   dispatchedActions: ReadonlyArray<EditorAction>,
   storeBefore: EditorStoreFull,
   storeAfter: EditorStoreFull,
-): boolean {
+):
+  | 'dont-run'
+  | 'run-full'
+  | {
+      restrictToElements: Array<ElementPath>
+    } {
   const patchedEditorBefore = storeBefore.patchedEditor
   const patchedEditorAfter = storeAfter.patchedEditor
   const patchedEditorChanged =
@@ -895,10 +898,46 @@ export function shouldRunDOMWalker(
     patchedDerivedBefore.remixData !== patchedDerivedAfter.remixData
 
   const storeChanged = patchedEditorChanged || patchedDerivedChanged
-  const actionsIndicateDOMWalkerShouldRun = anyBy(
-    traverseReadOnlyArray<EditorAction>().compose(actionActionsOptic),
-    (action) => action.action === 'RUN_DOM_WALKER',
+
+  // if the store changed run the dom walker
+  if (storeChanged) {
+    return 'run-full'
+  }
+
+  // if there are runDomWalker actions, run the dom walker, and merge their restrictToElements
+  const runDomWalkerActions = toArrayOf(
+    traverseReadOnlyArray<EditorAction>()
+      .compose(actionActionsOptic)
+      .compose(
+        fromTypeGuard((action): action is RunDOMWalker => action.action === 'RUN_DOM_WALKER'),
+      ),
     dispatchedActions,
   )
-  return storeChanged || actionsIndicateDOMWalkerShouldRun
+
+  if (runDomWalkerActions.length === 0) {
+    return 'dont-run'
+  }
+
+  const restrictToElements = runDomWalkerActions.reduce<Array<ElementPath> | null>(
+    (acc, action) => {
+      if (action.restrictToElements != null) {
+        if (acc == null) {
+          return action.restrictToElements
+        }
+        return [...acc, ...action.restrictToElements]
+      }
+      return acc
+    },
+    null,
+  )
+
+  if (restrictToElements == null) {
+    return 'run-full'
+  }
+
+  const uniqRestrictToElements = uniq(restrictToElements.map(EP.toString)).map(EP.fromString)
+
+  return {
+    restrictToElements: uniqRestrictToElements,
+  }
 }

From b3a7b8e502ea492501fe16ebc1a8a61030924ff2 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:05:19 +0300
Subject: [PATCH 071/272] fix(css): dont set dimensions on canvas element
 (#6445)

**Problem:**
Today all css declarations on `body` or `html` are being applied to
`#canvas-element`, including dimesions declarations (width, height,
etc). This can cause weird canvas appearance.

**Fix:**
Filter out dimesions declarations when applying styles to the canvas
element.
This is a part of the larger Vite import task, but it's a general fix.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode.
---
 editor/src/core/shared/css-utils.spec.ts |  2 ++
 editor/src/core/shared/css-utils.ts      | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/editor/src/core/shared/css-utils.spec.ts b/editor/src/core/shared/css-utils.spec.ts
index eab94b804176..e2f5e1b2e09b 100644
--- a/editor/src/core/shared/css-utils.spec.ts
+++ b/editor/src/core/shared/css-utils.spec.ts
@@ -10,6 +10,8 @@ describe('rescopeCSSToTargetCanvasOnly', () => {
     const input = `
       body {
         font-family: San Francisco, SF UI, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        width: 100%;
+        height: 100%;
       }
 
       @font-face {
diff --git a/editor/src/core/shared/css-utils.ts b/editor/src/core/shared/css-utils.ts
index 8a3a9afc4e7c..60a887c075a0 100644
--- a/editor/src/core/shared/css-utils.ts
+++ b/editor/src/core/shared/css-utils.ts
@@ -28,13 +28,28 @@ export function rescopeCSSToTargetCanvasOnly(input: string): string {
 
   let ast = csstree.parse(scopedInput)
 
-  csstree.walk(ast, (node, item, list) => {
+  csstree.walk(ast, function (node, item, list) {
     // As we are wrapping in an @scope, we need to redirect certain selectors to :scope
     if (isSelectorToChange(node) && list != null) {
       list.insertData(scopePseudoClassSelector(), item)
       list.remove(item)
+      // we need to remove dimensions since they now apply to our canvas
+      if (this.rule != null) {
+        removeDimensionsFromCssRule(this.rule)
+      }
     }
   })
 
   return csstree.generate(ast)
 }
+
+const propertiesToRemove = ['width', 'height', 'max-width', 'max-height', 'min-width', 'min-height']
+function removeDimensionsFromCssRule(rule: csstree.Rule): void {
+  csstree.walk(rule, (node, item, list) => {
+    if (node.type === 'Declaration' && list != null) {
+      if (propertiesToRemove.includes(node.property)) {
+        list.remove(item)
+      }
+    }
+  })
+}

From b8c8dcbca4419e7c5f516cfd07d767ac03a779b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Wed, 2 Oct 2024 11:27:56 +0200
Subject: [PATCH 072/272] Specify elements to rerender in keyboard & gap
 strategies (#6446)

## Problem
The keyboard font strategies and the gap setter strategies don't
correctly declare the elements to rerender in the strategy application
result

## Fix
Fill it in with the correct element path array
---
 .../strategies/keyboard-set-font-size-strategy.tsx        | 2 +-
 .../strategies/keyboard-set-font-weight-strategy.tsx      | 8 +-------
 .../strategies/keyboard-set-opacity-strategy.tsx          | 8 +-------
 .../strategies/set-flex-gap-strategy.tsx                  | 7 ++-----
 .../strategies/set-grid-gap-strategy.tsx                  | 2 +-
 5 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-size-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-size-strategy.tsx
index 89bac012ea17..ba77e1cb87cb 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-size-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-size-strategy.tsx
@@ -79,7 +79,7 @@ export function keyboardSetFontSizeStrategy(
         ),
       )
 
-      return strategyApplicationResult(commands, 'rerender-all-elements')
+      return strategyApplicationResult(commands, validTargets)
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-weight-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-weight-strategy.tsx
index 69d248f68f12..3d6a7cee0843 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-weight-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-font-weight-strategy.tsx
@@ -87,13 +87,7 @@ export function keyboardSetFontWeightStrategy(
         ),
       )
 
-      return strategyApplicationResult(
-        commands,
-        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-        // appropriate to this particular case.
-        'rerender-all-elements',
-      )
+      return strategyApplicationResult(commands, validTargets)
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-opacity-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-opacity-strategy.tsx
index 12ccaecd396d..10a12118f16b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-opacity-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-set-opacity-strategy.tsx
@@ -57,13 +57,7 @@ export function keyboardSetOpacityStrategy(
         setProperty('always', path, PP.create('style', 'opacity'), inputValue),
       )
 
-      return strategyApplicationResult(
-        commands,
-        // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-        // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-        // appropriate to this particular case.
-        'rerender-all-elements',
-      )
+      return strategyApplicationResult(commands, selectedElements)
     },
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
index 77d73a39247c..15b012d2b451 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
@@ -174,10 +174,7 @@ export const setFlexGapStrategy: CanvasStrategyFactory = (
       if (shouldTearOffGap) {
         return strategyApplicationResult(
           [deleteProperties('always', selectedElement, [StyleGapProp])],
-          // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-          // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-          // appropriate to this particular case.
-          'rerender-all-elements',
+          selectedElements,
         )
       }
 
@@ -200,7 +197,7 @@ export const setFlexGapStrategy: CanvasStrategyFactory = (
             },
           ]),
         ],
-        [...selectedElements, ...children.map((c) => c.elementPath)],
+        selectedElements,
       )
     },
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
index 9b9b5d2b3ef5..e20678016012 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
@@ -196,7 +196,7 @@ export const setGridGapStrategy: CanvasStrategyFactory = (
             },
           ]),
         ],
-        [...selectedElements, ...children.map((c) => c.elementPath)],
+        selectedElements,
       )
     },
   }

From df09eca0711a9037f93554709d8645b85acfdeb9 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 2 Oct 2024 10:41:12 +0100
Subject: [PATCH 073/272] fix(grids) Scale Placeholder Borders (#6444)

- Change `gridPlaceholderBorder` to take a value for scale.
- Change `scaleRef` to be a regular `scale` value in `GridControls` as
it needs to be passed to `gridPlaceholderBorder` all the time.
---
 .../canvas/controls/grid-controls.tsx         | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 556b3fab8f1c..c651f64879d4 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -641,7 +641,11 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
   const features = useRollYourOwnFeatures()
 
   const canvasOffsetRef = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
-  const scaleRef = useRefEditorState((store) => store.editor.canvas.scale)
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'GridControls scale',
+  )
   const metadataRef = useRefEditorState((store) => store.editor.jsxMetadata)
 
   const activelyDraggingOrResizingCell = useEditorState(
@@ -811,7 +815,7 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
         setInitialShadowFrame(params.frame)
 
         const start = windowToCanvasCoordinates(
-          scaleRef.current,
+          scale,
           canvasOffsetRef.current,
           windowPoint({ x: event.nativeEvent.x, y: event.nativeEvent.y }),
         )
@@ -827,7 +831,7 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
           ),
         ])
       },
-    [canvasOffsetRef, dispatch, scaleRef],
+    [canvasOffsetRef, dispatch, scale],
   )
 
   // NOTE: this stuff is meant to be temporary, until we settle on the set of interaction pieces we like.
@@ -976,19 +980,19 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
                     id={id}
                     data-testid={id}
                     style={{
-                      borderTop: gridPlaceholderBorder(borderColor),
-                      borderLeft: gridPlaceholderBorder(borderColor),
+                      borderTop: gridPlaceholderBorder(borderColor, scale),
+                      borderLeft: gridPlaceholderBorder(borderColor, scale),
                       borderBottom:
                         isActiveCell ||
                         countedRow >= grid.rows ||
                         (grid.rowGap != null && grid.rowGap > 0)
-                          ? gridPlaceholderBorder(borderColor)
+                          ? gridPlaceholderBorder(borderColor, scale)
                           : undefined,
                       borderRight:
                         isActiveCell ||
                         countedColumn >= grid.columns ||
                         (grid.columnGap != null && grid.columnGap > 0)
-                          ? gridPlaceholderBorder(borderColor)
+                          ? gridPlaceholderBorder(borderColor, scale)
                           : undefined,
                       position: 'relative',
                       pointerEvents: 'initial',
@@ -1797,7 +1801,7 @@ function gridKeyFromPath(path: ElementPath): string {
   return `grid-${EP.toString(path)}`
 }
 
-const gridPlaceholderBorder = (color: string) => `2px solid ${color}`
+const gridPlaceholderBorder = (color: string, scale: number) => `${2 / scale}px solid ${color}`
 
 export function controlsForGridPlaceholders(gridPath: ElementPath): ControlWithProps<any> {
   return {

From d60c3d504405a95b95d7af7ac4000ebdd432bba9 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:26:02 +0200
Subject: [PATCH 074/272] Disable flaky test

---
 .../strategies/grid-reparent-strategies.spec.browser2.tsx      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
index f0a5fda43079..909950889d42 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
@@ -559,7 +559,8 @@ describe('grid reparent strategies', () => {
         ),
       )
     })
-    it('into a grid container', async () => {
+    // disabling flaky test
+    xit('into a grid container', async () => {
       const editor = await renderTestEditorWithCode(
         makeTestProjectCode({
           insideGrid: `

From 9bb65361cec5284e5b278735be32f99760fe3361 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:49:34 +0200
Subject: [PATCH 075/272] Hide grid resize handles on both sides when too
 crowded (#6449)

**Problem:**

If even one side of a grid is too crowded for resize controls, hide the
controls on the other side as well.

**Fix:**

1. Move the check for crowdedness to cover both axii
2. Ensure that the crowdedness check works fine with very narrow
cols/rows (shorter than the resize handle) but there is still room
enough to display the handles



https://github.com/user-attachments/assets/52e81327-b159-413a-b74c-34fd554a6e29



Fixes #6447
---
 .../canvas/controls/grid-controls.tsx         | 54 ++++++++++++++-----
 1 file changed, 40 insertions(+), 14 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index c651f64879d4..6c9958557dd7 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -405,12 +405,6 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
     })
   }, [props.fromPropsAxisValues, resizingIndex])
 
-  const scale = useEditorState(
-    Substores.canvas,
-    (store) => store.editor.canvas.scale,
-    'GridResizing scale',
-  )
-
   if (props.axisValues == null) {
     return null
   }
@@ -419,11 +413,6 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
       const size = GRID_RESIZE_HANDLE_CONTAINER_SIZE / canvasScale
       const dimensions = props.axisValues.dimensions
 
-      const hideControls = dimensions.some((dim) => {
-        const scaledSize = (dim.type === 'NUMBER' ? dim.value.value : 0) * scale
-        return scaledSize < GRID_RESIZE_HANDLE_SIZE
-      })
-
       return (
         <div
           style={{
@@ -448,7 +437,6 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
                 : undefined,
             paddingTop:
               props.axis === 'row' && props.padding != null ? `${props.padding.top}px` : undefined,
-            visibility: hideControls ? 'hidden' : 'visible',
           }}
         >
           {dimensions.flatMap((dimension, dimensionIndex) => {
@@ -594,9 +582,47 @@ export const GridRowColumnResizingControls =
       }, 0)
     }
 
+    const scale = useEditorState(
+      Substores.canvas,
+      (store) => store.editor.canvas.scale,
+      'GridRowColumnResizingControls scale',
+    )
+
+    const gridsWithVisibleResizeControls = React.useMemo(() => {
+      return grids.filter((grid) => {
+        if (
+          grid.gridTemplateColumns?.type !== 'DIMENSIONS' ||
+          grid.gridTemplateRows?.type !== 'DIMENSIONS'
+        ) {
+          return false
+        }
+
+        // returns whether the rendered dimensions are too crowded, as in there are two cols/rows that are closer than the handle sizes
+        function tooCrowded(dimensions: GridDimension[]): boolean {
+          const visualSizes = dimensions.map(
+            (dim) => (dim.type === 'NUMBER' ? dim.value.value : 0) * scale,
+          )
+          return visualSizes.some((dim, index) => {
+            if (index < visualSizes.length - 1) {
+              const next = visualSizes[index + 1]
+              if (dim + next < GRID_RESIZE_HANDLE_SIZE * 2) {
+                return true
+              }
+            }
+            return false
+          })
+        }
+
+        return (
+          !tooCrowded(grid.gridTemplateColumns.dimensions) &&
+          !tooCrowded(grid.gridTemplateRows.dimensions)
+        )
+      })
+    }, [scale, grids])
+
     return (
       <CanvasOffsetWrapper>
-        {grids.flatMap((grid) => {
+        {gridsWithVisibleResizeControls.flatMap((grid) => {
           return (
             <GridResizing
               key={`grid-resizing-column-${EP.toString(grid.elementPath)}`}
@@ -610,7 +636,7 @@ export const GridRowColumnResizingControls =
             />
           )
         })}
-        {grids.flatMap((grid) => {
+        {gridsWithVisibleResizeControls.flatMap((grid) => {
           return (
             <GridResizing
               key={`grid-resizing-row-${EP.toString(grid.elementPath)}`}

From 167ff05f44b328f15ab8eff4ca44d365b058abe7 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:14:39 +0100
Subject: [PATCH 076/272] performance(editor) Combined mouse up handling 
 (#6416)

- `useSelectOrLiveModeSelectAndHover` now calls the "global"
`handleMouseUp` function that gathers actions from potentially multiple
functions.
- `EditorCanvas` now hands off it's mouse up handling via the
`addMouseUpHandler` utility function.
---
 ...grid-reparent-strategies.spec.browser2.tsx | 68 +++++++++++++++----
 .../select-mode/select-mode-hooks.tsx         |  8 ++-
 editor/src/templates/editor-canvas.tsx        |  9 +--
 editor/src/templates/global-handlers.tsx      | 21 ++++++
 4 files changed, 84 insertions(+), 22 deletions(-)
 create mode 100644 editor/src/templates/global-handlers.tsx

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
index 909950889d42..fe76a4578c6d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
@@ -299,7 +299,7 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
+      await dragOut(editor, EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -311,8 +311,8 @@ describe('grid reparent strategies', () => {
             width: 79,
             height: 86,
             position: 'absolute',
-            top: 391,
-            left: 492,
+            top: 934,
+            left: 1627,
           }}
           data-uid='dragme'
           data-testid='dragme'
@@ -367,6 +367,7 @@ describe('grid reparent strategies', () => {
             height: 86,
           }}
           data-uid='bar'
+          data-testid='bar'
         />
         <div
           style={{
@@ -384,7 +385,14 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2600, y: 1600 })
+      const barElement = editor.renderedDOM.getByTestId('bar')
+      const barRect = barElement.getBoundingClientRect()
+      const endPoint = {
+        x: barRect.x - 10,
+        y: barRect.y + barRect.height / 2,
+      }
+
+      await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint)
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -427,6 +435,7 @@ describe('grid reparent strategies', () => {
               height: 86,
             }}
             data-uid='bar'
+            data-testid='bar'
           />
           <div
             style={{
@@ -477,6 +486,7 @@ describe('grid reparent strategies', () => {
             height: 86,
           }}
           data-uid='foo'
+          data-testid='foo'
         />
         <div
           style={{
@@ -502,7 +512,14 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2200, y: 1800 })
+      const fooElement = editor.renderedDOM.getByTestId('foo')
+      const fooRect = fooElement.getBoundingClientRect()
+      const endPoint = {
+        x: fooRect.x + fooRect.width / 2,
+        y: fooRect.y + fooRect.height / 2,
+      }
+
+      await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint)
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -526,6 +543,7 @@ describe('grid reparent strategies', () => {
               height: 86,
             }}
             data-uid='foo'
+            data-testid='foo'
           >
             <div
               style={{
@@ -601,6 +619,7 @@ describe('grid reparent strategies', () => {
             gridColumn: 1,
           }}
           data-uid='foo'
+          data-testid='foo'
         />
         <div
           style={{
@@ -611,6 +630,7 @@ describe('grid reparent strategies', () => {
             gridColumn: 3,
           }}
           data-uid='bar'
+          data-testid='bar'
         />
         <div
           style={{
@@ -667,6 +687,7 @@ describe('grid reparent strategies', () => {
               gridColumn: 1,
             }}
             data-uid='foo'
+            data-testid='foo'
           />
           <div
             style={{
@@ -677,6 +698,7 @@ describe('grid reparent strategies', () => {
               gridColumn: 3,
             }}
             data-uid='bar'
+            data-testid='bar'
           />
           <div
             style={{
@@ -725,7 +747,7 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
+      await dragOut(editor, EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -735,8 +757,8 @@ describe('grid reparent strategies', () => {
           style={{
             backgroundColor: '#f0f',
             position: 'absolute',
-            top: 391,
-            left: 492,
+            top: 934,
+            left: 1627,
             width: 86.5,
             height: 135,
           }}
@@ -804,13 +826,9 @@ async function dragElement(
 
 async function dragOut(
   renderResult: EditorRenderResult,
-  gridTestId: string,
   cell: ElementPath,
   endPoint: Point,
-) {
-  const grid = renderResult.renderedDOM.getByTestId(gridTestId)
-  const gridRect = grid.getBoundingClientRect()
-
+): Promise<void> {
   const sourceGridCell = renderResult.renderedDOM.getByTestId(GridCellTestId(cell))
   const sourceRect = sourceGridCell.getBoundingClientRect()
 
@@ -819,10 +837,30 @@ async function dragOut(
     { x: sourceRect.x + 5, y: sourceRect.y + 5 },
     { modifiers: cmdModifier },
   )
-  await mouseDragFromPointToPoint(sourceGridCell, sourceRect, endPoint, {
+
+  await mouseDownAtPoint(
+    sourceGridCell,
+    { x: sourceRect.x + 5, y: sourceRect.y + 5 },
+    {
+      modifiers: cmdModifier,
+    },
+  )
+
+  const delta: Point = {
+    x: endPoint.x - sourceRect.x + 5,
+    y: endPoint.y - sourceRect.y + 5,
+  }
+  await mouseMoveToPoint(sourceGridCell, endPoint, {
+    eventOptions: {
+      movementX: delta.x,
+      movementY: delta.y,
+      buttons: 1,
+    },
+    modifiers: cmdModifier,
+  })
+  await mouseUpAtPoint(renderResult.renderedDOM.getByTestId(CanvasControlsContainerID), endPoint, {
     modifiers: cmdModifier,
   })
-  await mouseUpAtPoint(grid, gridRect, { modifiers: cmdModifier })
 }
 
 async function dragOutToAnotherGrid(
diff --git a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
index 48b74f4fb8ae..8437f1734d66 100644
--- a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
+++ b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
@@ -60,6 +60,7 @@ import { getAllLockedElementPaths } from '../../../../core/shared/element-lockin
 import { treatElementAsGroupLike } from '../../canvas-strategies/strategies/group-helpers'
 import { useCommentModeSelectAndHover } from '../comment-mode/comment-mode-hooks'
 import { useFollowModeSelectAndHover } from '../follow-mode/follow-mode-hooks'
+import { handleGlobalMouseUp } from '../../../../templates/global-handlers'
 import { wait } from '../../../../core/model/performance-scripts'
 import { IS_TEST_ENVIRONMENT } from '../../../../common/env-vars'
 import { isFeatureEnabled } from '../../../../utils/feature-switches'
@@ -667,10 +668,14 @@ function useSelectOrLiveModeSelectAndHover(
         (!hadInteractionSessionThatWasCancelled || !draggedOverThreshold.current) &&
         (activeControl == null || activeControl.type === 'BOUNDING_AREA')
 
+      let editorActions: Array<EditorAction> = []
+
       if (event.type === 'mousedown') {
         didWeHandleMouseDown.current = true
       }
       if (event.type === 'mouseup') {
+        const handleMouseUpActions = handleGlobalMouseUp(event.nativeEvent)
+        editorActions.push(...handleMouseUpActions)
         // Clear the interaction session tracking flag
         interactionSessionHappened.current = false
         // didWeHandleMouseDown is used to avoid selecting when closing text editing
@@ -678,6 +683,7 @@ function useSelectOrLiveModeSelectAndHover(
         draggedOverThreshold.current = false
 
         if (!mouseUpSelectionAllowed) {
+          dispatch(editorActions)
           // We should skip this mouseup
           return
         }
@@ -689,6 +695,7 @@ function useSelectOrLiveModeSelectAndHover(
         !active ||
         !(isLeftClick || isRightClick)
       ) {
+        dispatch(editorActions)
         // Skip all of this handling if 'space' is pressed or a mousemove happened in an interaction, or the hook is not active
         return
       }
@@ -709,7 +716,6 @@ function useSelectOrLiveModeSelectAndHover(
 
       const isMultiselect = event.shiftKey
       const isDeselect = foundTarget == null && !isMultiselect
-      let editorActions: Array<EditorAction> = []
 
       if (foundTarget != null || isDeselect) {
         if (
diff --git a/editor/src/templates/editor-canvas.tsx b/editor/src/templates/editor-canvas.tsx
index ccfe75e5a815..6ad444843b3c 100644
--- a/editor/src/templates/editor-canvas.tsx
+++ b/editor/src/templates/editor-canvas.tsx
@@ -106,6 +106,7 @@ import { getCanvasViewportCenter } from './paste-helpers'
 import { DataPasteHandler, isPasteHandler } from '../utils/paste-handler'
 import { ResizeObserver } from '../components/canvas/dom-walker'
 import { isInsideColorPicker } from '../components/inspector/controls/color-picker-utils'
+import { addMouseUpHandler, removeMouseUpHandler } from './global-handlers'
 
 const webFrame = PROBABLY_ELECTRON ? requireElectron().webFrame : null
 
@@ -1372,14 +1373,10 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
     }
   }
 
-  handleWindowMouseUp = (event: any) => {
-    this.props.dispatch(this.handleMouseUp(event))
-  }
-
   setupWindowListeners() {
     window.addEventListener('mousemove', this.handleMouseMove, { capture: true }) // we use this event in the capture phase because size-box.ts calls stopPropagation() on mouseMove
     window.addEventListener('mouseleave', this.handleMouseLeave)
-    window.addEventListener('mouseup', this.handleWindowMouseUp, { capture: true })
+    addMouseUpHandler(this.handleMouseUp)
     window.addEventListener('click', this.handleClick)
     window.addEventListener('dblclick', this.handleDoubleClick)
     ;(window as any).addEventListener('paste', this.handlePaste)
@@ -1388,7 +1385,7 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
   removeEventListeners() {
     window.removeEventListener('mousemove', this.handleMouseMove, { capture: true })
     window.removeEventListener('mouseleave', this.handleMouseLeave)
-    window.removeEventListener('mouseup', this.handleWindowMouseUp, { capture: true })
+    removeMouseUpHandler(this.handleMouseUp)
     window.removeEventListener('click', this.handleClick)
     window.removeEventListener('dblclick', this.handleDoubleClick)
     ;(window as any).removeEventListener('paste', this.handlePaste)
diff --git a/editor/src/templates/global-handlers.tsx b/editor/src/templates/global-handlers.tsx
new file mode 100644
index 000000000000..cd0fc4443074
--- /dev/null
+++ b/editor/src/templates/global-handlers.tsx
@@ -0,0 +1,21 @@
+import type { EditorAction } from '../components/editor/action-types'
+
+export type MouseHandler = (event: MouseEvent) => Array<EditorAction>
+
+let mouseUpHandlers: Array<MouseHandler> = []
+
+export function addMouseUpHandler(handler: MouseHandler): void {
+  mouseUpHandlers.push(handler)
+}
+
+export function removeMouseUpHandler(handler: MouseHandler): void {
+  mouseUpHandlers = mouseUpHandlers.filter((mouseUpHandler) => mouseUpHandler !== handler)
+}
+
+export function handleGlobalMouseUp(event: MouseEvent): Array<EditorAction> {
+  let result: Array<EditorAction> = []
+  for (const handler of mouseUpHandlers) {
+    result.push(...handler(event))
+  }
+  return result
+}

From 2706fcf3443a2937925ada3af9a18d34f193c921 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Wed, 2 Oct 2024 14:56:14 +0200
Subject: [PATCH 077/272] Specify elements to rerender in reparent & move
 strategies (#6448)

## Description
Fill out `StrategyApplicationResult.elementsToRerender` with the element
path of the affected elements in some reparent, insert and drag
strategies
---
 .../strategies/absolute-reparent-strategy.tsx          |  6 +++---
 .../convert-to-absolute-and-move-strategy.tsx          |  5 +----
 .../strategies/drag-to-insert-metastrategy.tsx         |  5 +----
 .../strategies/draw-to-insert-metastrategy.tsx         | 10 ++--------
 .../strategies/draw-to-insert-text-strategy.tsx        |  5 +----
 .../strategies/reparent-helpers/reparent-helpers.ts    |  7 +------
 6 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx
index 0a448ca2b6c3..504a642b1f0d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx
@@ -231,12 +231,12 @@ export function applyAbsoluteReparent(
             },
           )
         } else {
-          const moveCommands =
+          return (
             absoluteMoveStrategy(canvasState, interactionSession, {
               ...defaultCustomStrategyState(),
               action: 'reparent',
-            })?.strategy.apply(strategyLifecycle).commands ?? []
-          return strategyApplicationResult(moveCommands, 'rerender-all-elements')
+            })?.strategy.apply(strategyLifecycle) ?? emptyStrategyApplicationResult
+          )
         }
       },
     )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
index 34695730d6b5..422708377163 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
@@ -280,10 +280,7 @@ function convertToAbsoluteAndMoveStrategyFactory(setHuggingParentToFixed: SetHug
 
           return strategyApplicationResult(
             [...absoluteMoveApplyResult.commands, strategyIndicatorCommand],
-            // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-            // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-            // appropriate to this particular case.
-            'rerender-all-elements',
+            absoluteMoveApplyResult.elementsToRerender,
           )
         }
         // Fallback for when the checks above are not satisfied.
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx
index 031162699ef6..fe2a11266c2a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx
@@ -281,10 +281,7 @@ function dragToInsertStrategyFactory(
               reparentCommand,
               ...optionalWrappingCommand,
             ],
-            // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-            // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-            // appropriate to this particular case.
-            'rerender-all-elements',
+            [targetParent.intendedParentPath],
             {
               strategyGeneratedUidsCache: {
                 [insertionSubjects[0].uid]: maybeWrapperWithUid?.uid,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx
index 0da5cf8ca11a..2897296e9680 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx
@@ -303,10 +303,7 @@ export function drawToInsertStrategyFactory(
                   resizeCommand,
                   ...optionalWrappingCommand,
                 ],
-                // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-                // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-                // appropriate to this particular case.
-                'rerender-all-elements',
+                [targetParent.intendedParentPath],
                 {
                   strategyGeneratedUidsCache: {
                     [insertionSubject.uid]: maybeWrapperWithUid?.uid,
@@ -352,10 +349,7 @@ export function drawToInsertStrategyFactory(
 
               return strategyApplicationResult(
                 [insertionCommand.command, reparentCommand, ...optionalWrappingCommand],
-                // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-                // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-                // appropriate to this particular case.
-                'rerender-all-elements',
+                [targetParent.intendedParentPath],
                 {
                   strategyGeneratedUidsCache: {
                     [insertionSubject.uid]: maybeWrapperWithUid?.uid,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-text-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-text-strategy.tsx
index 81b24156f222..0a02ebe94b00 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-text-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-text-strategy.tsx
@@ -126,10 +126,7 @@ export const drawToInsertTextMetaStrategy: MetaCanvasStrategy = (
                 },
               }),
             ],
-            // FIXME: This was added as a default value in https://github.com/concrete-utopia/utopia/pull/6408
-            // This was to maintain the existing behaviour, but it should be replaced with a more specific value
-            // appropriate to this particular case.
-            'rerender-all-elements',
+            [targetParent.intendedParentPath],
           )
         }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts
index 3f6b30158503..c9600a2094ca 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts
@@ -249,12 +249,7 @@ export function ifAllowedToReparent(
   if (allowed) {
     return ifAllowed()
   } else {
-    return strategyApplicationResult(
-      [setCursorCommand(CSSCursor.NotPermitted)],
-      'rerender-all-elements',
-      {},
-      'failure',
-    )
+    return strategyApplicationResult([setCursorCommand(CSSCursor.NotPermitted)], [], {}, 'failure')
   }
 }
 

From a16056641d93924d401a8fc4deafc67c7b5e5009 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 2 Oct 2024 16:50:18 +0200
Subject: [PATCH 078/272] Hide area name in grid expression inputs (#6452)

**Problem:**

Area names should not be shown in the string inputs used for grid
template values.

**Fix:**

Set the flag to hide area names in `GridExpressionInput`. For the
future, I also made that flag mandatory and a string union instead of a
boolean flag, as `'show-area-name' | 'hide-area-name'`.

Fixes #6451
---
 .../inspector/common/css-utils.spec.ts        | 156 ++++++++++++++++++
 .../components/inspector/common/css-utils.ts  |  29 ++--
 .../inspector/flex-section.spec.browser2.tsx  |  16 +-
 .../uuiui/inputs/grid-expression-input.tsx    |   8 +-
 4 files changed, 186 insertions(+), 23 deletions(-)

diff --git a/editor/src/components/inspector/common/css-utils.spec.ts b/editor/src/components/inspector/common/css-utils.spec.ts
index 243f75f26ec2..a534399c8552 100644
--- a/editor/src/components/inspector/common/css-utils.spec.ts
+++ b/editor/src/components/inspector/common/css-utils.spec.ts
@@ -52,6 +52,10 @@ import {
   defaultCSSRadialGradientSize,
   defaultCSSRadialOrConicGradientCenter,
   disabledFunctionName,
+  gridCSSKeyword,
+  gridCSSMinmax,
+  gridCSSNumber,
+  gridCSSRepeat,
   parseBackgroundColor,
   parseBackgroundImage,
   parseBorderRadius,
@@ -66,7 +70,9 @@ import {
   parseTransform,
   printBackgroundImage,
   printBackgroundSize,
+  printGridDimensionCSS,
   RegExpLibrary,
+  stringifyGridDimension,
   toggleSimple,
   toggleStylePropPath,
 } from './css-utils'
@@ -1805,3 +1811,153 @@ describe('printBackgroundSize', () => {
     `)
   })
 })
+
+describe('stringifyGridDimension', () => {
+  it('keyword', async () => {
+    expect(stringifyGridDimension(gridCSSKeyword(cssKeyword('auto'), null))).toBe('auto')
+    expect(stringifyGridDimension(gridCSSKeyword(cssKeyword('auto'), 'the-area'))).toBe('auto')
+  })
+
+  it('number', async () => {
+    expect(stringifyGridDimension(gridCSSNumber(cssNumber(123), null))).toBe('123')
+    expect(stringifyGridDimension(gridCSSNumber(cssNumber(123, 'px'), null))).toBe('123px')
+    expect(stringifyGridDimension(gridCSSNumber(cssNumber(123), 'the-area'))).toBe('123')
+  })
+
+  it('repeat', async () => {
+    expect(
+      stringifyGridDimension(
+        gridCSSRepeat(3, [
+          gridCSSKeyword(cssKeyword('auto'), null),
+          gridCSSKeyword(cssKeyword('min-content'), null),
+          gridCSSNumber(cssNumber(123, 'px'), null),
+        ]),
+      ),
+    ).toBe(`repeat(3, auto min-content 123px)`)
+
+    expect(
+      stringifyGridDimension(
+        gridCSSRepeat(3, [
+          gridCSSKeyword(cssKeyword('auto'), 'foo'),
+          gridCSSKeyword(cssKeyword('min-content'), 'bar'),
+          gridCSSNumber(cssNumber(123, 'px'), null),
+        ]),
+      ),
+    ).toBe(`repeat(3, [foo] auto [bar] min-content 123px)`)
+
+    expect(
+      stringifyGridDimension(
+        gridCSSRepeat(cssKeyword('auto-fit'), [
+          gridCSSMinmax(
+            gridCSSNumber(cssNumber(400, 'px'), null),
+            gridCSSNumber(cssNumber(1, 'fr'), null),
+            null,
+          ),
+        ]),
+      ),
+    ).toBe(`repeat(auto-fit, minmax(400px, 1fr))`)
+  })
+
+  it('minmax', async () => {
+    expect(
+      stringifyGridDimension(
+        gridCSSMinmax(
+          gridCSSKeyword(cssKeyword('auto'), null),
+          gridCSSKeyword(cssKeyword('min-content'), null),
+          null,
+        ),
+      ),
+    ).toBe('minmax(auto, min-content)')
+
+    expect(
+      stringifyGridDimension(
+        gridCSSMinmax(
+          gridCSSKeyword(cssKeyword('auto'), null),
+          gridCSSKeyword(cssKeyword('min-content'), null),
+          'the-area',
+        ),
+      ),
+    ).toBe('minmax(auto, min-content)')
+  })
+})
+
+describe('printGridDimensionCSS', () => {
+  it('keyword', async () => {
+    expect(printGridDimensionCSS(gridCSSKeyword(cssKeyword('auto'), null))).toBe('auto')
+    expect(printGridDimensionCSS(gridCSSKeyword(cssKeyword('auto'), 'the-area'))).toBe(
+      '[the-area] auto',
+    )
+  })
+
+  it('number', async () => {
+    expect(printGridDimensionCSS(gridCSSNumber(cssNumber(123), null))).toBe('123')
+    expect(printGridDimensionCSS(gridCSSNumber(cssNumber(123, 'px'), null))).toBe('123px')
+    expect(printGridDimensionCSS(gridCSSNumber(cssNumber(123), 'the-area'))).toBe('[the-area] 123')
+  })
+
+  it('repeat', async () => {
+    expect(
+      printGridDimensionCSS(
+        gridCSSRepeat(3, [
+          gridCSSKeyword(cssKeyword('auto'), null),
+          gridCSSKeyword(cssKeyword('min-content'), null),
+          gridCSSNumber(cssNumber(123, 'px'), null),
+        ]),
+      ),
+    ).toBe(`repeat(3, auto min-content 123px)`)
+
+    expect(
+      printGridDimensionCSS(
+        gridCSSRepeat(3, [
+          gridCSSKeyword(cssKeyword('auto'), 'foo'),
+          gridCSSKeyword(cssKeyword('min-content'), 'bar'),
+          gridCSSNumber(cssNumber(123, 'px'), null),
+        ]),
+      ),
+    ).toBe(`repeat(3, [foo] auto [bar] min-content 123px)`)
+
+    expect(
+      printGridDimensionCSS(
+        gridCSSRepeat(cssKeyword('auto-fit'), [
+          gridCSSMinmax(
+            gridCSSNumber(cssNumber(400, 'px'), null),
+            gridCSSNumber(cssNumber(1, 'fr'), null),
+            null,
+          ),
+        ]),
+      ),
+    ).toBe(`repeat(auto-fit, minmax(400px, 1fr))`)
+  })
+
+  it('minmax', async () => {
+    expect(
+      printGridDimensionCSS(
+        gridCSSMinmax(
+          gridCSSKeyword(cssKeyword('auto'), null),
+          gridCSSKeyword(cssKeyword('min-content'), null),
+          null,
+        ),
+      ),
+    ).toBe('minmax(auto, min-content)')
+
+    expect(
+      printGridDimensionCSS(
+        gridCSSMinmax(
+          gridCSSKeyword(cssKeyword('auto'), null),
+          gridCSSKeyword(cssKeyword('min-content'), null),
+          'the-area',
+        ),
+      ),
+    ).toBe('[the-area] minmax(auto, min-content)')
+
+    expect(
+      printGridDimensionCSS(
+        gridCSSMinmax(
+          gridCSSKeyword(cssKeyword('auto'), 'foo'),
+          gridCSSKeyword(cssKeyword('min-content'), 'bar'),
+          'the-area',
+        ),
+      ),
+    ).toBe('[the-area] minmax(auto, min-content)')
+  })
+})
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index feec3148dc00..f7a0c80a2064 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -904,27 +904,28 @@ export function printCSSNumber(
   }
 }
 
-export function printGridDimension(dimension: GridDimension, hideAreaName?: boolean): string {
-  const areaName =
-    dimension.areaName != null && hideAreaName !== true ? `[${dimension.areaName}] ` : ''
+export function printGridDimensionCSS(dimension: GridDimension): string {
+  const areaName = dimension.areaName != null ? `[${dimension.areaName}] ` : ''
+  return areaName + stringifyGridDimension(dimension)
+}
+
+export function stringifyGridDimension(dimension: GridDimension): string {
   switch (dimension.type) {
     case 'KEYWORD': {
-      return `${areaName}${dimension.value.value}`
+      return dimension.value.value
     }
     case 'NUMBER': {
-      const printed = printCSSNumber(dimension.value, null)
-      return `${areaName}${printed}`
+      return `${printCSSNumber(dimension.value, null)}`
     }
     case 'REPEAT': {
-      return `repeat(${
-        isCSSKeyword(dimension.times) ? dimension.times.value : dimension.times
-      }, ${printArrayGridDimensions(dimension.value)})`
+      const times = isCSSKeyword(dimension.times) ? dimension.times.value : dimension.times
+      const values = dimension.value.map(printGridDimensionCSS).join(' ')
+      return `repeat(${times}, ${values})`
     }
     case 'MINMAX': {
-      return (
-        areaName +
-        `minmax(${printGridDimension(dimension.min)}, ${printGridDimension(dimension.max)})`
-      )
+      const min = stringifyGridDimension(dimension.min)
+      const max = stringifyGridDimension(dimension.max)
+      return `minmax(${min}, ${max})`
     }
     default:
       assertNever(dimension)
@@ -932,7 +933,7 @@ export function printGridDimension(dimension: GridDimension, hideAreaName?: bool
 }
 
 export function printArrayGridDimensions(array: Array<GridDimension>): string {
-  return array.map((v) => printGridDimension(v)).join(' ')
+  return array.map(printGridDimensionCSS).join(' ')
 }
 
 export function printGridAutoOrTemplateBase(input: GridAutoOrTemplateBase): string {
diff --git a/editor/src/components/inspector/flex-section.spec.browser2.tsx b/editor/src/components/inspector/flex-section.spec.browser2.tsx
index 1cdcc970fb6d..e624cd80e3ef 100644
--- a/editor/src/components/inspector/flex-section.spec.browser2.tsx
+++ b/editor/src/components/inspector/flex-section.spec.browser2.tsx
@@ -61,12 +61,18 @@ describe('flex section', () => {
       await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
 
       const grid = await renderResult.renderedDOM.findByTestId('grid')
-
-      await typeIntoField(
-        await screen.findByTestId('grid-dimension-column-1'),
-        'repeat(2, 0.5fr 42px)',
-      )
+      const input: HTMLInputElement = await screen.findByTestId('grid-dimension-column-1')
+      await typeIntoField(input, 'repeat(2, 0.5fr 42px)')
       expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr repeat(2, 0.5fr 42px) 2fr')
+      expect(input.value).toBe('repeat(2, 0.5fr 42px)')
+    })
+    it('does not show area names in the input', async () => {
+      const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
+      await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
+      const control: HTMLInputElement = await screen.findByTestId('grid-dimension-column-0')
+      const grid = await renderResult.renderedDOM.findByTestId('grid')
+      expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr 1fr 1fr 1fr 1fr')
+      expect(control.value).toBe('1fr')
     })
   })
 })
diff --git a/editor/src/uuiui/inputs/grid-expression-input.tsx b/editor/src/uuiui/inputs/grid-expression-input.tsx
index d3c0217663f9..b5a5bf3a1830 100644
--- a/editor/src/uuiui/inputs/grid-expression-input.tsx
+++ b/editor/src/uuiui/inputs/grid-expression-input.tsx
@@ -5,7 +5,7 @@ import {
   isValidGridDimensionKeyword,
   parseCSSNumber,
   parseGridCSSMinmaxOrRepeat,
-  printGridDimension,
+  stringifyGridDimension,
   type CSSKeyword,
   type CSSNumber,
   type GridDimension,
@@ -32,8 +32,8 @@ export const GridExpressionInput = React.memo(
     onFocus,
     onBlur,
   }: GridExpressionInputProps) => {
-    const [printValue, setPrintValue] = React.useState<string>(printGridDimension(value))
-    React.useEffect(() => setPrintValue(printGridDimension(value)), [value])
+    const [printValue, setPrintValue] = React.useState<string>(stringifyGridDimension(value))
+    React.useEffect(() => setPrintValue(stringifyGridDimension(value)), [value])
 
     const onChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
       setPrintValue(e.target.value)
@@ -66,7 +66,7 @@ export const GridExpressionInput = React.memo(
           return onUpdateNumberOrKeyword(cssKeyword('auto'))
         }
 
-        setPrintValue(printGridDimension(value))
+        setPrintValue(stringifyGridDimension(value))
       },
       [printValue, onUpdateNumberOrKeyword, onUpdateDimension, value],
     )

From feedd6c09f86bb0173db5a06d9a4df0b3cc308d5 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 2 Oct 2024 19:29:59 +0200
Subject: [PATCH 079/272] Fix exception in gap-utils (#6454)

**Problem:**
After https://github.com/concrete-utopia/utopia/pull/6410 , it is
possible that specialSizeMeasurements.gridCellGlobalFrames is outdated,
and if the number of rows/columns changed, it can even have the wrong
number of rows/columns compared to information in other parts of the
metadata.

**Fix:**
Change gridGapControlBoundsFromMetadata in a way that it is resilient to
these problems. The metadata will be eventually fixed when the grid
controls are on (and the gap controls are only visible in that case).

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/components/canvas/gap-utils.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
index 07a945aae2b8..a8cbe955a64c 100644
--- a/editor/src/components/canvas/gap-utils.ts
+++ b/editor/src/components/canvas/gap-utils.ts
@@ -229,17 +229,17 @@ export function gridGapControlBoundsFromMetadata(
     x: gridCellBounds[0][0].x - parentGridBounds.x,
     y: gridCellBounds[0][0].y - parentGridBounds.y,
     width:
-      gridCellBounds[0][gridColumns - 1].x +
-      gridCellBounds[0][gridColumns - 1].width -
+      gridCellBounds[0][gridCellBounds[0].length - 1].x +
+      gridCellBounds[0][gridCellBounds[0].length - 1].width -
       gridCellBounds[0][0].x,
     height:
-      gridCellBounds[gridRows - 1][0].y +
-      gridCellBounds[gridRows - 1][0].height -
+      gridCellBounds[gridCellBounds.length - 1][0].y +
+      gridCellBounds[gridCellBounds.length - 1][0].height -
       gridCellBounds[0][0].y,
   })
 
   // row gaps array
-  const rowGaps = createArrayWithLength(gridRows - 1, (i) => {
+  const rowGaps = createArrayWithLength(gridCellBounds.length - 1, (i) => {
     // cell i represents the gap between child [i * gridColumns] and child [(i+1) * gridColumns]
     const firstChildBounds = gridCellBounds[i][0]
     const secondChildBounds = gridCellBounds[i + 1][0]
@@ -257,7 +257,7 @@ export function gridGapControlBoundsFromMetadata(
   })
 
   // column gaps array
-  const columnGaps = createArrayWithLength(gridColumns - 1, (i) => {
+  const columnGaps = createArrayWithLength(gridCellBounds[0].length - 1, (i) => {
     // cell i represents the gap between child [i] and child [i + 1]
     const firstChildBounds = gridCellBounds[0][i]
     const secondChildBounds = gridCellBounds[0][i + 1]

From 229b68baf02fe8507c98d5ddac3ca69f8b173b8a Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Wed, 2 Oct 2024 20:35:36 +0200
Subject: [PATCH 080/272] TransientActions: making elementsToRerender mandatory
 (#6428)

**Problem:**
TransientActions is the inspector's way of creating a continuous
interaction. This properly collates all undo events into a single undo
step representing the entire series of dispatched transient actions, and
it _optionally_ lets you set an array of ElementPaths that will make the
editor and the canvas switch to fast rerender mode. The problem is that
this elementsToRerender path is optional, which means some inspector
interactions will be slow!

**Fix:**
Make elementsToRerender mandatory and fill it in all places.
---
 editor/src/components/editor/action-types.ts         |  2 +-
 .../src/components/editor/actions/action-creators.ts |  2 +-
 editor/src/components/editor/store/dispatch.tsx      |  2 +-
 .../inspector/common/longhand-shorthand-hooks.ts     | 12 ++++++++++--
 editor/src/components/inspector/flex-section.tsx     |  2 +-
 .../split-chained-number-input.tsx                   |  2 +-
 editor/src/templates/editor.tsx                      |  4 +---
 7 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts
index ca9ef5a0290c..f841a7836ecd 100644
--- a/editor/src/components/editor/action-types.ts
+++ b/editor/src/components/editor/action-types.ts
@@ -295,7 +295,7 @@ export type SetZIndex = {
 export type TransientActions = {
   action: 'TRANSIENT_ACTIONS'
   transientActions: Array<EditorAction>
-  elementsToRerender: Array<ElementPath> | null
+  elementsToRerender: Array<ElementPath>
 }
 
 // This is a wrapper action which changes the undo behavior for the included actions.
diff --git a/editor/src/components/editor/actions/action-creators.ts b/editor/src/components/editor/actions/action-creators.ts
index f78aa83dba6b..5061e880e8aa 100644
--- a/editor/src/components/editor/actions/action-creators.ts
+++ b/editor/src/components/editor/actions/action-creators.ts
@@ -375,7 +375,7 @@ export function toggleDataCanCondense(targets: Array<ElementPath>): ToggleDataCa
 
 export function transientActions(
   actions: Array<EditorAction>,
-  elementsToRerender: Array<ElementPath> | null = null,
+  elementsToRerender: Array<ElementPath>,
 ): TransientActions {
   return {
     action: 'TRANSIENT_ACTIONS',
diff --git a/editor/src/components/editor/store/dispatch.tsx b/editor/src/components/editor/store/dispatch.tsx
index c0e1a99e29a6..e65af702d272 100644
--- a/editor/src/components/editor/store/dispatch.tsx
+++ b/editor/src/components/editor/store/dispatch.tsx
@@ -424,7 +424,7 @@ function reducerToSplitToActionGroups(
       [[]],
     )
     const wrappedTransientActionGroups = transientActionGroups.map((actionGroup) => [
-      EditorActions.transientActions(actionGroup),
+      EditorActions.transientActions(actionGroup, currentAction.elementsToRerender),
     ])
     return [...actionGroups, ...wrappedTransientActionGroups]
   } else if (i > 0 && actions[i - 1].action === 'CLEAR_INTERACTION_SESSION') {
diff --git a/editor/src/components/inspector/common/longhand-shorthand-hooks.ts b/editor/src/components/inspector/common/longhand-shorthand-hooks.ts
index de417fa225a2..1bf8322004e9 100644
--- a/editor/src/components/inspector/common/longhand-shorthand-hooks.ts
+++ b/editor/src/components/inspector/common/longhand-shorthand-hooks.ts
@@ -190,7 +190,11 @@ export function useInspectorInfoLonghandShorthand<
             setProp_UNSAFE(selectedView, shorthandPropertyPath, printedValue),
           ]
         }, selectedViewsRef.current)
-        dispatch(transient ? [transientActions(actionsToDispatch)] : actionsToDispatch)
+        dispatch(
+          transient
+            ? [transientActions(actionsToDispatch, selectedViewsRef.current)]
+            : actionsToDispatch,
+        )
       } else {
         // we either have a dominant longhand key, or we need to append a new one
         const propertyPath = pathMappingFn(longhand, inspectorTargetPath)
@@ -203,7 +207,11 @@ export function useInspectorInfoLonghandShorthand<
             setProp_UNSAFE(selectedView, propertyPath, printedValue),
           ]
         }, selectedViewsRef.current)
-        dispatch(transient ? [transientActions(actionsToDispatch)] : actionsToDispatch)
+        dispatch(
+          transient
+            ? [transientActions(actionsToDispatch, selectedViewsRef.current)]
+            : actionsToDispatch,
+        )
       }
     }
 
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index b32f4da14128..80473de131fa 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -834,7 +834,7 @@ const GapRowColumnControl = React.memo(() => {
       }
 
       const transientWrapper = (actions: EditorAction[]) =>
-        transient ? [transientActions(actions)] : actions
+        transient ? [transientActions(actions, [grid.elementPath])] : actions
 
       dispatch(
         transientWrapper([
diff --git a/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx b/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx
index 19d4859c27f8..a17f0dfbe444 100644
--- a/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx
+++ b/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx
@@ -443,7 +443,7 @@ export const longhandShorthandEventHandler = (
     }
 
     if (isTransient) {
-      dispatch([transientActions(actions)])
+      dispatch([transientActions(actions, selectedViewsRef.current)])
     } else {
       dispatch(actions)
     }
diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index 07ede0693cff..140ba5beb5a0 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -151,9 +151,7 @@ function collectElementsToRerenderForTransientActions(
   action: EditorAction,
 ): Array<ElementPath> {
   if (action.action === 'TRANSIENT_ACTIONS') {
-    if (action.elementsToRerender != null) {
-      working.push(...action.elementsToRerender)
-    }
+    working.push(...action.elementsToRerender)
     working.push(
       ...action.transientActions.reduce(collectElementsToRerenderForTransientActions, working),
     )

From d69ec2820b7158dd6e8b4e785b87fbb4e168178b Mon Sep 17 00:00:00 2001
From: McKayla Lankau <lankaukk@yahoo.com>
Date: Thu, 3 Oct 2024 05:29:11 -0400
Subject: [PATCH 081/272] Alignment Icons and Disabled Control State (#6459)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We currently use the same icons in the new inspector controls for
alignment, for both absolute elements and elements inside layouts. The
new design proposal is to use a slightly different icon in those
controls when a a flex child or grid child is selected, so you can
anticipate that it will be setting justifySelf or alignSelf, not top and
left.

To prepare for this:

- I'm uploading new icons to use for justify/alignSelf for grid and flex
children
- renaming the existing icons to a more appropriate "justify" and
"align", and updating the names of their instances in code
- adjusting the chain control component to have a visible disabled state

<img width="892" alt="Screenshot 2024-10-02 at 5 05 14 PM"
src="https://github.com/user-attachments/assets/b48d214d-4da0-48ef-916e-92a632f18da6">

When options are disabled, they will look like the ones on the right:

![02-29-iyzv3-qjigv](https://github.com/user-attachments/assets/cb9a24bb-1d81-433b-91bd-312d5b9ceec1)

---------

Co-authored-by: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
---
 .../inspector/align-center-black-16x16@2x.png   | Bin 0 -> 698 bytes
 .../inspector/align-center-blue-16x16@2x.png    | Bin 0 -> 695 bytes
 .../align-center-darkgray-16x16@2x.png          | Bin 0 -> 684 bytes
 .../inspector/align-center-gray-16x16@2x.png    | Bin 0 -> 661 bytes
 .../align-center-lightblue-16x16@2x.png         | Bin 0 -> 687 bytes
 .../align-center-lightgray-16x16@2x.png         | Bin 0 -> 693 bytes
 .../inspector/align-center-white-16x16@2x.png   | Bin 0 -> 643 bytes
 .../inspector/align-end-black-16x16@2x.png      | Bin 0 -> 608 bytes
 .../light/inspector/align-end-blue-16x16@2x.png | Bin 0 -> 613 bytes
 .../inspector/align-end-darkgray-16x16@2x.png   | Bin 0 -> 617 bytes
 .../light/inspector/align-end-gray-16x16@2x.png | Bin 0 -> 604 bytes
 .../inspector/align-end-lightblue-16x16@2x.png  | Bin 0 -> 609 bytes
 .../inspector/align-end-lightgray-16x16@2x.png  | Bin 0 -> 618 bytes
 .../inspector/align-end-white-16x16@2x.png      | Bin 0 -> 580 bytes
 .../inspector/align-start-black-16x16@2x.png    | Bin 0 -> 608 bytes
 .../inspector/align-start-blue-16x16@2x.png     | Bin 0 -> 612 bytes
 .../inspector/align-start-darkgray-16x16@2x.png | Bin 0 -> 618 bytes
 .../inspector/align-start-gray-16x16@2x.png     | Bin 0 -> 608 bytes
 .../align-start-lightblue-16x16@2x.png          | Bin 0 -> 611 bytes
 .../align-start-lightgray-16x16@2x.png          | Bin 0 -> 621 bytes
 .../inspector/align-start-white-16x16@2x.png    | Bin 0 -> 579 bytes
 .../alignSelf-center-black-16x16@2x.png         | Bin 698 -> 646 bytes
 .../alignSelf-center-blue-16x16@2x.png          | Bin 695 -> 647 bytes
 .../alignSelf-center-darkgray-16x16@2x.png      | Bin 684 -> 653 bytes
 .../alignSelf-center-gray-16x16@2x.png          | Bin 661 -> 641 bytes
 .../alignSelf-center-lightblue-16x16@2x.png     | Bin 687 -> 647 bytes
 .../alignSelf-center-lightgray-16x16@2x.png     | Bin 693 -> 655 bytes
 .../alignSelf-center-white-16x16@2x.png         | Bin 643 -> 630 bytes
 .../inspector/alignSelf-end-black-16x16@2x.png  | Bin 608 -> 631 bytes
 .../inspector/alignSelf-end-blue-16x16@2x.png   | Bin 613 -> 638 bytes
 .../alignSelf-end-darkgray-16x16@2x.png         | Bin 617 -> 643 bytes
 .../inspector/alignSelf-end-gray-16x16@2x.png   | Bin 604 -> 634 bytes
 .../alignSelf-end-lightblue-16x16@2x.png        | Bin 609 -> 632 bytes
 .../alignSelf-end-lightgray-16x16@2x.png        | Bin 618 -> 641 bytes
 .../inspector/alignSelf-end-white-16x16@2x.png  | Bin 580 -> 611 bytes
 .../alignSelf-start-black-16x16@2x.png          | Bin 608 -> 631 bytes
 .../inspector/alignSelf-start-blue-16x16@2x.png | Bin 612 -> 641 bytes
 .../alignSelf-start-darkgray-16x16@2x.png       | Bin 618 -> 643 bytes
 .../inspector/alignSelf-start-gray-16x16@2x.png | Bin 608 -> 631 bytes
 .../alignSelf-start-lightblue-16x16@2x.png      | Bin 611 -> 636 bytes
 .../alignSelf-start-lightgray-16x16@2x.png      | Bin 621 -> 647 bytes
 .../alignSelf-start-white-16x16@2x.png          | Bin 579 -> 617 bytes
 .../inspector/justify-center-black-16x16@2x.png | Bin 0 -> 619 bytes
 .../inspector/justify-center-blue-16x16@2x.png  | Bin 0 -> 624 bytes
 .../justify-center-darkgray-16x16@2x.png        | Bin 0 -> 629 bytes
 .../inspector/justify-center-gray-16x16@2x.png  | Bin 0 -> 616 bytes
 .../justify-center-lightblue-16x16@2x.png       | Bin 0 -> 621 bytes
 .../justify-center-lightgray-16x16@2x.png       | Bin 0 -> 635 bytes
 .../inspector/justify-center-white-16x16@2x.png | Bin 0 -> 613 bytes
 .../inspector/justify-end-black-16x16@2x.png    | Bin 0 -> 618 bytes
 .../inspector/justify-end-blue-16x16@2x.png     | Bin 0 -> 613 bytes
 .../inspector/justify-end-darkgray-16x16@2x.png | Bin 0 -> 633 bytes
 .../inspector/justify-end-gray-16x16@2x.png     | Bin 0 -> 623 bytes
 .../justify-end-lightblue-16x16@2x.png          | Bin 0 -> 613 bytes
 .../justify-end-lightgray-16x16@2x.png          | Bin 0 -> 625 bytes
 .../inspector/justify-end-white-16x16@2x.png    | Bin 0 -> 605 bytes
 .../inspector/justify-start-black-16x16@2x.png  | Bin 0 -> 614 bytes
 .../inspector/justify-start-blue-16x16@2x.png   | Bin 0 -> 615 bytes
 .../justify-start-darkgray-16x16@2x.png         | Bin 0 -> 628 bytes
 .../inspector/justify-start-gray-16x16@2x.png   | Bin 0 -> 619 bytes
 .../justify-start-lightblue-16x16@2x.png        | Bin 0 -> 614 bytes
 .../justify-start-lightgray-16x16@2x.png        | Bin 0 -> 625 bytes
 .../inspector/justify-start-white-16x16@2x.png  | Bin 0 -> 604 bytes
 .../justifySelf-center-black-16x16@2x.png       | Bin 619 -> 662 bytes
 .../justifySelf-center-blue-16x16@2x.png        | Bin 624 -> 664 bytes
 .../justifySelf-center-darkgray-16x16@2x.png    | Bin 629 -> 671 bytes
 .../justifySelf-center-gray-16x16@2x.png        | Bin 616 -> 656 bytes
 .../justifySelf-center-lightblue-16x16@2x.png   | Bin 621 -> 663 bytes
 .../justifySelf-center-lightgray-16x16@2x.png   | Bin 635 -> 674 bytes
 .../justifySelf-center-white-16x16@2x.png       | Bin 613 -> 641 bytes
 .../justifySelf-end-black-16x16@2x.png          | Bin 618 -> 651 bytes
 .../inspector/justifySelf-end-blue-16x16@2x.png | Bin 613 -> 653 bytes
 .../justifySelf-end-darkgray-16x16@2x.png       | Bin 633 -> 659 bytes
 .../inspector/justifySelf-end-gray-16x16@2x.png | Bin 623 -> 647 bytes
 .../justifySelf-end-lightblue-16x16@2x.png      | Bin 613 -> 653 bytes
 .../justifySelf-end-lightgray-16x16@2x.png      | Bin 625 -> 662 bytes
 .../justifySelf-end-white-16x16@2x.png          | Bin 605 -> 636 bytes
 .../justifySelf-start-black-16x16@2x.png        | Bin 614 -> 646 bytes
 .../justifySelf-start-blue-16x16@2x.png         | Bin 615 -> 647 bytes
 .../justifySelf-start-darkgray-16x16@2x.png     | Bin 628 -> 653 bytes
 .../justifySelf-start-gray-16x16@2x.png         | Bin 619 -> 641 bytes
 .../justifySelf-start-lightblue-16x16@2x.png    | Bin 614 -> 646 bytes
 .../justifySelf-start-lightgray-16x16@2x.png    | Bin 625 -> 654 bytes
 .../justifySelf-start-white-16x16@2x.png        | Bin 604 -> 635 bytes
 .../components/inspector/alignment-buttons.tsx  |  12 ++++++------
 .../inspector/controls/option-chain-control.tsx |   1 +
 .../inspector/controls/option-control.tsx       |  13 +++++++------
 87 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 editor/resources/editor/icons/light/inspector/align-center-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-center-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-center-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-center-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-center-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-center-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-center-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-end-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-end-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-end-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-end-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-end-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-end-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-end-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-start-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-start-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-start-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-start-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-start-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-start-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/align-start-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-center-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-center-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-center-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-center-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-center-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-center-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-center-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-end-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-end-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-end-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-end-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-end-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-end-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-end-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-start-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-start-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-start-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-start-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-start-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-start-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/justify-start-white-16x16@2x.png

diff --git a/editor/resources/editor/icons/light/inspector/align-center-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-center-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..93f2170de29e3333756e7823b7213f1a677a2a94
GIT binary patch
literal 698
zcmV;r0!96aP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0QX5mK~#7F?Uu_8gD?z+ohsZJp?5eiLc0N-pxvZ&
zk}?7#bOa7??+6^Yfs~r6L~0dq8#zTn`7Tk6E&s&M1HiK|0+>jWB<#BGB!mcuxl-yL
z1VK@jWiuBifr-BFuQ;TbSldw05r_R;+y<Dy#Hqo&Bf|Iu*g}@Twzg~nY-{^1WC?6*
z%O=1zUcll4^idqgab|MBCOjJhg}B)GjZ{^Yy$Oh-NWmYe>-w2np951$U9Eur4g^yx
zGycJ^exLYV;02HZu#0a7TLDav*RhoHfY)z|Nw>osw_DS;Z4OM30$vY~92~KpCbaDp
gwr9EPUh%A#2ixFr{p)i)wEzGB07*qoM6N<$g5Vi7(EtDd

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-center-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-center-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..1bcf7fa8881bd343318d4143ca0856d852528d92
GIT binary patch
literal 695
zcmV;o0!aOdP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0Q5;jK~#7F?Uqdrf-n$;-w+84HXOmD=ne1$dI{Z%
zTitjAIRZ!UC?0`@BqE8GG!hd2TALvn(r?ucZ{X3HrUfiNhQLK60^IWr917%I&<(zu
zAfj|AZ3Zr~=LJL|L=`9pS+On$%b_#}e1z?gSU>@%0VC8UFsv<~0mItrqEiB++Hx8g
z6>H#+w&5<1Iu)WPv#HnBRUADTug`*Q-uH@eIC=8h^$HLUokD?qXS}J`)wLe0=v$f3
zAAGHAV0VEvpkaWn?GO?$p+1facLnzmf}FXWzeEb(i@}82z*$~AVvNL;n$WCQ_^#z6
d_ljk@yaCi=N?nm;z~%q|002ovPDHLkV1j~DF2Mi*

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-center-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-center-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..b398eeccaa7d8a890eb9c4e212ac79ea5a94c204
GIT binary patch
literal 684
zcmV;d0#p5oP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0O?6YK~#7F?UqpvgCGos>w@ndVMp0+z!KlLn@mqK
z58#7G@F+Wi?~t&D$U;aEM#@YK-xD^i{L)GbP}rFYh~S(zjIjqU8~x&{dJ7>YWZ8;i
zKtx^FFQpVW&$tE@bjRg&EA9kD*qd8i0%3FlQVFIYHMe8}Qga(iFa@c(B@>XFB4Bp`
z->bN7+s@<j^w|4EKg~Ffohv}WA3*_nZ~GqTJ-%5^z!2<)zLPOu@T;Fo`3s7G7y+|u
zz?M7#5y5sWrMzKF=GYa_t7*Y`U;rY50@lG}fJ_{!2xr$2Q!8X+dG1;%9G4IGcUmeq
Se%vYm0000<MNUMnLSTYBVJL$D

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-center-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-center-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..b65c9547424158ac655682c3920d8c3247517ed4
GIT binary patch
literal 661
zcmV;G0&4w<P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0MbcBK~#7F?Us!Vf-n$;55oYA;3&EQPN17uCeaZX
zfl(a64fKp?Lerzi@dydIFS!t2uI)>&e?-p86a*rKQ1R!&QT5V;qh<X$)~+NRH;y{e
z&K$?FMmxe$C$s})KpHTSErGSRFau<)trkrQOtnQCSQIy~x`F>u%-bpmIafh%jCq6c
zN<{|}+I%T5#0Hv)9n6}6AKBZGXX+*Bg(WY>cYzzw80ZpOOCU7Y@rk}S;=cd?yaVn8
vLh~Sj4j8kkMc5^@>{>xS%NJcM&USeNae6I|6tk|j00000NkvXXu0mjfaONLc

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-center-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-center-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa7bf50773590aec8fa6d0f584a20d49bd9d679e
GIT binary patch
literal 687
zcmV;g0#N;lP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0PIObK~#7F?Uu0(!Y~j;zat{rjKB&s(82~`0@wsI
z2^k?Hq=kkR7$GfC7>mS2BsezKnMjdek>Ygc`|+La0|EoXKm@;t1UKyDib=il6)|!?
zXJud91XSE{M1=Ii_P|zt*L`6Ts9>$+6)PB^6X1xk1g^Cu6X04~Tg)YJtSy}Y&jbO3
z3wU3}{3N)>WB=7IaB%Wd`Id}VVajk80)K=r*eiE)4``J7+JPp_fNp2hAN=aqCY*vG
zz(zpPu?XZK!u%Y^*vRKMl}TrH@)A>IAi_M5RD(wbPmHPwi;l&jSLnua&%F{DFHhd*
VLANOmg@FJ7002ovPDHLkV1jmUEv^6n

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-center-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-center-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..c82864bf183e22c9e3d5acd1589f9434c798ad4a
GIT binary patch
literal 693
zcmV;m0!safP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0P;yhK~#7F?UwBggCG!w4`cvG=n5wKzumx2&~8#Y
zNgcrv{I7{CbOZ-bDK<*d28EKNCWa>=fj3-y<&F;k&&CiyqG_72>$<DxhU1u0`V_5*
zqNrVqV}L~8_YXoyI*&Q$qjnM9(^?z_JW_>r1Pz!5tk9;wHn(U7Y;$XhNeZlTi)p|q
z-oWMt<WXEzRi>Ok$W5h--Eg;=H<Khu_F<r|YYu-Tj^p>Y<vFnA)YS^eIMA@PGV>q&
zI`1353%mgn1EoSM0154N90b967=~1|!z8tgu^f=l8kim)IXGfhMOZ2{ZLOd^%U#!s
bXTQ7vb{S!e7F!in00000NkvXXu0mjfhO8~b

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-center-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-center-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..6da6b2deff5ac6a890f1069716dfad4118337edb
GIT binary patch
literal 643
zcmV-}0(||6P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0KiE^K~#7F?U#!QgfI+-lj8<(gd6Eba1(VCH_#1q
z6i0A_7)8NHYpMhvkPm_oQvI=iN(x}y41y9w6!9bGh{jaIQ6gdsSHJ=a+EPjDH2(lO
zKfvs*`@qe7rGnS&EqRdMFM1$!Z(r*H6Y!iiWDliqfY5qh9eZ=g<E&6@8BM0{m>)!$
zr#A8Avy*j8As}GqfC+elfZCBOL5Ywq=;wex$8Svab3neH2hMhZjbxevYDZ4=iuS!g
d^on7u=>RXZk01vy4+;PP002ovPDHLkV1kY$7YYCX

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-end-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-end-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..20a0e5313c70c1d24c0fbc6d083406579abd0cad
GIT binary patch
literal 608
zcmV-m0-ybfP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0G&xhK~#7F?U&IBfFKZt&uD-~@ZF)Bp$%$-R%j^S
z8=(#CiiiRs)60nd4}3We??d!dqQ9fA5{xmmQmS{(Ra<D}(OPQ<5}*jkX%EF0G>@Ky
z2ocbpSVb8H9t8prC`pLeej&L6QT;+vKzm}B{Q{d10uX=z1U?}!d17Ni-fe;AI1yjD
uOQ9|y51iP4M*O02lo5U@t+ii21z-lkY$!QR*+X6c0000<MNUMnLSTX<jR5Na

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-end-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-end-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..42abb635ecd153d6cd351a0471db6fd1e1faaf37
GIT binary patch
literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HR4mK~#7F?UzXkgfI|Af4YU<dIWFQXXr({)~#;5
zf;aOBZUr?C2#yd8r6T^f3Pq86WT+6}=_q4{Uw)yhq#e0KB!hYfh@2Dxyo?#T3MR!n
zyg^6=vp`pHjf)cn4ut{~a3F<czmQu2%YGrb1>Q!?*e`epDL?@VP~a8<`6{B?m(D(K
zuR#4<Oq8RnL;E~3XZ#uc3ym|0KYi`XZvkll?prGzs@!G-00000NkvXXu0mjfb?yWi

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-end-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-end-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4285f1ebc378e0b9eff7297660057a5d8c9386f
GIT binary patch
literal 617
zcmV-v0+#)WP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H#SqK~#7F?Uzvsgdh-x$7K)D5j>Rmx@XuM)D5~q
zui~LPLMPBHss{-yn~LcFAgEz-K14?(dOISOptb%v=j!lUj6Vp`hNm>fG{nFsmEgTE
z=i<}1oP=1|A|O}71u>BnI2#B+;7d&8_6xQd$n6)L0&*ps>=#&s5P$##An*u*E)EPQ
z-GRJ)0%4GUG|*6}%FP2Y%gsnB<>^AKwPWqucLC@DY8g5${X|^A00000NkvXXu0mjf
D1`rF#

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-end-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-end-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b2f29bbb090bfa90abf0627c9e1d2ca16c783fa
GIT binary patch
literal 604
zcmV-i0;BzjP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0GUZdK~#7F?U(HdfFKZt&uD-~XtQQ$0?!Rvq0Jhh
z4NN1VLXh+_qWAd~$I<)X$ALtDN5vY9F`cz`aG%Xqnv_zkwH`@;D%Rk_`4H}DHz5(C
z0zNQMYp9^Wqd))xH3^YAFT_?LbzVqrK^v$==LHTS1Rwwb2z)|d4%DWMzS{!*<wriq
qWb}a(`^$)#EfvJ&t=X^N0<ZuQ(Jn3CdyTFD0000<MNUMnLSTYa;RR{{

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-end-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-end-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..44372410e880c39a91f19c9aabe1f7d2ea23e464
GIT binary patch
literal 609
zcmV-n0-pVeP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0G>%iK~#7F?U(HhKrj%7uVMfr7(%RL1{0_atY956
zgb_@jR78*_jrLT;`}~s2#rvcmmz3!52wOwlt3plGET73%8bn00%0x>HM7D+{Tpq$T
z=_bU2RX_(CY6%4tcoYagASNbU=LOpexXugCEl3SD>%71rga8B}0D(^kjE36a(RW**
vy!=Q9)gFD|#Qrjpol+DKnTs|1^;-aDZU`tX^0&cV00000NkvXXu0mjfV6Oux

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-end-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-end-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..d65bbc55a9ace2eaad9619cdb9e07fc252004c89
GIT binary patch
literal 618
zcmV-w0+s!VP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H;YrK~#7F?U&IFgCG!w57Ge~p(~KEPiN=`c7v|q
zJ|wK*2rd99MtvYAL_9Ud|9c|jxcfrj2t-du<N~a<ALrbE7*^u~AzCSAt(0nr0htT%
z-q&;SNC@FQ39*nBhy_=sD`Fxma5NBrz>AnD?H6o2P}(op1WNk_4j}{}009WxLZC}0
z;!C$9Zkxc6<eMalg?^=RAZ7U(8Dj#Sh}L?nefcc_J+~b?Av39V-T(jq07*qoM6N<$
Ef_a$*n*aa+

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-end-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-end-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..79c3ae8993d655df898fbe03c266a760f0c53666
GIT binary patch
literal 580
zcmV-K0=xZ*P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0D(zFK~#7F?Uqprz#t4myIpkN+}*(4pi__yN=4Sy
z$siB>kx28QiA10SGjDk%zKLazzM>A4BywWu3Cc9}V1^u6X)-VX18xR}<pnoTbkUL*
zZaHAh3tU1NfB_hQfnOLnl)e3h?ismbf@r!@xxuOflB=s*eLie({U=O+1>gi&@3jUj
SJzQJ>0000<MNUMnLSTZon)q@6

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-start-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-start-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..960a86d1bad1d2df04ab3f619df269ea7524760b
GIT binary patch
literal 608
zcmV-m0-ybfP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0G&xhK~#7F?UwBcfFKZt@0y?y`tMN9&<3?ZD>Rh<
z8=(#Cih>Bi&y47OK#=3q2R!kJ{tllLrIew9Xs!3ND*`XWt^}!#mYGLmOnroA8NJ-$
z6q9$yrw01VrW=inF(EHlps~d2guGyZM}YtYAOHaf<P=yev6%`Abk_srYu<zg*CL;O
uz}hRGJzXj&LI`|9AnJYR6o`7?z?T(104z3LX50z@0000<MNUMnLSTXuf(TIn

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-start-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-start-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..d38daf6327d76402e1ff19d7c09d7b24f460797b
GIT binary patch
literal 612
zcmV-q0-ODbP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HH}lK~#7F?UqdrKrj$Sr$}ra!Ofh(f;C$<uHa^l
zU@JlWq!A%fsw(1ptEQRGyv0m9M1O}Zr>Nm%lH8qZTLfN)Nh9JmAl?<@$rCpfF*~8m
zDV5?j$a{cy$tvlDFAAx}T^5)U?eT8JT^4v02tWV=5P*PAfqHkt#vjp~Kp$=j*3|Z?
y?3H{UINBA(PInhHAp|}lpfuka1=QvnoMix%87>+cHiS+90000<MNUMnLSTX$tp#=f

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-start-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-start-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5bd477faab5d9c8bc5785412c841ec3513e2341
GIT binary patch
literal 618
zcmV-w0+s!VP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H;YrK~#7F?Ul_9gdh+`hs_pX2^K}TZVlUkc3=s5
z1&Xo+D*(~xg_xid)EK{)5PmYlyaN-6-i}xoQc6!3Vy&HPe+b-+NChaRe$KfjEQ>io
zh(3%;Yu$0;Vv=vbdta@WF8gvR#ERnxlpDtdH}0^&*+2jS5P$##ataLb!So}hlClYe
zV*jY%BvhyJzLW`LOdF<_4uVGrfkz0i`a7Edx4*$&MgmVgZo7n|%>V!Z07*qoM6N<$
Eg4%5ehX4Qo

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-start-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-start-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..43d57b22c49d9801915f704ea54a00e46c5917df
GIT binary patch
literal 608
zcmV-m0-ybfP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0G&xhK~#7F?UvCAg)j_7lgAst5!}ofoS^9jj-Z=4
zf*aIS6hwsDS{3o0pO%m&=Ocj<eH~sdBI4*qwBOYGN8n*Nlwhr`oO6v{i#gOYvlwH#
zl)Np$8PKA#D(WfcMoD?m0>02rtT>SuEpRCifB*y_0D+tW!%nQH8wKi3LoZ}QkN%Vi
u{o}QIv=j-35CX3dNZRk50!jM~jxqv98ZhmisZrzr0000<MNUMnLSTa6YX=Mf

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-start-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-start-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..126b17b52b431686d2614f2567ddffcf654115cc
GIT binary patch
literal 611
zcmV-p0-XJcP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H8@kK~#7F?UwBgKtK$JTN4<;5MmuOn84Y<3f2)r
z7{LUN6A}?}?!$?ApI?`z*FHbmq(py*w})t@q=1Nwm);S9mtkE()yZ6rRL{?N4fPz6
zC{u21@{VX{U@j_lMHR`~$STiRKovTP#SVGK0*?X#2tWV=5b!B5oWyzxC{P?4DxpgE
xNqY}m-HO{y=L&`p0-q4D+Hao%R{IU^G657^EGi&-$cX>|002ovPDHLkV1f@y0@?ro

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-start-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-start-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4590d23077054516a6aea488edf5bd2ca73c0829
GIT binary patch
literal 621
zcmV-z0+RiSP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0IEquK~#7F?UvCEgCG!wfe9R;E0C~HXXplYgRanh
zNLZmGbOAsy@<KGHCu)rU_e98l-1h+Cgt$90FRZmu9EdSy=&b}e8A%14b5HO6r(ZTh
zfs{X`RI9cAa&jf)9S9+``Orj+@i8`H<yH%%gC@2cZf>=}-ar5X5P$##Y6|?zjr1c@
zMb!lQX0M`Q5_*$$RA6pa%ro6qa0wxB2?5sot|q{J-(V>nU->>B-j-FW00000NkvXX
Hu0mjfvHuK(

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/align-start-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/align-start-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad454f10a5f7a5b815f5862a2ce98ac97fb93685
GIT binary patch
literal 579
zcmV-J0=)f+P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0DwtEK~#7F?UmgMfFKNoXD^y>Zf{_3u;zsXX0(?5
z;rT$6G32}0VMM*-@`D9>5GSO2An<i$G)6g*S3;^;`z!*1w?u1SiBkwv(~+n6Y+uRi
zDS!Y3AOHafv=o>twTZ66J5>67u@Td1_DBCW+lE#!gb?_Jz&-iaV$C<uvH$>owFW0u
R>5u>b002ovPDHLkV1lJX{80b^

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-black-16x16@2x.png
index 93f2170de29e3333756e7823b7213f1a677a2a94..999a530d99eb8c2a19bd49b7c05d0e32cf66b887 100644
GIT binary patch
delta 225
zcmV<703QFk1%?H%t^t3;Nkl<ZcmeH~;R%E=429F<25^M_?@%|xZQyO-2;NZr?+9*C
zqbP_LQ$pGb=0Q;cAs_EaRDh?;Y&Xui00rf}UuM6cvfjtSMwUxQr>i?~zX-TOYd^-A
zE`-pmr2$Wik^ZmxBpqmX!)IAM9n~ZWU?a7L=%FLvTAQjA2UuCwN&?tOjkH!0AgdHW
z0TdtwV2soTC<yS~55%=R1N}fq<huZOevg+PGD-3oU_~Vfz=}%ji-;SQ?txPTrT>ts
bJD{2XIEOVx>^h2Z00000NkvXXu0mjfW0PXV

delta 278
zcmV+x0qOpR1-b>Wt^t4dNkl<ZcmeH}%MF7t42GR5+!>*FI50xH0iB@Tq;!%p0wZ(;
z4sh=X9Jqm$nyN%<6>u9lMMC*5QH(AB#Lff2voHdfNRlM%y6z-|2#2{+>K+6^QI=&h
z7bk&<zVEL%q?lOSP|y*F{aoAzn83uT!Mr2F_ypKOmcX{QYyy95Yx^x^32bZ2Ccrgb
zz~Tb*Q5?r{W^%wLJR1XrxY+oOR8^I|35cRd!5^vX`k7mw15-*}t$_Xx1XC+B{=u()
zpZHzi1&{);i*E*70ZfqBv6S+F*KdkRx5FH_Thq2}4or{&UJs8P9I>7zwCxqPXSwTM
c@vN5z+u(8i>vIk~wEzGB07*qoM6N<$f`&JM9RL6T

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-blue-16x16@2x.png
index 1bcf7fa8881bd343318d4143ca0856d852528d92..e9e4b2669f0a552200cd641fe8e3603736a5f3ea 100644
GIT binary patch
delta 226
zcmV<803H9g1&0N&t^t3<Nkl<ZcmeH~K?;K~5Ji7lp>*dFdb6IPi*{|db<-o*oAn58
z3u+omC}O~bVUh^WTSyoP^Y|mt09!}>SJ#h5O6tR}_YRpUoQgGz#w_XV39N7gRBqiF
zx__EgX)AB2eT7HyTH3~!fbOeF^O2JkLK=awp-bu66EFf|w4qw~6Cg&*CqRsrQy?lL
zAOa!~BG5V&WlqC%0>fq2uthiA!G!-?P#+ufY!C^~cYri1MgiKW`2L89qmpyL9YNw7
cQuYLdFB`cuK{{#s{r~^~07*qoM6N<$f(zMW!T<mO

delta 275
zcmV+u0qp*V1-AvTt^t4aNkl<ZcmeH}O%8%E5QX0m2@5tH!K3I6@C14Z-HKb?cmp{C
zNAM^ffrTU@iIp@G68>77AsW(e)edjq(V3<NEI)?8MI-{;^9>vd<Xq4VzMCMTbSP~G
zF0$tZL?J{KC<j@wE(gn@GzWZy?T}bN0jB{Y)Fm*iEuR6y+UkFzQv##favB&FYv7Nz
z;VzFl6{07zsn^w296cGY&w_2<_lj{idGg!!3J?yRLV<l}ys6jKwH~YJTba)ve64F>
zcY!saVSujf5E3w<K8_1_1@{qxoVlF8L<--F!GzktSzbJ1jKq|h(5zSZuH_^5ie<XI
Z0n}njU6EwK<^T%-002ovPDHLkV1hYMc?bXi

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-darkgray-16x16@2x.png
index b398eeccaa7d8a890eb9c4e212ac79ea5a94c204..0b6664c068f8964027c42ea320b551e7a2cc64f9 100644
GIT binary patch
delta 232
zcmV<E02lwP1&sx;t^t3_Nkl<ZcmeH~(FwyK5Qfjv0WyL^iLafZ8>Aa_g!EM%sv~p)
zt(N#=LoXbs7UB;fdLZ}l|G_B0(IxUgDHWihoO7SvC+MtmS;%CyR65<=f&YtuDy{X!
zdw-9^Db0lt&-l#7n8&YmYz~AF=G=Up%M}P(0mzN=gsnp(pju$NSEvJ2YdHbrMj5r1
z4WPCLzyKHkdjMW#A?=31BorVvyA}--&<&V`{tK+NOMER*Nu1vRDJnJqYE*0|B5G7)
iANY!(^$n@J14C~e_(r*^gUA&C0000<MNUMnLSTXn#%8Pl

delta 263
zcmV+i0r>un1*`?It^t4PNkl<ZcmeH}Q4WJ342J81?;c@C*>1oR-?y7gPcjeSgGcZv
zJA&_!u!hJ&NDxNKObp)>Hm&^9N()ffnF@&DoHvZI2QC}^;;MQJAtq$mieo@TUDq$A
z6gSVf1{8G1<#j9W1Vq@ITU-KRbOKTdrXV%9WCBui8%r<+skwh86OfxCV0QuEtGI33
z&g1j+*!x63%{Y#oD?q^?K>>Pi`yS{$zFAJd5bTD&lQCcLtDj5x3yOdk0kdnsmOKFw
z!FDXAykSe`*cH#KX~B7503w0{*1=<dOdP5RXV(x@D`aDN?pi4vmk;-MS}Hhx+$sP7
N002ovPDHLkV1i0ga=HKj

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-gray-16x16@2x.png
index b65c9547424158ac655682c3920d8c3247517ed4..c28e4aef26fabe07d473bc411861cb65bc879892 100644
GIT binary patch
delta 220
zcmV<203-jE1%U;yt^t3(Nkl<ZcmeH~;R(Ya5QU$m17w75))_j1=LQ`i-7F(?1ACSP
zibxH|se#=46FHFg@m@$2IJ?}oAfkwlV!yBV1%q|X2OC){<w*}u;CK~C6+*bj7@xeH
z*3sgeBk%p|-#)bj*qnaMlWr>zx&S1@!fdMSsaGJ4cCV@lNTXC$1As7EO@O8{00S_9
zJpk{*Y(YnWM`oCS0+dw!7w`#Y=Esai(tHO*RcQi<s!}@<NvpE&K<Qr4^@cP&0n-O;
Wo;o`ah+c*O0000<MNUMnLSTYiAYbGF

delta 240
zcmV<M01y9x1(gM`t^t42Nkl<ZcmeH}jSYe@5QPuJ0F2-$x&cn0n^-2%5g36{9Kj9r
zjA%mBqsQ?G3Ar!15MHkBORs-K&dL-7B7{)!=fY9-(u1RA{W;dIBpf%6I?~P@$FW8`
z!cix*17$!OFp({RwYD$=WUQ?gO$ki3MH*NXH?X>a|541_DhOyfS3z%#d4usvMF$ev
zd?_!)2AYW-%$k88+1rq3>LuufB`?Nzfg8{m=n`5>AT-zUiM}`DzW@Kc1MUPu^B{o^
q7_+HG*d?^=T0uU`7hNmPc6kGFdM%C=v#z!P0000<MNUMnLSTZc=xJ8~

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-lightblue-16x16@2x.png
index aa7bf50773590aec8fa6d0f584a20d49bd9d679e..a1ace9c02fd6440d10ba527084000d46cfe8647d 100644
GIT binary patch
delta 226
zcmV<803H9Y1&0N&t^t3<Nkl<ZcmeH~;R%B<5QSf)12{s5C|##Bbb`hWI)YuNID{iO
zfiV#UiDKlqB!c(-F&u>Zcqf_wS4YhY{Wk^)(N8t@E|8g<Uzp8e;U}Fvf%A=kO4XQ`
z>G8G8aw@f|fc`wxZ*L!40=BtcG<V!5AtVuS4L53KU{81i)M#3d5=?*^Et>#{(Q*nz
zMFd1Z1da%F8?_b*1>RmmCscun;J?70kZSv=5ed$BfHW#j0n(`0PDIpE$#-CVFGzet
c%ASBQ04^3Ya#GK<Qvd(}07*qoM6N<$f=5nW9{>OV

delta 267
zcmV+m0rdWd1+N9Lt^t4SNkl<ZcmeH}u?@m75JkTuBHE0=3N+Bd24Mo&1TzU4AtR)P
zh7}kgEl?PX#6%=GHrAO)kzbMGbm#l=o$Uhx1H(WBzla1k?Bt3`z48??az1BeU)%&#
z+;K#N^uzYRR({ugVG*cct>hIe7@!m2h_M8&wIvhaT3cJpC2)VNEu8?*1ObB!cwfc*
zB)G<7|J5#VaPm|6mW)?n%5W9}e}pgCD|d4bXq5WefhNp=ZfDdV{OZ>xoPr?0MnKWA
z2;?Bb{2a&F$mcheNoRHP5>sR#!aR^vgGUBWjH(HXj>V!^=*Du-y%HENPu}N2w<!*V
RfdBvi07*qoM6LruV1n4QcjW*8

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-lightgray-16x16@2x.png
index c82864bf183e22c9e3d5acd1589f9434c798ad4a..2fa005e86d617bcfcf70dfe66db3e2f91f163eab 100644
GIT binary patch
delta 234
zcmV<G02TkW1&;-=t^t3{Nkl<ZcmeH~(FwyK5Qb0b02!exi0;!Fx<R@@M@aV(T%jX$
z0kvA{i!Cu6rv~Ep5_2H;@n0|rz|mo8p|$qV5T(?oH;2xg@<KAJMV@r`1ok%qEXJ6N
zwe}vCQ@m%4JvryI5aO}6k1PS_+?<+6y!Yp?5Ht~p4gZv<(!OHi2(Zy^rI-LVS~3A_
zv}6Lc83IFK2y78}<%M_}0ue=l(CnHuj6ydcqWCV5QZC`LKqV-j0o16-1hAtb`y#@Q
kYMcW<BWV4H)IEX08#>!XMFa!20000007*qoM6N<$g1Sy<cmMzZ

delta 273
zcmV+s0q*{f1+@jRt^t4YNkl<ZcmeH}?G1w<5QYzA07vKwCi=hKz)sL^Qaec<!4dqg
zi7Rvj2T&<CO40^}lA|VuCn141Tzut@4*<``5I~}7ny~A-tLTQ~m{R%_t%#ziU5jIY
zMBn!hLP$D~Ip?Ex5#7^T90fd5g?0oDm<FuSrocA0Xa;O^Yl?qK3aoOAX}~Goz~%<z
zQCwA3rkp^?O{I(7aJQK^lO##@VW6&S4u2$$<M+4aIk4o^)e6Ws(6F>J^B?>=?;F1h
zya5vfr9vwJ3GH<p1i^V2hE%k}B(;pO9FWi&m>wQEIAT{tSSmDat)M;2UDt|dzq|l;
X8DWeTTNPCR000R9NkvXXu0mjfw6=H;

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-center-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-center-white-16x16@2x.png
index 6da6b2deff5ac6a890f1069716dfad4118337edb..4680a1423a258b824795b9a2dcd38afa87c6a860 100644
GIT binary patch
delta 209
zcmV;?051Q71@;86t^t3uNkl<ZcmeH~0SbU13`JLT&$>cK=%jUnx`8Pq)l_t8Dzyhu
zjN1Qf=@8)WH2OhEAR~=L-CHP3hXdN#Ti{9;ufTT<$jbKeTE)q%Vw40TW+fbgnAN9a
zEW@Wiq02nZhjqLyh%Rj?t`<;Bi}C4rTVP9);=O8iLN>q#*g#2$fz1+IAftg12`WPq
zB%=OdL?EtJuHixWen5juP0%4&C)NPL=uL<B0pnbdqYYPzSAf|8l*|Pnn`ln800000
LNkvXXu0mjf1V>!{

delta 222
zcmV<403rYO1cL>zt^t3*Nkl<ZcmeH~iwT4<42F~A25^KM=|*r9brUzx4RjPoaDx~{
z!AEPV1RszOf)G;uv42VmVB8FX5=0d7Bj$+4RKrmsVhdNm0t(tvN$WKK069Ov?5+F2
z&3vVT*X%8MklrtPAarkE>j4w+oHk?+rEq}IdS4xTbI9YYP;6EiO{VUcA4Hj_Hu2=M
zlXXiWAYkW!33!5l+L0?kiI6Vn=YT)QZ%p-bK)#*_&US%~WSRnMM^5yL_Ps##ieaqj
Y057zUAO|oH3IG5A07*qoM6N<$g5#56R{#J2

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-black-16x16@2x.png
index 20a0e5313c70c1d24c0fbc6d083406579abd0cad..95d3dc87718ef552bc1767419f1099ad7ab08a8d 100644
GIT binary patch
delta 210
zcmV;@04@LE1os56t^t3vNkl<ZcmeH~?+Jh)5XH}EfJX4ULp4Ji)CR54P=0TOHn1}a
zLIlmfMfU?C9!K|hd6fWvhg}y!2n7X^QXah<s7z}Lm$O`$NmoyR479ESd}cjkY*tEj
zr?lc4ajz_p0G|ZLTXPM^HA5nN3~-CqK|upqAp_1S@FjFwQYK0eG%YC&aEs=g7TSbl
zfDC-Xz-H0bh`PrHhWm~1b*mdq5p{O--)f1of!XJMU&GQTr0NL}JKZib!hr_chX4Qo
M07*qoM6N<$g3a+){Qv*}

delta 187
zcmV;s07U=y1mFa)t^t3YNkl<ZcmeH~(FuSc5QfiafJX4$p_-u$YJ*m2DBl~Q4eW}D
z0wL4Oi2e_JIS%hb^i-n1qplK+F||^vcg|H?XynmaYX=gb2*_y<#TPV>o`eVy(4JUD
z83i5%0uU%kh}eE1xdKuBLQ+6`Vwe2_n-BsJfB*zOAuxGjV?s0DZGq-E5ns7Wp)Mg0
poY;Rx{GxG`5q>GHwO>C4U<Sf$C^=2pLtX#?002ovPDHLkV1kKEOL71J

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-blue-16x16@2x.png
index 42abb635ecd153d6cd351a0471db6fd1e1faaf37..9f48c837088ed9ae00288c9096e9b9bde75b882f 100644
GIT binary patch
delta 217
zcmV;~04D$C1pWlDt^t3$Nkl<ZcmeH~O%8(~5QQHtNw*$>oAnG`v}?O<H(tS;c?7p6
zD*l8RgBp||Xq<0FUM9}V!%+aP4jWeQLc%BiN8kH~!0?Hpob85|bnpbo05?{A$|q!%
zw5v!d8Q49>kEd{eIRRP4qvjn#8FIp!Ef6zW1dj%Gg$$UdU@cLW)8Z}x%V}}B1!6`s
zP7A$+WPl8u!azPzSo@W;uiI*%erXTNQPyAkx+S{Ps*k&Y*5`nKL(ey);0X{7yFNNc
ThOtUl00000NkvXXu0mjfIMZN;

delta 192
zcmV;x06+i!1my&<t^t3dNkl<ZcmeH~NeYB85Ji8wh2DAuZ`Nn%MZ4CmZoGmw^9XJQ
zH4X@l5DcXv{<jK6k$PmP5a8)3V}@UTp{t}FxkDs_dIyM{6au`A8M+E4#XGz~NCdM$
zS8$Ds69o>10u*o{g=N2xTLH^{A-M(KM$FhRcnB##0SZvy76Lf=Dx%t#&OUFiK>b@x
ul%uRe`#dsd{2BcVjWdZqeeKI{0cim4TPq!^+-3v-0000<MNUMnLSTYd^G>k<

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-darkgray-16x16@2x.png
index f4285f1ebc378e0b9eff7297660057a5d8c9386f..bc87fbb0246be9ebb607db85abea586ecf4fb5cd 100644
GIT binary patch
delta 222
zcmV<403rYB1cL>zt^t3*Nkl<ZcmeH~(FwyK5Qfi^0WyL^iLafZ8>Aa_g!EM%sv~p)
zt(N$51WfHECgeT{(c|!bemq5hvm^3ADHUKtoO9pW7idg}16kQxV5gfqzyi8bg4X)#
zy??}EpXNe{SNsNJ%o7MGIuJq_a`9;{CqX1E5g=#6JrKd0aQ{|au$0<vA#<R%TPOv{
znQ*aNcoVV!7H|jwZyZRc+#h+r35bi_&_b!uy*3Y1ybG+gWBiR&d6@m(hFiaonmfRJ
Y0NJEQw^0b-%K!iX07*qoM6N<$g6(EvZvX%Q

delta 196
zcmV;#06YJK1?dE^t^t3hNkl<ZcmeH~Q3`}05QfKP56}@jl=!-5*c;Rhx<aqwp*lh*
z&@8G42`rn6=>H(7VRAl1M<jYXB9)-E{yFFB@LG&N2+@Y8G{!W<z$ca9y)WnD)3=<2
zSlA*USHcA`krX%^2teRVOyu?pwi(Fn7n}leC7kRRScDLO00cZB@Cbn}4h$#VfxLYJ
yVUT|`&`_w#%>yyZ%}6Qb=|ZfvW9{2_0q6m089FWfL|niC0000<MNUMnLSTZx09Eb)

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-gray-16x16@2x.png
index 0b2f29bbb090bfa90abf0627c9e1d2ca16c783fa..94b4bc51b761566234c323b4cd470176e4eef6cb 100644
GIT binary patch
delta 213
zcmV;`04o371o{N9t^t3yNkl<ZcmeH~?+t_?48_aE0UUwNZibtHvcZkuZRQBK0al}l
z5|a9-g2w*7NSem?@~{yAo{pIoh!`Lvq&H~4pfFWjn4FzOoOJO7)Ih~Gc<<jKgfA`Y
zvD6x4&^h-50oVjc9B1M^b~Gfynk}%2S`8TuoQfJ?r(i96r$tRHfxXirxdk>+W2Z$w
zLN%ZUZeie`sI>?BHXHavFY1N-fxZRozkp7$4LusEzL-ni3$osjiYK6Sj7~Z^ApK3f
P00000NkvXXu0mjf=OtjB

delta 183
zcmV;o07(D(1l$C$t^t3UNkl<ZcmeH~?FoP&5QfiafJSJuW@rM>4O*ei8leqLBcei(
z^fIFN`4z{}`{2icM1M!c8jLZWwRUiy%~qO}QmnNeNq{QW;KKP3?rAq65uyS<Fi>l#
zpunR*00K1$kvcELRv>j=NNzzJs72=m4j}{}009VmLSPQmri?GX+XDUNM?T18^nnxm
l%ZQmR6~yJO*{|OMumBR#E-l`BjjjLy002ovPDHLkV1kerPwW5y

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-lightblue-16x16@2x.png
index 44372410e880c39a91f19c9aabe1f7d2ea23e464..ebdf991319107161df8620ca6b72e0d43532a813 100644
GIT binary patch
delta 211
zcmV;^04)FE1o#B7t^t3wNkl<ZcmeH~?+Jh)5XH}EfJShLXq{$gf^36UXq{+?MreX8
zqaZ}k{9AOtPjVc+$Fl<u;O~&@z(&p?BCH~Zb_R*b<-+AG6mrtZ6F>vGuA!TF%~$C6
zV{w*dk^yT=GJprP3GCwRCN7|-AupI*0aerrh-e@vXh1s!rr1kPi?;-9r^V+LP(@8U
zE%+0n0W|Ol1B;?IJM=v^&`2K=LY+gO8u40<u^Y%bFWd_vZ%D}#KsF_oJf7G0N~{0?
N002ovPDHLkV1mqaTWJ6Q

delta 188
zcmV;t07L)y1mOg*t^t3ZNkl<ZcmeH~?F~RM5QeW}03#SetYZcfs12-O9WjIvOrTUm
zkS2}xRK)xIlFP;Wq#u`*=<f(yL*1)FP1G!($yORfM6$|6OAJJ|h9z7c!Zqn8#DY~o
z2O4S#1r&G`2tXhvCS2zQ+X}eO3(hS_4K?e$z#)VH1Rwx`PY5)OhT7oKcUz#m{747Y
q9(~}%{xXuCQWOxGi#7Z8TL5Nm2q-P`x4~Ti0000<MNUMnLSTXr15L63

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-lightgray-16x16@2x.png
index d65bbc55a9ace2eaad9619cdb9e07fc252004c89..521136787fd9613366f9ceeaa417c5b127e9d298 100644
GIT binary patch
delta 220
zcmV<203-kE1c3#xt^t3(Nkl<ZcmeH~;SItd5QPuY0Xl*!kg$(4xIx{(72Jn}6&%3@
z0DDIMTr?<Np-u1mMK2fL%L~^QfW4#g!a0|qA=cWbwua6Ow2+-G1x>np0%Bk&HF)oj
zA%x4k9PwExb<<i;#+WNGP)s1kIAw7prF3{1VxedN1>clMU_w+5;rgfGTWY6;ErHr;
zVKY!WEpiCOfEd_>fjceWTkem(-we!~oXAEfbgu3D2>z|MxEoNN^?eOn-;lZ|AUpuJ
W7Ec*0!gr|v0000<MNUMnLSTZlTVf;t

delta 197
zcmV;$06PDH1?mK_t^t3iNkl<ZcmeH~(G7zj5QY!Z0UV(#kg!i@=mvI!uHZf-tl$VP
z04PR%ASOgSHOBvYBILOHLf{BQPe<eethFEK+<zEW;{qXCDP^scYKQ@u3-I38bMZ(B
z;XMhlkQImpSEegsA}eq-5P-mom?-TRY&%feFW3Z1`vndm1Ry;C0SMeepi3v>OSdC#
zo4}Cdn<R>bex-3BW%(HyV*;Is)_Sac`7HoFw;ehmGpTmo00000NkvXXu0mjfciB(D

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-end-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-end-white-16x16@2x.png
index 79c3ae8993d655df898fbe03c266a760f0c53666..7f675ead8ef410c8bbd3d58e6167ba5e3317f8ec 100644
GIT binary patch
delta 190
zcmV;v073u61mgs-t^t3bNkl<ZcmeH~Sq^|83`DE(o^o@%0p0-NgJ?=YWp(LGjHWhr
zQk_Wz_&bBU&<1G8V6f*AIy2#dQ&tPS>Fyg~0jC1YE1S)s^p3POD2;nMQJ30BK_YmL
zmjl=Zp?pYn3!cLt;dcaNyCvcR5~5FDaZ5E9-0fo*umBeDDgibtQCl+lXd($GP|Df3
s6&ZcxobZjp;5pCxFKDraBi%Q^Y&d2N*>lz}Bme*a07*qoM6N<$f<4_)_y7O^

delta 159
zcmV;Q0AT;)1jGcet^t36Nkl<ZcmeH}Q3}8y3`4tJbl%+Ez}=uzkPS*j*44=%5B!lx
z^P!1EpaU~+c_qGyWskn14wNKvV(AIWH1%MH99U^GFaQH?28QJYH&ArZk{50{V9g6$
zLKuJn7=VFa7&w%@{e|usxnqK8x>C8pssoa%t6P0OY;gT2On(;z-~?FjwFWFbTwDME
N002ovPDHLkV1n5pLc9O~

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-black-16x16@2x.png
index 960a86d1bad1d2df04ab3f619df269ea7524760b..2f3fbea477df481fa57924cd3f7c4ab288b68845 100644
GIT binary patch
delta 210
zcmV;@04@LE1os56t^t3vNkl<ZcmeH~%L#xm3_w$H07vlNp`5`DbOT4wp?Y@&H>gn*
zqzL_g#5^cUi1ra;Z2|rcyKgw>5)vYWIOnb)GqoDH&0?Wey1WXgpmE0-o1~P@6<To&
zSgFM&PsOAH!{em~Esn_}&sv~;i8UU1)&fx>0TLjAkOJFFY=ugM0{wGBT$T@^QTLGc
zUtkKZ`7>T-u!NfM69P`%9a6xlyG_x41+Lv~3N>MQyW-R*r0f+ScKX&eM87>?1ONa4
M07*qoM6N<$g2=2}AOHXW

delta 187
zcmV;s07U=y1mFa)t^t3YNkl<ZcmeH}?FoP&5QguXpb`4-P|eT=wLvR1l>Zx{4eW}7
z2*J;c=zTzt<J1Q{@reEopA)5&p@L|w_p>VkFT<_`sg0JIM`KKVgk~AN+~E|HcgLp&
z`pc#pjf^oNFIb?l#Oj2+V1Y-000bZa0SM$2SS+!b3JP@B1LZSo-h>9%BA<T1+AE$t
pT`DL-2z){y>V4-Fh<e|^mlZw$EH+(c+zJ2y002ovPDHLkV1j@FQrG|h

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-blue-16x16@2x.png
index d38daf6327d76402e1ff19d7c09d7b24f460797b..3b0d12638ed106cf721c2cb4c93334bca0fd2e88 100644
GIT binary patch
delta 220
zcmV<203-k81c3#xt^t3(Nkl<ZcmeH~O%8%E5JtZ$iE+mfyqRZkp=;dA#v|a(JOW!2
zpcc{)(k|K#P$0}(kY+M;UM9m&fxRR8)%_<Cll;`xK44)IE27P2!|3!1J7Dstu8{Rx
ztx_HNLL4)^k`F1*z}*2^XM;^!F1ipcFIb@6$R-_;7c4L<EWlI(EHI@&X+?y38^#l8
zZbrcpRr7S+<^C4<lAjB8Ef5F~;U)w~(><X8ZMuDNKLy0;_JxOVg@477Pe_Y*fcXRO
Wt295~xm#8M0000<MNUMnLSTYbpJ0Xn

delta 191
zcmV;w06_nN1>^*<t^t3cNkl<ZcmeH}O%6aX5Jsm+Y#qVPoWX)MTQ;uXW{zMhLH(o=
zAyTR;;(M#6na;e$Ogcn=hb^b5;bfBBooibJUWQ2{;x-`O730YhHx)5Eq0A|j;x@>8
zfOp9%>4Yx|sl{Cum=f*rZp2*{coYag00IzzfKGvWcf-aX(VRCxA8rcP)b^?Dm3$vK
t+7-o4cNa7v1U@04G~XHp)aDzUWdM{JE*cs(giZhe002ovPDHLkV1irWPmllr

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-darkgray-16x16@2x.png
index c5bd477faab5d9c8bc5785412c841ec3513e2341..52125f4dce6c0ffd11ff9ef9fd3dce0ba0f1a100 100644
GIT binary patch
delta 222
zcmV<403rYC1cL>zt^t3*Nkl<ZcmeH~%MHUI3_wlQ0Wv~{LR>pTH%K?=2<a6Vsv~p)
zC{*EMRWh;2Pw|tY05b8D<@^B7jw%DKb%Yi1-v4r6U}LU$p_nZNuJryYfHB70LI}?^
z?DAYG^-jlNt$lIgFk}T{j6=ETH1DTGtT>K9|7W@5#?2O38WC0y0TE~^@WBiDX-I8q
zCXkZdQNk?rp!SjPf?Aw&V>*p66KTRj2(Y@lnE<!DYa#CfZg<xrO}M|W;<f*fHm`v2
Y1ws8rw>kK_TmS$707*qoM6N<$g5t4e_5c6?

delta 197
zcmV;$06PDJ1?mK_t^t3iNkl<ZcmeH|%?*Sg5Jrd17GMb$MYwJa+ktjq33>&JvIHvt
z(ddPkpcB*>zn2hxGQ+$B6Nui9SQk=CPZwgXoojyx+>A&CD5ZYRxh5=&IYEd%j7n?W
zapGc<Z@_zBt(PwQaw)`$;|P=+#|1a;u)x_s00Izz00eRh4Dmg|^dqK{vI&G@|ES<3
zRHyR3lnG-@8>W^Hf=38}M+mU`JDUKvzrkKc0#7||yM&|700000NkvXXu0mjf+Za->

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-gray-16x16@2x.png
index 43d57b22c49d9801915f704ea54a00e46c5917df..cc25074cc04fd61dec235be00900ef2ef0b78157 100644
GIT binary patch
delta 210
zcmV;@04@LE1os56t^t3vNkl<ZcmeH~(Fuew3_#Q425^Mi>}GI+rW-hdZsrJXP*YKm
zAheBI74v>9p(c-zQVQ^P%(6g44+WumQ|%92%$Eliv$NoxzF!A8&bhz$zM*9`hk9cS
zT5CJWK2Ed)loVG<1HZYDXkWHKNVE~FcI?X*I29F80Tnn>VAx8C^-xftW(9+gi~SV6
z3sRw5uBA^4ndlHcLO?X#M+%6hJC*1ukWP0hI)t};7ZiOVUETp@1T3yPIk*$skpKVy
M07*qoM6N<$g8pt-^Z)<=

delta 187
zcmV;s07U=y1mFa)t^t3YNkl<ZcmeH}(Fuhx3`LX28^96V%o&`Z=?0FVn>m6T)KnBi
zgxXpa@t&WSkS6CNff9WkUM?cy=ti{P)cZ%^VK|gvt*xAMjb4j6)HAafW4e^QEx{Sk
zqOvOLDd$E>dC>yC&`zv4kryp+DG-1F1Rwx`oC3p6tfw0V>P<64FJwcH{*(#*<F$IU
p6bXh90<REA+V7kKN&5|sG6F^#FzueHQRDys002ovPDHLkV1i25QIh}w

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-lightblue-16x16@2x.png
index 126b17b52b431686d2614f2567ddffcf654115cc..8c56c96ef502d3d0f8454243356e3198593403ee 100644
GIT binary patch
delta 215
zcmV;|04V?C1pEZBt^t3!Nkl<ZcmeH~(Fuew3_w%40UY6m5Z7@AC$Mhd2)d3qgd;eC
zwG{;kLffcSG4IC`YVrsvr2t<?tP9yH1p$$%m}^IHGd~<y&8`A>`gt9|l%2}d2$f#O
zOQ;tS$RZI9Wgo`c0i9HCk{bR?A<{l?0h4Ga79ZH>EpRC;zyeP!aHhbp6YC+MK#mF;
zq0;t~^)7Hl-=ekt)ZhsZ;VT44(|x7@X}Vppo&xH0yTU{Gz;{957t-w=U?yZEGjN+D
RaAg1h002ovPDHLkV1oM}TIK)%

delta 190
zcmV;v073u!1mgs-t^t3bNkl<ZcmeH}?F~Rc42D}17{L%?9W$7~*}w|c5knZk1dbCD
z5pwRsiFlu1m!{V~KiZ^3e}}h+Xr-iph>Vxs5rLOsT|(8#T#i)F&v*^>9FZtfZfx?7
zXlGz9Dt1K`$=b*&&sabeI*G*&dBy^d0s#m>00I#3DKMPGdI~luP#hX6p-T5jdk<XQ
sirY=+3Wg8@pAfLxZ=V8I`wi|g0Tf&;Dj<8vi2wiq07*qoM6N<$f?Q%vYybcN

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-lightgray-16x16@2x.png
index 4590d23077054516a6aea488edf5bd2ca73c0829..d3bc0bcfefa486102f437da80c61a430559ee1c5 100644
GIT binary patch
delta 226
zcmV<803HAB1cwE%t^t3<Nkl<ZcmeH~%MHUI3_t;OfQ--;5bV<#x<R@@M@aWUVug;-
z1%N_TE><MKB0t6N5`qkVvYZc$ogJPB#+blXL~H%aE!f6f;6yfC3Rvm=RRChGy*cNe
zaX6%V&iPviF-j?4m^etW0^a*EZ<+`pT>ptsam@m0qnYUe8`oMaurwq<0wmB=-~%Vp
z+px5#n?Ou<2MLqVqqMI0EvQ8)HO0%s8lfgUgaE3$y9r>syO!cpfbH&Ds0sJ?SG@KK
cY4ZvYU&MYzLrXOy!2kdN07*qoM6N<$f~@3Z?f?J)

delta 200
zcmV;(05|`K1?>c|t^t3lNkl<ZcmeH}(G7zj5Qc#X9HA?auuo^`26lt4(0xc)p(Atw
zKr!+{G^ZzOjQ{sU$ba1T0O5qVJ2Ee<wNV_1F=ptk1UMN<1)OtF@BOD=Hba4wKc!Tw
zwf=H)CFC6lA+-6>M2zt<He%&g3#5Z4wi|A4wZPs$00Izz00cm43jE8B^dnM5)dc!x
zucBcRdXsfjU~X2-Gu>8j2_bL^0oMDjCcu5)U@0A6`92=rmQ|_%0000<MNUMnLSTZL
Cf>yTx

diff --git a/editor/resources/editor/icons/light/inspector/alignSelf-start-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/alignSelf-start-white-16x16@2x.png
index ad454f10a5f7a5b815f5862a2ce98ac97fb93685..43ddb4087f0438026e626eeecc03b565cc6a0103 100644
GIT binary patch
delta 196
zcmV;#06YJ~1nC5@t^t3hNkl<ZcmeH~fet_*5I`^UpZW!#;7j>~{6T8d<djG%b8j<t
z;@)mo0q}R2xsVFT2vg{D1BGdEz?i)Su5|GV1O=3Erw$=EMjeYCca})H8gYFQMm!j|
z%X63oxCdNPDaKVZ3rK(jNFb%a?1)W}QJ_Z&wa^fHDA`JQ6<RzAKPeE^-M7K}v=!%Q
yuh$<P93t`M@!v=c&O=RD-+w`lKCmfX0b&9CiP1dxgNS(m0000<MNUMnLSTaMu~Yv5

delta 158
zcmV;P0Ac^>1j7Wdt^t35Nkl<ZcmeH|-3ovp425Sens07zU~jPIg#>1_mi^)RK$J1$
zyVzkwz2owO1$q!Cq<bLnb!0R~IgwXFs#*Ii0)e+gYhQ^|2vpONr}%7N$?GYA00bZa
z0SL4dm@Bo3uEIN1`h2kw(`xod|2Nx)RxpGR_=Uhd`PO31H_#Tc004ir1}9bNkN^Mx
M07*qoM6N<$f`ghyp8x;=

diff --git a/editor/resources/editor/icons/light/inspector/justify-center-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-center-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..da0d7558fae256128c0ca19d5ac451facbc04e1d
GIT binary patch
literal 619
zcmV-x0+juUP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H{esK~#7F?Ulg|fFKYA7b~y?{uE^mc7Pq&f<^JC
z1Uo?PEyhKIMst(gZvzu@Spek*&bcIm8+3RX6;J`ggz}~j#+W&!)Pp1D@gaoeEXclq
zuee;Wd1fZa3Ru)b34dk@SJV@k5GydU2MT#%MR-DM^e^~@z^(}|v>r=Dp&d&v;2T^n
zSQOf^I|#O-X9OOlBygqmSRx34s@7v^(vI4MD)0*dWdl4oEj49v_W=L^002ovPDHLk
FV1i}G1!n*N

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-center-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-center-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4efe18981c87346777cf3a52f8d47220786c1b6e
GIT binary patch
literal 624
zcmV-$0+0QPP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0If+xK~#7F?UlU=gg_8RzxA#FOR%%6;exwZQzKij
zGfOZP)b$552mA(IMVSYJ!Jv=b<t<?B;n(>2*+GPhF#!{B)YQNIz<0&?7K5XLd!@+V
z<<=m#0=`QXKc7ez;Z4{rNT7!jzRe-5p~a2o;5dQ)%YJa7M%!lyj@<=M5LlN`Up*GF
zj_VcBSC2)kV<ZlSBW46nMH0|gk41=?AfT=uOMp6B2~FS$0>%IonKq~S6P?5W0000<
KMNUMnLSTaOViG3+

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-center-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-center-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ad9e2a3f03ea7f2880744ba3a5e355796c2bbe6
GIT binary patch
literal 629
zcmV-*0*d{KP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0J2F$K~#7F?UmgLfFKlwuT9Vh4kf-eLmSivt<bAe
zH9`|;3ch7{F8xv54+I|$`XQGik#GWIOh}7P(9p|>fCwlgWUcMI_fy=qNM0$m#5FkQ
z=2{kdfe^xgUY_$h3s*q}H1UCiKQn|YF-dcP<RF1~SdSi<Nx~!Djr;|_5ZE;#xAowQ
z4%%_|0^HU^Icmp}fTsIss{&6`5@5F;N~z46LWtXXDA%{6G@%ImLO|F6s*geo@4YFk
P00000NkvXXu0mjfPS+5q

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-center-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-center-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcb1ba165a417bacf357503bc5ce01fabdc42be4
GIT binary patch
literal 616
zcmV-u0+;=XP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HsMpK~#7F?UmgLfFKk`KbxQt+^iXz!0QIB&}NR%
z2A0rULZ9|Wat{POT=JlC1e6PiNK6kd(BWfLKm`ml<h>tajMMhogCiJY#5p&g4N^O>
zEiMI%C+seK3VQ?=<xs-E`3V=46PO`ZU}QhIlY~8<M(=_q1P&#vs2)qUj)xtns2)qU
zj=3YSc#fVCc$J($P4!p;2!Yb-vD{xrEujiDA)u^!%{e3PznTO90000<MNUMnLSTX|
CMF$4}

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-center-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-center-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..dd851c79a36e8544f721e602d36332e6219b51f9
GIT binary patch
literal 621
zcmV-z0+RiSP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0IEquK~#7F?UmgLfFKk`KbxQt9HM=ip$W1LTA_8K
zAsnFzvV`6e`m{fidm!lHk_U|=AY8zV&iMxyDDW{NAOeaR>Lypa1^xC~g2So;rmfU)
zHc0Kjwz!E{+@p8lQ`jTWh=&sX%}+QZ9?J}|0uB4Y9WUJBY2+@*Lf}xsgzB*b>v-6K
zgzB*b>liu$jpryCfmaC$q*RZ^f)I$U9?Si8loE<S76QTw=<+w&08=YZ00000NkvXX
Hu0mjfojDIb

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-center-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-center-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b8a9dc091e8c6c52a90978052e4a32e5d7e9078
GIT binary patch
literal 635
zcmV->0)+jEP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0Jup+K~#7F?UmaJ#2^qw$EhGCYztPjHEajj4z`8u
zN3ex0VH;4Bf&9hb9r7Y!4hVi+#)HU}$XG!Lp~#{YFrADEn1Dk<F~(;~=`(ISB=4O2
zF>~*||F*Kw4dk4A^l+h+@|c91Kmsz5^gzOwd4zvbBJTjnK?38j7dmi4gx|C`_7~hj
zVAh1%)`JgPXvf(NXj>0usU5i%r2Xic0!LF5P`4gRt<1O*(zYJT_U&j*XactoFa}(?
VN^dRaPIUkP002ovPDHLkV1j@57gqoP

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-center-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-center-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8acc3f050c1c312ffda386a05d5433809bebbe9
GIT binary patch
literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HR4mK~#7F?Uca{fFKM-KW^X#ZsrV*;H0>LZh$r6
zU<if}XhhSO5Dt{)9oi2l6*vzn=<qTspaPVD4EiW%bpfaM5PST=UHFE%tW0mi6qW9}
z5mGgu8Nv<uEKCtAFtH6ihwzN23AdpH4Wjl0u2L_?=?{Z-k#sZ>0V~&lXV@g0dL#s@
zraDEKj!h0>N$RmIAOvz#kLCV!)Ff1aUkE5WZvE<N0(IOe00000NkvXXu0mjfD!T>8

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-end-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-end-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..66b91617ff3930847145ec7b03ddc80d5fe012bd
GIT binary patch
literal 618
zcmV-w0+s!VP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H;YrK~#7F?Ul(5#2^esKcguiC2*&xsbM-G9i)X6
z#hnt;0f9quh_cug*(5*72ZX>+$oc@v#W?3uscHSe&8UD1e8D77@Xr|2rIZ@tk(kSe
z5c;)E$qRT!^McLQZEZ>fEci4v1*#$u7{Di@qQHOe!X<fNi*Splpnt*R1m+|ZBpj6p
zViNijninjHNoa8%??^&P!cmDJ2(S{4iYDO^Dxd<&2w8+JJN>v1Pyhe`07*qoM6N<$
Ef<U7R*Z=?k

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-end-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-end-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..587fbe287d8668d6b727a2b6639c4109184dcebf
GIT binary patch
literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HR4mK~#7F?UlO;fG`wAub%-N!Ofh(LThcUT*1v8
z!B$Y?2f;?<U5Ogu9T0?&<PgFMpuA1io9)~2@i8i(0wGxPA%Pj|<u4M>XyF9~s<1g5
z<WIni1+n=`ybHsQz`7t$WK+N@cLX}Hc*{MoCorW~3!cznm`XT<z6Guc93|unCq-C7
zzHm~+C5-VL|0p3}I4QCc(uI?vCA>rhR6v;l2{tyZ1>1xK00000NkvXXu0mjf1&Ie#

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-end-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-end-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..32094c00018b3863dd6d30f20878838af42acb88
GIT binary patch
literal 633
zcmV-<0*3vGP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0Jcd)K~#7F?Ud08gD@0DZ%PMn1cwUw?F`+(ZqO0z
zZ?aTJ=mbd<uz$AP7ampN9SAB3@gU{^#-H)tmo`4nCv1!fn7|oALI{_f^S#~<%zEeC
zvyLgo_*k14e}PiU#J+r4KQ6-15*Q(8P!rImN8kk^?LUB)K;7*6Yr_?q@a@~A_!Oj+
z=6ac-goS87C6pG9g)X7Aa4d8QI}68hj1r0q$3m5`qi`%-3AGEyVj(ht%>|4%&{ROL
TO)FRD00000NkvXXu0mjf?++C6

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-end-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-end-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4b114f7ba039ddf566d7a6d5b068ab680a45e59
GIT binary patch
literal 623
zcmV-#0+9WQP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0IW$wK~#7F?Ud~a!yptzucZTIglyIsI)Tp(Izqac
zBXk3+(Edxpee&`J??6a`s0YCVI6EUEr9J=u8xF<=T;L8RDWyj#<yAiia!L*%NR074
zH>f^=y16JeZ;U@-m<Y55p=YoZFr`P}13ejr0?)MtXK2D{X;6I&YR9MgnqY*7=sYFt
zC>#q{!j8hR&?OwP9oHyfPvKZH2mx*3Shx~e7mme4<N}8aI9~@RG_`-RI|~2+002ov
JPDHLkV1f`~2S@+_

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-end-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-end-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..42ec86ee68ae888082d851442562a688a4f63fb3
GIT binary patch
literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HR4mK~#7F?Um69fFKk_Z_xma&=Bp@3{8-2&<d>+
z4dDn)kSSDOBJYWn!8;Hnq8|J>0>aCv#TfTp;}Rbu0wPd>$+()%?3nCtO<baj5^89R
z**D3)0eiS&9PVgNVI&c78-h=rQXnZY0vq^fBoydF8+vfUBXU9Bg6stD5=In`3ax|@
zg`+|)VT0%RM+svJM@54mz%3jVDPa&15CP!;+ITnLq1yUI00000NkvXXu0mjf*4zVI

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-end-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-end-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b9f5fad1a9baf6dbc69ca189b8b5319a813dafc
GIT binary patch
literal 625
zcmV-%0*?KOP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0Io?yK~#7F?Un5bgD@0DZ$bxfgszZ@Izu<G8+3*4
z6UYi3p$jCb4_beT+!ul$@D2!y@;roa0vH<;W2|!hpFMWQ1We!pB`Kv_&iOgr4$Sw?
zxwrRz3?aOh-m6!jlrpkE7iz87pD?-z$Ux{Bx(W2AMc@M^vJcQpU>bH`8@PZ7KX4T6
zEI6FNTtaQ(Sm+XJ3&%p2u(5C~=P04Na4b{_8w$r_C0xY>Ou+a832#bukQbC|00000
LNkvXXu0mjfvib`Z

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-end-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-end-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4fcd7ab13bdb10dc044d21a2f308b4c51f246715
GIT binary patch
literal 605
zcmV-j0;2tiP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0GdfeK~#7F?UmsPfFKY?Kii-U+N>EGp-F9n+Q2R_
zI3eUttQ77+gg?&S4|@W}$Arke9`G|JU;=6ZI>0kMdywO=8Pp<fsAXsK$#3YOgb!<Q
z1fRdxT^_;%dNx!PSaKUaa0#zy1-lE{6(}g26dy7rbWFh0Yr;Dm)SWSYCkYW3C@P$k
rE=pKZI4K(h0@}h!u@Yu60TVDzA^8qr)Y?1>00000NkvXXu0mjfR`&eG

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-start-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-start-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f8de1d9823038b018d32c8d2c73562683f6fc44
GIT binary patch
literal 614
zcmV-s0-61ZP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HaAnK~#7F?Uk_&fFKY>KgIzZ!JeU<!3}f+S8ynL
zMsNd!#KK0rZwMCLORh4(7XlAJxv<uTG^k96pHTr7=$}5s8!;JUwh+Pq89vV9oZCT=
z+ku7nd18#Sfuws`kcAO`6{tc^-~f*YNlsv97K{fr39tByz6H$+lq{hXk6STImQc!w
zTQN(QP|6??s6y!yO7Rc~P$iV|SWGRU3N$OAoRQEiJFfpdRR91007*qoM6N<$f<~7E
A-~a#s

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-start-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-start-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..27dc3fd271a80c1efa11fe84c4cf56d2553cb5b1
GIT binary patch
literal 615
zcmV-t0+{`YP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HjGoK~#7F?UlU=fG`k7KYs>r1UGXA3$3-aas@YY
z1Y1FkKPYGsy^|vr-h)6OkUT<o0hEKRH`{QGkB?CS6$q^>`H;Yj^)ib<qlFg~sKN#e
z>^ES>f^qmtybH7NZ#U$_5q=bK!ks_|F5dDE<OHUaxnYN4D)Acq3;rq~Swbq8VoH{f
z%B7gnC8QEj1e_pSLMo@gNtTd`rI=bm75J-wG6Ry}Hmyz#vC{wm002ovPDHLkV1mOH
B1@!;`

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-start-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-start-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..e967e31bae2a6a904bdd7a6fa1b91b2babd6f1d6
GIT binary patch
literal 628
zcmV-)0*n2LP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0I^9#K~#7F?Ud08!yptzub~5EgbXGAc7|?{ZqO0Z
zUtOvrbONn{A5B2>9vB1R9gqYP^dNcwA)~bpX`nL$PDTVo;8yxzjJbR7U-5MW0j1O@
zj@erK27}@bgb-%x;`#q63$v&ROyENn-WBLYP2dYA=^TK`P?_w(oG=ML!K8Q#oO4Tj
zEI1em(RE5lWn0W<C8V+~X6q7C8FvMG(X@nA{sY&tgj80=loE=72nau3SwOGv*`LY)
O0000<MNUMnLSTa9?G5$-

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-start-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-start-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..1889700e7d471e0a7de95e956121bbfbf48b6198
GIT binary patch
literal 619
zcmV-x0+juUP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0H{esK~#7F?Um69!yptzucZTIglyIsI)Tp(Izqac
zBXk3+kRLxZ?}9N9-hq%nKo5#Xz}OLyR31#`fr~K#6L_|Mgb-dSrBD7`pd&ix#C!h*
zL30K2<U&kdSa)HH-WIIjVT2C_rqC1kfhU5bC-5c*EW!aK%~O!?g)P4}oQ#F&RwdL@
z6?0?>wN%9%T|zC3Mqmn~OQ<D6A;6YUOI1uOp$V9P@dwORG_~)MT2BA~002ovPDHLk
FV1o8u2Z#Uw

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-start-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-start-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a96b95451387c4f10c6f3b5600e9c9112738979
GIT binary patch
literal 614
zcmV-s0-61ZP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0HaAnK~#7F?bYE4KtLGA@rMjx1Vh-z3?^_ku!41D
zh#SEKjw@dj=Y4dY58huXrT9lZ0Cg~vbN)bLIX<QV8c^I_=x5is6~lg7LdIq}Ojl<k
z2)A!wf4CtY?o~%HCG-g@@R;DofFwcz3wRc!P(VxG&<FQ;OaBGG4T!mfQm4g?xr9=u
z#f-g#Ql%syiP%dhWg!S)mr&|@F?9(w;I{#418QG4-xLk@-~a#s07*qoM6N<$f;n>r
Avj6}9

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-start-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-start-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..a90100c0fe42433912faf4c06d3989565a540544
GIT binary patch
literal 625
zcmV-%0*?KOP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0Io?yK~#7F?UmsP!yphwKaUQO5xRmCb%t(`ZqOCF
zkKhU&p$n+3kRK%^<}MuONA5u&Ae;}8Ctys35K8^f8N$JsfC*gI7GjLIl+yF}JAi?6
z?oC9a_x=R|t0$0i9=V%WN-5V#SOm2OLJnJaQ=k_ufe(b#djKKS7<Ly9tiliM#omI`
z3aFKk%e<IsCFC+MrgjOr44VSIP%R;s|G;UMkjrv0t%N3US^?t=BKAsktzZiE00000
LNkvXXu0mjf8r%%`

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justify-start-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justify-start-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9bfd13e0ea7f00924f62e51443ab3d2856c159b
GIT binary patch
literal 604
zcmV-i0;BzjP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0GUZdK~#7F?bP83fFKYB;8z>8L7O#0BQ&XPP#f44
z1|ns5f);ikL=>p+hxY*GSO<l*c$o&!0Ji~XAO?CC%V+jANEMEu+fZtOP~!(Ueh~j#
zyrEmq_32BvLT-joEWjw-a1T5oRd@+Y(ITp<3Av2*8Z%ZzhF(4LSm~JVDL~eVIM1oB
q3Atu40!W*X>$)+u2{piP1E>vFQx0JwOblZH0000<MNUMnLSTXx4gc@}

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-black-16x16@2x.png
index da0d7558fae256128c0ca19d5ac451facbc04e1d..2aad798edbf384ea093523b731943461a28f6540 100644
GIT binary patch
delta 241
zcmV<N01p4_1eOJ`t^t43Nkl<ZcmeH~(FwyK5QcwC2FM7$J5*=r26lstkPhX$BXk3M
z76K(;?+$AW)DI*f9P#6F{t)2bG24xEF5y5z2=Bcw=*+Z#u$i@D-|6lh7y^^DkiOm3
z7_+35W~MaK@-#~i2+(xE3pUSKS__0|1gxS~BB~Z>f=1w}sEujTLXE&p@?sj)EP96!
z@hPCGUg@&p$BZC4cM>YnuS5isid+YL#pW3cCKWjWi+bi7f#z@mn)E9XQ6V5ozY>yE
r{CWynrQatbh|ZUUNB<#p@4(;%24FQt`gO*b00000NkvXXu0mjflx}OD

delta 198
zcmV;%06G7b1?vQ`t^t3jNkl<ZcmeH|!3}^Q5Cj)1umt`TWes+K9oT|J@uvhkK<+KZ
zMT16jliY6u6LMJq<p$2VB!e4tco`K?0mFpyrVqxLIi=KtBj)iTgyk&AzJRZ|T(Eg&
zCddj{)I$k>W(il+6PXYzFtP^<d0|C(LTmId_=Ui(2`{uBOGG}Q9ZN6Z8(c0}6xy*n
z2)3eU1RkX%aHaKFA_#%1)?;bXj@pDO@CyND13Wk_HDz)40RR9107*qoM6N<$g21Ft
AqyPW_

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-blue-16x16@2x.png
index 4efe18981c87346777cf3a52f8d47220786c1b6e..ea35b38f92adb2b8a7197a7b937e8e29bb5e5b79 100644
GIT binary patch
delta 243
zcmV<P01W@|1egV|t^t45Nkl<ZcmeH~K?=e!5Ji7AAntmE+{`n$&~@F~jYp_A^9bDv
zZDW)oqNMXfo2FpiqJ%OepGoo{z`v8dM~Az?oRpi_+ABmx{ru^Z1>>vJ(L0a=D7y04
z>|ol99pysh4cWTDSzSTEcfhm-vG^0+2c_`Y0_{=D1oaLO1fOdFHC>t6b1;2?Zck2J
zqv=i{;cr2?t?akL#3T_d+=RUST!>a2?f`E;7oruVEzlTGJ|;kLqyW7ATnO?K0?_tz
tAzE?x76h{2CrLyLG~vuIr05+;JOH>SG(m|xbCLi6002ovPDHLkV1lpWa(4g#

delta 203
zcmV;+05t!Y1@Hv0t^t3oNkl<ZcmeH|y$OUs5JtcCt^iB0v#a5PyI4~rTd*@rFcsAG
z2Qvr!23<v&2ZF(%kKN@hVC>=7`1#pEgo`l&6L8ejzx}{>#rPJ3qk?;-$lvAGAh!a(
zOBFw#NEYEu*eyt)hZ4TcA*`XrjpyJvf&R;WaG^%qX9$kn1y4f|SeH;=Jr=Q!>lM&f
zk43CwBo2lnW&}<}63|zVMTnUopspTEfI3<UP2dRv#sCzVHmCU$ox}hD002ovPDHLk
FV1m-tTyOvY

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-darkgray-16x16@2x.png
index 0ad9e2a3f03ea7f2880744ba3a5e355796c2bbe6..2c9b99a4cfdfc951f05185f4de9dff3f76cc2b9a 100644
GIT binary patch
delta 250
zcmV<W00sZ`1fK=4t^t4CNkl<ZcmeH~(G7zj6h$A#0UW`hjK7`14eSOT!Tth6b%ag;
z#YU6HRNkd6U{X$EB<2A(FLDxy{vELnx~{X75Uurd?}{>0Z$GTbVzKRX_70Q)HCovB
z{mB?}al^(}Cxp1UXOvQ22>|YZwRYq-U+UT=C`3qrmT=gh!2xn&5fb2z7S8_xS_=no
ziw@wzbI>z^z^6bdHM!SBKc<N2*d|2nw+CWHZwFBOdFHcL<N~zxJ<Z1fQosd(?Y9Rf
zuZo#GglP2*tQEbdAeQ}JDIz+a2~*#YvUi~H0M!9TxqEZQ<^TWy07*qoM6N<$f|}@a
AYXATM

delta 208
zcmV;>05AWa1@#25t^t3tNkl<ZcmeH|-3fpo6os!%&<GACzBWS})CR54t5Y>X6KD#)
zWq2<AQQQv%9}fB<mm`sI0%J@_i%!tc%ZPvoC?sU9?Y#F>+_p$wDYe8kIOpbC7J7jY
z!hl|$^EwMxK?OANfrLLZgex&gbAaR^fp}Pt9+*kOBi)Vs1;0oT*fk-y_27#R+Hv;+
z+}1-mYR8g*ru%5C0#8#CV7DGhsmz)}h}(K7*SDiIp$Pm!K-d7Pk3tLYy(z2!0000<
KMNUMnLSTZU;#&d$

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-gray-16x16@2x.png
index fcb1ba165a417bacf357503bc5ce01fabdc42be4..ae498bc69a9e26625d11aae1171b23b1380c5ea0 100644
GIT binary patch
delta 235
zcmV<H02Ke|1ds)=t^t3|Nkl<ZcmeH~;R(Ya5QWc@0WyM{b%su$ZqO0Z%^aZ{*h^`k
z1kAm|7z6S96A6d+IPn9Cu8vt2-upxc!u`IzZ`7D!{bNa1i}j?NPoM`F(83VHJ*D*I
z<tUU!V~lssy$ArF05|tQ^BMaK3ZXdytEfeSssmI(6X30=jc8+`Ccp#Scn%r}1il4q
zu!%nt?MxTZxlO3BUk=fVn-fsjFNbJF=?E;9GnNFXjub#+zZ{VY0-*NGAzE?s7Syue
lKV3wpd>0)0LTWyN&Ii($Iy=8S+>!tQ002ovPDHLkV1jQ+X@dX&

delta 195
zcmV;!06hPY1?U8@t^t3gNkl<ZcmeH|-3fpo6h=Rrpb^}x8JfWB2CdL$j?e~{&|5;E
z_D6CL1U+2xpm7A03y4Te4=&K*V^lx|3^U}tA7YHt_S%CZ7-PgaH=hksJFqP-1&b%_
zE_@1m1Qz8`!oT?m7nBp2Ay!~yKe&^GJ)TDIf+hqGC9J3(OSU_XhaIS>9!s{4xg)T6
xj-C;Cm7G9L^;iN3fzs-+++Rm6p$ar1psae$IV0}Bngjp<002ovPDHLkV1l8EQ8)kq

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-lightblue-16x16@2x.png
index dd851c79a36e8544f721e602d36332e6219b51f9..d811646a521dc9c1c84c451f02dcc9db1f161c2a 100644
GIT binary patch
delta 242
zcmV<O01f}`1eXP{t^t44Nkl<ZcmeH~;R(Ya5QU#117rk;C|##Bbb^`<IzqZm=@5?4
z32IGgpahKXu*N|A{zSszJx=^UVDG4DVeZahMa)rsdN(LcJO42y%f)=s#V1e$v}|Gj
za3}Y|)i1k9sZ|Zk<)CgLpeNv)8>0D${syIx9Dx?pGC{=wvLI>+@D$Wqwonq_Ol~{|
z?Lk7{0&mE{e+K-SDxz(hP+-3hQ7bM^Kw!TRQ7gudKqH+lB|vs!0VMVdVUZAkwO@#+
s6&G(oF8lpbMYO?p!OAbB;uEO60hm}ba@v?L4*&oF07*qoM6N<$f=lFT+yDRo

delta 200
zcmV;(05|`a1?>c|t^t3lNkl<ZcmeH|-3fpo6h=Rrpb;FReVU;OvJG0Hb)q30p$W2t
z-V*w>KazVO=;4wFjUymjz>LoM2Nx*tF(M!WiW%xASGxuM_F96&ssg61)NnRP?ZCFU
ziCEmDci~gmBhZM468_CkI3pg*46y<Y`@tPA+~H~DF33XQP{Kfj>ahgtc-Vo2>ahgt
z7&-!t=O`J0R|yHERFB1i5QwcF%l&nf5{f_;0>TRD@;BK4Q!7sZ0000<MNUMnLSTZG
C-dTYF

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-lightgray-16x16@2x.png
index 1b8a9dc091e8c6c52a90978052e4a32e5d7e9078..7425952dc67d18dfc812f4d6484a2d0836b137ee 100644
GIT binary patch
delta 253
zcmV<Z00RH}1fm77t^t4FNkl<ZcmeH~;SGZz5QPuo0FKZVjPBDJ+`w+o5$rxDuFw&>
zfKX^^(wM?M+5#r!`y(;u@p6$bf#}~6>tdQFO$q6`?y<L|%v9SKYqD5uC!Ku)B|wE1
z&hva+mgQ`gwXaSHag|aIP19Tm0G@zSYT!1vXsr*=pb&5X+n9B5*r34yVi6MHh8EiY
z0Ih`sn5I40*akfj2z(0KwjIr5q#sj6v~Lrl_H%()(K`Xuel8FzO0EHYPyKO#6mS7x
z`?=ucC7F-=5Usv}wW9YF#IoNjMMV2EVd@)F_6Zd3-nd0YZaPp#00000NkvXXu0mjf
DlgM=f

delta 214
zcmV;{04e{X1^WcBt^t3zNkl<ZcmeH|+X=)V5JktSASG-IR<t#22iXp`h3!YMg)Lzl
zP?LfD#o!(CB4G{)eq6?b$d$-gK?tG9q7^Wmj0u>4LqajeXG-ZaZaXCJocl3z@4f%F
zvd|6WoO|?ep_KBNgquJDGLZB@!k2l3e^Mgv0LeiD<FFSxa6(Rm-?TUO7u-T%)`Z&D
zgAZD0$Jq^NTMuQa9k~{y{pgwkM^h6}w;oEZ%(xQLwjRp%?PyJC0=Ez_23)yHZ!PCe
QbpQYW07*qoM6N<$f}y!#zyJUM

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-center-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-center-white-16x16@2x.png
index d8acc3f050c1c312ffda386a05d5433809bebbe9..8aa5312073a1b85a8331ec914050124174e01557 100644
GIT binary patch
delta 220
zcmV<203-k91c3#xt^t3(Nkl<ZcmeH~+YNvq3`MJP0XJ|nXK(~3#SL@=EFUBWEp6ii
z44lMZw6r$`ZUR8*H2%dR@F5N2#ugIOg&(}Kw+K6(yaQE$SO6~Fh|g+yjEe;=es<))
zv2s>vos$nxrywTo3NBAJKA;h>DPk9CphmzXOzectpoQCnPZ3nssYaBy0EPQe7|Xa~
z)QDUH90s_@hADfh4kzG|Q*o8^H%_Q=KZ*rz2#~rTh1?aZ6BaArbT9Z~9~?>Efyxea
W&klNkQMdm90000<MNUMnLSTZ32U@ZK

delta 192
zcmV;x06+hM1?2>=t^t3dNkl<ZcmeH{!3}^Q3`IX~;0A8y436NWxPfkfHQ`_gh7V{&
z)0Yqql;$1U4=5El4=U*JGAf_~lz<HSC}(v6r}q$h{J~xLhPkXvZ^IOo?z$0DHJ=&6
z4f!lg5i2mU4LyhOjHd~=p#%-0_5`j{FUIK)gLRQ~G!X$S*MK-@*d&{JBm}CaIz^a{
uO%7p6>ai>!1aec4<^FWkBvgT42q-&l{pxB0b=)Zc0000<MNUMnLSTZk%1`3}

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-black-16x16@2x.png
index 66b91617ff3930847145ec7b03ddc80d5fe012bd..fa52a02737f43cfe7e90ba2ed60be40a555d07c4 100644
GIT binary patch
delta 230
zcmV<C02%-41d9c*t^t3@Nkl<ZcmeH~(G7zj5Qcvm2XF-58LBgM1G<4D*r9l5gl<5O
zCcKzl6;DJXUqUoO<j;A23Bc7+>Bblnup`d7@7_05rkg%U$x1P;boC0f03B9B-}0`M
z8bS#D%u-LoQg6L}O-d?Y7i=EUGzM-`5<q9H?MnpM1WAB*##&yF0s$WXUYwvtjX|H>
z{OZ4ex_YF`2q8^G$2Vby@i;t$CbWXhBN{>zYREaa33H6c;UNgH$aoxL6K-WZjwYhx
gnQ-qDQuPWnK2t6=Mx`ZT_y7O^07*qoM6N<$f~lEdk^lez

delta 197
zcmV;$06PDR1?mK_t^t3iNkl<ZcmeH|$qmFH3`IYqDIg_qr>Lo6Iv^dSg%rh|64C*I
zLvo0+*cRC&KgkD#z)#5f0LsNU=TfO@{lU$sfC_xUBv0_q7}KSc8sd?d%ZCv9wN1$j
zct-Pr&DCvfN(3zUG&KdPA`uwCC!(UjfA7L2d0>lhi>IJ}!Q(vy<|Gs(9F+)S68aOG
z7c7WLXmK9zNJ2@%QHdZ3uo8}nCgBk(paRMWS%fV+{kRWM00000NkvXXu0mjfPm)y#

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-blue-16x16@2x.png
index 587fbe287d8668d6b727a2b6639c4109184dcebf..ebea0168202cdb5f52f7b0658566bb148d98ba71 100644
GIT binary patch
delta 232
zcmV<E02lw|1dRo-t^t3_Nkl<ZcmeH~K@P$o5Jf*qV%+rzy_silq3gP}8;?+L<`KFz
zX^Ye}#;9W_3@vTSTMz;SekSk|fTg2ey~EvLO!Ce1>=go|zec)bgYi-6;1!4gG+a4W
zJDB=ndr8mA8`L_(Szmumx>vx|8RPJlv<nKq0oslEBtr!7f+S!-$zG}KJ@6l(+5g-4
zjS^LJq9)y6LB1_)TR=z@(F{z;Hy(x1gnZ*sh)tM6&b&>?Hy(w|glywc2u<k8cob1Y
i6Exw-KcwIlh&%uUcr-zvaUT}|0000<MNUMnLSTYaY-ut8

delta 192
zcmV;x06+hY1?2>=t^t3dNkl<ZcmeH|y9t0W6h*I}0UW{2oWVkCZLM6v%^bm2P~!)|
zM&w<I8sQxfgplMA!U>?fP1c+3+wt)+Dxd-(Sn?r(8SCXQ63%Gh1qG_GIUD3pz>Ed4
z`AWPC!;ZkZAWvjdz$$kHI<R=lJ+LP*rB@4{&|#QLID@_gt_e6CCFBbyMOZ?<a8kr2
ujPV@*C?Q`sDY6pMg_EKsyhH_5K$!svHa4vV+k^xF0000<MNUMnLSTZMwNZQk

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-darkgray-16x16@2x.png
index 32094c00018b3863dd6d30f20878838af42acb88..32790cb578a2a6ec069854dbdaff3943b96ff493 100644
GIT binary patch
delta 238
zcmV<K01^NB1d|1@t^t40Nkl<ZcmeH~(G7zj5QdM&0UW`h2(O)?8`upxf_(*s>Ij_x
zij5|X=~3XQXyi+bL{9i~(Juku=&*UfIk&JPTI=`TCn!v_d@v{b7t2l;??4UEKq5kj
zvoYr8hOMuTG4^m*FQvSHn@{e5wYLAY`Bc|UK_Pd5E~3269w25HlmO4r!tpzR+yUI8
z7vI7kj6tv1Wb$92lp5S^03uaH+c#mT@i53H3^ktTeVPd)jfb&s69yX(gJi-8<6+QD
on9Fz=RYcn};o2vp;vJ~G0C*opxos5&@Bjb+07*qoM6N<$g1-4~NdN!<

delta 212
zcmV;_04x8K1^EQ9t^t3xNkl<ZcmeH{(Fubv6h&`J2XF+33i<5}-N0_p5$tcWR7dCp
zNfWStw%ivURpA{7Dhcr*<^aZ@@!pp<KF=p?j0u>)8A3t`mz?vx-VV%q=iIZ7DaQC%
zn-_n9Qp&`>d|5v(!q5^JA!kq%(56S=1tIM}fR;er?D}iN6`D-&?c1dI6r_~qdYPew
zg=jw|lopPKE}^t=EOZGw3&(Pd5{e7QLY1(ia4cL2wF}2$Au@r@1&lY)R6wsyD_7?L
O0000<MNUMnLSTYz5no6E

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-gray-16x16@2x.png
index c4b114f7ba039ddf566d7a6d5b068ab680a45e59..f5c08ddcbb88a19e95033d455b28c1583ce69d1e 100644
GIT binary patch
delta 226
zcmV<803HAD1cwE%t^t3<Nkl<ZcmeH~;SGZz5Jr#20UW{2IzuPm*q|fW%^0B@(4(nI
zV|vx&Ks56HNaVtOxrCPhaCXeJK*RtWLjB&oFHo6o{$om3iut6gPoM?pAQ9)>HH2`d
zWxr7BjWKAgef-)?o&Yt+70n~VCn#hM5DymA_9X&jK@;F9sP$S<Ai(Y4!C%Cnj@wMW
z1!T05J|ie;BHF(R1;*phnNVOn4z&pf&~t1PN{q+hK@niB@i=rQ%w;@|CZb)w3pRZr
cRi8lP1^3B1JHS-=e*gdg07*qoM6N<$f{XfRpa1{>

delta 202
zcmV;*05$)I1@8o~t^t3nNkl<ZcmeH{?Fqvm6h*J417w73))_j1&kZ_4x|t(%1FO*f
zOTvBf@&)feNP?&b!2>uuBO;|e|Nk2f#sys94kan2M=9l1KL>J34k1X4@jW-FK7qQq
zC^m15KVg^%v<0DOuoN(*N8kfJ8HNJSwFPHr!f9zxeG6*Gr}{#gV1$S0JSFTX91B;%
zj>56fB^<FG*C=66;aD;V0d3(}xDr|yj>SXd0*4DYUk4{NwSTcY3jhEB07*qoM6N<$
Ef{dzBegFUf

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-lightblue-16x16@2x.png
index 42ec86ee68ae888082d851442562a688a4f63fb3..49b0712fd1c89f4f7ee97244e1e39fca484b7aec 100644
GIT binary patch
delta 232
zcmV<E02lw|1dRo-t^t3_Nkl<ZcmeH~;SItd5QQI22j~bL!nlqzIDvEnN2u!<hhPLJ
z5W(2QG@kZ2C~eC3r=(oCmrM8(fUTp3g}z#g8PR+7>Rll-_4vn-EEVHPXP-a`P$Q7;
zW)Jp(vs*TQN{y<ZPdjz_wi!GD*IZ9%?rGma5jB86m{HrL2oPWeNq{?})*wNE<FA81
z@IgCjGx!!bWA^UTLr4+P@=eGv9)-+=4C7IVP1r)tx=qM29)*D*z*OT=$V?c^coaoM
i3w#&M{6fk;fx;6BO*3*LFQ>);0000<MNUMnLSTXsQfD9l

delta 192
zcmV;x06+hY1?2>=t^t3dNkl<ZcmeH|(FuSc6h&{*0FBTP?b8fRkZsTktrHF52u+YF
zR9_<RiIu@S5G0}={5S%_%c#W|_g&)>A0q-HP=U#~n$GN)>~Bq6qKgu0Xp7l5$-V)5
zxMCdcXii}y5pWxVPn}XADKP>Y_-G^)=tCQNaKa;ULEeJw1nxKzMih<;t%MPUqe3oW
ugXj2131bRJMS~!~EgTgoVGt1z0pS4JcsJjn+WJKR0000<MNUMnLSTYvCQX9?

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-lightgray-16x16@2x.png
index 7b9f5fad1a9baf6dbc69ca189b8b5319a813dafc..b9c2911c2a85fc2ffaaa47464585498851be99d9 100644
GIT binary patch
delta 241
zcmV<N01p501eOJ`t^t43Nkl<ZcmeH~?G3^p5QY!Z0Xl*!5ZK2V+@NmY2z4J4R&WFt
z00d(b(|DCHOHFzHl$6Wy=F&b10DFf_3n`_A6%j%_&!$kBZvJ9Q_ABO-u0DYlpo2t|
zQb(=z#Vz}#Izq^eQaUikuAlakCt!>jz8&td)*fC#p=bc#IHGC1FCL&2IRWmWh5kE$
z(g9r4(^BI%e9$wtnfw=U&PVqcA(JMe?VB*vco^9x3^g7`wh1GRhw<Mg3^pD{mI)(_
rhmmK(QpUq*BHEq_*S;ZDpFraQo^C}&@o!ub00000NkvXXu0mjfBGPG5

delta 204
zcmV;-05kuV1@Q#1t^t3pNkl<ZcmeH|?FoZ06h&`B2XKV0kcm1&H?SLYh3*r`3LT*f
zB&iQte~H`|f*<e>2#WGNgm3~F8xv!!a{Zq@cE$uu-~uHnrCZMVIo%G-_s+Su_kIi^
zyq4apSD=(KvOgDUt=FG0x(LWX=oz{R^rl7N10}K#&`V$%c3(srxPS;ha1`t;IGn&-
zLT%w#=n`rR$3mB|v2ZNsD51J=EK~^_3ddq4T*U-T!1w|QZ%TEL7nExN0000<MNUMn
GLSTZ_T~%HH

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-end-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-end-white-16x16@2x.png
index 4fcd7ab13bdb10dc044d21a2f308b4c51f246715..4f8ab867c30c2069c3e3182473cedfc86c6c733b 100644
GIT binary patch
delta 215
zcmV;|04V?61pEZBt^t3!Nkl<ZcmeH~0SbU13`JLTfo{;vIzvb3q;-S3flVk7OWi6p
zX%E7Pv3=I|L4dzg9WM%jgj9$=YsgGve>jxI!tQkT4v2u;0`OP%_$(^Sq+=-w6=xOq
z#8ehnos$nxw}2zo%xl*vdI(oW><keE48Ft$TId*z;tt_m>^e_kMBf*{a6A{2@;G78
zh;#xxI(Wv4Y1^wh6alYnM$t~laXc3@JP<&2JQw1GUPQp@UXWrAOtN=C*Z{lF4ti33
R)Y<?5002ovPDHLkV1n0iT#x_&

delta 184
zcmV;p07w7)1l<I%t^t3VNkl<ZcmeH|;R%2s5Jo@Spbgrr85*HUZG+mtE-*MD<W8&<
z?m>h<&fX7u0>;OL$h{u$GbUgHY5_XHGd+8d<F6UiB5tT<XY<K#=%9oTYj6agzt>$J
z!UK9XR1{cp8$NIeuV@9k3)&SZD4Y}@G9`3Oz|(8OI~>%VF@7*72@w}4Dx8!qN?1}j
mDH{X=+QLb(5@s<06EIF8`3_;!+B^yX0000<MNUMnLSTa4!$(>G

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-black-16x16@2x.png
index 3f8de1d9823038b018d32c8d2c73562683f6fc44..c6b9f0c8d3c45ba48dbda1eda24fe8fbd3daa71f 100644
GIT binary patch
delta 225
zcmV<703QG51cn8$t^t3;Nkl<ZcmeH~(G7zj5Qcw@19Sx68LBgM1G|AE*r9l5gl<63
zCcbD6PE<(rzJzGh!0&l}3BcVk^NF=Kpdik<|Jn^I(=IQ}$<AU~>FO2G04;ZezSYwh
zGlUQxh~sJW)H@$!5UW5hSbU<RF(8vBF|ia$(9Hpg5DV~y9FJK{VgX)~iK$Vipl@Wt
z{sq+4BOOMZjEd+ICgkuC81e`ca&!<F@+cE>Bwye%Cgkv`2X>o~LuyDhp$1s>K<OP)
b^$I9Ixq~%E#&$sl00000NkvXXu0mjf?5|<k

delta 193
zcmV;y06zbQ1?B{>t^t3eNkl<ZcmeH|u?>JA5Jf-60UW`ep`5`DbOTp#D0)V41BArF
zM!atb7Tim&GQk%D4?wxF)`m2wOoyLQ0Tt+<KExX_8Dq8(!T=dQ&f=WgL6F;lh4^`5
zjI)8Hds&c$5q=e@LQdcSj|WLkU}hGK2Q~?>_=>&-%?gw(p%gifTQN(PP|Ao~F-w<F
v${-P_Lg^Ap@el}5C6w}5Of8`bG%KK-k<cwWuKzt%00000NkvXXu0mjf9RW@Q

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-blue-16x16@2x.png
index 27dc3fd271a80c1efa11fe84c4cf56d2553cb5b1..b54200cc390f2362fe50020d6b2c55d8c6e014ef 100644
GIT binary patch
delta 226
zcmV<803HA51cwE%t^t3<Nkl<ZcmeH~K@P$o5Jf+g#JKYa-pn(&&~@F~jYp_A^9bFV
zv_&*c7j1@435BGcw;%)(_)Op>09!}(z3ayyCdK~0cZS61(MXqUF$R@RUI7W9$(dVy
zhH0L*cZ8ca)Go(Ezu*B~0n_A+&3~M_pk8Foh52xT&JGX-SAbdyT$H^B;RCc6=E4=~
z_6|?zS5O>E+m=`u5z#74NWn5>2oqAU3>nIV6q5&7i3uqfA`4+c3YH<ogc4wU2O|HF
cl2<_Z0&C?oL7<bmzW@LL07*qoM6N<$f=P#B>Hq)$

delta 194
zcmV;z06qVQ1?L2?t^t3fNkl<ZcmeH|y$OIY5Jo?L25<y7a|R2owY72uH**AAL5)8s
zXc4`WBNpC+Kp>DjLU;j`gRD2(aEy<SQ2`YQtt<JEz>M`Wi$J4=7Zj+%1`O;sV8()R
z_)5GBv+!>><iinu6mY_wKnE_~@($z#rj)s1hhZx58vP6YDj+&pLMoSHN|unyrI^ws
wq!LjCoFH35DyP6nmXM02m|8*=_^W_21Cro2txgTG(*OVf07*qoM6N<$g5`-&8vp<R

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-darkgray-16x16@2x.png
index e967e31bae2a6a904bdd7a6fa1b91b2babd6f1d6..8b3b2453dc0902238eaac2c169ea69e7fcad9389 100644
GIT binary patch
delta 232
zcmV<E02lxC1dRo-t^t3_Nkl<ZcmeH~-3`JZ6on5>2XKTA)$r;JZcsOHg!&2$<p@py
zQq#WFT)1KjQTdXlq(5-DfiD60cf``@``#fV#+c{W4GPn)A1ulCVqNLt6{rDP>V=f@
zXsx~Y<^chO5I27fN~tRnAS>XU8)Adc-*t1)Btii?@QDU}J3wGALILhzGOYt7(gZp^
zF*}}uo{<Q-3$)gwzm3?LDx&W<AqCfvADb}nKg*C?nUEqnf!{D81xI9Cn2>^H$ZEnG
i;AIWuJ|PvaK;;23@<zG6N^24T0000<MNUMnLSTaS8)gLn

delta 207
zcmV;=05JcJ1@r{4t^t3sNkl<ZcmeH{(FwyK6h*J017w5@CH{7XZjf%!5z=2>sv~p)
zt%4s-K=U3L1K}Nz1QPThdH^A#wGL^ZGXqXW1VrFg`e2N?d+%TIbp!#W)F+PFTKfir
z;tqrmX6oYk|0xTzs0mEqLl)i@=tWK73nu9tfXPsq?7^Hc2|q`{q<9OQb4z?II2Z}h
zbxKHOTg+x9q_Qn$>k?8KcLjRUw1iat1J|;IR93~55{iHb2tQs~K(FuFpUMCL002ov
JPDHLkV1nP`SUdm#

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-gray-16x16@2x.png
index 1889700e7d471e0a7de95e956121bbfbf48b6198..2168246c04cd5172992e655da0747362b5e77776 100644
GIT binary patch
delta 220
zcmV<203-kF1c3#xt^t3(Nkl<ZcmeH~(G7zj5Qcvm2j~cH))_hh#|9n2ZpH}RfSyf#
zF+IEzghcOqk*MK*j_@S_XU8oAB1&io*Zb7Ipfkhz#gc3<)}8L&0SholA3_MXl+uHT
zSLBJ#Ir82=QGnP1E>4Q#GvhaC5xFfGp+^(+?*L861$aSEL?KkU0C(lYbI^c7#8be=
zn)oqcXG}zgFrkFXkTpywp)zDG6H06@;4mhXh+99@FrkFXkY+*)@ataC^oG>E1I8Pz
WWjZ^owdJP(0000<MNUMnLSTYbRbp`f

delta 198
zcmV;%06G7G1?vQ`t^t3jNkl<ZcmeH|(FwyK6h*J417w73))_j1&kZ_4x|t(%1FMi9
zKQ!-xF%aH?kU&5WibufM5s_3LOy+@$F#!{Jwtj>VUMZzd{#>9VI_JcD{{=yF1@h!V
zOkP-bVT#@stl(jU4+W;s6ZnBAf}|(#CI>9S0VK^+kne>pzcxOcjD_e{CDc+Cb7Tp%
zRK*-!LM@9%U<#v4s3k%nz?M);RZJ_P37CNK2h3G8weOKyPXGV_07*qoM6N<$f<iM<
AumAu6

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-lightblue-16x16@2x.png
index 0a96b95451387c4f10c6f3b5600e9c9112738979..5e99e15d07f9d641d179cc7038a2772469444a19 100644
GIT binary patch
delta 225
zcmV<703QG51cn8$t^t3;Nkl<ZcmeH~(G7zj5Qcw@19Sw3Xu3{k=mf<LI)YuN=@5+I
z1R@%J(Hx!xA<_F@Bx<;yBYX+K)lu_6|Extq^h1rc3uLBTzL=98#j?}cJ0Jl{>O=jv
zPut<+hBx>zs(^mq)fWMf9dN}pqxe8I1r5Tt1r_*kg6<BG1YcQz7JLi>@dbD>Cmw><
z2!uQZ&WMeBG&mR$(J4$w!7^kF6H>4Y8Owwen+rIN2`S9h4>3$g!7`+nPy(#)1&MD+
b**hTgCvr1#<$;_k00000NkvXXu0mjfUsqlQ

delta 193
zcmV;y06zbQ1?B{>t^t3eNkl<ZcmeIz;R!%M7{>933}6I9*vAYea5k`lb!3Pe!32&g
zUliwkbe#|0Un!;dM?C;_Fq3osKw>#QrU4pI++FBr*SHnKep*7tW;sk(XCnx=Z(x78
zAs+5kM=&My2`ccI;KzU@LIDeS7Nk%>OWx22_jpVH1-}i5xr8}Vr^Sr9gi@!)jJ<?X
vr6eGU*h?s7AqZfXQ0jUybqO`#w*hJcYF{_s6b<&^00000NkvXXu0mjf5kOGZ

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-lightgray-16x16@2x.png
index a90100c0fe42433912faf4c06d3989565a540544..cead8128da03ff914b57bd07765cb9dc3a0358bb 100644
GIT binary patch
delta 233
zcmV<F02cr81dau;t^t3`Nkl<ZcmeH~(G9{N5QdLS2XF*eXkZ^_aD%#mBh-CJSiuoo
z0I(SQQgd)(3sL!AN=kD4T;NLp_;<uS&{}&ah*IjYHbP~(<&QbpRxCSRy#p;kM@<-G
z4%XW9G~7W1A;c9ChraJGkOA2N=iHE5Jm9_GKZ9n0vBJP78T4W80HufpxB-)J4j>bZ
z6g@HvhoC3OguDe(%5nOPurW<U-)}++t|31*AqCfvYnhNDxq;s>Aq7WdYnYINWyog2
j7U1O!lzt&q??B@Y9}z`G)cO1800000NkvXXu0mjf?b>7|

delta 204
zcmV;-05kuN1@Q#1t^t3pNkl<ZcmeH|;R(Ya5Jo?b4v-PLf)jOyZjf%!6}pe$3LT*f
zsI8D6B_!r99Og&vK_DQU50NKeOoR|h{m>c0!I*#vT-Fw1jJK51^Y=S|fphLnM5Fiq
z1p%ukkaHfnn^#IH*GX6ewFW{CTX<8T7cGGggw%TgA=DUl7Y;<M!Vm1l-h$H#sFje*
zyqIbw<T5X&b_ux*n*zO1Eg_fxz-g9{%W^TTgeGuW0pklI_DXfFU<&mB0000<MNUMn
GLSTY3W>+`>

diff --git a/editor/resources/editor/icons/light/inspector/justifySelf-start-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/justifySelf-start-white-16x16@2x.png
index a9bfd13e0ea7f00924f62e51443ab3d2856c159b..554d560ce6cc446d7864695df49777df62581e24 100644
GIT binary patch
delta 214
zcmV;{04e|61p5TAt^t3zNkl<ZcmeH~VGckr422(Y0XJ|nXK(~3of~k2>3%GkN-4vH
zeTfWd+NZjg4EQ^Rzp(@!q#)c{A~6+z;g#J5?{xAGWC5Z8`c*Amqus~2Sj6J91<%In
z8PC>P`GDUAVUPyx?%{P_J%khV3^>V_fKHj%3GERJAC9}=b+S$oeZmPPj8!<~mJu0R
z8pJVCx*E$5ThzJC2_?8ge%1*khP{9*oKWJJLuM!Zt$@|J;E6d1N#23X3@y(Ndbs>1
QJpcdz07*qoM6N<$g82MjT>t<8

delta 183
zcmV;o07(D)1l$C$t^t3UNkl<ZcmeIy;R%2s5Cz~@8?-^2HA5pbscldj*cApMWp{!W
zb{|9(sPBjO0OeQ*g|&E@2G9Vv0caowdKSxP_BBWqj-lI7YJpJW2RMEZ|69DFThI0B
zOSnRAhEOcPDBN%lJRwzh2}{u;s;UXOjP)8bRz!wgJ@Q!TnC>qrK-P&k&#A5nxn?i|
lNSl!Bx-qp0HNbBJs0~(A4q+lp3}XNQ002ovPDHLkV1iN?N`e3Y

diff --git a/editor/src/components/inspector/alignment-buttons.tsx b/editor/src/components/inspector/alignment-buttons.tsx
index b3c9c51d4d73..3fa2e1841708 100644
--- a/editor/src/components/inspector/alignment-buttons.tsx
+++ b/editor/src/components/inspector/alignment-buttons.tsx
@@ -184,19 +184,19 @@ export const AlignmentButtons = React.memo(() => {
         options={[
           {
             value: 'left',
-            icon: { category: 'inspector', type: 'justifySelf-start' },
+            icon: { category: 'inspector', type: 'justify-start' },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
           {
             value: 'hcenter',
-            icon: { category: 'inspector', type: 'justifySelf-center' },
+            icon: { category: 'inspector', type: 'justify-center' },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
           {
             value: 'right',
-            icon: { category: 'inspector', type: 'justifySelf-end' },
+            icon: { category: 'inspector', type: 'justify-end' },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
@@ -213,19 +213,19 @@ export const AlignmentButtons = React.memo(() => {
         options={[
           {
             value: 'top',
-            icon: { category: 'inspector', type: 'alignSelf-start' },
+            icon: { category: 'inspector', type: 'align-start' },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
           {
             value: 'vcenter',
-            icon: { category: 'inspector', type: 'alignSelf-center' },
+            icon: { category: 'inspector', type: 'align-center' },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
           {
             value: 'bottom',
-            icon: { category: 'inspector', type: 'alignSelf-end' },
+            icon: { category: 'inspector', type: 'align-end' },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
diff --git a/editor/src/components/inspector/controls/option-chain-control.tsx b/editor/src/components/inspector/controls/option-chain-control.tsx
index a0000f4fb299..05081a2a53a4 100644
--- a/editor/src/components/inspector/controls/option-chain-control.tsx
+++ b/editor/src/components/inspector/controls/option-chain-control.tsx
@@ -90,6 +90,7 @@ export const OptionChainControl: React.FunctionComponent<
               icon: option.icon,
               iconComponent: option.iconComponent,
               labelInner: option.label,
+              disabled: option.disabled,
             }}
             value={props.value === option.value}
             // eslint-disable-next-line react/jsx-no-bind
diff --git a/editor/src/components/inspector/controls/option-control.tsx b/editor/src/components/inspector/controls/option-control.tsx
index 24423c448ef2..328e71da2e21 100644
--- a/editor/src/components/inspector/controls/option-control.tsx
+++ b/editor/src/components/inspector/controls/option-control.tsx
@@ -15,6 +15,7 @@ export interface DEPRECATEDOptionControlOptions extends DEPRECATEDGenericControl
   tooltip?: string
   width?: number
   height?: number
+  disabled?: boolean
 }
 
 export const OptionControl: React.FunctionComponent<
@@ -101,15 +102,15 @@ export const OptionControl: React.FunctionComponent<
               isChecked && props.controlStatus === 'overridden'
                 ? colorTheme.brandNeonPink.value
                 : colorTheme.fg1.value,
-            filter: props.controlStatus == 'disabled' ? 'grayscale(0)' : undefined,
-            opacity: props.controlStatus == 'disabled' ? undefined : isChecked ? 1 : 0.4,
+            filter: props.controlStatus === 'disabled' ? 'grayscale(0)' : undefined,
+            opacity: props.controlStatus === 'disabled' ? undefined : isChecked ? 1 : 0.7,
             // If part of a option chain control:
             '.option-chain-control-container &': {
               boxShadow: 'none !important',
               borderRadius: 2,
-              opacity: isChecked ? 1 : 0.4,
+              opacity: controlOptions.disabled ? 0.2 : isChecked ? 1 : 0.7,
               '&:hover': {
-                opacity: props.controlStatus == 'disabled' ? undefined : 1,
+                opacity: controlOptions.disabled ? undefined : 1,
                 color:
                   isChecked && props.controlStatus === 'overridden'
                     ? colorTheme.brandNeonPink.value
@@ -117,10 +118,10 @@ export const OptionControl: React.FunctionComponent<
               },
             },
             '&:hover': {
-              opacity: props.controlStatus == 'disabled' ? undefined : 1,
+              opacity: props.controlStatus === 'disabled' ? undefined : 1,
             },
             '.control-option-icon-component': {
-              opacity: 0.4,
+              opacity: 0.7,
             },
             '&:hover .control-option-icon-component': {
               opacity: 1,

From b7c7f9e4cc45a65b26a6aa40177cd8efaff7ec54 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 3 Oct 2024 12:01:30 +0200
Subject: [PATCH 082/272] Parse and show grid area name for repeats in the
 inspector (#6456)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Problem:**

Area names are not correctly supported in the inspector for `repeat`
dimensions.

**Fix:**

Parse correctly area names for `repeat` entries, and show them in the
inspector. Also, use the indexes (e.g. `1 → 3`) as a title for those
labels.

Fixes #6455
---
 .../strategies/grid-helpers.ts                |  8 +-
 .../store/store-deep-equality-instances.ts    |  4 +-
 .../inspector/common/css-utils.spec.ts        | 94 ++++++++++++-------
 .../components/inspector/common/css-utils.ts  | 34 +++++--
 .../src/components/inspector/flex-section.tsx | 18 +++-
 5 files changed, 105 insertions(+), 53 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index aa54f900d266..a2fb1f7c525e 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -653,9 +653,13 @@ function alterGridTemplateDimensions(params: {
           if (before.length + after.length === 0) {
             return null
           }
-          return gridCSSRepeat(dim.times, [...before, ...after])
+          return gridCSSRepeat(dim.times, [...before, ...after], dim.areaName)
         case 'REPLACE':
-          return gridCSSRepeat(dim.times, [...before, params.patch.newValue, ...after])
+          return gridCSSRepeat(
+            dim.times,
+            [...before, params.patch.newValue, ...after],
+            dim.areaName,
+          )
         default:
           assertNever(params.patch)
       }
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 9bf286061a5c..c988b328bcfb 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -2023,11 +2023,13 @@ export const GridDimensionKeepDeepEquality: KeepDeepEqualityCall<GridDimension>
   )
 
 export const GridCSSRepeatKeepDeepEquality: KeepDeepEqualityCall<GridCSSRepeat> =
-  combine2EqualityCalls(
+  combine3EqualityCalls(
     (p) => p.times,
     createCallWithTripleEquals(),
     (p) => p.value,
     arrayDeepEquality(GridDimensionKeepDeepEquality),
+    (p) => p.areaName,
+    NullableStringKeepDeepEquality,
     gridCSSRepeat,
   )
 
diff --git a/editor/src/components/inspector/common/css-utils.spec.ts b/editor/src/components/inspector/common/css-utils.spec.ts
index a534399c8552..60e85271648f 100644
--- a/editor/src/components/inspector/common/css-utils.spec.ts
+++ b/editor/src/components/inspector/common/css-utils.spec.ts
@@ -1827,33 +1827,45 @@ describe('stringifyGridDimension', () => {
   it('repeat', async () => {
     expect(
       stringifyGridDimension(
-        gridCSSRepeat(3, [
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('min-content'), null),
-          gridCSSNumber(cssNumber(123, 'px'), null),
-        ]),
+        gridCSSRepeat(
+          3,
+          [
+            gridCSSKeyword(cssKeyword('auto'), null),
+            gridCSSKeyword(cssKeyword('min-content'), null),
+            gridCSSNumber(cssNumber(123, 'px'), null),
+          ],
+          null,
+        ),
       ),
     ).toBe(`repeat(3, auto min-content 123px)`)
 
     expect(
       stringifyGridDimension(
-        gridCSSRepeat(3, [
-          gridCSSKeyword(cssKeyword('auto'), 'foo'),
-          gridCSSKeyword(cssKeyword('min-content'), 'bar'),
-          gridCSSNumber(cssNumber(123, 'px'), null),
-        ]),
+        gridCSSRepeat(
+          3,
+          [
+            gridCSSKeyword(cssKeyword('auto'), 'foo'),
+            gridCSSKeyword(cssKeyword('min-content'), 'bar'),
+            gridCSSNumber(cssNumber(123, 'px'), null),
+          ],
+          'the-area',
+        ),
       ),
     ).toBe(`repeat(3, [foo] auto [bar] min-content 123px)`)
 
     expect(
       stringifyGridDimension(
-        gridCSSRepeat(cssKeyword('auto-fit'), [
-          gridCSSMinmax(
-            gridCSSNumber(cssNumber(400, 'px'), null),
-            gridCSSNumber(cssNumber(1, 'fr'), null),
-            null,
-          ),
-        ]),
+        gridCSSRepeat(
+          cssKeyword('auto-fit'),
+          [
+            gridCSSMinmax(
+              gridCSSNumber(cssNumber(400, 'px'), null),
+              gridCSSNumber(cssNumber(1, 'fr'), null),
+              null,
+            ),
+          ],
+          null,
+        ),
       ),
     ).toBe(`repeat(auto-fit, minmax(400px, 1fr))`)
   })
@@ -1898,33 +1910,45 @@ describe('printGridDimensionCSS', () => {
   it('repeat', async () => {
     expect(
       printGridDimensionCSS(
-        gridCSSRepeat(3, [
-          gridCSSKeyword(cssKeyword('auto'), null),
-          gridCSSKeyword(cssKeyword('min-content'), null),
-          gridCSSNumber(cssNumber(123, 'px'), null),
-        ]),
+        gridCSSRepeat(
+          3,
+          [
+            gridCSSKeyword(cssKeyword('auto'), null),
+            gridCSSKeyword(cssKeyword('min-content'), null),
+            gridCSSNumber(cssNumber(123, 'px'), null),
+          ],
+          null,
+        ),
       ),
     ).toBe(`repeat(3, auto min-content 123px)`)
 
     expect(
       printGridDimensionCSS(
-        gridCSSRepeat(3, [
-          gridCSSKeyword(cssKeyword('auto'), 'foo'),
-          gridCSSKeyword(cssKeyword('min-content'), 'bar'),
-          gridCSSNumber(cssNumber(123, 'px'), null),
-        ]),
+        gridCSSRepeat(
+          3,
+          [
+            gridCSSKeyword(cssKeyword('auto'), 'foo'),
+            gridCSSKeyword(cssKeyword('min-content'), 'bar'),
+            gridCSSNumber(cssNumber(123, 'px'), null),
+          ],
+          'the-area',
+        ),
       ),
-    ).toBe(`repeat(3, [foo] auto [bar] min-content 123px)`)
+    ).toBe(`[the-area] repeat(3, [foo] auto [bar] min-content 123px)`)
 
     expect(
       printGridDimensionCSS(
-        gridCSSRepeat(cssKeyword('auto-fit'), [
-          gridCSSMinmax(
-            gridCSSNumber(cssNumber(400, 'px'), null),
-            gridCSSNumber(cssNumber(1, 'fr'), null),
-            null,
-          ),
-        ]),
+        gridCSSRepeat(
+          cssKeyword('auto-fit'),
+          [
+            gridCSSMinmax(
+              gridCSSNumber(cssNumber(400, 'px'), null),
+              gridCSSNumber(cssNumber(1, 'fr'), null),
+              null,
+            ),
+          ],
+          null,
+        ),
       ),
     ).toBe(`repeat(auto-fit, minmax(400px, 1fr))`)
   })
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index f7a0c80a2064..b2c28db037f9 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -598,14 +598,17 @@ export type GridCSSKeyword = BaseGridDimension & {
 type BaseGridCSSRepeat = {
   type: 'REPEAT'
   value: Array<GridDimension>
-  areaName: null
+  areaName: string | null
 }
 
-function baseGridCSSRepeat(value: Array<GridDimension>): BaseGridCSSRepeat {
+function baseGridCSSRepeat(
+  value: Array<GridDimension>,
+  areaName: string | null,
+): BaseGridCSSRepeat {
   return {
     type: 'REPEAT',
     value: value,
-    areaName: null,
+    areaName: areaName,
   }
 }
 
@@ -613,9 +616,13 @@ type GridCSSRepeatStatic = BaseGridCSSRepeat & {
   times: number
 }
 
-function gridCSSRepeatStatic(times: number, value: Array<GridDimension>): GridCSSRepeatStatic {
+function gridCSSRepeatStatic(
+  times: number,
+  value: Array<GridDimension>,
+  areaName: string | null,
+): GridCSSRepeatStatic {
   return {
-    ...baseGridCSSRepeat(value),
+    ...baseGridCSSRepeat(value, areaName),
     times: times,
   }
 }
@@ -627,9 +634,10 @@ type GridCSSRepeatDynamic = BaseGridCSSRepeat & {
 function gridCSSRepeatDynamic(
   times: CSSKeyword<'auto-fill' | 'auto-fit'>,
   value: Array<GridDimension>,
+  areaName: string | null,
 ): GridCSSRepeatDynamic {
   return {
-    ...baseGridCSSRepeat(value),
+    ...baseGridCSSRepeat(value, areaName),
     times: times,
   }
 }
@@ -682,11 +690,15 @@ export function gridCSSKeyword(
   }
 }
 
-export function gridCSSRepeat(times: GridCSSRepeatTimes, value: GridDimension[]): GridCSSRepeat {
+export function gridCSSRepeat(
+  times: GridCSSRepeatTimes,
+  value: GridDimension[],
+  areaName: string | null,
+): GridCSSRepeat {
   if (typeof times === 'number') {
-    return gridCSSRepeatStatic(times, value)
+    return gridCSSRepeatStatic(times, value, areaName)
   } else {
-    return gridCSSRepeatDynamic(times, value)
+    return gridCSSRepeatDynamic(times, value, areaName)
   }
 }
 
@@ -1230,6 +1242,8 @@ export function parseGridChildren(
               return left('Invalid grid CSS repeat times.')
             }
 
+            const areaName = getAreaName()
+
             const values = new csstree.List<csstree.CssNode>().fromArray(
               otherChildren.filter(
                 (c) =>
@@ -1241,7 +1255,7 @@ export function parseGridChildren(
             )
             const parsedDimensions = parseGridChildren(values)
             if (isRight(parsedDimensions)) {
-              dimensions.push(gridCSSRepeat(times, parsedDimensions.value))
+              dimensions.push(gridCSSRepeat(times, parsedDimensions.value, areaName))
             } else {
               return left('Invalid grid CSS repeat values.')
             }
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 80473de131fa..6eed0980a59a 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -542,12 +542,20 @@ function AxisDimensionControl({
     setIsOpen(isDropdownOpen)
   }, [])
 
+  const isDynamic = React.useMemo(() => {
+    return indexFrom !== indexTo
+  }, [indexFrom, indexTo])
+
+  const dynamicIndexTitle = React.useMemo(() => {
+    return `${indexFrom} → ${indexTo}`
+  }, [indexFrom, indexTo])
+
   const title = React.useMemo(() => {
-    if (indexFrom === indexTo) {
-      return value.areaName ?? indexFrom
+    if (isDynamic) {
+      return value.areaName ?? dynamicIndexTitle
     }
-    return value.areaName ?? `${indexFrom} → ${indexTo}`
-  }, [value, indexFrom, indexTo])
+    return value.areaName ?? indexFrom
+  }, [value, indexFrom, isDynamic, dynamicIndexTitle])
 
   const gridExpressionInputFocused = useGridExpressionInputFocused()
 
@@ -574,7 +582,7 @@ function AxisDimensionControl({
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
           }}
-          title={value.areaName ?? undefined}
+          title={isDynamic ? dynamicIndexTitle : undefined}
         >
           {title}
         </Subdued>

From 0a538b79a05035c16559c523c84952272490ecfb Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Thu, 3 Oct 2024 12:14:08 +0200
Subject: [PATCH 083/272] Better grid resize element strategy (#6457)

**Problem:**
The original grid-resize-element strategy was written in a way, that it
resized based on the data that which cell is currently under the mouse.
This made it impossible to resize with the mouse e.g. going in between
cells over the gap, or outside of the grid.

**Fix:**
Let's rely on the resize bounding box coming from
`resizeBoundingBoxFromSide`, and we can resize to those cells which have
an intersection with the resize bounding box.

As an extra, I refactored the `getMetadataWithGridCellBounds` function,
so that it returns the updated custom strategy state, and the strategies
don't have to construct that (this strategy state update guarantees that
if the grid cell bounds were only found in the latestmetadata, then we
store them in the custom strategy state, so they are kept until the end
of the interaction). For the note, some grid strategies add further
changes to the strategy state, after the subsequent strategy refactors
these will be removed.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../grid-draw-to-insert-strategy.tsx          |  50 ++----
 .../strategies/grid-helpers.ts                |  21 ++-
 .../strategies/grid-reparent-strategy.tsx     |  42 ++---
 ...-resize-element-strategy.spec.browser2.tsx |  77 +++++++-
 .../grid-resize-element-strategy.ts           | 169 ++++++++----------
 .../canvas/controls/grid-controls.tsx         |   3 +-
 6 files changed, 201 insertions(+), 161 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index 1e1ed0429722..09d94e3d42d0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -132,12 +132,13 @@ const gridDrawToInsertStrategyInner =
       canvasState.propertyControlsInfo,
     )?.newParent.intendedParentPath
 
-    const { metadata: parent, foundIn } = getMetadataWithGridCellBounds(
-      targetParent,
-      canvasState.startingMetadata,
-      interactionSession.latestMetadata,
-      customStrategyState,
-    )
+    const { metadata: parent, customStrategyState: updatedCustomState } =
+      getMetadataWithGridCellBounds(
+        targetParent,
+        canvasState.startingMetadata,
+        interactionSession.latestMetadata,
+        customStrategyState,
+      )
 
     if (targetParent == null || parent == null || !MetadataUtils.isGridLayoutedContainer(parent)) {
       return null
@@ -160,32 +161,17 @@ const gridDrawToInsertStrategyInner =
         const newTargetCell = getGridCellUnderMouseFromMetadata(parent, canvasPointToUse)
 
         if (strategyLifecycle === 'mid-interaction' && interactionData.type === 'HOVER') {
-          const customStatePatch =
-            foundIn === 'latestMetadata'
-              ? {
-                  ...customStrategyState,
-                  grid: {
-                    ...customStrategyState.grid,
-                    // this is added here during the hover interaction so that
-                    // `GridControls` can render the hover highlight based on the
-                    // coordinates in `targetCellData`
-                    targetCellData: newTargetCell ?? customStrategyState.grid.targetCellData,
-                    metadataCacheForGrids: {
-                      ...customStrategyState.grid.metadataCacheForGrids,
-                      [EP.toString(targetParent)]: parent,
-                    },
-                  },
-                }
-              : {
-                  ...customStrategyState,
-                  grid: {
-                    ...customStrategyState.grid,
-                    // this is added here during the hover interaction so that
-                    // `GridControls` can render the hover highlight based on the
-                    // coordinates in `targetCellData`
-                    targetCellData: newTargetCell ?? customStrategyState.grid.targetCellData,
-                  },
-                }
+          const baseCustomState = updatedCustomState ?? customStrategyState
+          const customStatePatch = {
+            ...baseCustomState,
+            grid: {
+              ...baseCustomState.grid,
+              // this is added here during the hover interaction so that
+              // `GridControls` can render the hover highlight based on the
+              // coordinates in `targetCellData`
+              targetCellData: newTargetCell ?? customStrategyState.grid.targetCellData,
+            },
+          }
           return strategyApplicationResult(
             [
               wildcardPatch('mid-interaction', {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index a2fb1f7c525e..f5e59e79df05 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -774,12 +774,12 @@ export function getMetadataWithGridCellBounds(
   customStrategyState: CustomStrategyState,
 ): {
   metadata: ElementInstanceMetadata | null
-  foundIn: 'startingMetadata' | 'latestMetadata' | 'strategyState' | null
+  customStrategyState: CustomStrategyState | null
 } {
   if (path == null) {
     return {
       metadata: null,
-      foundIn: null,
+      customStrategyState: null,
     }
   }
 
@@ -788,7 +788,7 @@ export function getMetadataWithGridCellBounds(
   if (fromStartingMetadata?.specialSizeMeasurements.gridCellGlobalFrames != null) {
     return {
       metadata: fromStartingMetadata,
-      foundIn: 'startingMetadata',
+      customStrategyState: null,
     }
   }
 
@@ -796,7 +796,7 @@ export function getMetadataWithGridCellBounds(
   if (fromStrategyState != null) {
     return {
       metadata: fromStrategyState,
-      foundIn: 'strategyState',
+      customStrategyState: null,
     }
   }
 
@@ -804,12 +804,21 @@ export function getMetadataWithGridCellBounds(
   if (fromLatestMetadata?.specialSizeMeasurements.gridCellGlobalFrames != null) {
     return {
       metadata: fromLatestMetadata,
-      foundIn: 'latestMetadata',
+      customStrategyState: {
+        ...customStrategyState,
+        grid: {
+          ...customStrategyState.grid,
+          metadataCacheForGrids: {
+            ...customStrategyState.grid.metadataCacheForGrids,
+            [EP.toString(path)]: fromLatestMetadata,
+          },
+        },
+      },
     }
   }
 
   return {
     metadata: fromStartingMetadata,
-    foundIn: 'startingMetadata',
+    customStrategyState: null,
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index f2829f667c44..edb811c545cd 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -165,12 +165,13 @@ export function applyGridReparent(
           return emptyStrategyApplicationResult
         }
 
-        const { metadata: grid, foundIn } = getMetadataWithGridCellBounds(
-          newParent.intendedParentPath,
-          canvasState.startingMetadata,
-          interactionSession.latestMetadata,
-          customStrategyState,
-        )
+        const { metadata: grid, customStrategyState: updatedCustomState } =
+          getMetadataWithGridCellBounds(
+            newParent.intendedParentPath,
+            canvasState.startingMetadata,
+            interactionSession.latestMetadata,
+            customStrategyState,
+          )
 
         if (grid == null) {
           return emptyStrategyApplicationResult
@@ -241,26 +242,15 @@ export function applyGridReparent(
           ...selectedElements.map(EP.parentPath),
         ])
 
-        const customStrategyStatePatch =
-          foundIn === 'latestMetadata'
-            ? {
-                elementsToRerender: elementsToRerender,
-                grid: {
-                  ...customStrategyState.grid,
-                  targetCellData: targetCellData,
-                  metadataCacheForGrids: {
-                    ...customStrategyState.grid.metadataCacheForGrids,
-                    [EP.toString(newParent.intendedParentPath)]: grid,
-                  },
-                },
-              }
-            : {
-                elementsToRerender: elementsToRerender,
-                grid: {
-                  ...customStrategyState.grid,
-                  targetCellData: targetCellData,
-                },
-              }
+        const baseCustomState = updatedCustomState ?? customStrategyState
+        const customStrategyStatePatch = {
+          ...baseCustomState,
+          elementsToRerender: elementsToRerender,
+          grid: {
+            ...baseCustomState.grid,
+            targetCellData: targetCellData,
+          },
+        }
 
         return strategyApplicationResult(
           [
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 67897cb9e309..65adf3de537c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -7,7 +7,13 @@ import type {
 } from 'utopia-shared/src/types'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
-import { getRectCenter, localRectangle } from '../../../../core/shared/math-utils'
+import {
+  getRectCenter,
+  localPoint,
+  type LocalPoint,
+  localRectangle,
+  offsetPoint,
+} from '../../../../core/shared/math-utils'
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 import { GridResizeEdgeTestId } from '../../controls/grid-controls'
 import { mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
@@ -47,6 +53,34 @@ async function runCellResizeTest(
   )
 }
 
+async function runCellResizeTestWithDragVector(
+  editor: EditorRenderResult,
+  edge: GridResizeEdge,
+  dragVector: LocalPoint,
+  elementPathToDrag: ElementPath = EP.fromString('sb/scene/grid/ddd'),
+) {
+  await selectComponentsForTest(editor, [elementPathToDrag])
+
+  const resizeControl = editor.renderedDOM.getByTestId(GridResizeEdgeTestId(edge))
+
+  const resizeControlCenter = getRectCenter(
+    localRectangle({
+      x: resizeControl.getBoundingClientRect().x,
+      y: resizeControl.getBoundingClientRect().y,
+      width: resizeControl.getBoundingClientRect().width,
+      height: resizeControl.getBoundingClientRect().height,
+    }),
+  )
+  await mouseDragFromPointToPoint(
+    resizeControl,
+    resizeControlCenter,
+    offsetPoint(resizeControlCenter, dragVector),
+    {
+      moveBeforeMouseDown: true,
+    },
+  )
+}
+
 describe('grid resize element strategy', () => {
   it('cannot resize non-filling cells', async () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
@@ -215,6 +249,47 @@ describe('grid resize element strategy', () => {
     })
   })
 
+  it('can resize element with mouse move outside of grid cells', async () => {
+    const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+    await runCellResizeTest(
+      editor,
+      'column-end',
+      gridCellTargetId(EP.fromString('sb/scene/grid'), 1, 8),
+    )
+
+    {
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+        editor.renderedDOM.getByTestId('grid-child').style
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '9',
+        gridColumnStart: '7',
+        gridRowEnd: 'auto',
+        gridRowStart: '2',
+      })
+    }
+
+    {
+      // moving a 2 cell wide element in the middle, over the gap between 2 cells
+      await runCellResizeTestWithDragVector(
+        editor,
+        'row-start',
+        localPoint({
+          x: 0,
+          y: -50,
+        }),
+      )
+
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+        editor.renderedDOM.getByTestId('grid-child').style
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '9',
+        gridColumnStart: '7',
+        gridRowEnd: '3',
+        gridRowStart: '1',
+      })
+    }
+  })
+
   it('removes the grid-area prop on resize', async () => {
     const editor = await renderTestEditorWithCode(ProjectCodeWithGridArea, 'await-first-dom-report')
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index c3324fbacabc..91ff1f35c18e 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -1,12 +1,18 @@
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
 import type { GridElementProperties, GridPosition } from '../../../../core/shared/element-template'
-import { offsetPoint } from '../../../../core/shared/math-utils'
-import { assertNever } from '../../../../core/shared/utils'
+import {
+  type CanvasRectangle,
+  isInfinityRectangle,
+  rectangleIntersection,
+} from '../../../../core/shared/math-utils'
 import { isCSSKeyword } from '../../../inspector/common/css-utils'
 import { isFixedHugFillModeApplied } from '../../../inspector/inspector-common'
-import { controlsForGridPlaceholders, GridResizeControls } from '../../controls/grid-controls'
-import { canvasRectangleToWindowRectangle } from '../../dom-lookup'
+import {
+  controlsForGridPlaceholders,
+  gridEdgeToEdgePosition,
+  GridResizeControls,
+} from '../../controls/grid-controls'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { InteractionCanvasState } from '../canvas-strategy-types'
@@ -16,8 +22,8 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { getGridCellUnderMouseFromMetadata } from './grid-cell-bounds'
-import { setGridPropsCommands } from './grid-helpers'
+import { getMetadataWithGridCellBounds, setGridPropsCommands } from './grid-helpers'
+import { resizeBoundingBoxFromSide } from './resize-helpers'
 
 export const gridResizeElementStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -38,6 +44,14 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
     return null
   }
 
+  const selectedElementBounds = MetadataUtils.getFrameInCanvasCoords(
+    selectedElement,
+    canvasState.startingMetadata,
+  )
+  if (selectedElementBounds == null || isInfinityRectangle(selectedElementBounds)) {
+    return null
+  }
+
   const isFillOrStretchContainer =
     isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'fill') ||
     isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'stretch')
@@ -75,116 +89,83 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
-      const container = MetadataUtils.findElementByElementPath(
-        canvasState.startingMetadata,
-        EP.parentPath(selectedElement),
-      )
+      const { metadata: container, customStrategyState: updatedCustomState } =
+        getMetadataWithGridCellBounds(
+          EP.parentPath(selectedElement),
+          canvasState.startingMetadata,
+          interactionSession.latestMetadata,
+          customState,
+        )
+
       if (container == null) {
         return emptyStrategyApplicationResult
       }
 
-      const mouseCanvasPoint = offsetPoint(
-        interactionSession.interactionData.dragStart,
+      const allCellBounds = container.specialSizeMeasurements.gridCellGlobalFrames
+
+      if (allCellBounds == null) {
+        return emptyStrategyApplicationResult
+      }
+
+      const resizeBoundingBox = resizeBoundingBoxFromSide(
+        selectedElementBounds,
         interactionSession.interactionData.drag,
+        gridEdgeToEdgePosition(interactionSession.activeControl.edge),
+        'non-center-based',
+        null,
       )
 
-      const cellUnderMouse = getGridCellUnderMouseFromMetadata(container, mouseCanvasPoint)
-      const targetCell = cellUnderMouse == null ? customState.grid.targetCellData : cellUnderMouse
+      const gridProps = getNewGridPropsFromResizeBox(resizeBoundingBox, allCellBounds)
 
-      if (targetCell == null) {
+      if (gridProps == null) {
         return emptyStrategyApplicationResult
       }
 
       const gridTemplate = container.specialSizeMeasurements.containerGridProperties
 
-      let gridProps: GridElementProperties = MetadataUtils.findElementByElementPath(
-        canvasState.startingMetadata,
-        selectedElement,
-      )?.specialSizeMeasurements.elementGridProperties ?? {
-        gridColumnEnd: { numericalPosition: 0 },
-        gridColumnStart: { numericalPosition: 0 },
-        gridRowEnd: { numericalPosition: 0 },
-        gridRowStart: { numericalPosition: 0 },
-      }
-
-      switch (interactionSession.activeControl.edge) {
-        case 'column-start':
-          gridProps = {
-            ...gridProps,
-            gridColumnStart: { numericalPosition: targetCell.gridCellCoordinates.column },
-          }
-          break
-        case 'column-end':
-          gridProps = {
-            ...gridProps,
-            gridColumnEnd: { numericalPosition: targetCell.gridCellCoordinates.column + 1 },
-          }
-          break
-        case 'row-end':
-          gridProps = {
-            ...gridProps,
-            gridRowEnd: { numericalPosition: targetCell.gridCellCoordinates.row + 1 },
-          }
-          break
-        case 'row-start':
-          gridProps = {
-            ...gridProps,
-            gridRowStart: { numericalPosition: targetCell.gridCellCoordinates.row },
-          }
-          break
-        default:
-          assertNever(interactionSession.activeControl.edge)
-      }
-
       return strategyApplicationResult(
-        setGridPropsCommands(selectedElement, gridTemplate, gridPropsWithDragOver(gridProps)),
+        setGridPropsCommands(selectedElement, gridTemplate, gridProps),
         [parentGridPath],
-        {
-          grid: { ...customState.grid, targetCellData: targetCell },
-        },
+        updatedCustomState ?? undefined,
       )
     },
   }
 }
 
-function orderedGridPositions({
-  start,
-  end,
-}: {
-  start: GridPosition | null
-  end: GridPosition | null
-}): {
-  start: GridPosition | null
-  end: GridPosition | null
-} {
+function getNewGridPropsFromResizeBox(
+  resizeBoundingBox: CanvasRectangle,
+  allCellBounds: CanvasRectangle[][],
+) {
+  let newRowStart = Infinity
+  let newRowEnd = -Infinity
+  let newColumnStart = Infinity
+  let newColumnEnd = -Infinity
+
+  // those cells should be occupied by the element which has an intersection with the resize box
+  for (let rowIdx = 0; rowIdx < allCellBounds.length; rowIdx++) {
+    for (let colIdx = 0; colIdx < allCellBounds[rowIdx].length; colIdx++) {
+      if (rectangleIntersection(resizeBoundingBox, allCellBounds[rowIdx][colIdx]) != null) {
+        newRowStart = Math.min(newRowStart, rowIdx + 1)
+        newColumnStart = Math.min(newColumnStart, colIdx + 1)
+        newRowEnd = Math.max(newRowEnd, rowIdx + 2)
+        newColumnEnd = Math.max(newColumnEnd, colIdx + 2)
+      }
+    }
+  }
+
   if (
-    start == null ||
-    isCSSKeyword(start) ||
-    start.numericalPosition == null ||
-    end == null ||
-    isCSSKeyword(end) ||
-    end.numericalPosition == null
+    !isFinite(newRowStart) ||
+    !isFinite(newColumnStart) ||
+    !isFinite(newRowEnd) ||
+    !isFinite(newColumnEnd)
   ) {
-    return { start, end }
+    return null
   }
 
-  return start.numericalPosition < end.numericalPosition
-    ? { start, end }
-    : {
-        start: { numericalPosition: end.numericalPosition - 1 },
-        end: { numericalPosition: start.numericalPosition + 1 },
-      }
-}
-
-function gridPropsWithDragOver(props: GridElementProperties): GridElementProperties {
-  const { start: gridColumnStart, end: gridColumnEnd } = orderedGridPositions({
-    start: props.gridColumnStart,
-    end: props.gridColumnEnd,
-  })
-  const { start: gridRowStart, end: gridRowEnd } = orderedGridPositions({
-    start: props.gridRowStart,
-    end: props.gridRowEnd,
-  })
-
-  return { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }
+  return {
+    gridRowStart: { numericalPosition: newRowStart },
+    gridRowEnd: { numericalPosition: newRowEnd },
+    gridColumnStart: { numericalPosition: newColumnStart },
+    gridColumnEnd: { numericalPosition: newColumnEnd },
+  }
 }
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 6c9958557dd7..8108479d5ce4 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -1632,7 +1632,6 @@ export const GridResizeControls = controlForStrategyMemoized<GridResizeControlPr
       if (startingBounds == null) {
         return
       }
-
       setBounds(
         resizeBoundingBoxFromSide(
           startingBounds,
@@ -1784,7 +1783,7 @@ const GRID_RESIZE_HANDLE_SIZES = {
   short: 4,
 }
 
-function gridEdgeToEdgePosition(edge: GridResizeEdge): EdgePosition {
+export function gridEdgeToEdgePosition(edge: GridResizeEdge): EdgePosition {
   switch (edge) {
     case 'column-end':
       return EdgePositionRight

From a7b2de1c89b9d5bfdc128ed56e2589eb47268ddf Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Thu, 3 Oct 2024 14:33:01 +0100
Subject: [PATCH 084/272] Revert "Combined mouse up handling " (#6463)

Reverts concrete-utopia/utopia#6416
---
 ...grid-reparent-strategies.spec.browser2.tsx | 68 ++++---------------
 .../select-mode/select-mode-hooks.tsx         |  8 +--
 editor/src/templates/editor-canvas.tsx        |  9 ++-
 editor/src/templates/global-handlers.tsx      | 21 ------
 4 files changed, 22 insertions(+), 84 deletions(-)
 delete mode 100644 editor/src/templates/global-handlers.tsx

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
index fe76a4578c6d..909950889d42 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
@@ -299,7 +299,7 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
+      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -311,8 +311,8 @@ describe('grid reparent strategies', () => {
             width: 79,
             height: 86,
             position: 'absolute',
-            top: 934,
-            left: 1627,
+            top: 391,
+            left: 492,
           }}
           data-uid='dragme'
           data-testid='dragme'
@@ -367,7 +367,6 @@ describe('grid reparent strategies', () => {
             height: 86,
           }}
           data-uid='bar'
-          data-testid='bar'
         />
         <div
           style={{
@@ -385,14 +384,7 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      const barElement = editor.renderedDOM.getByTestId('bar')
-      const barRect = barElement.getBoundingClientRect()
-      const endPoint = {
-        x: barRect.x - 10,
-        y: barRect.y + barRect.height / 2,
-      }
-
-      await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint)
+      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2600, y: 1600 })
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -435,7 +427,6 @@ describe('grid reparent strategies', () => {
               height: 86,
             }}
             data-uid='bar'
-            data-testid='bar'
           />
           <div
             style={{
@@ -486,7 +477,6 @@ describe('grid reparent strategies', () => {
             height: 86,
           }}
           data-uid='foo'
-          data-testid='foo'
         />
         <div
           style={{
@@ -512,14 +502,7 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      const fooElement = editor.renderedDOM.getByTestId('foo')
-      const fooRect = fooElement.getBoundingClientRect()
-      const endPoint = {
-        x: fooRect.x + fooRect.width / 2,
-        y: fooRect.y + fooRect.height / 2,
-      }
-
-      await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint)
+      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2200, y: 1800 })
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -543,7 +526,6 @@ describe('grid reparent strategies', () => {
               height: 86,
             }}
             data-uid='foo'
-            data-testid='foo'
           >
             <div
               style={{
@@ -619,7 +601,6 @@ describe('grid reparent strategies', () => {
             gridColumn: 1,
           }}
           data-uid='foo'
-          data-testid='foo'
         />
         <div
           style={{
@@ -630,7 +611,6 @@ describe('grid reparent strategies', () => {
             gridColumn: 3,
           }}
           data-uid='bar'
-          data-testid='bar'
         />
         <div
           style={{
@@ -687,7 +667,6 @@ describe('grid reparent strategies', () => {
               gridColumn: 1,
             }}
             data-uid='foo'
-            data-testid='foo'
           />
           <div
             style={{
@@ -698,7 +677,6 @@ describe('grid reparent strategies', () => {
               gridColumn: 3,
             }}
             data-uid='bar'
-            data-testid='bar'
           />
           <div
             style={{
@@ -747,7 +725,7 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
+      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -757,8 +735,8 @@ describe('grid reparent strategies', () => {
           style={{
             backgroundColor: '#f0f',
             position: 'absolute',
-            top: 934,
-            left: 1627,
+            top: 391,
+            left: 492,
             width: 86.5,
             height: 135,
           }}
@@ -826,9 +804,13 @@ async function dragElement(
 
 async function dragOut(
   renderResult: EditorRenderResult,
+  gridTestId: string,
   cell: ElementPath,
   endPoint: Point,
-): Promise<void> {
+) {
+  const grid = renderResult.renderedDOM.getByTestId(gridTestId)
+  const gridRect = grid.getBoundingClientRect()
+
   const sourceGridCell = renderResult.renderedDOM.getByTestId(GridCellTestId(cell))
   const sourceRect = sourceGridCell.getBoundingClientRect()
 
@@ -837,30 +819,10 @@ async function dragOut(
     { x: sourceRect.x + 5, y: sourceRect.y + 5 },
     { modifiers: cmdModifier },
   )
-
-  await mouseDownAtPoint(
-    sourceGridCell,
-    { x: sourceRect.x + 5, y: sourceRect.y + 5 },
-    {
-      modifiers: cmdModifier,
-    },
-  )
-
-  const delta: Point = {
-    x: endPoint.x - sourceRect.x + 5,
-    y: endPoint.y - sourceRect.y + 5,
-  }
-  await mouseMoveToPoint(sourceGridCell, endPoint, {
-    eventOptions: {
-      movementX: delta.x,
-      movementY: delta.y,
-      buttons: 1,
-    },
-    modifiers: cmdModifier,
-  })
-  await mouseUpAtPoint(renderResult.renderedDOM.getByTestId(CanvasControlsContainerID), endPoint, {
+  await mouseDragFromPointToPoint(sourceGridCell, sourceRect, endPoint, {
     modifiers: cmdModifier,
   })
+  await mouseUpAtPoint(grid, gridRect, { modifiers: cmdModifier })
 }
 
 async function dragOutToAnotherGrid(
diff --git a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
index 8437f1734d66..48b74f4fb8ae 100644
--- a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
+++ b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
@@ -60,7 +60,6 @@ import { getAllLockedElementPaths } from '../../../../core/shared/element-lockin
 import { treatElementAsGroupLike } from '../../canvas-strategies/strategies/group-helpers'
 import { useCommentModeSelectAndHover } from '../comment-mode/comment-mode-hooks'
 import { useFollowModeSelectAndHover } from '../follow-mode/follow-mode-hooks'
-import { handleGlobalMouseUp } from '../../../../templates/global-handlers'
 import { wait } from '../../../../core/model/performance-scripts'
 import { IS_TEST_ENVIRONMENT } from '../../../../common/env-vars'
 import { isFeatureEnabled } from '../../../../utils/feature-switches'
@@ -668,14 +667,10 @@ function useSelectOrLiveModeSelectAndHover(
         (!hadInteractionSessionThatWasCancelled || !draggedOverThreshold.current) &&
         (activeControl == null || activeControl.type === 'BOUNDING_AREA')
 
-      let editorActions: Array<EditorAction> = []
-
       if (event.type === 'mousedown') {
         didWeHandleMouseDown.current = true
       }
       if (event.type === 'mouseup') {
-        const handleMouseUpActions = handleGlobalMouseUp(event.nativeEvent)
-        editorActions.push(...handleMouseUpActions)
         // Clear the interaction session tracking flag
         interactionSessionHappened.current = false
         // didWeHandleMouseDown is used to avoid selecting when closing text editing
@@ -683,7 +678,6 @@ function useSelectOrLiveModeSelectAndHover(
         draggedOverThreshold.current = false
 
         if (!mouseUpSelectionAllowed) {
-          dispatch(editorActions)
           // We should skip this mouseup
           return
         }
@@ -695,7 +689,6 @@ function useSelectOrLiveModeSelectAndHover(
         !active ||
         !(isLeftClick || isRightClick)
       ) {
-        dispatch(editorActions)
         // Skip all of this handling if 'space' is pressed or a mousemove happened in an interaction, or the hook is not active
         return
       }
@@ -716,6 +709,7 @@ function useSelectOrLiveModeSelectAndHover(
 
       const isMultiselect = event.shiftKey
       const isDeselect = foundTarget == null && !isMultiselect
+      let editorActions: Array<EditorAction> = []
 
       if (foundTarget != null || isDeselect) {
         if (
diff --git a/editor/src/templates/editor-canvas.tsx b/editor/src/templates/editor-canvas.tsx
index 6ad444843b3c..ccfe75e5a815 100644
--- a/editor/src/templates/editor-canvas.tsx
+++ b/editor/src/templates/editor-canvas.tsx
@@ -106,7 +106,6 @@ import { getCanvasViewportCenter } from './paste-helpers'
 import { DataPasteHandler, isPasteHandler } from '../utils/paste-handler'
 import { ResizeObserver } from '../components/canvas/dom-walker'
 import { isInsideColorPicker } from '../components/inspector/controls/color-picker-utils'
-import { addMouseUpHandler, removeMouseUpHandler } from './global-handlers'
 
 const webFrame = PROBABLY_ELECTRON ? requireElectron().webFrame : null
 
@@ -1373,10 +1372,14 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
     }
   }
 
+  handleWindowMouseUp = (event: any) => {
+    this.props.dispatch(this.handleMouseUp(event))
+  }
+
   setupWindowListeners() {
     window.addEventListener('mousemove', this.handleMouseMove, { capture: true }) // we use this event in the capture phase because size-box.ts calls stopPropagation() on mouseMove
     window.addEventListener('mouseleave', this.handleMouseLeave)
-    addMouseUpHandler(this.handleMouseUp)
+    window.addEventListener('mouseup', this.handleWindowMouseUp, { capture: true })
     window.addEventListener('click', this.handleClick)
     window.addEventListener('dblclick', this.handleDoubleClick)
     ;(window as any).addEventListener('paste', this.handlePaste)
@@ -1385,7 +1388,7 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
   removeEventListeners() {
     window.removeEventListener('mousemove', this.handleMouseMove, { capture: true })
     window.removeEventListener('mouseleave', this.handleMouseLeave)
-    removeMouseUpHandler(this.handleMouseUp)
+    window.removeEventListener('mouseup', this.handleWindowMouseUp, { capture: true })
     window.removeEventListener('click', this.handleClick)
     window.removeEventListener('dblclick', this.handleDoubleClick)
     ;(window as any).removeEventListener('paste', this.handlePaste)
diff --git a/editor/src/templates/global-handlers.tsx b/editor/src/templates/global-handlers.tsx
deleted file mode 100644
index cd0fc4443074..000000000000
--- a/editor/src/templates/global-handlers.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { EditorAction } from '../components/editor/action-types'
-
-export type MouseHandler = (event: MouseEvent) => Array<EditorAction>
-
-let mouseUpHandlers: Array<MouseHandler> = []
-
-export function addMouseUpHandler(handler: MouseHandler): void {
-  mouseUpHandlers.push(handler)
-}
-
-export function removeMouseUpHandler(handler: MouseHandler): void {
-  mouseUpHandlers = mouseUpHandlers.filter((mouseUpHandler) => mouseUpHandler !== handler)
-}
-
-export function handleGlobalMouseUp(event: MouseEvent): Array<EditorAction> {
-  let result: Array<EditorAction> = []
-  for (const handler of mouseUpHandlers) {
-    result.push(...handler(event))
-  }
-  return result
-}

From 0e0bd00c1f2756c6a5ef3425835519e024d8070c Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Thu, 3 Oct 2024 15:09:31 +0100
Subject: [PATCH 085/272] Revert "Revert "Combined mouse up handling "" (#6464)

Reverts concrete-utopia/utopia#6463
---
 ...grid-reparent-strategies.spec.browser2.tsx | 68 +++++++++++++++----
 .../select-mode/select-mode-hooks.tsx         |  8 ++-
 editor/src/templates/editor-canvas.tsx        |  9 +--
 editor/src/templates/global-handlers.tsx      | 21 ++++++
 4 files changed, 84 insertions(+), 22 deletions(-)
 create mode 100644 editor/src/templates/global-handlers.tsx

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
index 909950889d42..fe76a4578c6d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
@@ -299,7 +299,7 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
+      await dragOut(editor, EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -311,8 +311,8 @@ describe('grid reparent strategies', () => {
             width: 79,
             height: 86,
             position: 'absolute',
-            top: 391,
-            left: 492,
+            top: 934,
+            left: 1627,
           }}
           data-uid='dragme'
           data-testid='dragme'
@@ -367,6 +367,7 @@ describe('grid reparent strategies', () => {
             height: 86,
           }}
           data-uid='bar'
+          data-testid='bar'
         />
         <div
           style={{
@@ -384,7 +385,14 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2600, y: 1600 })
+      const barElement = editor.renderedDOM.getByTestId('bar')
+      const barRect = barElement.getBoundingClientRect()
+      const endPoint = {
+        x: barRect.x - 10,
+        y: barRect.y + barRect.height / 2,
+      }
+
+      await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint)
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -427,6 +435,7 @@ describe('grid reparent strategies', () => {
               height: 86,
             }}
             data-uid='bar'
+            data-testid='bar'
           />
           <div
             style={{
@@ -477,6 +486,7 @@ describe('grid reparent strategies', () => {
             height: 86,
           }}
           data-uid='foo'
+          data-testid='foo'
         />
         <div
           style={{
@@ -502,7 +512,14 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2200, y: 1800 })
+      const fooElement = editor.renderedDOM.getByTestId('foo')
+      const fooRect = fooElement.getBoundingClientRect()
+      const endPoint = {
+        x: fooRect.x + fooRect.width / 2,
+        y: fooRect.y + fooRect.height / 2,
+      }
+
+      await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint)
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -526,6 +543,7 @@ describe('grid reparent strategies', () => {
               height: 86,
             }}
             data-uid='foo'
+            data-testid='foo'
           >
             <div
               style={{
@@ -601,6 +619,7 @@ describe('grid reparent strategies', () => {
             gridColumn: 1,
           }}
           data-uid='foo'
+          data-testid='foo'
         />
         <div
           style={{
@@ -611,6 +630,7 @@ describe('grid reparent strategies', () => {
             gridColumn: 3,
           }}
           data-uid='bar'
+          data-testid='bar'
         />
         <div
           style={{
@@ -667,6 +687,7 @@ describe('grid reparent strategies', () => {
               gridColumn: 1,
             }}
             data-uid='foo'
+            data-testid='foo'
           />
           <div
             style={{
@@ -677,6 +698,7 @@ describe('grid reparent strategies', () => {
               gridColumn: 3,
             }}
             data-uid='bar'
+            data-testid='bar'
           />
           <div
             style={{
@@ -725,7 +747,7 @@ describe('grid reparent strategies', () => {
 
       await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, 'grid', EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
+      await dragOut(editor, EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -735,8 +757,8 @@ describe('grid reparent strategies', () => {
           style={{
             backgroundColor: '#f0f',
             position: 'absolute',
-            top: 391,
-            left: 492,
+            top: 934,
+            left: 1627,
             width: 86.5,
             height: 135,
           }}
@@ -804,13 +826,9 @@ async function dragElement(
 
 async function dragOut(
   renderResult: EditorRenderResult,
-  gridTestId: string,
   cell: ElementPath,
   endPoint: Point,
-) {
-  const grid = renderResult.renderedDOM.getByTestId(gridTestId)
-  const gridRect = grid.getBoundingClientRect()
-
+): Promise<void> {
   const sourceGridCell = renderResult.renderedDOM.getByTestId(GridCellTestId(cell))
   const sourceRect = sourceGridCell.getBoundingClientRect()
 
@@ -819,10 +837,30 @@ async function dragOut(
     { x: sourceRect.x + 5, y: sourceRect.y + 5 },
     { modifiers: cmdModifier },
   )
-  await mouseDragFromPointToPoint(sourceGridCell, sourceRect, endPoint, {
+
+  await mouseDownAtPoint(
+    sourceGridCell,
+    { x: sourceRect.x + 5, y: sourceRect.y + 5 },
+    {
+      modifiers: cmdModifier,
+    },
+  )
+
+  const delta: Point = {
+    x: endPoint.x - sourceRect.x + 5,
+    y: endPoint.y - sourceRect.y + 5,
+  }
+  await mouseMoveToPoint(sourceGridCell, endPoint, {
+    eventOptions: {
+      movementX: delta.x,
+      movementY: delta.y,
+      buttons: 1,
+    },
+    modifiers: cmdModifier,
+  })
+  await mouseUpAtPoint(renderResult.renderedDOM.getByTestId(CanvasControlsContainerID), endPoint, {
     modifiers: cmdModifier,
   })
-  await mouseUpAtPoint(grid, gridRect, { modifiers: cmdModifier })
 }
 
 async function dragOutToAnotherGrid(
diff --git a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
index 48b74f4fb8ae..8437f1734d66 100644
--- a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
+++ b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
@@ -60,6 +60,7 @@ import { getAllLockedElementPaths } from '../../../../core/shared/element-lockin
 import { treatElementAsGroupLike } from '../../canvas-strategies/strategies/group-helpers'
 import { useCommentModeSelectAndHover } from '../comment-mode/comment-mode-hooks'
 import { useFollowModeSelectAndHover } from '../follow-mode/follow-mode-hooks'
+import { handleGlobalMouseUp } from '../../../../templates/global-handlers'
 import { wait } from '../../../../core/model/performance-scripts'
 import { IS_TEST_ENVIRONMENT } from '../../../../common/env-vars'
 import { isFeatureEnabled } from '../../../../utils/feature-switches'
@@ -667,10 +668,14 @@ function useSelectOrLiveModeSelectAndHover(
         (!hadInteractionSessionThatWasCancelled || !draggedOverThreshold.current) &&
         (activeControl == null || activeControl.type === 'BOUNDING_AREA')
 
+      let editorActions: Array<EditorAction> = []
+
       if (event.type === 'mousedown') {
         didWeHandleMouseDown.current = true
       }
       if (event.type === 'mouseup') {
+        const handleMouseUpActions = handleGlobalMouseUp(event.nativeEvent)
+        editorActions.push(...handleMouseUpActions)
         // Clear the interaction session tracking flag
         interactionSessionHappened.current = false
         // didWeHandleMouseDown is used to avoid selecting when closing text editing
@@ -678,6 +683,7 @@ function useSelectOrLiveModeSelectAndHover(
         draggedOverThreshold.current = false
 
         if (!mouseUpSelectionAllowed) {
+          dispatch(editorActions)
           // We should skip this mouseup
           return
         }
@@ -689,6 +695,7 @@ function useSelectOrLiveModeSelectAndHover(
         !active ||
         !(isLeftClick || isRightClick)
       ) {
+        dispatch(editorActions)
         // Skip all of this handling if 'space' is pressed or a mousemove happened in an interaction, or the hook is not active
         return
       }
@@ -709,7 +716,6 @@ function useSelectOrLiveModeSelectAndHover(
 
       const isMultiselect = event.shiftKey
       const isDeselect = foundTarget == null && !isMultiselect
-      let editorActions: Array<EditorAction> = []
 
       if (foundTarget != null || isDeselect) {
         if (
diff --git a/editor/src/templates/editor-canvas.tsx b/editor/src/templates/editor-canvas.tsx
index ccfe75e5a815..6ad444843b3c 100644
--- a/editor/src/templates/editor-canvas.tsx
+++ b/editor/src/templates/editor-canvas.tsx
@@ -106,6 +106,7 @@ import { getCanvasViewportCenter } from './paste-helpers'
 import { DataPasteHandler, isPasteHandler } from '../utils/paste-handler'
 import { ResizeObserver } from '../components/canvas/dom-walker'
 import { isInsideColorPicker } from '../components/inspector/controls/color-picker-utils'
+import { addMouseUpHandler, removeMouseUpHandler } from './global-handlers'
 
 const webFrame = PROBABLY_ELECTRON ? requireElectron().webFrame : null
 
@@ -1372,14 +1373,10 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
     }
   }
 
-  handleWindowMouseUp = (event: any) => {
-    this.props.dispatch(this.handleMouseUp(event))
-  }
-
   setupWindowListeners() {
     window.addEventListener('mousemove', this.handleMouseMove, { capture: true }) // we use this event in the capture phase because size-box.ts calls stopPropagation() on mouseMove
     window.addEventListener('mouseleave', this.handleMouseLeave)
-    window.addEventListener('mouseup', this.handleWindowMouseUp, { capture: true })
+    addMouseUpHandler(this.handleMouseUp)
     window.addEventListener('click', this.handleClick)
     window.addEventListener('dblclick', this.handleDoubleClick)
     ;(window as any).addEventListener('paste', this.handlePaste)
@@ -1388,7 +1385,7 @@ export class EditorCanvas extends React.Component<EditorCanvasProps> {
   removeEventListeners() {
     window.removeEventListener('mousemove', this.handleMouseMove, { capture: true })
     window.removeEventListener('mouseleave', this.handleMouseLeave)
-    window.removeEventListener('mouseup', this.handleWindowMouseUp, { capture: true })
+    removeMouseUpHandler(this.handleMouseUp)
     window.removeEventListener('click', this.handleClick)
     window.removeEventListener('dblclick', this.handleDoubleClick)
     ;(window as any).removeEventListener('paste', this.handlePaste)
diff --git a/editor/src/templates/global-handlers.tsx b/editor/src/templates/global-handlers.tsx
new file mode 100644
index 000000000000..cd0fc4443074
--- /dev/null
+++ b/editor/src/templates/global-handlers.tsx
@@ -0,0 +1,21 @@
+import type { EditorAction } from '../components/editor/action-types'
+
+export type MouseHandler = (event: MouseEvent) => Array<EditorAction>
+
+let mouseUpHandlers: Array<MouseHandler> = []
+
+export function addMouseUpHandler(handler: MouseHandler): void {
+  mouseUpHandlers.push(handler)
+}
+
+export function removeMouseUpHandler(handler: MouseHandler): void {
+  mouseUpHandlers = mouseUpHandlers.filter((mouseUpHandler) => mouseUpHandler !== handler)
+}
+
+export function handleGlobalMouseUp(event: MouseEvent): Array<EditorAction> {
+  let result: Array<EditorAction> = []
+  for (const handler of mouseUpHandlers) {
+    result.push(...handler(event))
+  }
+  return result
+}

From f0e1e905e893babc7d513858821ce27c1789e078 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Thu, 3 Oct 2024 15:09:43 +0100
Subject: [PATCH 086/272] Revert "Switch Event Handlers" (#6466)

Reverts concrete-utopia/utopia#6385
---
 .../components/canvas/design-panel-root.tsx   | 42 +++++++++----------
 ...spector-end-to-end-tests.spec.browser2.tsx |  8 ++--
 .../components/inspector/section-header.tsx   |  2 +-
 .../component-section/component-section.tsx   |  4 +-
 .../header-section/target-selector.tsx        |  4 +-
 .../layout-section/list-source-cartouche.tsx  | 13 +++---
 .../components/navigator/left-pane/index.tsx  | 34 +++++++--------
 .../navigator-condensed-entry.tsx             | 12 +++---
 .../navigator-item-clickable-wrapper.tsx      | 14 +++----
 .../navigator-item-components.tsx             | 37 ++++++++--------
 .../navigator-item/navigator-item.tsx         | 29 ++++++-------
 ...nent-picker-context-menu.spec.browser2.tsx |  9 ++--
 .../navigator/navigator.spec.browser2.tsx     |  9 ++--
 13 files changed, 105 insertions(+), 112 deletions(-)

diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
index 82de4a3df8d6..5852f12f0e23 100644
--- a/editor/src/components/canvas/design-panel-root.tsx
+++ b/editor/src/components/canvas/design-panel-root.tsx
@@ -136,7 +136,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
   )
   const dispatch = useDispatch()
 
-  const onMouseDownTab = React.useCallback(
+  const onClickTab = React.useCallback(
     (menuTab: RightMenuTab) => {
       const actions: Array<EditorAction> = [EditorActions.setRightMenuTab(menuTab)]
       if (isCommentMode(editorModeRef.current) && menuTab !== RightMenuTab.Comments) {
@@ -147,25 +147,25 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
     [dispatch, editorModeRef],
   )
 
-  const onMouseDownInsertTab = React.useCallback(() => {
-    onMouseDownTab(RightMenuTab.Insert)
-  }, [onMouseDownTab])
+  const onClickInsertTab = React.useCallback(() => {
+    onClickTab(RightMenuTab.Insert)
+  }, [onClickTab])
 
-  const onMouseDownCommentsTab = React.useCallback(() => {
-    onMouseDownTab(RightMenuTab.Comments)
-  }, [onMouseDownTab])
+  const onClickCommentsTab = React.useCallback(() => {
+    onClickTab(RightMenuTab.Comments)
+  }, [onClickTab])
 
-  const onMouseDownInspectorTab = React.useCallback(() => {
-    onMouseDownTab(RightMenuTab.Inspector)
-  }, [onMouseDownTab])
+  const onClickInspectorTab = React.useCallback(() => {
+    onClickTab(RightMenuTab.Inspector)
+  }, [onClickTab])
 
-  const onMouseDownSettingsTab = React.useCallback(() => {
-    onMouseDownTab(RightMenuTab.Settings)
-  }, [onMouseDownTab])
+  const onClickSettingsTab = React.useCallback(() => {
+    onClickTab(RightMenuTab.Settings)
+  }, [onClickTab])
 
-  const onMouseDownRollYourOwnTab = React.useCallback(() => {
-    onMouseDownTab(RightMenuTab.RollYourOwn)
-  }, [onMouseDownTab])
+  const onClickRollYourOwnTab = React.useCallback(() => {
+    onClickTab(RightMenuTab.RollYourOwn)
+  }, [onClickTab])
 
   const canComment = useCanComment()
 
@@ -206,7 +206,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
           <MenuTab
             label={'Inspector'}
             selected={selectedTab === RightMenuTab.Inspector}
-            onMouseDown={onMouseDownInspectorTab}
+            onClick={onClickInspectorTab}
           />
           {when(
             allowedToEdit,
@@ -216,7 +216,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
                 <MenuTab
                   label={'Insert'}
                   selected={selectedTab === RightMenuTab.Insert}
-                  onMouseDown={onMouseDownInsertTab}
+                  onClick={onClickInsertTab}
                 />,
               )}
             </>,
@@ -227,20 +227,20 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
               testId='comments-tab'
               label={'Comments'}
               selected={selectedTab === RightMenuTab.Comments}
-              onMouseDown={onMouseDownCommentsTab}
+              onClick={onClickCommentsTab}
             />,
           )}
           <MenuTab
             label={'Settings'}
             selected={selectedTab === RightMenuTab.Settings}
-            onMouseDown={onMouseDownSettingsTab}
+            onClick={onClickSettingsTab}
           />
           {when(
             isFeatureEnabled('Roll Your Own'),
             <MenuTab
               label={'RYO'}
               selected={selectedTab === RightMenuTab.RollYourOwn}
-              onMouseDown={onMouseDownRollYourOwnTab}
+              onClick={onClickRollYourOwnTab}
             />,
           )}
         </FlexRow>
diff --git a/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx b/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
index bfbeb21cdc95..3d9e79541755 100644
--- a/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
+++ b/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
@@ -1479,12 +1479,12 @@ describe('inspector tests with real metadata', () => {
 
     await act(async () => {
       await screen.findByTestId('section-header-Advanced')
-      fireEvent.mouseDown(screen.getByTestId('section-header-Advanced'))
+      fireEvent.click(screen.getByTestId('section-header-Advanced'))
     })
 
     await act(async () => {
       await screen.findByTestId('target-selector-style')
-      fireEvent.mouseDown(screen.getByTestId('target-selector'))
+      fireEvent.click(screen.getByTestId('target-selector'))
     })
     await act(async () => {
       await screen.findByTestId('target-list-item-css')
@@ -1586,12 +1586,12 @@ describe('inspector tests with real metadata', () => {
 
     await act(async () => {
       await screen.findByTestId('section-header-Advanced')
-      fireEvent.mouseDown(screen.getByTestId('section-header-Advanced'))
+      fireEvent.click(screen.getByTestId('section-header-Advanced'))
     })
 
     await act(async () => {
       await screen.findByTestId('target-selector-style')
-      fireEvent.mouseDown(screen.getByTestId('target-selector'))
+      fireEvent.click(screen.getByTestId('target-selector'))
     })
     await act(async () => {
       await screen.findByTestId('target-list-item-css')
diff --git a/editor/src/components/inspector/section-header.tsx b/editor/src/components/inspector/section-header.tsx
index 77719edac898..1887359b8cd5 100644
--- a/editor/src/components/inspector/section-header.tsx
+++ b/editor/src/components/inspector/section-header.tsx
@@ -19,7 +19,7 @@ export function InspectorSectionHeader({
         padding: 8,
         cursor: 'pointer',
       }}
-      onMouseDown={toggle}
+      onClick={toggle}
       data-testid={`section-header-${title}`}
     >
       <div
diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
index 0db2eb8dd325..9fe1916b5d88 100644
--- a/editor/src/components/inspector/sections/component-section/component-section.tsx
+++ b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -1189,7 +1189,7 @@ interface ObjectIndicatorProps {
 const ObjectIndicator = (props: ObjectIndicatorProps) => {
   return (
     <div
-      onMouseDown={props.toggle}
+      onClick={props.toggle}
       style={{
         border: `1px solid ${colorTheme.bg3.value}`,
         paddingLeft: 2,
@@ -1579,7 +1579,7 @@ export const ComponentSectionInner = React.memo((props: ComponentSectionProps) =
             <span onClick={openInstanceFile}>Component</span>
           )}
         </FlexRow>
-        <SquareButton highlight onMouseDown={toggleSection}>
+        <SquareButton highlight onClick={toggleSection}>
           <ExpandableIndicator
             testId='component-section-expand'
             visible
diff --git a/editor/src/components/inspector/sections/header-section/target-selector.tsx b/editor/src/components/inspector/sections/header-section/target-selector.tsx
index 93115475a56b..84a1e19dcc29 100644
--- a/editor/src/components/inspector/sections/header-section/target-selector.tsx
+++ b/editor/src/components/inspector/sections/header-section/target-selector.tsx
@@ -408,10 +408,10 @@ const TargetListHeader = React.memo((props: TargetListHeaderProps) => {
         Target
       </H1>
       <SectionActionSheet className='actionsheet'>
-        <SquareButton highlight disabled={isAdding} onMouseDown={startAdding}>
+        <SquareButton highlight disabled={isAdding} onClick={startAdding}>
           <Icn category='semantic' type='cross' width={12} height={12} />
         </SquareButton>
-        <SquareButton highlight onMouseDown={togglePathPanel}>
+        <SquareButton highlight onClick={togglePathPanel}>
           <ExpandableIndicator
             testId='target-selector'
             visible
diff --git a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
index 4771e65af340..831a8b20f88d 100644
--- a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
+++ b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
@@ -100,14 +100,11 @@ const MapListSourceCartoucheInner = React.memo(
     const { popupIsOpen, DataPickerComponent, setReferenceElement, openPopup } =
       useDataPickerButton(variableNamesInScope, onPickMappedElement, pathToMappedExpression, target)
 
-    const onClick = React.useCallback(
-      (e: React.MouseEvent) => {
-        if (openOn === 'single-click') {
-          openPopup()
-        }
-      },
-      [openOn, openPopup],
-    )
+    const onClick = React.useCallback(() => {
+      if (openOn === 'single-click') {
+        openPopup()
+      }
+    }, [openOn, openPopup])
 
     const onDoubleClick = React.useCallback(() => {
       if (openOn === 'double-click') {
diff --git a/editor/src/components/navigator/left-pane/index.tsx b/editor/src/components/navigator/left-pane/index.tsx
index 8babed005899..286bf18cbbe5 100644
--- a/editor/src/components/navigator/left-pane/index.tsx
+++ b/editor/src/components/navigator/left-pane/index.tsx
@@ -48,7 +48,7 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
 
   const dispatch = useDispatch()
 
-  const onMouseDownTab = React.useCallback(
+  const onClickTab = React.useCallback(
     (menuTab: LeftMenuTab) => {
       let actions: Array<EditorAction> = []
       actions.push(setLeftMenuTab(menuTab))
@@ -57,21 +57,21 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
     [dispatch],
   )
 
-  const onMouseDownPagesTab = React.useCallback(() => {
-    onMouseDownTab(LeftMenuTab.Pages)
-  }, [onMouseDownTab])
+  const onClickPagesTab = React.useCallback(() => {
+    onClickTab(LeftMenuTab.Pages)
+  }, [onClickTab])
 
-  const onMouseDownProjectTab = React.useCallback(() => {
-    onMouseDownTab(LeftMenuTab.Project)
-  }, [onMouseDownTab])
+  const onClickProjectTab = React.useCallback(() => {
+    onClickTab(LeftMenuTab.Project)
+  }, [onClickTab])
 
-  const onMouseDownNavigatorTab = React.useCallback(() => {
-    onMouseDownTab(LeftMenuTab.Navigator)
-  }, [onMouseDownTab])
+  const onClickNavigatorTab = React.useCallback(() => {
+    onClickTab(LeftMenuTab.Navigator)
+  }, [onClickTab])
 
-  const onMouseDownGithubTab = React.useCallback(() => {
-    onMouseDownTab(LeftMenuTab.Github)
-  }, [onMouseDownTab])
+  const onClickGithubTab = React.useCallback(() => {
+    onClickTab(LeftMenuTab.Github)
+  }, [onClickTab])
 
   const isMyProject = useIsMyProject()
 
@@ -126,23 +126,23 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
                 <MenuTab
                   label={'Pages'}
                   selected={selectedTab === LeftMenuTab.Pages}
-                  onMouseDown={onMouseDownPagesTab}
+                  onClick={onClickPagesTab}
                 />,
               )}
               <MenuTab
                 label={'Navigator'}
                 selected={selectedTab === LeftMenuTab.Navigator}
-                onMouseDown={onMouseDownNavigatorTab}
+                onClick={onClickNavigatorTab}
               />
               <MenuTab
                 label={'Project'}
                 selected={selectedTab === LeftMenuTab.Project}
-                onMouseDown={onMouseDownProjectTab}
+                onClick={onClickProjectTab}
               />
               <MenuTab
                 label={'Github'}
                 selected={selectedTab === LeftMenuTab.Github}
-                onMouseDown={onMouseDownGithubTab}
+                onClick={onClickGithubTab}
               />
             </FlexRow>,
           )}
diff --git a/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx b/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
index 6f208b183679..60f9e0afce4e 100644
--- a/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
@@ -20,7 +20,7 @@ import { LayoutIcon } from './layout-icon'
 import { DataReferenceCartoucheControl } from '../../inspector/sections/component-section/data-reference-cartouche'
 import {
   NavigatorRowClickableWrapper,
-  useGetNavigatorMouseDownActions,
+  useGetNavigatorClickActions,
 } from './navigator-item-clickable-wrapper'
 import type { ThemeObject } from '../../../uuiui/styles/theme/theme-helpers'
 import { useNavigatorSelectionBoundsForEntry } from './use-navigator-selection-bounds-for-entry'
@@ -341,18 +341,18 @@ const CondensedEntryItemContent = React.memo(
       ])
     }, [props.entry, dispatch, highlightedViews])
 
-    const getMouseDownActions = useGetNavigatorMouseDownActions(
+    const getClickActions = useGetNavigatorClickActions(
       props.entry.elementPath,
       props.selected,
       condensedNavigatorRow([props.entry], 'leaf', props.indentation),
     )
 
-    const onMouseDown = React.useCallback(
+    const onClick = React.useCallback(
       (e: React.MouseEvent) => {
         e.stopPropagation()
-        dispatch(getMouseDownActions(e))
+        dispatch(getClickActions(e))
       },
-      [dispatch, getMouseDownActions],
+      [dispatch, getClickActions],
     )
 
     return (
@@ -374,7 +374,7 @@ const CondensedEntryItemContent = React.memo(
         }}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}
-        onMouseDown={onMouseDown}
+        onClick={onClick}
       >
         <div
           style={{
diff --git a/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx b/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
index c698a0f9014d..8b1deca408b7 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
@@ -46,21 +46,21 @@ export const NavigatorRowClickableWrapper = React.memo(
       return selectedViews.current.some((view) => EP.pathsEqual(targetPath, view))
     }, [selectedViews, targetPath])
 
-    const getMouseDownActions = useGetNavigatorMouseDownActions(targetPath, selected, props.row)
+    const getActions = useGetNavigatorClickActions(targetPath, selected, props.row)
 
-    const onMouseDown = React.useCallback(
+    const onClick = React.useCallback(
       (e: React.MouseEvent) => {
         e.stopPropagation()
         e.preventDefault()
 
-        const actions = getMouseDownActions(e)
+        const actions = getActions(e)
         dispatch(actions)
       },
-      [dispatch, getMouseDownActions],
+      [dispatch, getActions],
     )
 
     return (
-      <div style={{ display: 'flex', alignItems: 'center', flex: 1 }} onMouseDown={onMouseDown}>
+      <div style={{ display: 'flex', alignItems: 'center', flex: 1 }} onClick={onClick}>
         {props.children}
       </div>
     )
@@ -68,11 +68,11 @@ export const NavigatorRowClickableWrapper = React.memo(
 )
 NavigatorRowClickableWrapper.displayName = 'NavigatorRowClickableWrapper'
 
-export function useGetNavigatorMouseDownActions(
+export function useGetNavigatorClickActions(
   targetPath: ElementPath,
   selected: boolean,
   row: NavigatorRow,
-): (event: React.MouseEvent) => Array<EditorAction> {
+) {
   const navigatorTargets = useRefEditorState(navigatorTargetsSelector)
   const selectedViews = useRefEditorState((store) => store.editor.selectedViews)
   const collapsedViews = useRefEditorState((store) => store.editor.navigator.collapsedViews)
diff --git a/editor/src/components/navigator/navigator-item/navigator-item-components.tsx b/editor/src/components/navigator/navigator-item/navigator-item-components.tsx
index 1686b791019d..3fe002f4ea84 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item-components.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item-components.tsx
@@ -180,7 +180,7 @@ interface VisiblityIndicatorProps {
   visibilityEnabled: boolean
   selected: boolean
   iconColor: IcnProps['color']
-  onMouseDown: () => void
+  onClick: () => void
 }
 
 export const VisibilityIndicator: React.FunctionComponent<
@@ -190,7 +190,7 @@ export const VisibilityIndicator: React.FunctionComponent<
 
   return (
     <Button
-      onMouseDown={props.onMouseDown}
+      onClick={props.onClick}
       style={{
         height: 12,
         width: 12,
@@ -228,7 +228,7 @@ const AddChildButton = React.memo((props: AddChildButtonProps) => {
     'AddChildButton supportsChildren',
   )
 
-  const onMouseDown = useCreateCallbackToShowComponentPicker()(
+  const onClick = useCreateCallbackToShowComponentPicker()(
     [target],
     EditorActions.insertAsChildTarget(),
   )
@@ -239,7 +239,7 @@ const AddChildButton = React.memo((props: AddChildButtonProps) => {
 
   return (
     <Button
-      onMouseDown={onMouseDown}
+      onClick={onClick}
       style={{
         height: 12,
         width: 12,
@@ -292,12 +292,12 @@ const ReplaceElementButton = React.memo((props: ReplaceElementButtonProps) => {
     }
   })()
 
-  const onMouseDown = useCreateCallbackToShowComponentPicker()([realTarget], insertionTarget)
+  const onClick = useCreateCallbackToShowComponentPicker()([realTarget], insertionTarget)
 
   return (
     <Button
       data-testid={ReplaceElementButtonTestId(target, prop)}
-      onMouseDown={onMouseDown}
+      onClick={onClick}
       style={{
         height: 12,
         width: 12,
@@ -320,36 +320,37 @@ interface SelectionLockedIndicatorProps {
   selected: boolean
   iconColor: IcnProps['color']
   isDescendantOfLocked: boolean
-  onMouseDown: (value: SelectionLocked) => void
+  onClick: (value: SelectionLocked) => void
 }
 
 export const SelectionLockedIndicator: React.FunctionComponent<
   React.PropsWithChildren<SelectionLockedIndicatorProps>
 > = React.memo((props) => {
-  const { shouldShow, value, iconColor, isDescendantOfLocked, onMouseDown } = props
+  const { shouldShow, value, selected, iconColor, isDescendantOfLocked, onClick } = props
   const color = iconColor
 
-  const handleMouseDown = React.useCallback(
+  const handleClick = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
       event.stopPropagation()
       switch (value) {
         case 'selectable':
-          onMouseDown('locked-hierarchy')
+          onClick('locked-hierarchy')
           break
         case 'locked-hierarchy':
-          onMouseDown('locked')
+          onClick('locked')
           break
         case 'locked':
         default:
-          onMouseDown('selectable')
+          onClick('selectable')
           break
       }
     },
-    [onMouseDown, value],
+    [onClick, value],
   )
   return (
     <Button
-      onMouseDown={handleMouseDown}
+      onClick={handleClick}
+      onMouseDown={stopPropagation}
       style={{
         height: 12,
         width: 12,
@@ -473,7 +474,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
     props.navigatorEntry.elementPath,
   )
 
-  const toggleCollapse = React.useCallback(
+  const collapse = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       event.stopPropagation()
       dispatch([EditorActions.toggleCollapse(navigatorEntry.elementPath)])
@@ -538,7 +539,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
             isDescendantOfLocked={isDescendantOfLocked}
             selected={props.selected}
             iconColor={props.iconColor}
-            onMouseDown={toggleSelectable}
+            onClick={toggleSelectable}
           />
           <VisibilityIndicator
             key={`visibility-indicator-${varSafeNavigatorEntryToKey(navigatorEntry)}`}
@@ -548,7 +549,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
             visibilityEnabled={props.isVisibleOnCanvas}
             selected={props.selected}
             iconColor={props.iconColor}
-            onMouseDown={toggleHidden}
+            onClick={toggleHidden}
           />
         </>,
       )}
@@ -559,7 +560,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
           visible={true}
           collapsed={props.collapsed}
           selected={props.selected}
-          onMouseDown={toggleCollapse}
+          onClick={collapse}
           style={{
             opacity: 'var(--paneHoverOpacity)',
           }}
diff --git a/editor/src/components/navigator/navigator-item/navigator-item.tsx b/editor/src/components/navigator/navigator-item/navigator-item.tsx
index 76f254a79f37..bc951931c96a 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item.tsx
@@ -650,7 +650,7 @@ export const NavigatorItem: React.FunctionComponent<
     return elementWarnings.invalidGroup != null || elementWarnings.invalidGroupChild != null
   }, [elementWarnings])
 
-  const toggleCollapse = React.useCallback(
+  const collapse = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       collapseItem(dispatch, navigatorEntry.elementPath, event)
       event.stopPropagation()
@@ -744,16 +744,13 @@ export const NavigatorItem: React.FunctionComponent<
 
   const currentlyRenaming = EP.pathsEqual(props.renamingTarget, props.navigatorEntry.elementPath)
 
-  const onMouseDown = React.useCallback(
+  const onClick = React.useCallback(
     (e: React.MouseEvent) => {
-      // Avoid doing any of this for a right click.
-      if (e.button !== 2) {
-        if (isRenderPropNavigatorEntry(navigatorEntry)) {
-          e.stopPropagation()
-        }
-
-        contextMenu.hideAll()
+      if (isRenderPropNavigatorEntry(navigatorEntry)) {
+        e.stopPropagation()
       }
+
+      contextMenu.hideAll()
     },
     [navigatorEntry],
   )
@@ -774,7 +771,7 @@ export const NavigatorItem: React.FunctionComponent<
       row={regularNavigatorRow(props.navigatorEntry, props.indentation)}
     >
       <div
-        onMouseDown={onMouseDown}
+        onClick={onClick}
         style={{
           flex: 1,
           borderRadius: 5,
@@ -862,7 +859,7 @@ export const NavigatorItem: React.FunctionComponent<
                     visible={canBeExpanded}
                     collapsed={collapsed}
                     selected={selected && !isInsideComponent}
-                    onMouseDown={toggleCollapse}
+                    onClick={collapse}
                     style={{
                       opacity: 'var(--paneHoverOpacity)',
                     }}
@@ -938,7 +935,7 @@ const RenderPropSlot = React.memo((props: RenderPropSlotProps) => {
       label={label}
       parentOutline={parentOutline}
       cursor={'pointer'}
-      onMouseDown={showComponentPickerContextMenu}
+      onClick={showComponentPickerContextMenu}
       testId={`toggle-render-prop-${NavigatorItemTestId(
         varSafeNavigatorEntryToKey(navigatorEntry),
       )}`}
@@ -967,7 +964,7 @@ const ConditionalBranchSlot = React.memo((props: ConditionalBranchSlotProps) =>
       label={label}
       parentOutline={parentOutline}
       cursor={'pointer'}
-      onMouseDown={showComponentPickerContextMenu}
+      onClick={showComponentPickerContextMenu}
       testId={`toggle-render-prop-${NavigatorItemTestId(
         varSafeNavigatorEntryToKey(navigatorEntry),
       )}`}
@@ -980,17 +977,17 @@ interface PlaceholderSlotProps {
   parentOutline: ParentOutline
   cursor?: 'pointer' | 'inherit'
   testId?: string
-  onMouseDown?: React.MouseEventHandler
+  onClick?: React.MouseEventHandler
 }
 
 const PlaceholderSlot = React.memo((props: PlaceholderSlotProps) => {
-  const { label, parentOutline, cursor, testId, onMouseDown } = props
+  const { label, parentOutline, cursor, testId, onClick } = props
   const colorTheme = useColorTheme()
 
   return (
     <div
       key={`label-${label}-slot`}
-      onMouseDown={onMouseDown}
+      onClick={onClick}
       style={{
         width: 140,
         height: 19,
diff --git a/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx b/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx
index 7571a2ad0090..9ad51dcbb489 100644
--- a/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx
@@ -19,7 +19,6 @@ import {
 import * as EP from '../../../core/shared/element-path'
 import {
   mouseClickAtPoint,
-  mouseDownAtPoint,
   mouseMoveToPoint,
   pressKey,
 } from '../../canvas/event-helpers.test-utils'
@@ -545,7 +544,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/card/prop_label_title',
     )
-    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
 
     const flexRowRow = editor.renderedDOM.queryByTestId(
       labelTestIdForComponentIcon('FlexRow', '/src/utils', 'row'),
@@ -719,7 +718,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/card/prop_label_title',
     )
-    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
 
     const menuButton = await waitFor(() => editor.renderedDOM.getByText('FlexCol'))
     await mouseClickAtPoint(menuButton, { x: 3, y: 3 })
@@ -898,7 +897,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/card/prop_label_title',
     )
-    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
 
     const submenuButton = await waitFor(() => editor.renderedDOM.getByText('FlexRow'))
     await mouseMoveToPoint(submenuButton, { x: 3, y: 3 })
@@ -1198,7 +1197,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:pg_root/card/prop_label_title',
     )
-    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
     await editor.getDispatchFollowUpActionsFinished()
 
     const menuButton = await waitFor(() => editor.renderedDOM.getByText('Flex Hello'))
diff --git a/editor/src/components/navigator/navigator.spec.browser2.tsx b/editor/src/components/navigator/navigator.spec.browser2.tsx
index fd27a18b0ebb..e8911f87814c 100644
--- a/editor/src/components/navigator/navigator.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator.spec.browser2.tsx
@@ -29,7 +29,6 @@ import {
   dragElementWithDNDEvents,
   mouseClickAtPoint,
   mouseDoubleClickAtPoint,
-  mouseDownAtPoint,
   pressKey,
 } from '../canvas/event-helpers.test-utils'
 import { NavigatorItemTestId } from './navigator-item/navigator-item'
@@ -5227,7 +5226,7 @@ describe('Navigator', () => {
         'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:dbc/78c/prop_label_header',
       )
 
-      await mouseDownAtPoint(slotElement, { x: 3, y: 3 })
+      await mouseClickAtPoint(slotElement, { x: 3, y: 3 })
 
       const renderPropOptionElement = await waitFor(() =>
         renderResult.renderedDOM.getByText('(empty)'),
@@ -5273,7 +5272,7 @@ describe('Navigator', () => {
         'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:dbc/78c/prop_label_header',
       )
 
-      await mouseDownAtPoint(slotElement, { x: 3, y: 3 })
+      await mouseClickAtPoint(slotElement, { x: 3, y: 3 })
 
       const renderPropOptionElement = await waitFor(() =>
         renderResult.renderedDOM.getByText('Span with Title'),
@@ -5309,7 +5308,7 @@ describe('Navigator', () => {
         'regular-sb/scene/pg:dbc/78c/d93',
       ])
     })
-    it('can insert a third-party component into render prop', async () => {
+    it('can insert an third-party component into render prop', async () => {
       const renderResult = await renderTestEditorWithModel(
         projectWithThirdPartyRenderProp(''), // <- no render prop
         'await-first-dom-report',
@@ -5319,7 +5318,7 @@ describe('Navigator', () => {
         'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:dbc/78c/prop_label_header',
       )
 
-      await mouseDownAtPoint(slotElement, { x: 3, y: 3 })
+      await mouseClickAtPoint(slotElement, { x: 3, y: 3 })
 
       const renderPropOptionElement = await waitFor(() =>
         renderResult.renderedDOM.getByText('Heading with Title'),

From 03ec7f4270128df7800989a7e761b4551ad9b67e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Thu, 3 Oct 2024 17:25:34 +0200
Subject: [PATCH 087/272] Unify elements-to-rerender calculation between the
 real and fake dispatch (#6465)

## Problem
The real dispatch in `editor.tsx` and the fake dispatch have a different
way of calculating which elements to sample with the DOM sampler. This
has been OK up until now, since often all elements we
re-rendered/re-sampled, but now that we started to get more selective
with what to re-render/re-sample, this discrepancy caused problems in an
upcoming PR, https://github.com/concrete-utopia/utopia/pull/6450.

The problem in #6450 is that in order for the group true-ups to work
with resizing, the absolute resize strategy would have to explicitly
declare any group children of the resized elements as elements to
re-render. Individual strategies shouldn't be aware of this, since
automatically resizing groups is a feature provided by the "platform"
code.

However, it's not enough to put the code to find the child groups into
`boundDispatch`, since then the same thing would have to be
re-implemented in the fake dispatch, so we need to find a way to share
this logic between the two dispatches.

## Fix
This PR contains the dispatch-related portion of the problem discovered
in #6450. The concrete fix is to extract out the logic to determine
which elements to re-render/re-sample into a function that's used by
both the real and fake dispatch. This logic contains which child groups
to re-render as well.

### Note on `ElementsToRerenderGLOBAL.current`
The real dispatch updates `ElementsToRerenderGLOBAL.current`, while the
fake one doesn't. Ideally this behaviour would be the same too, but
updating `ElementsToRerenderGLOBAL.current` inside
`collectElementsToRerender` led to test failures that didn't happen on
the PR where this problem was discovered, so this is out of scope for
this PR
---
 .../components/canvas/ui-jsx.test-utils.tsx   | 15 ++--
 editor/src/templates/editor.tsx               | 68 ++++++++++++-------
 2 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/editor/src/components/canvas/ui-jsx.test-utils.tsx b/editor/src/components/canvas/ui-jsx.test-utils.tsx
index 81e962474f39..62f1e81f2cb2 100644
--- a/editor/src/components/canvas/ui-jsx.test-utils.tsx
+++ b/editor/src/components/canvas/ui-jsx.test-utils.tsx
@@ -59,7 +59,7 @@ import {
   FakeWatchdogWorker,
 } from '../../core/workers/test-workers'
 import { UtopiaTsWorkersImplementation } from '../../core/workers/workers'
-import { EditorRoot } from '../../templates/editor'
+import { collectElementsToRerender, EditorRoot } from '../../templates/editor'
 import Utils from '../../utils/utils'
 import { getNamedPath } from '../../utils/react-helpers'
 import type {
@@ -435,8 +435,9 @@ export async function renderTestEditorWithModel(
     {
       resubscribeObservers(domWalkerMutableState)
 
+      const elementsToFocusOn = collectElementsToRerender(workingEditorState, actions)
       const metadataResult = runDomSamplerRegular({
-        elementsToFocusOn: workingEditorState.patchedEditor.canvas.elementsToRerender,
+        elementsToFocusOn: elementsToFocusOn,
         domWalkerAdditionalElementsToFocusOn:
           workingEditorState.patchedEditor.canvas.domWalkerAdditionalElementsToUpdate,
         scale: workingEditorState.patchedEditor.canvas.scale,
@@ -495,8 +496,6 @@ export async function renderTestEditorWithModel(
 
         // re-render the canvas
         {
-          // TODO run fixElementsToRerender and set ElementsToRerenderGLOBAL
-
           flushSync(() => {
             canvasStoreHook.setState(patchedStoreFromFullStore(workingEditorState, 'canvas-store'))
           })
@@ -507,8 +506,14 @@ export async function renderTestEditorWithModel(
         {
           resubscribeObservers(domWalkerMutableState)
 
+          // TODO: The real dispatch updates ElementsToRerenderGLOBAL.current,
+          // while the fake one doesn't. Ideally this behaviour would be the
+          // same, but solving this was out of scope for the PR that introduced
+          // collectElementsToRerender
+          // (https://github.com/concrete-utopia/utopia/pull/6465)
+          const elementsToFocusOn = collectElementsToRerender(workingEditorState, actions)
           const metadataResult = runDomSamplerGroups({
-            elementsToFocusOn: workingEditorState.patchedEditor.canvas.elementsToRerender,
+            elementsToFocusOn: elementsToFocusOn,
             domWalkerAdditionalElementsToFocusOn:
               workingEditorState.patchedEditor.canvas.domWalkerAdditionalElementsToUpdate,
             scale: workingEditorState.patchedEditor.canvas.scale,
diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index 140ba5beb5a0..539183cdd1f2 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -132,6 +132,7 @@ import {
   runDomSamplerGroups,
 } from '../components/canvas/dom-sampler'
 import { omitWithPredicate } from '../core/shared/object-utils'
+import { getChildGroupsForNonGroupParents } from '../components/canvas/canvas-strategies/strategies/fragment-like-helpers'
 
 if (PROBABLY_ELECTRON) {
   let { webFrame } = requireElectron()
@@ -165,38 +166,54 @@ function collectElementsToRerenderForTransientActions(
 // for this pass use a union of the two arrays, to make sure we clear a previously focused element from the metadata
 // and let the canvas re-render components that may have a missing child now.
 let lastElementsToRerender: ElementsToRerender = 'rerender-all-elements'
-function fixElementsToRerender(
-  currentElementsToRerender: ElementsToRerender,
-  dispatchedActions: readonly EditorAction[],
-): ElementsToRerender {
-  // while running transient actions there is an optional elementsToRerender
-  const elementsToRerenderTransient = uniqBy<ElementPath>(
-    dispatchedActions.reduce(
-      collectElementsToRerenderForTransientActions,
-      [] as Array<ElementPath>,
-    ),
-    EP.pathsEqual,
-  )
-
-  const currentOrTransientElementsToRerender =
-    elementsToRerenderTransient.length > 0 ? elementsToRerenderTransient : currentElementsToRerender
-
-  let fixedElementsToRerender: ElementsToRerender = currentOrTransientElementsToRerender
+function fixElementsToRerender(elementsToRerender: ElementsToRerender): ElementsToRerender {
+  let fixedElementsToRerender: ElementsToRerender = elementsToRerender
   if (
-    currentOrTransientElementsToRerender !== 'rerender-all-elements' &&
+    elementsToRerender !== 'rerender-all-elements' &&
     lastElementsToRerender !== 'rerender-all-elements'
   ) {
     // if the current elements to rerender array doesn't match the previous elements to rerender array, for a single frame let's use the union of the two arrays
     fixedElementsToRerender = EP.uniqueElementPaths([
       ...lastElementsToRerender,
-      ...currentOrTransientElementsToRerender,
+      ...elementsToRerender,
     ])
   }
 
-  lastElementsToRerender = currentOrTransientElementsToRerender
+  lastElementsToRerender = fixedElementsToRerender
   return fixedElementsToRerender
 }
 
+export function collectElementsToRerender(
+  editorStore: EditorStoreFull,
+  dispatchedActions: readonly EditorAction[],
+): ElementsToRerender {
+  const elementsToRerenderTransient = uniqBy<ElementPath>(
+    dispatchedActions.reduce(
+      collectElementsToRerenderForTransientActions,
+      [] as Array<ElementPath>,
+    ),
+    EP.pathsEqual,
+  )
+
+  const elementsToRerender =
+    elementsToRerenderTransient.length > 0
+      ? elementsToRerenderTransient
+      : editorStore.patchedEditor.canvas.elementsToRerender
+
+  const fixedElementsToRerender = fixElementsToRerender(elementsToRerender)
+  const fixedElementsWithChildGroups =
+    fixedElementsToRerender === 'rerender-all-elements'
+      ? fixedElementsToRerender
+      : [
+          ...fixedElementsToRerender,
+          ...getChildGroupsForNonGroupParents(
+            editorStore.patchedEditor.jsxMetadata,
+            fixedElementsToRerender,
+          ),
+        ]
+  return fixedElementsWithChildGroups
+}
+
 export class Editor {
   storedState: EditorStoreFull
   utopiaStoreHook: UtopiaStoreAPI
@@ -460,8 +477,8 @@ export class Editor {
       if (shouldUpdateCanvasStore) {
         // this will re-render the canvas root and potentially the canvas contents itself
         Measure.taskTime(`update canvas ${updateId}`, () => {
-          const currentElementsToRender = fixElementsToRerender(
-            this.storedState.patchedEditor.canvas.elementsToRerender,
+          const currentElementsToRender = collectElementsToRerender(
+            this.storedState,
             dispatchedActions,
           )
           ElementsToRerenderGLOBAL.current = currentElementsToRender // Mutation!
@@ -521,10 +538,11 @@ export class Editor {
 
           // re-render the canvas
           Measure.taskTime(`Canvas re-render because of groups ${updateId}`, () => {
-            ElementsToRerenderGLOBAL.current = fixElementsToRerender(
-              this.storedState.patchedEditor.canvas.elementsToRerender,
+            const currentElementsToRender = collectElementsToRerender(
+              this.storedState,
               dispatchedActions,
-            ) // Mutation!
+            )
+            ElementsToRerenderGLOBAL.current = currentElementsToRender // Mutation!
 
             ReactDOM.flushSync(() => {
               ReactDOM.unstable_batchedUpdates(() => {

From e1f1b8aef4c9cd45620f73aa9c85d8fe15f08d71 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 4 Oct 2024 09:46:38 +0200
Subject: [PATCH 088/272] Disable alignment buttons/groups based on element
 (#6461)

**Problem:**

Following up to https://github.com/concrete-utopia/utopia/pull/6459, the
alignment buttons should be disabled following a comprehensive set of
rules.

**Fix:**

This PR updates the logic to disable alignment buttons and groups
following the following logic.

- Grid children all have alignment buttons enabled
- Flex children have alignment buttons enabled for the orientation
opposite to their parent's flex direction
- Absolute elements have alignment buttons enabled, if they are not
storyboard children
- Flow elements have all alignment buttons disabled

Fixes #6460
---
 .../alignment-buttons.spec.browser2.tsx       | 290 ++++++++++++++++++
 .../inspector/alignment-buttons.tsx           |  11 +-
 .../inspector/controls/option-control.tsx     |   3 +-
 .../inspector/use-disable-alignment.tsx       |  74 +++++
 4 files changed, 373 insertions(+), 5 deletions(-)
 create mode 100644 editor/src/components/inspector/alignment-buttons.spec.browser2.tsx
 create mode 100644 editor/src/components/inspector/use-disable-alignment.tsx

diff --git a/editor/src/components/inspector/alignment-buttons.spec.browser2.tsx b/editor/src/components/inspector/alignment-buttons.spec.browser2.tsx
new file mode 100644
index 000000000000..1158a6aad77b
--- /dev/null
+++ b/editor/src/components/inspector/alignment-buttons.spec.browser2.tsx
@@ -0,0 +1,290 @@
+import { MetadataUtils } from '../../core/model/element-metadata-utils'
+import * as EP from '../../core/shared/element-path'
+import { renderTestEditorWithCode } from '../canvas/ui-jsx.test-utils'
+import { isAlignmentGroupDisabled } from './use-disable-alignment'
+
+describe('alignment buttons', () => {
+  describe('isAlignmentGroupDisabled', () => {
+    it('enables buttons for grid cells', async () => {
+      const renderResult = await renderTestEditorWithCode(projectCode, 'await-first-dom-report')
+      const metadata = renderResult.getEditorState().editor.jsxMetadata
+
+      expect(
+        isAlignmentGroupDisabled(
+          MetadataUtils.findElementByElementPath(metadata, EP.fromString('sb/grid/grid-child')),
+          MetadataUtils.findElementByElementPath(metadata, EP.fromString('sb/grid')),
+          'horizontal',
+          [],
+        ),
+      ).toBe(false)
+    })
+    it('enables buttons for flex only in the opposite direction', async () => {
+      const renderResult = await renderTestEditorWithCode(projectCode, 'await-first-dom-report')
+      const metadata = renderResult.getEditorState().editor.jsxMetadata
+
+      // flex-direction: row
+      {
+        expect(
+          isAlignmentGroupDisabled(
+            MetadataUtils.findElementByElementPath(
+              metadata,
+              EP.fromString('sb/flex-horiz/flex-horiz-child'),
+            ),
+            MetadataUtils.findElementByElementPath(metadata, EP.fromString('sb/flex-horiz')),
+            'vertical',
+            [],
+          ),
+        ).toBe(false)
+        expect(
+          isAlignmentGroupDisabled(
+            MetadataUtils.findElementByElementPath(
+              metadata,
+              EP.fromString('sb/flex-horiz/flex-horiz-child'),
+            ),
+            MetadataUtils.findElementByElementPath(metadata, EP.fromString('sb/flex-horiz')),
+            'horizontal',
+            [],
+          ),
+        ).toBe(true)
+      }
+
+      // flex-direction: column
+      {
+        expect(
+          isAlignmentGroupDisabled(
+            MetadataUtils.findElementByElementPath(
+              metadata,
+              EP.fromString('sb/flex-vert/flex-vert-child'),
+            ),
+            MetadataUtils.findElementByElementPath(metadata, EP.fromString('sb/flex-vert')),
+            'horizontal',
+            [],
+          ),
+        ).toBe(false)
+        expect(
+          isAlignmentGroupDisabled(
+            MetadataUtils.findElementByElementPath(
+              metadata,
+              EP.fromString('sb/flex-vert/flex-vert-child'),
+            ),
+            MetadataUtils.findElementByElementPath(metadata, EP.fromString('sb/flex-vert')),
+            'vertical',
+            [],
+          ),
+        ).toBe(true)
+      }
+    })
+    it('enables buttons for absolute only if not storyboard children', async () => {
+      const renderResult = await renderTestEditorWithCode(projectCode, 'await-first-dom-report')
+      const metadata = renderResult.getEditorState().editor.jsxMetadata
+
+      expect(
+        isAlignmentGroupDisabled(
+          MetadataUtils.findElementByElementPath(
+            metadata,
+            EP.fromString('sb/flow/flow-child-absolute'),
+          ),
+          MetadataUtils.findElementByElementPath(metadata, EP.fromString('sb/flow')),
+          'horizontal',
+          [],
+        ),
+      ).toBe(false)
+
+      expect(
+        isAlignmentGroupDisabled(
+          MetadataUtils.findElementByElementPath(metadata, EP.fromString('sb/flow')),
+          MetadataUtils.findElementByElementPath(metadata, EP.fromString('sb')),
+          'horizontal',
+          [],
+        ),
+      ).toBe(true)
+
+      expect(
+        isAlignmentGroupDisabled(
+          MetadataUtils.findElementByElementPath(metadata, EP.fromString('sb/flow')),
+          MetadataUtils.findElementByElementPath(metadata, EP.fromString('sb')),
+          'horizontal',
+          [EP.fromString('sb/flow'), EP.fromString('sb/grid')],
+        ),
+      ).toBe(false)
+    })
+    it('disables buttons for flow', async () => {
+      const renderResult = await renderTestEditorWithCode(projectCode, 'await-first-dom-report')
+      const metadata = renderResult.getEditorState().editor.jsxMetadata
+
+      expect(
+        isAlignmentGroupDisabled(
+          MetadataUtils.findElementByElementPath(
+            metadata,
+            EP.fromString('sb/flow/flow-child-relative'),
+          ),
+          MetadataUtils.findElementByElementPath(metadata, EP.fromString('sb/flow')),
+          'horizontal',
+          [],
+        ),
+      ).toBe(true)
+    })
+  })
+})
+
+const projectCode = `import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <div
+      data-uid='grid'
+      style={{
+        backgroundColor: '#aaaaaa33',
+        position: 'absolute',
+        width: 318,
+        height: 288,
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr 1fr',
+        gridTemplateRows: '1fr 1fr 1fr',
+        padding: 20,
+        gridGap: 20,
+        justifyItems: 'flex-end',
+        alignContent: 'center',
+      }}
+    >
+      <div
+        data-uid='grid'data-uid='grid-child'
+        style={{
+          backgroundColor: '#aaaaaa33',
+          justifySelf: 'stretch',
+          gridColumn: 3,
+          gridRow: 2,
+          alignSelf: 'stretch',
+        }}
+      />
+    </div>
+    <div
+      data-uid='flow'
+      style={{
+        backgroundColor: '#aaaaaa33',
+        position: 'absolute',
+        left: 339,
+        top: 0,
+        width: 282,
+        height: 247,
+        contain: 'layout',
+      }}
+    >
+      <div
+        data-uid='flow-child-relative'
+        style={{
+          backgroundColor: '#aaaaaa33',
+          left: 21,
+          top: 31,
+          width: 57,
+          height: 59,
+        }}
+      />
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          left: 22,
+          top: 99,
+          width: 57,
+          height: 59,
+        }}
+      />
+      <div
+        data-uid='flow-child-absolute'
+        style={{
+          backgroundColor: '#aaaaaa33',
+          position: 'absolute',
+          left: 153,
+          top: 94,
+          width: 57,
+          height: 59,
+        }}
+      />
+    </div>
+    <div
+      data-uid='flex-horiz'
+      style={{
+        backgroundColor: '#aaaaaa33',
+        position: 'absolute',
+        left: 0,
+        top: 302,
+        width: 318,
+        height: 155,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 10,
+      }}
+    >
+      <div
+        data-uid='flex-horiz-child'
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 57,
+          height: 37,
+          contain: 'layout',
+        }}
+      />
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 57,
+          height: 37,
+          contain: 'layout',
+        }}
+      />
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 57,
+          height: 37,
+          contain: 'layout',
+        }}
+      />
+    </div>
+    <div
+      data-uid='flex-vert'
+      style={{
+        backgroundColor: '#aaaaaa33',
+        position: 'absolute',
+        left: 339,
+        top: 307,
+        width: 164,
+        height: 300,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        gap: 10,
+      }}
+    >
+      <div
+        data-uid='flex-vert-child'
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 54.5,
+          height: 66,
+          contain: 'layout',
+        }}
+      />
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 54.5,
+          height: 66,
+          contain: 'layout',
+        }}
+      />
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 54.5,
+          height: 66,
+          contain: 'layout',
+        }}
+      />
+    </div>
+  </Storyboard>
+)
+`
diff --git a/editor/src/components/inspector/alignment-buttons.tsx b/editor/src/components/inspector/alignment-buttons.tsx
index 3fa2e1841708..130820f8c003 100644
--- a/editor/src/components/inspector/alignment-buttons.tsx
+++ b/editor/src/components/inspector/alignment-buttons.tsx
@@ -26,6 +26,7 @@ import { Substores, useEditorState, useRefEditorState } from '../editor/store/st
 import { getControlStyles } from './common/control-styles'
 import { OptionChainControl } from './controls/option-chain-control'
 import { UIGridRow } from './widgets/ui-grid-row'
+import { useDisableAlignment } from './use-disable-alignment'
 
 type ActiveAlignments = { [key in Alignment]: boolean }
 
@@ -34,7 +35,6 @@ export const AlignmentButtons = React.memo(() => {
 
   const selectedViews = useRefEditorState((store) => store.editor.selectedViews)
 
-  const disableAlign = selectedViews.current.length === 0
   const disableDistribute = selectedViews.current.length < 3
 
   const activeAlignments = useActiveAlignments()
@@ -171,6 +171,9 @@ export const AlignmentButtons = React.memo(() => {
       : null
   }, [activeAlignments])
 
+  const disableJustify = useDisableAlignment(selectedViews.current, 'horizontal')
+  const disableAlign = useDisableAlignment(selectedViews.current, 'vertical')
+
   return (
     <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
       <OptionChainControl
@@ -186,19 +189,19 @@ export const AlignmentButtons = React.memo(() => {
             value: 'left',
             icon: { category: 'inspector', type: 'justify-start' },
             forceCallOnSubmitValue: true,
-            disabled: disableAlign,
+            disabled: disableJustify,
           },
           {
             value: 'hcenter',
             icon: { category: 'inspector', type: 'justify-center' },
             forceCallOnSubmitValue: true,
-            disabled: disableAlign,
+            disabled: disableJustify,
           },
           {
             value: 'right',
             icon: { category: 'inspector', type: 'justify-end' },
             forceCallOnSubmitValue: true,
-            disabled: disableAlign,
+            disabled: disableJustify,
           },
         ]}
       />
diff --git a/editor/src/components/inspector/controls/option-control.tsx b/editor/src/components/inspector/controls/option-control.tsx
index 328e71da2e21..f01c89636fce 100644
--- a/editor/src/components/inspector/controls/option-control.tsx
+++ b/editor/src/components/inspector/controls/option-control.tsx
@@ -118,7 +118,8 @@ export const OptionControl: React.FunctionComponent<
               },
             },
             '&:hover': {
-              opacity: props.controlStatus === 'disabled' ? undefined : 1,
+              opacity:
+                controlOptions.disabled || props.controlStatus === 'disabled' ? undefined : 1,
             },
             '.control-option-icon-component': {
               opacity: 0.7,
diff --git a/editor/src/components/inspector/use-disable-alignment.tsx b/editor/src/components/inspector/use-disable-alignment.tsx
new file mode 100644
index 000000000000..839ced711303
--- /dev/null
+++ b/editor/src/components/inspector/use-disable-alignment.tsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import type { ElementPath } from 'utopia-shared/src/types'
+import { MetadataUtils } from '../../core/model/element-metadata-utils'
+import type { ElementInstanceMetadata } from '../../core/shared/element-template'
+import { useEditorState, Substores } from '../editor/store/store-hook'
+import * as EP from '../../core/shared/element-path'
+
+export function useDisableAlignment(
+  selectedViews: ElementPath[],
+  orientation: 'horizontal' | 'vertical',
+) {
+  const selectedElements = useEditorState(
+    Substores.metadata,
+    (store) =>
+      selectedViews.map((path) => {
+        return {
+          element: MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, path),
+          parent: MetadataUtils.findElementByElementPath(
+            store.editor.jsxMetadata,
+            EP.parentPath(path),
+          ),
+        }
+      }),
+    'useDisableAlignment selectedElements',
+  )
+
+  return React.useMemo(() => {
+    if (selectedViews.length === 0) {
+      return true
+    }
+
+    return selectedElements.some(({ element, parent }) => {
+      return isAlignmentGroupDisabled(element, parent, orientation, selectedViews)
+    })
+  }, [selectedViews, selectedElements, orientation])
+}
+
+export function isAlignmentGroupDisabled(
+  element: ElementInstanceMetadata | null,
+  parent: ElementInstanceMetadata | null,
+  orientation: 'horizontal' | 'vertical',
+  selection: ElementPath[],
+): boolean {
+  if (element == null || parent == null) {
+    return true
+  }
+
+  // grid cells have all alignments available
+  const isGridCell = MetadataUtils.isGridLayoutedContainer(parent)
+  if (isGridCell) {
+    return false
+  }
+
+  // flex children have alignment enabled on the opposite orientation to their parent's flex direction
+  const isFlexChild = MetadataUtils.isFlexLayoutedContainer(parent)
+  if (isFlexChild) {
+    const flexDirection = MetadataUtils.getFlexDirection(parent)
+    return flexDirection === 'column' || flexDirection === 'column-reverse'
+      ? orientation === 'vertical'
+      : orientation === 'horizontal'
+  }
+
+  // absolute elements have all alignments available, unless they are storyboard children or all
+  // selected elements are storyboard children
+  if (
+    MetadataUtils.isPositionAbsolute(element) &&
+    (!EP.isStoryboardChild(element.elementPath) ||
+      (selection.length > 1 && selection.every((other) => EP.isStoryboardChild(other))))
+  ) {
+    return false
+  }
+
+  return true
+}

From 0813b9917a1568f8a57e75cdb28b1dff7ccd22f5 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 4 Oct 2024 10:27:06 +0200
Subject: [PATCH 089/272] Counter badge for grid advanced props (#6468)

**Problem:**

The grid advanced menu should show a badge with a counter for the number
of properties set.

**Fix:**

1. Show a badge to the side of the grid subsection title, if the count
is > 0 and the popup/menu are not open
2. Show a badge in the menu entry if the count is > 0



https://github.com/user-attachments/assets/1f58f8ba-7f27-442f-8a07-816f7474d9be



Fixes #6467
---
 .../add-remove-layout-system-control.tsx      | 41 +++++++++++++++++--
 .../controls/advanced-grid-modal.tsx          |  4 ++
 .../use-grid-advanced-properties.tsx          | 41 +++++++++++++++++++
 .../src/core/model/element-metadata-utils.ts  | 10 +++++
 ...performance-regression-tests.spec.tsx.snap |  8 ++++
 .../performance-regression-tests.spec.tsx     |  8 ++--
 editor/src/uuiui/radix-components.tsx         | 24 +++++++++--
 7 files changed, 125 insertions(+), 11 deletions(-)
 create mode 100644 editor/src/components/inspector/use-grid-advanced-properties.tsx

diff --git a/editor/src/components/inspector/add-remove-layout-system-control.tsx b/editor/src/components/inspector/add-remove-layout-system-control.tsx
index 9ddf99588922..6d8d5499bb3a 100644
--- a/editor/src/components/inspector/add-remove-layout-system-control.tsx
+++ b/editor/src/components/inspector/add-remove-layout-system-control.tsx
@@ -2,7 +2,14 @@
 /** @jsx jsx */
 import React from 'react'
 import { jsx } from '@emotion/react'
-import { Icons, FlexRow, SquareButton, InspectorSectionHeader, useColorTheme } from '../../uuiui'
+import {
+  Icons,
+  FlexRow,
+  SquareButton,
+  InspectorSectionHeader,
+  useColorTheme,
+  Button,
+} from '../../uuiui'
 import { Substores, useEditorState, useRefEditorState } from '../editor/store/store-hook'
 import { metadataSelector, selectedViewsSelector } from './inpector-selectors'
 import {
@@ -25,6 +32,7 @@ import { layoutSystemSelector } from './flex-section'
 import { AdvancedGridModal } from './controls/advanced-grid-modal'
 import { when } from '../../utils/react-conditionals'
 import { useDesignPanelContext } from '../canvas/design-panel-root'
+import { useGridAdvancedPropertiesCount } from './use-grid-advanced-properties'
 
 export const AddRemoveLayoutSystemControlTestId = (): string => 'AddRemoveLayoutSystemControlTestId'
 export const AddFlexLayoutOptionId = 'add-flex-layout'
@@ -117,12 +125,15 @@ export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemCont
     )
   }, [layoutSystem, popupOpen])
 
+  const numberOfGridPropsSet = useGridAdvancedPropertiesCount()
+
   const addLayoutSystemMenuDropdownItems = React.useMemo((): DropdownMenuItem[] => {
     const gridItems: DropdownMenuItem[] = [
       regularDropdownMenuItem({
         id: 'more-settings',
         label: 'Advanced',
         onSelect: openPopup,
+        badge: numberOfGridPropsSet > 0 ? `+${numberOfGridPropsSet}` : null,
       }),
       regularDropdownMenuItem({
         id: AddFlexLayoutOptionId,
@@ -169,7 +180,14 @@ export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemCont
     return stripNulls(
       layoutSystem === 'grid' ? gridItems : layoutSystem === 'flex' ? flexItems : noLayoutItems,
     )
-  }, [addFlexLayoutSystem, addGridLayoutSystem, layoutSystem, removeLayoutSystem, openPopup])
+  }, [
+    addFlexLayoutSystem,
+    addGridLayoutSystem,
+    layoutSystem,
+    removeLayoutSystem,
+    openPopup,
+    numberOfGridPropsSet,
+  ])
 
   const label = () => {
     switch (layoutSystem) {
@@ -191,6 +209,8 @@ export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemCont
     return { x: x, y: y }
   }, [panelWidth])
 
+  const [menuOpen, setMenuOpen] = React.useState(false)
+
   return (
     <InspectorSectionHeader
       css={{
@@ -223,13 +243,26 @@ export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemCont
           />,
         )}
       </FlexRow>
-      <div data-testid={AddRemoveLayoutSystemControlTestId()}>
+      <FlexRow data-testid={AddRemoveLayoutSystemControlTestId()} style={{ gap: 2 }}>
+        {when(
+          numberOfGridPropsSet > 0 && !menuOpen && !popupOpen,
+          <Button
+            style={{
+              color: colorTheme.secondaryBlue.value,
+              background: colorTheme.bg3.value,
+              minWidth: 22,
+            }}
+          >
+            +{numberOfGridPropsSet}
+          </Button>,
+        )}
         <DropdownMenu
           align='end'
           items={addLayoutSystemMenuDropdownItems}
           opener={addLayoutSystemOpenerButton}
+          onOpenChange={setMenuOpen}
         />
-      </div>
+      </FlexRow>
     </InspectorSectionHeader>
   )
 })
diff --git a/editor/src/components/inspector/controls/advanced-grid-modal.tsx b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
index 9f735385a7e8..444949fa60d4 100644
--- a/editor/src/components/inspector/controls/advanced-grid-modal.tsx
+++ b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
@@ -46,6 +46,10 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
     }
   }, [dropdownOpen, props])
 
+  /**
+   * If you edit/add/remove props here, remember to update the same values in useGridAdvancedPropertiesCount
+   * to keep the counter badge up to date displayed in the advanced menu up to date.
+   */
   const alignItemsLayoutInfo = useInspectorLayoutInfo('alignItems')
   const justifyItemsLayoutInfo = useInspectorLayoutInfo('justifyItems')
   const alignContentLayoutInfo = useInspectorLayoutInfo('alignContent')
diff --git a/editor/src/components/inspector/use-grid-advanced-properties.tsx b/editor/src/components/inspector/use-grid-advanced-properties.tsx
new file mode 100644
index 000000000000..1f00af867df8
--- /dev/null
+++ b/editor/src/components/inspector/use-grid-advanced-properties.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { countSetProperties, MetadataUtils } from '../../core/model/element-metadata-utils'
+import { Substores, useEditorState } from '../editor/store/store-hook'
+import { isLeft, right } from '../../core/shared/either'
+import { isJSXElement } from '../../core/shared/element-template'
+import { styleP } from './inspector-common'
+
+/**
+ * These should match the props managed by the Advanced menu of the Grid inspector section.
+ */
+const advancedGridProps = [
+  styleP('justifyContent'),
+  styleP('alignContent'),
+  styleP('justifyItems'),
+  styleP('alignItems'),
+]
+
+export function useGridAdvancedPropertiesCount(): number {
+  const grid = useEditorState(
+    Substores.metadata,
+    (store) => {
+      if (store.editor.selectedViews.length !== 1) {
+        return null
+      }
+      const element = MetadataUtils.findElementByElementPath(
+        store.editor.jsxMetadata,
+        store.editor.selectedViews[0],
+      )
+      return MetadataUtils.isGridLayoutedContainer(element) ? element : null
+    },
+    'useGridAdvancedProperties grids',
+  )
+
+  return React.useMemo(() => {
+    if (grid == null || isLeft(grid.element) || !isJSXElement(grid.element.value)) {
+      return 0
+    }
+
+    return countSetProperties(advancedGridProps, right(grid.element.value.props))
+  }, [grid])
+}
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index fb5587eb39d7..e9c448db5d3e 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -2924,3 +2924,13 @@ export function getZIndexOrderedViewsWithoutDirectChildren(
   })
   return filteredTargets
 }
+
+export function countSetProperties(
+  targets: PropertyPath[],
+  elementProps: PropsOrJSXAttributes,
+): number {
+  return targets.filter((curr) => {
+    const attr = getSimpleAttributeAtPath(elementProps, curr)
+    return isRight(attr) && attr.value != null
+  }, 0).length
+}
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 3ad187ea0f3f..8fb0117f29a4 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -383,6 +383,7 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
@@ -390,6 +391,7 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-vertical'",
@@ -1101,6 +1103,7 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
@@ -1108,6 +1111,7 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-vertical'",
@@ -1983,6 +1987,7 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
@@ -1990,6 +1995,7 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-vertical'",
@@ -3024,6 +3030,7 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-horizontal'",
@@ -3031,6 +3038,7 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//span",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='item-container-distribute-vertical'",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index 0398f133d305..23838a562b02 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`856`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`858`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1108`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1110`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`649`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`651`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`774`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`776`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })
diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx
index 4d1192f407b0..ad8787c65c6d 100644
--- a/editor/src/uuiui/radix-components.tsx
+++ b/editor/src/uuiui/radix-components.tsx
@@ -53,6 +53,7 @@ type RegularDropdownMenuItem = BaseDropdownMenuItem & {
   label: React.ReactNode
   onSelect: () => void
   disabled?: boolean
+  badge?: string | null
 }
 
 export function regularDropdownMenuItem(
@@ -158,11 +159,24 @@ export const DropdownMenu = React.memo<DropdownMenuProps>((props) => {
                       : item.disabled
                       ? 'inherit'
                       : undefined,
+                    [`.item-badge-${item.id}`]: {
+                      color: 'inherit',
+                    },
                   },
                   cursor: item.disabled ? 'default' : undefined,
+                  [`.item-badge-${item.id}`]: {
+                    color: colorTheme.secondaryBlue.value,
+                  },
                 }}
               >
-                <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+                <div
+                  style={{
+                    display: 'flex',
+                    gap: 4,
+                    alignItems: 'center',
+                    width: '100%',
+                  }}
+                >
                   {when(
                     shouldShowCheckboxes,
                     <div style={{ opacity: item.checked ? 1 : 0 }}>
@@ -173,9 +187,13 @@ export const DropdownMenu = React.memo<DropdownMenuProps>((props) => {
                     shouldShowIcons,
                     <div style={{ opacity: item.icon == null ? 0 : 1 }}>{item.icon}</div>,
                   )}
-                  <span>{item.label}</span>
+                  <span style={{ flex: 1 }}>{item.label}</span>
+                  {when(
+                    item.badge != null,
+                    <span className={`item-badge-${item.id}`}>{item.badge}</span>,
+                  )}
                 </div>
-                <span style={{ opacity: 0.5 }}>{item.shortcut}</span>
+                {when(item.shortcut != null, <span style={{ opacity: 0.5 }}>{item.shortcut}</span>)}
               </RadixItemContainer>
             )
           })}

From e0b99ea76362c05d69b6da655e7fee984232691a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Fri, 4 Oct 2024 11:21:16 +0200
Subject: [PATCH 090/272] call `fixElementsToRerender` last in
 `collectElementsToRerender` (#6471)

## Problem
`fixElementsToRerender` needs to be called last in
`collectElementsToRerender`, since it needs to store all elements paths
passed to it in `lastElementsToRerender`. Otherwise, any subsequent
elements paths that are calculated based on the return value won't be
cleared from the metadata

## Fix
Re-order the contents of `collectElementsToRerender` so that
`fixElementsToRerender` can store all element paths that
`collectElementsToRerender` collected
---
 editor/src/templates/editor.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index 539183cdd1f2..8f9350ce9114 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -200,18 +200,18 @@ export function collectElementsToRerender(
       ? elementsToRerenderTransient
       : editorStore.patchedEditor.canvas.elementsToRerender
 
-  const fixedElementsToRerender = fixElementsToRerender(elementsToRerender)
   const fixedElementsWithChildGroups =
-    fixedElementsToRerender === 'rerender-all-elements'
-      ? fixedElementsToRerender
+    elementsToRerender === 'rerender-all-elements'
+      ? elementsToRerender
       : [
-          ...fixedElementsToRerender,
+          ...elementsToRerender,
           ...getChildGroupsForNonGroupParents(
             editorStore.patchedEditor.jsxMetadata,
-            fixedElementsToRerender,
+            elementsToRerender,
           ),
         ]
-  return fixedElementsWithChildGroups
+  const fixedElementsToRerender = fixElementsToRerender(fixedElementsWithChildGroups)
+  return fixedElementsToRerender
 }
 
 export class Editor {

From 1d8cda11820152e82aa603cfadb65868134f19ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Fri, 4 Oct 2024 11:54:30 +0200
Subject: [PATCH 091/272] Specify elements to rerender during absolute resize
 (#6450)

## Problems
The absolute resize strategy rerenders all elements at the end of the
interaction, which is unnecessary

## Fix
only re-render the elements affected by the resize
---
 .../strategies/absolute-resize-bounding-box-strategy.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
index 19b27d644757..25fef072f5bb 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
@@ -296,7 +296,7 @@ export function absoluteResizeBoundingBoxStrategy(
                 updateHighlightedViews('mid-interaction', []),
                 setCursorCommand(pickCursorFromEdgePosition(edgePosition)),
               ],
-              lifecycle === 'mid-interaction' ? retargetedTargets : 'rerender-all-elements',
+              retargetedTargets,
             )
           }
         } else {

From 166753b29c7c4d45af6d22922e459a378f620fd1 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Fri, 4 Oct 2024 15:09:19 +0200
Subject: [PATCH 092/272] Fix reparenting into grid (#6475)

**Problem:**
Reparenting into grid containers is broken.

**Fix:**
To reparent into a grid container we need grid cell measurements. The
dom sampler can only measure the grid cells when the controls are
displayed. The controls are displayed on hover during the interaction,
so this is is possible, but recently strategies were optimized by always
providing elementsToRerender values, which did not include the new
parent. So the grid controls were displayed, but not measured.
In case of grid reparent we need to make sure that the dom sampler can
measure the new parent, so the intendedParentPath has to be in
elementsToRerender.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../grid-rearrange-move-strategy.ts           | 25 ++++++++++++++-----
 ...grid-reparent-strategies.spec.browser2.tsx |  3 +--
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index dd30a943a8b4..da300050fd1a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -130,7 +130,7 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
         ),
       ]
 
-      const { commands, patch } =
+      const { commands, patch, elementsToRerender } =
         strategyToApply.type === 'GRID_REARRANGE'
           ? getCommandsAndPatchForGridRearrange(
               canvasState,
@@ -155,7 +155,7 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
 
       return strategyApplicationResult(
         [...midInteractionCommands, ...onCompleteCommands, ...commands],
-        [parentGridPath],
+        elementsToRerender,
         patch,
       )
     },
@@ -167,9 +167,13 @@ function getCommandsAndPatchForGridRearrange(
   interactionData: DragInteractionData,
   customState: CustomStrategyState,
   selectedElement: ElementPath,
-): { commands: CanvasCommand[]; patch: CustomStrategyStatePatch } {
+): {
+  commands: CanvasCommand[]
+  patch: CustomStrategyStatePatch
+  elementsToRerender: ElementPath[]
+} {
   if (interactionData.drag == null) {
-    return { commands: [], patch: {} }
+    return { commands: [], patch: {}, elementsToRerender: [] }
   }
 
   const {
@@ -197,6 +201,7 @@ function getCommandsAndPatchForGridRearrange(
         currentRootCell: targetRootCell,
       },
     },
+    elementsToRerender: [EP.parentPath(selectedElement)],
   }
 }
 
@@ -209,9 +214,13 @@ function getCommandsAndPatchForReparent(
   targetElement: ElementPath,
   strategyLifecycle: InteractionLifecycle,
   gridFrame: CanvasRectangle,
-): { commands: CanvasCommand[]; patch: CustomStrategyStatePatch } {
+): {
+  commands: CanvasCommand[]
+  patch: CustomStrategyStatePatch
+  elementsToRerender: ElementPath[]
+} {
   if (interactionData.drag == null) {
-    return { commands: [], patch: {} }
+    return { commands: [], patch: {}, elementsToRerender: [] }
   }
 
   function applyReparent() {
@@ -285,6 +294,10 @@ function getCommandsAndPatchForReparent(
   return {
     commands: commands,
     patch: result.customStatePatch,
+    elementsToRerender: [
+      EP.parentPath(targetElement),
+      strategy.target.newParent.intendedParentPath,
+    ],
   }
 }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
index fe76a4578c6d..96f1fa5a14a6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
@@ -577,8 +577,7 @@ describe('grid reparent strategies', () => {
         ),
       )
     })
-    // disabling flaky test
-    xit('into a grid container', async () => {
+    it('into a grid container', async () => {
       const editor = await renderTestEditorWithCode(
         makeTestProjectCode({
           insideGrid: `

From 0cdefdf75bc84e60e79312a161917da904c8475e Mon Sep 17 00:00:00 2001
From: McKayla Lankau <lankaukk@yahoo.com>
Date: Fri, 4 Oct 2024 10:08:44 -0400
Subject: [PATCH 093/272] Fix width of toolbar url input (#6470)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before:
<img width="352" alt="Screenshot 2024-10-03 at 2 11 38 PM"
src="https://github.com/user-attachments/assets/a767f00c-8546-48a8-91e7-e3e8833aa922">

After:
<img width="345" alt="Screenshot 2024-10-03 at 2 11 18 PM"
src="https://github.com/user-attachments/assets/be6400c6-f3a3-496e-b0c3-c3b0488a3505">
---
 editor/src/components/editor/remix-navigation-bar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/editor/src/components/editor/remix-navigation-bar.tsx b/editor/src/components/editor/remix-navigation-bar.tsx
index 4b03f1e33e39..e83e2a763956 100644
--- a/editor/src/components/editor/remix-navigation-bar.tsx
+++ b/editor/src/components/editor/remix-navigation-bar.tsx
@@ -137,13 +137,11 @@ export const RemixNavigationBar = React.memo(() => {
     <FlexRow
       style={{
         gap: 10,
-        alignSelf: 'stretch',
-        alignItems: 'center',
-        justifyContent: 'center',
         pointerEvents: 'initial',
         userSelect: 'none',
         padding: '0 8px',
         height: 32,
+        width: '100%',
       }}
       onMouseDown={stopPropagation}
       onClick={stopPropagation}
@@ -201,8 +199,10 @@ export const RemixNavigationBar = React.memo(() => {
           padding: '2px 2px 2px 6px',
           fontSize: 11,
           minWidth: 150,
+          flexGrow: 1,
           height: 20,
           alignItems: 'center',
+          justifyContent: 'space-between',
         }}
       >
         <StringInput

From 3cdcd1aa45d3af8cefe2e0ffece1940e131d835b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Fri, 4 Oct 2024 16:21:44 +0200
Subject: [PATCH 094/272] Remove `'rerender-all-elements'` as a possible value
 from `StrategyApplicationResult.elementsToRerender` (#6434)

## Problem
Now that all strategies return an element path array in
`StrategyApplicationResult.elementsToRerender`,
`'rerender-all-elements'` is never used as a possible value. Also, for
performance reasons, we want to disallow rerendering all elements from
strategies, since all strategies work on a specific set of elements

## Fix
- Refactor `StrategyApplicationResult.elementsToRerender` to
`ElementPath[]`, and fix any affected code
- Return the target grid for sampling the grid reparent and draw-to-grid
strategy
---
 .../canvas/canvas-strategies/canvas-strategy-types.ts |  8 ++++----
 .../absolute-reparent-strategy-canvas.spec.tsx        |  6 +-----
 .../strategies/absolute-reparent-strategy.spec.tsx    |  6 +-----
 .../strategies/ancestor-metastrategy.tsx              | 11 ++++-------
 .../strategies/grid-draw-to-insert-strategy.tsx       |  2 +-
 .../strategies/grid-reparent-strategy.tsx             |  5 +++--
 .../canvas-strategies/strategies/reorder-utils.ts     |  2 +-
 .../canvas-strategy-picker.spec.browser2.tsx          |  8 ++++----
 .../editor/store/dispatch-strategies.spec.tsx         |  6 +++---
 .../components/editor/store/dispatch-strategies.tsx   |  6 +++---
 editor/src/components/editor/store/editor-state.ts    | 11 -----------
 11 files changed, 25 insertions(+), 46 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
index cbf09892f86c..2ba1bcf77e78 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
@@ -10,7 +10,7 @@ import type { ElementPath, NodeModules } from '../../../core/shared/project-file
 import type { ProjectContentTreeRoot } from '../../assets'
 import type { PropertyControlsInfo } from '../../custom-code/code-file'
 import type { InsertionSubject } from '../../editor/editor-modes'
-import type { AllElementProps, ElementsToRerender } from '../../editor/store/editor-state'
+import type { AllElementProps } from '../../editor/store/editor-state'
 import type { CanvasCommand } from '../commands/commands'
 import type { ActiveFrameAction } from '../commands/set-active-frames-command'
 import type { StrategyApplicationStatus } from './interaction-state'
@@ -58,21 +58,21 @@ export function defaultCustomStrategyState(): CustomStrategyState {
 
 export interface StrategyApplicationResult {
   commands: Array<CanvasCommand>
-  elementsToRerender: ElementsToRerender
+  elementsToRerender: ElementPath[]
   customStatePatch: CustomStrategyStatePatch
   status: StrategyApplicationStatus
 }
 
 export const emptyStrategyApplicationResult: StrategyApplicationResult = {
   commands: [],
-  elementsToRerender: 'rerender-all-elements',
+  elementsToRerender: [],
   customStatePatch: {},
   status: 'success',
 }
 
 export function strategyApplicationResult(
   commands: Array<CanvasCommand>,
-  elementsToRerender: ElementsToRerender,
+  elementsToRerender: ElementPath[],
   customStatePatch: CustomStrategyStatePatch = {},
   status: StrategyApplicationStatus = 'success',
 ): StrategyApplicationResult {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy-canvas.spec.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy-canvas.spec.tsx
index e7c5460c10c9..1e10e820b95b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy-canvas.spec.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy-canvas.spec.tsx
@@ -152,11 +152,7 @@ function reparentElement(
   expect(strategyResult.customStatePatch).toEqual({})
   expect(strategyResult.status).toEqual('success')
 
-  expect(
-    strategyResult.elementsToRerender === 'rerender-all-elements'
-      ? []
-      : strategyResult.elementsToRerender.map(EP.parentPath),
-  ).toEqual([newParent])
+  expect(strategyResult.elementsToRerender.map(EP.parentPath)).toEqual([newParent])
 
   const finalEditor = foldAndApplyCommands(
     editorState,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.tsx
index b1832b2f795b..ed2b95df96ac 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.tsx
@@ -223,11 +223,7 @@ function reparentElement(
     expect(strategyResult.customStatePatch).toEqual({})
     expect(strategyResult.status).toEqual('success')
 
-    expect(
-      strategyResult.elementsToRerender === 'rerender-all-elements'
-        ? []
-        : strategyResult.elementsToRerender.map(EP.parentPath),
-    ).toEqual([newParent])
+    expect(strategyResult.elementsToRerender.map(EP.parentPath)).toEqual([newParent])
 
     return foldAndApplyCommands(
       editorState,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/ancestor-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/ancestor-metastrategy.tsx
index 123b4f4a8fcd..ff5db3fc3121 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/ancestor-metastrategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/ancestor-metastrategy.tsx
@@ -1,7 +1,3 @@
-import {
-  combineElementsToRerender,
-  type ElementsToRerender,
-} from '../../../../components/editor/store/editor-state'
 import {
   getSimpleAttributeAtPath,
   MetadataUtils,
@@ -27,6 +23,7 @@ import { retargetStrategyToChildrenOfFragmentLikeElements } from './fragment-lik
 import type { Optic } from '../../../../core/shared/optics/optics'
 import { filtered, fromField } from '../../../../core/shared/optics/optic-creators'
 import { modify } from '../../../../core/shared/optics/optic-utilities'
+import type { ElementPath } from '../../../../core/shared/project-file-types'
 
 const ANCESTOR_INCOMPATIBLE_STRATEGIES = [DoNothingStrategyID]
 
@@ -204,21 +201,21 @@ export function appendCommandsToApplyResult(
   }
 }
 
-const strategyResultElementsToRerenderOptic: Optic<StrategyApplicationResult, ElementsToRerender> =
+const strategyResultElementsToRerenderOptic: Optic<StrategyApplicationResult, ElementPath[]> =
   filtered<StrategyApplicationResult>((result) => result.status === 'success').compose(
     fromField('elementsToRerender'),
   )
 
 export function appendElementsToRerenderToApplyResult(
   applyFn: ApplyFn,
-  additionalElementsToRerender: ElementsToRerender,
+  additionalElementsToRerender: ElementPath[],
 ): ApplyFn {
   return (strategyLifecycle: InteractionLifecycle) => {
     const result = applyFn(strategyLifecycle)
     return modify(
       strategyResultElementsToRerenderOptic,
       (toRerender) => {
-        return combineElementsToRerender(toRerender, additionalElementsToRerender)
+        return [...toRerender, ...additionalElementsToRerender]
       },
       result,
     )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index 09d94e3d42d0..58a4d5663525 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -180,7 +180,7 @@ const gridDrawToInsertStrategyInner =
               showGridControls('mid-interaction', targetParent),
               updateHighlightedViews('mid-interaction', [targetParent]),
             ],
-            [],
+            [targetParent],
             customStatePatch,
           )
         }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index edb811c545cd..bfa996436f1b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -174,7 +174,7 @@ export function applyGridReparent(
           )
 
         if (grid == null) {
-          return emptyStrategyApplicationResult
+          return strategyApplicationResult([], [newParent.intendedParentPath])
         }
 
         const allowedToReparent = selectedElements.every((selectedElement) => {
@@ -200,7 +200,7 @@ export function applyGridReparent(
           customStrategyState.grid.targetCellData
 
         if (targetCellData == null) {
-          return emptyStrategyApplicationResult
+          return strategyApplicationResult([], [newParent.intendedParentPath])
         }
         const outcomes = mapDropNulls(
           (selectedElement) =>
@@ -240,6 +240,7 @@ export function applyGridReparent(
           ...newPaths,
           ...newPaths.map(EP.parentPath),
           ...selectedElements.map(EP.parentPath),
+          newParent.intendedParentPath,
         ])
 
         const baseCustomState = updatedCustomState ?? customStrategyState
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reorder-utils.ts b/editor/src/components/canvas/canvas-strategies/strategies/reorder-utils.ts
index 7900e6a2eb93..7031a7ad78f6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reorder-utils.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reorder-utils.ts
@@ -130,7 +130,7 @@ export function applyReorderCommon(
     }
   } else {
     // Fallback for when the checks above are not satisfied.
-    return strategyApplicationResult([setCursorCommand(CSSCursor.Move)], 'rerender-all-elements')
+    return strategyApplicationResult([setCursorCommand(CSSCursor.Move)], [])
   }
 }
 
diff --git a/editor/src/components/canvas/controls/select-mode/canvas-strategy-picker.spec.browser2.tsx b/editor/src/components/canvas/controls/select-mode/canvas-strategy-picker.spec.browser2.tsx
index a3dfe5df0d87..feb540d8191e 100644
--- a/editor/src/components/canvas/controls/select-mode/canvas-strategy-picker.spec.browser2.tsx
+++ b/editor/src/components/canvas/controls/select-mode/canvas-strategy-picker.spec.browser2.tsx
@@ -32,7 +32,7 @@ const BestStrategy: CanvasStrategy = {
   icon: { category: 'tools', type: 'pointer' },
   controlsToRender: [],
   fitness: 10,
-  apply: () => strategyApplicationResult([], 'rerender-all-elements'),
+  apply: () => strategyApplicationResult([], []),
 }
 
 const AverageStrategy: CanvasStrategy = {
@@ -42,7 +42,7 @@ const AverageStrategy: CanvasStrategy = {
   icon: { category: 'tools', type: 'pointer' },
   controlsToRender: [],
   fitness: 5,
-  apply: () => strategyApplicationResult([], 'rerender-all-elements'),
+  apply: () => strategyApplicationResult([], []),
 }
 
 const WorstStrategy: CanvasStrategy = {
@@ -52,7 +52,7 @@ const WorstStrategy: CanvasStrategy = {
   icon: { category: 'tools', type: 'pointer' },
   controlsToRender: [],
   fitness: 1,
-  apply: () => strategyApplicationResult([], 'rerender-all-elements'),
+  apply: () => strategyApplicationResult([], []),
 }
 
 const UnfitStrategy: CanvasStrategy = {
@@ -62,7 +62,7 @@ const UnfitStrategy: CanvasStrategy = {
   icon: { category: 'tools', type: 'pointer' },
   controlsToRender: [],
   fitness: 0,
-  apply: () => strategyApplicationResult([], 'rerender-all-elements'),
+  apply: () => strategyApplicationResult([], []),
 }
 
 // Deliberately not in sorted order
diff --git a/editor/src/components/editor/store/dispatch-strategies.spec.tsx b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
index dbb51ea5f9cb..f2788b0c7837 100644
--- a/editor/src/components/editor/store/dispatch-strategies.spec.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
@@ -159,7 +159,7 @@ const testStrategy: MetaCanvasStrategy = (
     apply: function (): StrategyApplicationResult {
       return strategyApplicationResult(
         [wildcardPatch('always', { canvas: { scale: { $set: 100 } } })],
-        'rerender-all-elements',
+        [],
       )
     },
     descriptiveLabel: 'A Test Strategy',
@@ -993,7 +993,7 @@ describe('only update metadata on SAVE_DOM_REPORT', () => {
             },
             apply: function (): StrategyApplicationResult {
               if (interactionSession == null) {
-                return strategyApplicationResult([], 'rerender-all-elements')
+                return strategyApplicationResult([], [])
               }
               expect(canvasState.startingMetadata).not.toBe(interactionSession.latestMetadata)
               expect(canvasState.startingAllElementProps).not.toBe(
@@ -1020,7 +1020,7 @@ describe('only update metadata on SAVE_DOM_REPORT', () => {
                   .backgroundColor,
               ).toBeDefined()
               testStrategyRan = true
-              return strategyApplicationResult([], 'rerender-all-elements')
+              return strategyApplicationResult([], [])
             },
           },
         ],
diff --git a/editor/src/components/editor/store/dispatch-strategies.tsx b/editor/src/components/editor/store/dispatch-strategies.tsx
index 0d902f940f66..994c9e322cdc 100644
--- a/editor/src/components/editor/store/dispatch-strategies.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.tsx
@@ -103,7 +103,7 @@ export function interactionFinished(
             result.strategyState.customStrategyState,
             'end-interaction',
           )
-        : strategyApplicationResult([], 'rerender-all-elements')
+        : strategyApplicationResult([], [])
     const commandResult = foldAndApplyCommands(
       newEditorState,
       storedState.patchedEditor,
@@ -555,7 +555,7 @@ function handleAccumulatingKeypresses(
               strategyState.customStrategyState,
               'mid-interaction',
             )
-          : strategyApplicationResult([], 'rerender-all-elements')
+          : strategyApplicationResult([], [])
       const commandResult = foldAndApplyCommands(
         updatedEditorState,
         storedEditorState,
@@ -623,7 +623,7 @@ function handleUpdate(
             strategyState.customStrategyState,
             'mid-interaction',
           )
-        : strategyApplicationResult([], 'rerender-all-elements')
+        : strategyApplicationResult([], [])
     const commandResult = foldAndApplyCommands(
       newEditorState,
       storedEditorState,
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index 633fe15505e7..1e83b99dda2f 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -852,17 +852,6 @@ export function editorStateCanvasControls(
 
 export type ElementsToRerender = Array<ElementPath> | 'rerender-all-elements'
 
-export function combineElementsToRerender(
-  first: ElementsToRerender,
-  second: ElementsToRerender,
-): ElementsToRerender {
-  if (first === 'rerender-all-elements' || second === 'rerender-all-elements') {
-    return 'rerender-all-elements'
-  } else {
-    return [...first, ...second]
-  }
-}
-
 export interface InternalClipboard {
   styleClipboard: Array<ValueAtPath>
   elements: Array<CopyData>

From 25f465f3373d346ecba2180907649bc43c927f2d Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Fri, 4 Oct 2024 17:07:17 +0100
Subject: [PATCH 095/272] Grid Placeholder Outside Cells (#6462)

- Created `GridControl` component and put the grid specific elements
inside it.
- Added `gridPlaceholderTopOrLeftPosition` and
`gridPlaceholderWidthOrHeight` utility functions.
- Added div for placeholder borders so that it can be relative to the
grid cell position.
---
 .../canvas/controls/grid-controls.tsx         | 743 +++++++++---------
 1 file changed, 386 insertions(+), 357 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 8108479d5ce4..db6ed6b586d3 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -496,6 +496,7 @@ export type GridData = {
   cells: number
   metadata: ElementInstanceMetadata
 }
+
 export function useGridData(elementPaths: ElementPath[]): GridData[] {
   const grids = useEditorState(
     Substores.metadata,
@@ -656,23 +657,35 @@ export const GridRowColumnResizingControls =
 
 export const GridControlsKey = (gridPath: ElementPath) => `grid-controls-${EP.toString(gridPath)}`
 
-export interface GridControlsProps {
-  targets: ElementPath[]
+export interface GridControlProps {
+  grid: GridData
 }
 
-export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ targets }) => {
+export const GridControl = React.memo<GridControlProps>(({ grid }) => {
   const dispatch = useDispatch()
   const controls = useAnimationControls()
   const colorTheme = useColorTheme()
   const features = useRollYourOwnFeatures()
 
-  const canvasOffsetRef = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
-  const scale = useEditorState(
+  const editorMetadata = useEditorState(
+    Substores.metadata,
+    (store) => store.editor.jsxMetadata,
+    'GridControl editorMetadata',
+  )
+
+  const interactionLatestMetadata = useEditorState(
     Substores.canvas,
-    (store) => store.editor.canvas.scale,
-    'GridControls scale',
+    (store) =>
+      store.editor.canvas.interactionSession?.interactionData.type === 'DRAG'
+        ? store.editor.canvas.interactionSession.latestMetadata
+        : null,
+    'GridControl interactionLatestMetadata',
+  )
+
+  const jsxMetadata = React.useMemo(
+    () => interactionLatestMetadata ?? editorMetadata,
+    [interactionLatestMetadata, editorMetadata],
   )
-  const metadataRef = useRefEditorState((store) => store.editor.jsxMetadata)
 
   const activelyDraggingOrResizingCell = useEditorState(
     Substores.canvas,
@@ -684,111 +697,23 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
       store.editor.canvas.interactionSession?.interactionData.drag != null
         ? store.editor.canvas.interactionSession.activeControl.id
         : null,
-    'GridControls activelyDraggingOrResizingCell',
-  )
-
-  const { hoveringStart, mouseCanvasPosition } = useMouseMove(activelyDraggingOrResizingCell)
-
-  const targetRootCell = useEditorState(
-    Substores.restOfStore,
-    (store) => store.strategyState.customStrategyState.grid.currentRootCell,
-    'GridControls targetRootCell',
+    'GridControl activelyDraggingOrResizingCell',
   )
 
   const currentHoveredCell = useEditorState(
     Substores.restOfStore,
     (store) =>
       store.strategyState.customStrategyState.grid.targetCellData?.gridCellCoordinates ?? null,
-    'GridControls currentHoveredCell',
-  )
-
-  const dragging = useEditorState(
-    Substores.canvas,
-    (store) =>
-      store.editor.canvas.interactionSession != null &&
-      store.editor.canvas.interactionSession.activeControl.type === 'GRID_CELL_HANDLE'
-        ? store.editor.canvas.interactionSession.activeControl.id
-        : null,
-    'GridControls dragging',
-  )
-
-  const interactionData = useEditorState(
-    Substores.canvas,
-    (store) =>
-      store.editor.canvas.interactionSession?.interactionData.type === 'DRAG'
-        ? store.editor.canvas.interactionSession.interactionData
-        : null,
-    'GridControls interactionData',
-  )
-
-  const interactionLatestMetadata = useEditorState(
-    Substores.canvas,
-    (store) =>
-      store.editor.canvas.interactionSession?.interactionData.type === 'DRAG'
-        ? store.editor.canvas.interactionSession.latestMetadata
-        : null,
-    'GridControls interactionLatestMetadata',
+    'GridControl currentHoveredCell',
   )
 
-  const editorMetadata = useEditorState(
+  const targetsAreCellsWithPositioning = useEditorState(
     Substores.metadata,
-    (store) => store.editor.jsxMetadata,
-    'GridControls editorMetadata',
-  )
-
-  const jsxMetadata = React.useMemo(
-    () => interactionLatestMetadata ?? editorMetadata,
-    [interactionLatestMetadata, editorMetadata],
-  )
-
-  const hoveredGrids = useEditorState(
-    Substores.canvas,
-    (store) => stripNulls([store.editor.canvas.controls.gridControls]),
-    'FlexReparentTargetIndicator lines',
-  )
-
-  const grids = useGridData([...targets, ...hoveredGrids])
-
-  const cells = React.useMemo(() => {
-    return grids.flatMap((grid) => {
-      const children = MetadataUtils.getChildrenUnordered(jsxMetadata, grid.elementPath)
-      return mapDropNulls((cell, index) => {
-        if (cell == null || cell.globalFrame == null || !isFiniteRectangle(cell.globalFrame)) {
-          return null
-        }
-        const countedRow = Math.floor(index / grid.columns) + 1
-        const countedColumn = Math.floor(index % grid.columns) + 1
-
-        const columnFromProps = cell.specialSizeMeasurements.elementGridProperties.gridColumnStart
-        const rowFromProps = cell.specialSizeMeasurements.elementGridProperties.gridRowStart
-        return {
-          elementPath: cell.elementPath,
-          globalFrame: cell.globalFrame,
-          borderRadius: cell.specialSizeMeasurements.borderRadius,
-          column:
-            columnFromProps == null
-              ? countedColumn
-              : isCSSKeyword(columnFromProps)
-              ? countedColumn
-              : columnFromProps.numericalPosition ?? countedColumn,
-          row:
-            rowFromProps == null
-              ? countedRow
-              : isCSSKeyword(rowFromProps)
-              ? countedRow
-              : rowFromProps.numericalPosition ?? countedRow,
-          index: index,
-        }
-      }, children)
-    })
-  }, [grids, jsxMetadata])
-
-  const shadow = React.useMemo(() => {
-    return cells.find((cell) => EP.toUid(cell.elementPath) === dragging) ?? null
-  }, [cells, dragging])
-
-  const [initialShadowFrame, setInitialShadowFrame] = React.useState<CanvasRectangle | null>(
-    shadow?.globalFrame ?? null,
+    (store) =>
+      store.editor.selectedViews.every((elementPath) =>
+        MetadataUtils.isGridCellWithPositioning(store.editor.jsxMetadata, elementPath),
+      ),
+    'GridControl targetsAreCellsWithPositioning',
   )
 
   const anyTargetAbsolute = useEditorState(
@@ -799,41 +724,16 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
           MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, elementPath),
         ),
       ),
-    'GridControls anyTargetAbsolute',
+    'GridControl anyTargetAbsolute',
   )
 
-  const targetsAreCellsWithPositioning = useEditorState(
-    Substores.metadata,
-    (store) =>
-      store.editor.selectedViews.every((elementPath) =>
-        MetadataUtils.isGridCellWithPositioning(store.editor.jsxMetadata, elementPath),
-      ),
-    'GridControls anyTargetAbsolute',
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'GridControl scale',
   )
 
-  const gridPath = optionalMap(EP.parentPath, shadow?.elementPath)
-
-  const gridFrame = React.useMemo(() => {
-    if (gridPath == null) {
-      return zeroRectangle
-    }
-    const maybeGridFrame = MetadataUtils.findElementByElementPath(
-      metadataRef.current,
-      gridPath,
-    )?.globalFrame
-    if (maybeGridFrame == null || !isFiniteRectangle(maybeGridFrame)) {
-      return zeroRectangle
-    }
-    return maybeGridFrame
-  }, [gridPath, metadataRef])
-
-  useCellAnimation({
-    disabled: anyTargetAbsolute,
-    targetRootCell: targetRootCell,
-    controls: controls,
-    shadowFrame: initialShadowFrame,
-    gridPath: gridPath,
-  })
+  const canvasOffsetRef = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
 
   const startInteractionWithUid = React.useCallback(
     (params: { uid: string; row: number; column: number; frame: CanvasRectangle }) =>
@@ -860,6 +760,67 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
     [canvasOffsetRef, dispatch, scale],
   )
 
+  const cells = React.useMemo(() => {
+    const children = MetadataUtils.getChildrenUnordered(jsxMetadata, grid.elementPath)
+    return mapDropNulls((cell, index) => {
+      if (cell == null || cell.globalFrame == null || !isFiniteRectangle(cell.globalFrame)) {
+        return null
+      }
+      const countedRow = Math.floor(index / grid.columns) + 1
+      const countedColumn = Math.floor(index % grid.columns) + 1
+
+      const columnFromProps = cell.specialSizeMeasurements.elementGridProperties.gridColumnStart
+      const rowFromProps = cell.specialSizeMeasurements.elementGridProperties.gridRowStart
+      return {
+        elementPath: cell.elementPath,
+        globalFrame: cell.globalFrame,
+        borderRadius: cell.specialSizeMeasurements.borderRadius,
+        column:
+          columnFromProps == null
+            ? countedColumn
+            : isCSSKeyword(columnFromProps)
+            ? countedColumn
+            : columnFromProps.numericalPosition ?? countedColumn,
+        row:
+          rowFromProps == null
+            ? countedRow
+            : isCSSKeyword(rowFromProps)
+            ? countedRow
+            : rowFromProps.numericalPosition ?? countedRow,
+        index: index,
+      }
+    }, children)
+  }, [grid, jsxMetadata])
+
+  const dragging = useEditorState(
+    Substores.canvas,
+    (store) =>
+      store.editor.canvas.interactionSession != null &&
+      store.editor.canvas.interactionSession.activeControl.type === 'GRID_CELL_HANDLE'
+        ? store.editor.canvas.interactionSession.activeControl.id
+        : null,
+    'GridControl dragging',
+  )
+
+  const shadow = React.useMemo(() => {
+    return cells.find((cell) => EP.toUid(cell.elementPath) === dragging) ?? null
+  }, [cells, dragging])
+
+  const [initialShadowFrame, setInitialShadowFrame] = React.useState<CanvasRectangle | null>(
+    shadow?.globalFrame ?? null,
+  )
+
+  const interactionData = useEditorState(
+    Substores.canvas,
+    (store) =>
+      store.editor.canvas.interactionSession?.interactionData.type === 'DRAG'
+        ? store.editor.canvas.interactionSession.interactionData
+        : null,
+    'GridControl interactionData',
+  )
+
+  const { hoveringStart, mouseCanvasPosition } = useMouseMove(activelyDraggingOrResizingCell)
+
   // NOTE: this stuff is meant to be temporary, until we settle on the set of interaction pieces we like.
   // After that, we should get rid of this.
   const shadowPosition = React.useMemo(() => {
@@ -902,255 +863,311 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
     return {
       x: wrapCoord(
         getCoord('x', 'width') ?? 0,
-        gridFrame.x,
-        gridFrame.x + gridFrame.width,
+        grid.frame.x,
+        grid.frame.x + grid.frame.width,
         shadow.globalFrame.width,
       ),
       y: wrapCoord(
         getCoord('y', 'height') ?? 0,
-        gridFrame.y,
-        gridFrame.y + gridFrame.height,
+        grid.frame.y,
+        grid.frame.y + grid.frame.height,
         shadow.globalFrame.height,
       ),
     }
   }, [
-    features,
-    initialShadowFrame,
     interactionData,
-    shadow,
+    initialShadowFrame,
     hoveringStart,
+    shadow,
+    grid.frame.x,
+    grid.frame.width,
+    grid.frame.y,
+    grid.frame.height,
+    features.Grid.dragVerbatim,
+    features.Grid.dragMagnetic,
+    features.Grid.dragRatio,
     mouseCanvasPosition,
-    gridFrame,
   ])
 
-  if (grids.length === 0) {
-    return null
-  }
+  const gridPath = optionalMap(EP.parentPath, shadow?.elementPath)
 
-  return (
-    <div id={'grid-controls'}>
-      <CanvasOffsetWrapper>
-        {/* grid lines */}
-        {grids.map((grid) => {
-          const placeholders = Array.from(Array(grid.cells).keys())
-          let style: CSSProperties = {
-            position: 'absolute',
-            top: grid.frame.y - 1, // account for border!
-            left: grid.frame.x - 1, // account for border!
-            width: grid.frame.width,
-            height: grid.frame.height,
-            display: 'grid',
-            gridTemplateColumns: getNullableAutoOrTemplateBaseString(grid.gridTemplateColumns),
-            gridTemplateRows: getNullableAutoOrTemplateBaseString(grid.gridTemplateRows),
-            backgroundColor:
-              activelyDraggingOrResizingCell != null
-                ? features.Grid.activeGridBackground
-                : 'transparent',
-            border: `1px solid ${
-              activelyDraggingOrResizingCell != null ? colorTheme.primary.value : 'transparent'
-            }`,
-            justifyContent: grid.justifyContent ?? 'initial',
-            alignContent: grid.alignContent ?? 'initial',
-            pointerEvents: 'none',
-            padding:
-              grid.padding == null
-                ? 0
-                : `${grid.padding.top}px ${grid.padding.right}px ${grid.padding.bottom}px ${grid.padding.left}px`,
-          }
+  const targetRootCell = useEditorState(
+    Substores.restOfStore,
+    (store) => store.strategyState.customStrategyState.grid.currentRootCell,
+    'GridControl targetRootCell',
+  )
 
-          // Gap needs to be set only if the other two are not present or we'll have rendering issues
-          // due to how measurements are calculated.
-          if (grid.rowGap != null && grid.columnGap != null) {
-            style.rowGap = grid.rowGap
-            style.columnGap = grid.columnGap
-          } else {
-            if (grid.gap != null) {
-              style.gap = grid.gap
-            }
-            if (grid.rowGap != null) {
-              style.rowGap = grid.rowGap
-            }
-            if (grid.columnGap != null) {
-              style.columnGap = grid.columnGap
-            }
-          }
+  useCellAnimation({
+    disabled: anyTargetAbsolute,
+    targetRootCell: targetRootCell,
+    controls: controls,
+    shadowFrame: initialShadowFrame,
+    gridPath: gridPath,
+  })
 
+  const placeholders = Array.from(Array(grid.cells).keys())
+  let style: CSSProperties = {
+    position: 'absolute',
+    top: grid.frame.y - 1, // account for border!
+    left: grid.frame.x - 1, // account for border!
+    width: grid.frame.width,
+    height: grid.frame.height,
+    display: 'grid',
+    gridTemplateColumns: getNullableAutoOrTemplateBaseString(grid.gridTemplateColumns),
+    gridTemplateRows: getNullableAutoOrTemplateBaseString(grid.gridTemplateRows),
+    backgroundColor:
+      activelyDraggingOrResizingCell != null ? features.Grid.activeGridBackground : 'transparent',
+    border: `1px solid ${
+      activelyDraggingOrResizingCell != null ? colorTheme.primary.value : 'transparent'
+    }`,
+    justifyContent: grid.justifyContent ?? 'initial',
+    alignContent: grid.alignContent ?? 'initial',
+    pointerEvents: 'none',
+    padding:
+      grid.padding == null
+        ? 0
+        : `${grid.padding.top}px ${grid.padding.right}px ${grid.padding.bottom}px ${grid.padding.left}px`,
+  }
+
+  // Gap needs to be set only if the other two are not present or we'll have rendering issues
+  // due to how measurements are calculated.
+  if (grid.rowGap != null && grid.columnGap != null) {
+    style.rowGap = grid.rowGap
+    style.columnGap = grid.columnGap
+  } else {
+    if (grid.gap != null) {
+      style.gap = grid.gap
+    }
+    if (grid.rowGap != null) {
+      style.rowGap = grid.rowGap
+    }
+    if (grid.columnGap != null) {
+      style.columnGap = grid.columnGap
+    }
+  }
+
+  return (
+    <React.Fragment>
+      {/* grid lines */}
+      <div
+        key={gridKeyFromPath(grid.elementPath)}
+        id={gridKeyFromPath(grid.elementPath)}
+        data-grid-path={EP.toString(grid.elementPath)}
+        style={style}
+      >
+        {placeholders.map((cell) => {
+          const countedRow = Math.floor(cell / grid.columns) + 1
+          const countedColumn = Math.floor(cell % grid.columns) + 1
+          const id = gridCellTargetId(grid.elementPath, countedRow, countedColumn)
+          const borderID = `${id}-border`
+          const dotgridColor =
+            activelyDraggingOrResizingCell != null ? features.Grid.dotgridColor : 'transparent'
+
+          const isActiveCell =
+            countedColumn === currentHoveredCell?.column && countedRow === currentHoveredCell?.row
+
+          const borderColor =
+            isActiveCell && targetsAreCellsWithPositioning
+              ? colorTheme.brandNeonPink.value
+              : features.Grid.inactiveGridColor
           return (
             <div
-              key={gridKeyFromPath(grid.elementPath)}
-              id={gridKeyFromPath(grid.elementPath)}
-              data-grid-path={EP.toString(grid.elementPath)}
-              style={style}
-            >
-              {placeholders.map((cell) => {
-                const countedRow = Math.floor(cell / grid.columns) + 1
-                const countedColumn = Math.floor(cell % grid.columns) + 1
-                const id = gridCellTargetId(grid.elementPath, countedRow, countedColumn)
-                const dotgridColor =
-                  activelyDraggingOrResizingCell != null
-                    ? features.Grid.dotgridColor
-                    : 'transparent'
-
-                const isActiveCell =
-                  countedColumn === currentHoveredCell?.column &&
-                  countedRow === currentHoveredCell?.row
-
-                const borderColor =
-                  isActiveCell && targetsAreCellsWithPositioning
-                    ? colorTheme.brandNeonPink.value
-                    : features.Grid.inactiveGridColor
-
-                return (
-                  <div
-                    key={id}
-                    id={id}
-                    data-testid={id}
-                    style={{
-                      borderTop: gridPlaceholderBorder(borderColor, scale),
-                      borderLeft: gridPlaceholderBorder(borderColor, scale),
-                      borderBottom:
-                        isActiveCell ||
-                        countedRow >= grid.rows ||
-                        (grid.rowGap != null && grid.rowGap > 0)
-                          ? gridPlaceholderBorder(borderColor, scale)
-                          : undefined,
-                      borderRight:
-                        isActiveCell ||
-                        countedColumn >= grid.columns ||
-                        (grid.columnGap != null && grid.columnGap > 0)
-                          ? gridPlaceholderBorder(borderColor, scale)
-                          : undefined,
-                      position: 'relative',
-                      pointerEvents: 'initial',
-                    }}
-                    data-grid-row={countedRow}
-                    data-grid-column={countedColumn}
-                  >
-                    {when(
-                      features.Grid.dotgrid,
-                      <React.Fragment>
-                        <div
-                          style={{
-                            position: 'absolute',
-                            top: -1,
-                            bottom: -1,
-                            left: -1,
-                            right: -1,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                          }}
-                        >
-                          <div style={{ width: 2, height: 2, backgroundColor: dotgridColor }} />
-                        </div>
-                        <div
-                          style={{
-                            width: 2,
-                            height: 2,
-                            backgroundColor: dotgridColor,
-                            position: 'absolute',
-                            top: -1,
-                            left: -1,
-                          }}
-                        />
-                        <div
-                          style={{
-                            width: 2,
-                            height: 2,
-                            backgroundColor: dotgridColor,
-                            position: 'absolute',
-                            bottom: -1,
-                            left: -1,
-                          }}
-                        />
-                        <div
-                          style={{
-                            width: 2,
-                            height: 2,
-                            backgroundColor: dotgridColor,
-                            position: 'absolute',
-                            top: -1,
-                            right: -1,
-                          }}
-                        />
-                        <div
-                          style={{
-                            width: 2,
-                            height: 2,
-                            backgroundColor: dotgridColor,
-                            position: 'absolute',
-                            bottom: -1,
-                            right: -1,
-                          }}
-                        />
-                      </React.Fragment>,
-                    )}
-                  </div>
-                )
-              })}
-            </div>
-          )
-        })}
-        {/* cell targets */}
-        {cells.map((cell) => {
-          return (
-            <div
-              onMouseDown={startInteractionWithUid({
-                uid: EP.toUid(cell.elementPath),
-                frame: cell.globalFrame,
-                row: cell.row,
-                column: cell.column,
-              })}
-              key={GridCellTestId(cell.elementPath)}
-              data-testid={GridCellTestId(cell.elementPath)}
+              key={id}
+              id={id}
+              data-testid={id}
+              data-wtf={`data-wtf`}
               style={{
-                position: 'absolute',
-                top: cell.globalFrame.y,
-                left: cell.globalFrame.x,
-                width: cell.globalFrame.width,
-                height: cell.globalFrame.height,
-                display: 'flex',
-                justifyContent: 'flex-end',
-                alignItems: 'flex-end',
-                backgroundColor:
-                  activelyDraggingOrResizingCell != null &&
-                  EP.toUid(cell.elementPath) !== activelyDraggingOrResizingCell
-                    ? '#ffffff66'
-                    : 'transparent',
-                borderRadius:
-                  cell.borderRadius != null
-                    ? `${cell.borderRadius.top}px ${cell.borderRadius.right}px ${cell.borderRadius.bottom}px ${cell.borderRadius.left}px`
-                    : 0,
+                position: 'relative',
+                pointerEvents: 'initial',
               }}
-            />
+              data-grid-row={countedRow}
+              data-grid-column={countedColumn}
+            >
+              <React.Fragment>
+                <div
+                  key={borderID}
+                  id={borderID}
+                  data-testid={borderID}
+                  style={{
+                    position: 'relative',
+                    left: gridPlaceholderTopOrLeftPosition(scale),
+                    top: gridPlaceholderTopOrLeftPosition(scale),
+                    width: gridPlaceholderWidthOrHeight(scale),
+                    height: gridPlaceholderWidthOrHeight(scale),
+                    borderTop: gridPlaceholderBorder(borderColor, scale),
+                    borderLeft: gridPlaceholderBorder(borderColor, scale),
+                    borderBottom:
+                      isActiveCell ||
+                      countedRow >= grid.rows ||
+                      (grid.rowGap != null && grid.rowGap > 0)
+                        ? gridPlaceholderBorder(borderColor, scale)
+                        : undefined,
+                    borderRight:
+                      isActiveCell ||
+                      countedColumn >= grid.columns ||
+                      (grid.columnGap != null && grid.columnGap > 0)
+                        ? gridPlaceholderBorder(borderColor, scale)
+                        : undefined,
+                  }}
+                />
+                {when(
+                  features.Grid.dotgrid,
+                  <React.Fragment>
+                    <div
+                      style={{
+                        position: 'absolute',
+                        top: -1,
+                        bottom: -1,
+                        left: -1,
+                        right: -1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                      }}
+                    >
+                      <div style={{ width: 2, height: 2, backgroundColor: dotgridColor }} />
+                    </div>
+                    <div
+                      style={{
+                        width: 2,
+                        height: 2,
+                        backgroundColor: dotgridColor,
+                        position: 'absolute',
+                        top: -1,
+                        left: -1,
+                      }}
+                    />
+                    <div
+                      style={{
+                        width: 2,
+                        height: 2,
+                        backgroundColor: dotgridColor,
+                        position: 'absolute',
+                        bottom: -1,
+                        left: -1,
+                      }}
+                    />
+                    <div
+                      style={{
+                        width: 2,
+                        height: 2,
+                        backgroundColor: dotgridColor,
+                        position: 'absolute',
+                        top: -1,
+                        right: -1,
+                      }}
+                    />
+                    <div
+                      style={{
+                        width: 2,
+                        height: 2,
+                        backgroundColor: dotgridColor,
+                        position: 'absolute',
+                        bottom: -1,
+                        right: -1,
+                      }}
+                    />
+                  </React.Fragment>,
+                )}
+              </React.Fragment>
+            </div>
           )
         })}
-        {/* shadow */}
-        {features.Grid.shadow &&
-        !anyTargetAbsolute &&
-        shadow != null &&
-        initialShadowFrame != null &&
-        interactionData?.dragStart != null &&
-        interactionData?.drag != null &&
-        hoveringStart != null ? (
-          <motion.div
+      </div>
+      {/* cell targets */}
+      {cells.map((cell) => {
+        return (
+          <div
+            onMouseDown={startInteractionWithUid({
+              uid: EP.toUid(cell.elementPath),
+              frame: cell.globalFrame,
+              row: cell.row,
+              column: cell.column,
+            })}
+            key={GridCellTestId(cell.elementPath)}
+            data-testid={GridCellTestId(cell.elementPath)}
             style={{
-              pointerEvents: 'none',
               position: 'absolute',
-              width: shadow.globalFrame.width,
-              height: shadow.globalFrame.height,
+              top: cell.globalFrame.y,
+              left: cell.globalFrame.x,
+              width: cell.globalFrame.width,
+              height: cell.globalFrame.height,
+              display: 'flex',
+              justifyContent: 'flex-end',
+              alignItems: 'flex-end',
+              backgroundColor:
+                activelyDraggingOrResizingCell != null &&
+                EP.toUid(cell.elementPath) !== activelyDraggingOrResizingCell
+                  ? '#ffffff66'
+                  : 'transparent',
               borderRadius:
-                shadow.borderRadius != null
-                  ? `${shadow.borderRadius.top}px ${shadow.borderRadius.right}px ${shadow.borderRadius.bottom}px ${shadow.borderRadius.left}px`
+                cell.borderRadius != null
+                  ? `${cell.borderRadius.top}px ${cell.borderRadius.right}px ${cell.borderRadius.bottom}px ${cell.borderRadius.left}px`
                   : 0,
-              backgroundColor: 'black',
-              opacity: features.Grid.shadowOpacity,
-              border: '1px solid white',
-              top: shadowPosition?.y,
-              left: shadowPosition?.x,
             }}
           />
-        ) : null}
+        )
+      })}
+      {/* shadow */}
+      {features.Grid.shadow &&
+      !anyTargetAbsolute &&
+      shadow != null &&
+      initialShadowFrame != null &&
+      interactionData?.dragStart != null &&
+      interactionData?.drag != null &&
+      hoveringStart != null ? (
+        <motion.div
+          style={{
+            pointerEvents: 'none',
+            position: 'absolute',
+            width: shadow.globalFrame.width,
+            height: shadow.globalFrame.height,
+            borderRadius:
+              shadow.borderRadius != null
+                ? `${shadow.borderRadius.top}px ${shadow.borderRadius.right}px ${shadow.borderRadius.bottom}px ${shadow.borderRadius.left}px`
+                : 0,
+            backgroundColor: 'black',
+            opacity: features.Grid.shadowOpacity,
+            border: '1px solid white',
+            top: shadowPosition?.y,
+            left: shadowPosition?.x,
+          }}
+        />
+      ) : null}
+    </React.Fragment>
+  )
+})
+GridControl.displayName = 'GridControl'
+
+export interface GridControlsProps {
+  targets: ElementPath[]
+}
+
+export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ targets }) => {
+  const targetRootCell = useEditorState(
+    Substores.restOfStore,
+    (store) => store.strategyState.customStrategyState.grid.currentRootCell,
+    'GridControls targetRootCell',
+  )
+
+  const hoveredGrids = useEditorState(
+    Substores.canvas,
+    (store) => stripNulls([store.editor.canvas.controls.gridControls]),
+    'GridControls hoveredGrids',
+  )
+
+  const grids = useGridData([...targets, ...hoveredGrids])
+
+  if (grids.length === 0) {
+    return null
+  }
+
+  return (
+    <div id={'grid-controls'}>
+      <CanvasOffsetWrapper>
+        {grids.map((grid) => {
+          return <GridControl key={`grid-control-${EP.toString(grid.elementPath)}`} grid={grid} />
+        })}
         <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
       </CanvasOffsetWrapper>
     </div>
@@ -1826,7 +1843,19 @@ function gridKeyFromPath(path: ElementPath): string {
   return `grid-${EP.toString(path)}`
 }
 
-const gridPlaceholderBorder = (color: string, scale: number) => `${2 / scale}px solid ${color}`
+const placeholderBorderBaseWidth = 2
+
+function gridPlaceholderBorder(color: string, scale: number): string {
+  return `${placeholderBorderBaseWidth / scale}px solid ${color}`
+}
+
+function gridPlaceholderTopOrLeftPosition(scale: number): string {
+  return `${-placeholderBorderBaseWidth / scale}px`
+}
+
+function gridPlaceholderWidthOrHeight(scale: number): string {
+  return `calc(100% + ${(placeholderBorderBaseWidth * 2) / scale}px)`
+}
 
 export function controlsForGridPlaceholders(gridPath: ElementPath): ControlWithProps<any> {
   return {

From 328b3ed73fe99225704f92aafa27ed1629510047 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Fri, 4 Oct 2024 20:19:10 +0300
Subject: [PATCH 096/272] feat(parser): parse cache (#6381)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR introduces `IndexedDB` cache for parse results, keyed by file
name and string contents (so every change in the file contents
invalidates the parse cache). This greatly improves the >1st time load
on every project.
<video
src="https://github.com/user-attachments/assets/faa3560b-81ca-4f1d-9d92-52526bf7f004"></video>

Important points:
1. The cache is implemented in the worker level - to keep our current
parse flow as identical to now as possible. If the feature flag is on,
the worker tries to look for the file in the cache, compares the content
- and if there is a cache hit it returns it from the cache instead of
parsing it.
2. When a parsing does happen - if the feature flag is on, the parsed
results are stored in the cache.
3. The cache is not project specific - allowing for cached results to be
shared between projects (if the file name and contents are similar)
4. Currently arbitrary code (chunks of code we send as `code.tsx`) is
not being cached, this can be controlled using a feature flag.
5. This PR also adds a settings pane for controlling cache behavior. The
pane allows controlling the cache, the cache log and manually clear the
cache if necessary.
The cache settings toggle (with sound 🔉) :
<video
src="https://github.com/user-attachments/assets/a3c901c6-1b87-4013-a9ab-a2f531fb4457"></video>

**Commit Details:**
- The main logic changes are in `parser-printer-worker.ts` and
`parse-cache-utils.worker.ts`.
- The worker now gets a `parsingCacheOptions` argument, which controls
whether or not to use the cache (and also logging)

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode

Fixes #5659
---
 .../src/components/editor/actions/actions.tsx |  41 ++--
 .../src/components/editor/store/dispatch.tsx  |   2 +
 .../editor/store/worker-update-race.spec.tsx  |  13 +-
 .../left-pane/roll-your-own-pane.tsx          | 178 +++++++++++++++---
 .../navigator/left-pane/settings-pane.tsx     |   9 +-
 .../property-controls-local-parser-bridge.ts  |   5 +-
 editor/src/core/shared/parse-cache-utils.ts   |  32 ++++
 .../shared/parser-projectcontents-utils.ts    |   2 +
 .../src/core/workers/common/worker-types.ts   |  44 +++++
 .../parse-cache-utils.worker.ts               | 116 ++++++++++++
 .../parser-printer/parser-printer-worker.ts   | 132 +++++++------
 .../parser-printer/parser-printer.worker.ts   |   6 +-
 editor/src/core/workers/test-workers.ts       |   6 +-
 editor/src/core/workers/workers.ts            |  22 ++-
 editor/src/utils/feature-switches.ts          |  15 ++
 15 files changed, 515 insertions(+), 108 deletions(-)
 create mode 100644 editor/src/core/shared/parse-cache-utils.ts
 create mode 100644 editor/src/core/workers/parser-printer/parse-cache-utils.worker.ts

diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index 7baaa1b2848c..b70275861002 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -155,7 +155,12 @@ import {
 import * as PP from '../../../core/shared/property-path'
 import { assertNever, fastForEach, getProjectLockedKey, identity } from '../../../core/shared/utils'
 import { emptyImports, mergeImports } from '../../../core/workers/common/project-file-utils'
-import type { UtopiaTsWorkers } from '../../../core/workers/common/worker-types'
+import {
+  createParseAndPrintOptions,
+  createParseFile,
+  createPrintAndReparseFile,
+  type UtopiaTsWorkers,
+} from '../../../core/workers/common/worker-types'
 import type { IndexPosition } from '../../../utils/utils'
 import Utils from '../../../utils/utils'
 import type { ProjectContentTreeRoot } from '../../assets'
@@ -622,6 +627,7 @@ import { getDefaultedRemixRootDir } from '../store/remix-derived-data'
 import { isReplaceKeepChildrenAndStyleTarget } from '../../navigator/navigator-item/component-picker-context-menu'
 import { canCondenseJSXElementChild } from '../../../utils/can-condense'
 import { getNavigatorTargetsFromEditorState } from '../../navigator/navigator-utils'
+import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 import { applyValuesAtPath } from '../../canvas/commands/adjust-number-command'
 import { styleP } from '../../inspector/inspector-common'
 
@@ -4107,13 +4113,13 @@ export const UPDATE_FNS = {
       getAllUniqueUidsFromMapping(getUidMappings(editor.projectContents).filePathToUids),
     )
     const parsedResult = getParseFileResult(
-      newFileName,
-      getFilePathMappings(editor.projectContents),
-      templateFile.fileContents.code,
-      null,
-      1,
-      existingUIDs,
-      isSteganographyEnabled(),
+      createParseFile(newFileName, templateFile.fileContents.code, null, 1),
+      createParseAndPrintOptions(
+        getFilePathMappings(editor.projectContents),
+        existingUIDs,
+        isSteganographyEnabled(),
+        getParseCacheOptions(),
+      ),
     )
 
     // 3. write the new text file
@@ -4974,13 +4980,18 @@ export const UPDATE_FNS = {
     const workerUpdates = filesToUpdateResult.filesToUpdate.flatMap((fileToUpdate) => {
       if (fileToUpdate.type === 'printandreparsefile') {
         const printParsedContent = getPrintAndReparseCodeResult(
-          fileToUpdate.filename,
-          filePathMappings,
-          fileToUpdate.parseSuccess,
-          fileToUpdate.stripUIDs,
-          fileToUpdate.versionNumber,
-          filesToUpdateResult.existingUIDs,
-          isSteganographyEnabled(),
+          createPrintAndReparseFile(
+            fileToUpdate.filename,
+            fileToUpdate.parseSuccess,
+            fileToUpdate.stripUIDs,
+            fileToUpdate.versionNumber,
+          ),
+          createParseAndPrintOptions(
+            filePathMappings,
+            filesToUpdateResult.existingUIDs,
+            isSteganographyEnabled(),
+            getParseCacheOptions(),
+          ),
         )
         const updateAction = workerCodeAndParsedUpdate(
           printParsedContent.filename,
diff --git a/editor/src/components/editor/store/dispatch.tsx b/editor/src/components/editor/store/dispatch.tsx
index e65af702d272..0b3d0e8ab4cd 100644
--- a/editor/src/components/editor/store/dispatch.tsx
+++ b/editor/src/components/editor/store/dispatch.tsx
@@ -89,6 +89,7 @@ import {
 import type { PropertyControlsInfo } from '../../custom-code/code-file'
 import { getFilePathMappings } from '../../../core/model/project-file-utils'
 import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template'
+import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 
 type DispatchResultFields = {
   nothingChanged: boolean
@@ -332,6 +333,7 @@ function maybeRequestModelUpdate(
       getFilePathMappings(projectContents),
       existingUIDs,
       isSteganographyEnabled(),
+      getParseCacheOptions(),
     )
       .then((parseResult) => {
         const updates = parseResult.map((fileResult) => {
diff --git a/editor/src/components/editor/store/worker-update-race.spec.tsx b/editor/src/components/editor/store/worker-update-race.spec.tsx
index f07d6bc520bd..1f84c4963a60 100644
--- a/editor/src/components/editor/store/worker-update-race.spec.tsx
+++ b/editor/src/components/editor/store/worker-update-race.spec.tsx
@@ -9,6 +9,8 @@ import { getProjectFileByFilePath } from '../../assets'
 import { renderTestEditorWithModel } from '../../canvas/ui-jsx.test-utils'
 import { updateFile } from '../actions/action-creators'
 import { StoryboardFilePath } from './editor-state'
+import type { ParseCacheOptions } from '../../../core/shared/parse-cache-utils'
+import type { FilePathMappings } from '../../../core/model/project-file-utils'
 
 // We have to prefix all of these with "mock" otherwise Jest won't allow us to use them below
 const mockDefer = defer
@@ -22,13 +24,22 @@ jest.mock('../../../core/workers/common/worker-types', () => ({
   async getParseResult(
     workers: any,
     files: Array<ParseOrPrint>,
+    filePathMappings: FilePathMappings,
     alreadyExistingUIDs: Set<string>,
     applySteganography: SteganographyMode,
+    parsingCacheOptions: ParseCacheOptions,
   ): Promise<Array<ParseOrPrintResult>> {
     mockParseStartedCount++
     const result = await jest
       .requireActual('../../../core/workers/common/worker-types')
-      .getParseResult(workers, files, alreadyExistingUIDs, applySteganography)
+      .getParseResult(
+        workers,
+        files,
+        filePathMappings,
+        alreadyExistingUIDs,
+        applySteganography,
+        parsingCacheOptions,
+      )
     mockLock2.resolve()
     await mockLock1
     mockLock1 = mockDefer()
diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
index 4c6f421ae995..936840a19ff8 100644
--- a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
+++ b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
@@ -6,8 +6,13 @@ import { UIGridRow } from '../../inspector/widgets/ui-grid-row'
 import { atomWithStorage } from 'jotai/utils'
 import { IS_TEST_ENVIRONMENT } from '../../../common/env-vars'
 import { Ellipsis } from './github-pane/github-file-changes-list'
+import { deleteParseCache } from '../../../core/shared/parse-cache-utils'
+import { useRefEditorState } from '../../../components/editor/store/store-hook'
+import type { FeatureName } from '../../../utils/feature-switches'
+import { isFeatureEnabled, setFeatureEnabled } from '../../../utils/feature-switches'
+import { getParseCacheVersion } from '../../../core/workers/parser-printer/parse-cache-utils.worker'
 
-const sections = ['Grid'] as const
+const sections = ['Grid', 'Performance'] as const
 type Section = (typeof sections)[number]
 
 type GridFeatures = {
@@ -23,15 +28,28 @@ type GridFeatures = {
   activeGridBackground: string
 }
 
+type PerformanceFeatures = {
+  parseCache: boolean
+  verboseLogCache: boolean
+  cacheArbitraryCode: boolean
+}
+
 type RollYourOwnFeaturesTypes = {
   Grid: GridFeatures
+  Performance: PerformanceFeatures
 }
 
 type RollYourOwnFeatures = {
   [K in Section]: RollYourOwnFeaturesTypes[K]
 }
 
-const defaultRollYourOwnFeatures: RollYourOwnFeatures = {
+const featureToFeatureFlagMap: Record<keyof Partial<PerformanceFeatures>, FeatureName> = {
+  parseCache: 'Use Parsing Cache',
+  verboseLogCache: 'Verbose Log Cache',
+  cacheArbitraryCode: 'Arbitrary Code Cache',
+}
+
+const defaultRollYourOwnFeatures: () => RollYourOwnFeatures = () => ({
   Grid: {
     dragVerbatim: false,
     dragMagnetic: false,
@@ -44,21 +62,41 @@ const defaultRollYourOwnFeatures: RollYourOwnFeatures = {
     inactiveGridColor: '#00000033',
     shadowOpacity: 0.1,
   },
-}
+  Performance: {
+    parseCache: getFeatureFlagValue('parseCache'),
+    verboseLogCache: getFeatureFlagValue('verboseLogCache'),
+    cacheArbitraryCode: getFeatureFlagValue('cacheArbitraryCode'),
+  },
+})
 
 const ROLL_YOUR_OWN_FEATURES_KEY: string = 'roll-your-own-features'
 
-const rollYourOwnFeaturesAtom = IS_TEST_ENVIRONMENT
-  ? atom(defaultRollYourOwnFeatures)
-  : atomWithStorage(ROLL_YOUR_OWN_FEATURES_KEY, defaultRollYourOwnFeatures)
+let rollYourOwnFeaturesAtom:
+  | ReturnType<typeof atom<RollYourOwnFeatures>>
+  | ReturnType<typeof atomWithStorage<RollYourOwnFeatures>>
+  | null = null
+
+function getRollYourOwnFeaturesAtom() {
+  if (rollYourOwnFeaturesAtom == null) {
+    rollYourOwnFeaturesAtom = IS_TEST_ENVIRONMENT
+      ? atom(defaultRollYourOwnFeatures())
+      : atomWithStorage(ROLL_YOUR_OWN_FEATURES_KEY, defaultRollYourOwnFeatures())
+  }
+  return rollYourOwnFeaturesAtom
+}
 
 export function useRollYourOwnFeatures() {
-  const [features] = useAtom(rollYourOwnFeaturesAtom)
+  const [features] = useAtom(getRollYourOwnFeaturesAtom())
+  const defaultFeatures = defaultRollYourOwnFeatures()
   const merged: RollYourOwnFeatures = {
     Grid: {
-      ...defaultRollYourOwnFeatures.Grid,
+      ...defaultFeatures.Grid,
       ...features.Grid,
     },
+    Performance: {
+      ...defaultFeatures.Performance,
+      ...syncWithFeatureFlags(features.Performance),
+    },
   }
   return merged
 }
@@ -115,6 +153,7 @@ export const RollYourOwnFeaturesPane = React.memo(() => {
         </FlexRow>
 
         {when(currentSection === 'Grid', <GridSection />)}
+        {when(currentSection === 'Performance', <PerformanceSection />)}
       </Section>
     </FlexColumn>
   )
@@ -134,40 +173,90 @@ function getNewFeatureValueOrNull(currentValue: any, e: React.ChangeEvent<HTMLIn
   }
 }
 
+/** GRID SECTION */
 const GridSection = React.memo(() => {
-  const features = useRollYourOwnFeatures()
-  const setFeatures = useSetAtom(rollYourOwnFeaturesAtom)
+  return (
+    <FlexColumn style={{ gap: 10 }}>
+      <ResetDefaultsButton subsection='Grid' />
+      <SimpleFeatureControls subsection='Grid' />
+    </FlexColumn>
+  )
+})
+GridSection.displayName = 'GridSection'
 
+/** PERFORMANCE SECTION */
+const PerformanceSection = React.memo(() => {
+  const workersRef = useRefEditorState((store) => {
+    return store.workers
+  })
+  const handleDeleteParseCache = React.useCallback(() => {
+    deleteParseCache(workersRef.current)
+  }, [workersRef])
+  return (
+    <FlexColumn style={{ gap: 10 }}>
+      <SimpleFeatureControls subsection='Performance' />
+      <UIGridRow padded variant='<--1fr--><--1fr-->' key={`feat-cache-version`}>
+        <Ellipsis title='Cache Version'>Cache Version</Ellipsis>
+        <Ellipsis title={getParseCacheVersion()}>{getParseCacheVersion()}</Ellipsis>
+      </UIGridRow>
+      <UIGridRow padded variant='<-------------1fr------------->'>
+        <Button highlight spotlight onClick={handleDeleteParseCache}>
+          Clear cache
+        </Button>
+      </UIGridRow>
+    </FlexColumn>
+  )
+})
+PerformanceSection.displayName = 'PerformanceSection'
+
+/** GENERAL COMPONENTS */
+
+const ResetDefaultsButton = React.memo(({ subsection }: { subsection: Section }) => {
+  const setFeatures = useSetAtom(getRollYourOwnFeaturesAtom())
+  const defaultFeatures = defaultRollYourOwnFeatures()
+  const resetDefaults = React.useCallback(() => {
+    setFeatures((prevFeatures) => ({
+      ...prevFeatures,
+      [subsection]: defaultFeatures[subsection],
+    }))
+  }, [defaultFeatures, setFeatures, subsection])
+  return (
+    <UIGridRow padded variant='<-------------1fr------------->'>
+      <Button highlight spotlight onClick={resetDefaults}>
+        Reset defaults
+      </Button>
+    </UIGridRow>
+  )
+})
+ResetDefaultsButton.displayName = 'ResetDefaultsButton'
+
+const SimpleFeatureControls = React.memo(({ subsection }: { subsection: Section }) => {
+  const features = useRollYourOwnFeatures()
+  const setFeatures = useSetAtom(getRollYourOwnFeaturesAtom())
   const onChange = React.useCallback(
-    (feat: keyof GridFeatures) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = getNewFeatureValueOrNull(features.Grid[feat], e)
+    (feat: keyof RollYourOwnFeaturesTypes[Section]) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = getNewFeatureValueOrNull(features[subsection][feat], e)
       if (newValue != null) {
         setFeatures({
           ...features,
-          Grid: {
-            ...features.Grid,
+          [subsection]: {
+            ...features[subsection],
             [feat]: newValue,
           },
         })
+        if (typeof newValue === 'boolean') {
+          syncFeatureFlagIfExists(feat, newValue)
+        }
       }
     },
-    [features, setFeatures],
+    [features, setFeatures, subsection],
   )
-
-  const resetDefaults = React.useCallback(() => {
-    setFeatures(defaultRollYourOwnFeatures)
-  }, [setFeatures])
-
+  const defaultFeatures = defaultRollYourOwnFeatures()
   return (
-    <FlexColumn style={{ gap: 10 }}>
-      <UIGridRow padded variant='<-------------1fr------------->'>
-        <Button highlight spotlight onClick={resetDefaults}>
-          Reset defaults
-        </Button>
-      </UIGridRow>
-      {Object.keys(defaultRollYourOwnFeatures.Grid).map((key) => {
-        const feat = key as keyof GridFeatures
-        const value = features.Grid[feat] ?? defaultRollYourOwnFeatures.Grid[feat]
+    <React.Fragment>
+      {Object.keys(defaultFeatures[subsection]).map((key) => {
+        const feat = key as keyof RollYourOwnFeaturesTypes[Section]
+        const value = features[subsection][feat] ?? defaultFeatures[subsection][feat]
         return (
           <UIGridRow padded variant='<----------1fr---------><-auto->' key={`feat-${feat}`}>
             <Ellipsis title={feat}>{feat}</Ellipsis>
@@ -181,7 +270,34 @@ const GridSection = React.memo(() => {
           </UIGridRow>
         )
       })}
-    </FlexColumn>
+    </React.Fragment>
   )
 })
-GridSection.displayName = 'GridSection'
+SimpleFeatureControls.displayName = 'SimpleFeatureControls'
+
+function getFeatureFlagValue(featureName: keyof typeof featureToFeatureFlagMap): boolean {
+  const featureFlag = featureToFeatureFlagMap[featureName]
+  return isFeatureEnabled(featureFlag)
+}
+
+function syncFeatureFlagIfExists(
+  featureName: keyof typeof featureToFeatureFlagMap,
+  value: boolean,
+) {
+  const featureFlag = featureToFeatureFlagMap[featureName]
+  if (featureFlag == null) {
+    return
+  }
+  setFeatureEnabled(featureFlag, value)
+}
+
+function syncWithFeatureFlags(features: Record<string, any>) {
+  return Object.fromEntries(
+    Object.entries(features).map(([key, value]) => {
+      if (typeof value === 'boolean' && key in featureToFeatureFlagMap) {
+        return [key, getFeatureFlagValue(key as keyof typeof featureToFeatureFlagMap)]
+      }
+      return [key, value]
+    }),
+  )
+}
diff --git a/editor/src/components/navigator/left-pane/settings-pane.tsx b/editor/src/components/navigator/left-pane/settings-pane.tsx
index 0b2b1d9f6352..90a22afbac08 100644
--- a/editor/src/components/navigator/left-pane/settings-pane.tsx
+++ b/editor/src/components/navigator/left-pane/settings-pane.tsx
@@ -28,6 +28,7 @@ import {
   toggleFeatureEnabled,
   isFeatureEnabled,
   AllFeatureNames,
+  FeaturesHiddenFromMainSettingsPane,
 } from '../../../utils/feature-switches'
 import json5 from 'json5'
 import { load } from '../../../components/editor/actions/actions'
@@ -59,13 +60,17 @@ const themeOptions = [
 const defaultTheme = themeOptions[0]
 
 export const FeatureSwitchesSection = React.memo(() => {
-  if (AllFeatureNames.length > 0) {
+  const featuresToDisplay = React.useMemo(
+    () => AllFeatureNames.filter((name) => !FeaturesHiddenFromMainSettingsPane.includes(name)),
+    [],
+  )
+  if (featuresToDisplay.length > 0) {
     return (
       <Section>
         <UIGridRow padded variant='<---1fr--->|------172px-------|'>
           <H2>Experimental Toggle Features</H2>
         </UIGridRow>
-        {AllFeatureNames.map((name) => (
+        {featuresToDisplay.map((name) => (
           <FeatureSwitchRow key={`feature-switch-${name}`} name={name} />
         ))}
       </Section>
diff --git a/editor/src/core/property-controls/property-controls-local-parser-bridge.ts b/editor/src/core/property-controls/property-controls-local-parser-bridge.ts
index d982603d9fbd..08a55f0e197d 100644
--- a/editor/src/core/property-controls/property-controls-local-parser-bridge.ts
+++ b/editor/src/core/property-controls/property-controls-local-parser-bridge.ts
@@ -2,12 +2,14 @@ import type { ComponentElementToInsert } from '../../components/custom-code/code
 import type { Either } from '../shared/either'
 import { left, right } from '../shared/either'
 import type { ArbitraryJSBlock, UtopiaJSXComponent } from '../shared/element-template'
+import { getParseCacheOptions } from '../shared/parse-cache-utils'
 import type { Imports } from '../shared/project-file-types'
 import { isParseFailure, isParseSuccess } from '../shared/project-file-types'
 import { emptySet } from '../shared/set-utils'
 import { isSteganographyEnabled } from '../shared/stegano-text'
 import type { UtopiaTsWorkers } from '../workers/common/worker-types'
 import { createParseFile, getParseResult } from '../workers/common/worker-types'
+import { ARBITRARY_CODE_FILE_NAME } from '../workers/common/worker-types'
 
 type ProcessedParseResult = Either<
   string,
@@ -45,10 +47,11 @@ async function getParseResultForUserStrings(
     }`
   const parseResult = await getParseResult(
     workers,
-    [createParseFile('code.tsx', codeToParse, null, Date.now())],
+    [createParseFile(ARBITRARY_CODE_FILE_NAME, codeToParse, null, Date.now())],
     [],
     emptySet(),
     isSteganographyEnabled(),
+    getParseCacheOptions(),
   )
 
   if (parseResult[0].type === 'parsefileresult') {
diff --git a/editor/src/core/shared/parse-cache-utils.ts b/editor/src/core/shared/parse-cache-utils.ts
new file mode 100644
index 000000000000..3bb102961280
--- /dev/null
+++ b/editor/src/core/shared/parse-cache-utils.ts
@@ -0,0 +1,32 @@
+import { isFeatureEnabled } from '../../utils/feature-switches'
+import type { UtopiaTsWorkers } from '../workers/common/worker-types'
+
+export type ParseCacheOptions = {
+  useParsingCache: boolean
+  verboseLogCache: boolean
+  cacheArbitraryCode: boolean
+}
+
+function isParseCacheEnabled(): boolean {
+  return isFeatureEnabled('Use Parsing Cache')
+}
+
+function isVerboseLogCacheEnabled(): boolean {
+  return isFeatureEnabled('Verbose Log Cache')
+}
+
+function isArbitraryCodeCacheEnabled(): boolean {
+  return isFeatureEnabled('Arbitrary Code Cache')
+}
+
+export function getParseCacheOptions(): ParseCacheOptions {
+  return {
+    useParsingCache: isParseCacheEnabled(),
+    verboseLogCache: isVerboseLogCacheEnabled(),
+    cacheArbitraryCode: isArbitraryCodeCacheEnabled(),
+  }
+}
+
+export function deleteParseCache(workers: UtopiaTsWorkers): void {
+  workers.sendClearParseCacheMessage(getParseCacheOptions())
+}
diff --git a/editor/src/core/shared/parser-projectcontents-utils.ts b/editor/src/core/shared/parser-projectcontents-utils.ts
index becdb985fc21..0199fdbe41b8 100644
--- a/editor/src/core/shared/parser-projectcontents-utils.ts
+++ b/editor/src/core/shared/parser-projectcontents-utils.ts
@@ -35,6 +35,7 @@ import { fastForEach } from '../../core/shared/utils'
 import { codeNeedsPrinting, codeNeedsParsing } from '../../core/workers/common/project-file-utils'
 import { isFeatureEnabled } from '../../utils/feature-switches'
 import { isSteganographyEnabled } from './stegano-text'
+import { getParseCacheOptions } from './parse-cache-utils'
 
 export function parseResultToWorkerUpdates(fileResult: ParseOrPrintResult): WorkerUpdate {
   switch (fileResult.type) {
@@ -203,6 +204,7 @@ export async function updateProjectContentsWithParseResults(
     getFilePathMappings(projectContents),
     existingUIDs,
     isSteganographyEnabled(),
+    getParseCacheOptions(),
   )
 
   // Convert those results into updates.
diff --git a/editor/src/core/workers/common/worker-types.ts b/editor/src/core/workers/common/worker-types.ts
index 298d2a5b1a65..c094cc8e71c5 100644
--- a/editor/src/core/workers/common/worker-types.ts
+++ b/editor/src/core/workers/common/worker-types.ts
@@ -1,3 +1,4 @@
+import type { ParseCacheOptions } from '../../shared/parse-cache-utils'
 import type { ProjectContentTreeRoot } from '../../../components/assets'
 import type { ErrorMessage } from '../../shared/error-messages'
 import type { TypeDefinitions } from '../../shared/npm-dependency-types'
@@ -11,6 +12,8 @@ import type { SteganographyMode } from '../parser-printer/parser-printer'
 import type { RawSourceMap } from '../ts/ts-typings/RawSourceMap'
 import type { FilePathMappings } from './project-file-utils'
 
+export const ARBITRARY_CODE_FILE_NAME = 'code.tsx'
+
 export type FileContent = string | TextFile
 
 export interface ParseFile {
@@ -36,6 +39,27 @@ export function createParseFile(
   }
 }
 
+export interface ParseAndPrintOptions {
+  filePathMappings: FilePathMappings
+  alreadyExistingUIDs_MUTABLE: Set<string>
+  applySteganography: SteganographyMode
+  parsingCacheOptions: ParseCacheOptions
+}
+
+export function createParseAndPrintOptions(
+  filePathMappings: FilePathMappings,
+  alreadyExistingUIDs_MUTABLE: Set<string>,
+  applySteganography: SteganographyMode,
+  parsingCacheOptions: ParseCacheOptions,
+): ParseAndPrintOptions {
+  return {
+    filePathMappings: filePathMappings,
+    alreadyExistingUIDs_MUTABLE: alreadyExistingUIDs_MUTABLE,
+    applySteganography: applySteganography,
+    parsingCacheOptions: parsingCacheOptions,
+  }
+}
+
 export interface PrintAndReparseFile {
   type: 'printandreparsefile'
   filename: string
@@ -139,12 +163,27 @@ export function createParsePrintFailedMessage(messageID: number): ParsePrintFail
 
 export type ParsePrintResultMessage = ParsePrintFilesResult | ParsePrintFailedMessage
 
+export interface ClearParseCacheMessage {
+  type: 'clearparsecache'
+  parsingCacheOptions: ParseCacheOptions
+}
+
+export function createClearParseCacheMessage(
+  parsingCacheOptions: ParseCacheOptions,
+): ClearParseCacheMessage {
+  return {
+    type: 'clearparsecache',
+    parsingCacheOptions: parsingCacheOptions,
+  }
+}
+
 export interface ParsePrintFilesRequest extends ParsePrintBase {
   type: 'parseprintfiles'
   filePathMappings: FilePathMappings
   files: Array<ParseOrPrint>
   alreadyExistingUIDs: Set<string>
   applySteganography: SteganographyMode
+  parsingCacheOptions: ParseCacheOptions
 }
 
 export function createParsePrintFilesRequest(
@@ -153,6 +192,7 @@ export function createParsePrintFilesRequest(
   alreadyExistingUIDs: Set<string>,
   messageID: number,
   applySteganography: SteganographyMode,
+  parsingCacheOptions: ParseCacheOptions,
 ): ParsePrintFilesRequest {
   return {
     type: 'parseprintfiles',
@@ -161,6 +201,7 @@ export function createParsePrintFilesRequest(
     alreadyExistingUIDs: alreadyExistingUIDs,
     messageID: messageID,
     applySteganography: applySteganography,
+    parsingCacheOptions: parsingCacheOptions,
   }
 }
 
@@ -172,6 +213,7 @@ export function getParseResult(
   filePathMappings: FilePathMappings,
   alreadyExistingUIDs: Set<string>,
   applySteganography: SteganographyMode,
+  parsingCacheOptions: ParseCacheOptions,
 ): Promise<Array<ParseOrPrintResult>> {
   const messageIDForThisRequest = PARSE_PRINT_MESSAGE_COUNTER++
   return new Promise((resolve, reject) => {
@@ -202,6 +244,7 @@ export function getParseResult(
         alreadyExistingUIDs,
         messageIDForThisRequest,
         applySteganography,
+        parsingCacheOptions,
       ),
     )
   })
@@ -365,6 +408,7 @@ export function createInitTSWorkerMessage(
 
 export interface UtopiaTsWorkers {
   sendParsePrintMessage: (request: ParsePrintFilesRequest) => void
+  sendClearParseCacheMessage: (parsingCacheOptions: ParseCacheOptions) => void
   sendLinterRequestMessage: (filename: string, content: string) => void
   addParserPrinterEventListener: (handler: (e: MessageEvent) => void) => void
   removeParserPrinterEventListener: (handler: (e: MessageEvent) => void) => void
diff --git a/editor/src/core/workers/parser-printer/parse-cache-utils.worker.ts b/editor/src/core/workers/parser-printer/parse-cache-utils.worker.ts
new file mode 100644
index 000000000000..851fef617172
--- /dev/null
+++ b/editor/src/core/workers/parser-printer/parse-cache-utils.worker.ts
@@ -0,0 +1,116 @@
+import { URL_HASH } from '../../../common/env-vars'
+import { type ParseCacheOptions } from '../../../core/shared/parse-cache-utils'
+import {
+  ARBITRARY_CODE_FILE_NAME,
+  type ParseFile,
+  type ParseFileResult,
+} from '../common/worker-types'
+import localforage from 'localforage'
+
+export const CACHE_DB_NAME = 'editor-cache'
+export const PARSE_CACHE_STORE_NAME = 'file-parse-cache'
+const ARBITRARY_CODE_CACHE_KEY_LIMIT = 50
+
+let parseCacheStore: LocalForage | undefined
+
+function getParseCacheStore(): LocalForage {
+  if (parseCacheStore === undefined) {
+    parseCacheStore = localforage.createInstance({
+      name: CACHE_DB_NAME,
+      storeName: PARSE_CACHE_STORE_NAME,
+    })
+  }
+  return parseCacheStore
+}
+
+function getCacheKey(filename: string): string {
+  return `PARSE_CACHE::${filename}`
+}
+
+function logCacheMessage(parsingCacheOptions: ParseCacheOptions, ...messages: (string | object)[]) {
+  if (parsingCacheOptions.verboseLogCache) {
+    console.info(`[PARSING CACHE] `, ...messages)
+  }
+}
+
+function stringIdentifiers(filename: string, content: string): (string | object)[] {
+  if (filename === ARBITRARY_CODE_FILE_NAME) {
+    return ['code', [{ content: content }]]
+  }
+  return [filename]
+}
+
+function shouldSkipCacheForFile(filename: string, parsingCacheOptions: ParseCacheOptions): boolean {
+  return filename === ARBITRARY_CODE_FILE_NAME && !parsingCacheOptions.cacheArbitraryCode
+}
+
+export function getParseCacheVersion(): string {
+  // currently we're using the commit hash which is pretty aggresive cache-busting
+  // TODO: consider refining cache-busting strategy to change only on ParsedTextFile shape changes
+  return URL_HASH
+}
+
+function getCacheIndexKeyWithVersion(content: string): string {
+  return `${getParseCacheVersion()}::${content}`
+}
+
+export async function getParseResultFromCache(
+  file: ParseFile,
+  parsingCacheOptions: ParseCacheOptions,
+): Promise<ParseFileResult | null> {
+  const { filename, content } = file
+  if (shouldSkipCacheForFile(filename, parsingCacheOptions)) {
+    return null
+  }
+  const cacheKey = getCacheKey(filename)
+  //check localforage for cache
+  const cachedResult = await getParseCacheStore().getItem<CachedParseResult>(cacheKey)
+  const cachedResultForContent = cachedResult?.[getCacheIndexKeyWithVersion(content)]
+  if (cachedResultForContent?.parseResult?.type === 'PARSE_SUCCESS') {
+    logCacheMessage(parsingCacheOptions, 'Cache hit for', ...stringIdentifiers(filename, content))
+    return cachedResultForContent
+  }
+  logCacheMessage(parsingCacheOptions, 'Cache miss for', ...stringIdentifiers(filename, content))
+  return null
+}
+
+export async function storeParseResultInCache(
+  file: ParseFile,
+  result: ParseFileResult,
+  parsingCacheOptions: ParseCacheOptions,
+): Promise<void> {
+  const { filename, content } = file
+  if (shouldSkipCacheForFile(filename, parsingCacheOptions)) {
+    return
+  }
+  logCacheMessage(parsingCacheOptions, 'Caching', ...stringIdentifiers(filename, content))
+  const cacheKey = getCacheKey(filename)
+  if (filename === ARBITRARY_CODE_FILE_NAME) {
+    // for the special filename 'code.tsx', we store multiple contents, so we need to read it first
+    const cachedResult = (await getParseCacheStore().getItem<CachedParseResult>(cacheKey)) ?? {}
+    // limit the arbitrary code cache keys size
+    // TODO: we can use an LRU cache here, but for now this is good enough
+    if (Object.keys(cachedResult).length >= ARBITRARY_CODE_CACHE_KEY_LIMIT) {
+      const oldestKey = Object.keys(cachedResult)[0]
+      delete cachedResult[oldestKey]
+    }
+    void getParseCacheStore().setItem<CachedParseResult>(cacheKey, {
+      ...cachedResult,
+      [getCacheIndexKeyWithVersion(content)]: result,
+    })
+  } else {
+    void getParseCacheStore().setItem<CachedParseResult>(cacheKey, {
+      [getCacheIndexKeyWithVersion(content)]: result,
+    })
+  }
+}
+
+export async function clearParseCache(parsingCacheOptions: ParseCacheOptions) {
+  logCacheMessage(parsingCacheOptions, 'Clearing cache')
+  await getParseCacheStore().dropInstance({
+    name: CACHE_DB_NAME,
+    storeName: PARSE_CACHE_STORE_NAME,
+  })
+}
+
+type CachedParseResult = { [fileContent: string]: ParseFileResult }
diff --git a/editor/src/core/workers/parser-printer/parser-printer-worker.ts b/editor/src/core/workers/parser-printer/parser-printer-worker.ts
index 3c90b69db546..e89289472261 100644
--- a/editor/src/core/workers/parser-printer/parser-printer-worker.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer-worker.ts
@@ -1,55 +1,64 @@
-import type { ParseSuccess } from '../../shared/project-file-types'
-import type { SteganographyMode } from './parser-printer'
 import { printCodeOptions, printCode, lintAndParse } from './parser-printer'
 import type {
+  ClearParseCacheMessage,
+  ParseAndPrintOptions,
+  ParseFile,
   ParseFileResult,
   ParsePrintFilesRequest,
   ParsePrintResultMessage,
+  PrintAndReparseFile,
   PrintAndReparseResult,
 } from '../common/worker-types'
 import {
+  createParseAndPrintOptions,
+  createParseFile,
   createParseFileResult,
   createParsePrintFailedMessage,
   createParsePrintFilesResult,
   createPrintAndReparseResult,
 } from '../common/worker-types'
-import type { FilePathMappings } from '../common/project-file-utils'
+import {
+  clearParseCache,
+  getParseResultFromCache,
+  storeParseResultInCache,
+} from './parse-cache-utils.worker'
+
+type ParseOrPrintResults = (ParseFileResult | PrintAndReparseResult)[]
 
-export function handleMessage(
-  workerMessage: ParsePrintFilesRequest,
+export async function handleMessage(
+  workerMessage: ParsePrintFilesRequest | ClearParseCacheMessage,
   sendMessage: (content: ParsePrintResultMessage) => void,
-): void {
+): Promise<void> {
   switch (workerMessage.type) {
     case 'parseprintfiles': {
       try {
         const alreadyExistingUIDs_MUTABLE: Set<string> = new Set(workerMessage.alreadyExistingUIDs)
-        const results = workerMessage.files.map((file) => {
+        const parseOptions = createParseAndPrintOptions(
+          workerMessage.filePathMappings,
+          alreadyExistingUIDs_MUTABLE,
+          workerMessage.applySteganography,
+          workerMessage.parsingCacheOptions,
+        )
+        const { useParsingCache } = parseOptions.parsingCacheOptions
+        const fileParseResults = workerMessage.files.map((file) => {
           switch (file.type) {
             case 'parsefile':
-              return getParseFileResult(
-                file.filename,
-                workerMessage.filePathMappings,
-                file.content,
-                file.previousParsed,
-                file.versionNumber,
-                alreadyExistingUIDs_MUTABLE,
-                workerMessage.applySteganography,
-              )
+              return useParsingCache
+                ? getParseFileResultFromCache(file, parseOptions)
+                : getParseFileResult(file, parseOptions)
             case 'printandreparsefile':
-              return getPrintAndReparseCodeResult(
-                file.filename,
-                workerMessage.filePathMappings,
-                file.parseSuccess,
-                file.stripUIDs,
-                file.versionNumber,
-                alreadyExistingUIDs_MUTABLE,
-                workerMessage.applySteganography,
-              )
+              return getPrintAndReparseCodeResult(file, parseOptions)
             default:
               const _exhaustiveCheck: never = file
               throw new Error(`Unhandled file type ${JSON.stringify(file)}`)
           }
         })
+
+        // this separation is to make sure that we will Promise.all only if the cache is used
+        const results = useParsingCache
+          ? await Promise.all(fileParseResults)
+          : asSyncResults(fileParseResults)
+
         sendMessage(createParsePrintFilesResult(results, workerMessage.messageID))
       } catch (e) {
         sendMessage(createParsePrintFailedMessage(workerMessage.messageID))
@@ -57,39 +66,55 @@ export function handleMessage(
       }
       break
     }
+    case 'clearparsecache': {
+      await clearParseCache(workerMessage.parsingCacheOptions)
+      break
+    }
   }
 }
 
+async function getParseFileResultFromCache(
+  file: ParseFile,
+  parseOptions: ParseAndPrintOptions,
+): Promise<ParseFileResult> {
+  const cachedResult = await getParseResultFromCache(file, parseOptions.parsingCacheOptions)
+  if (cachedResult != null) {
+    return cachedResult
+  }
+  // if not in cache, parse the file as usual
+  return getParseFileResult(file, parseOptions)
+}
+
 export function getParseFileResult(
-  filename: string,
-  filePathMappings: FilePathMappings,
-  content: string,
-  oldParseResultForUIDComparison: ParseSuccess | null,
-  versionNumber: number,
-  alreadyExistingUIDs_MUTABLE: Set<string>,
-  applySteganography: SteganographyMode,
+  file: ParseFile,
+  parseOptions: ParseAndPrintOptions,
 ): ParseFileResult {
   const parseResult = lintAndParse(
-    filename,
-    filePathMappings,
-    content,
-    oldParseResultForUIDComparison,
-    alreadyExistingUIDs_MUTABLE,
+    file.filename,
+    parseOptions.filePathMappings,
+    file.content,
+    file.previousParsed,
+    parseOptions.alreadyExistingUIDs_MUTABLE,
     'trim-bounds',
-    applySteganography,
+    parseOptions.applySteganography,
   )
-  return createParseFileResult(filename, parseResult, versionNumber)
+  const result = createParseFileResult(file.filename, parseResult, file.versionNumber)
+  if (
+    result.parseResult.type === 'PARSE_SUCCESS' &&
+    parseOptions.parsingCacheOptions.useParsingCache
+  ) {
+    // non blocking cache write
+    void storeParseResultInCache(file, result, parseOptions.parsingCacheOptions)
+  }
+
+  return result
 }
 
 export function getPrintAndReparseCodeResult(
-  filename: string,
-  filePathMappings: FilePathMappings,
-  parseSuccess: ParseSuccess,
-  stripUIDs: boolean,
-  versionNumber: number,
-  alreadyExistingUIDs: Set<string>,
-  applySteganography: SteganographyMode,
+  file: PrintAndReparseFile,
+  parseOptions: ParseAndPrintOptions,
 ): PrintAndReparseResult {
+  const { filename, parseSuccess, stripUIDs, versionNumber } = file
   const printedCode = printCode(
     filename,
     printCodeOptions(false, true, true, stripUIDs),
@@ -100,13 +125,14 @@ export function getPrintAndReparseCodeResult(
   )
 
   const parseResult = getParseFileResult(
-    filename,
-    filePathMappings,
-    printedCode,
-    parseSuccess,
-    versionNumber,
-    alreadyExistingUIDs,
-    applySteganography,
+    createParseFile(filename, printedCode, parseSuccess, versionNumber),
+    parseOptions,
   )
   return createPrintAndReparseResult(filename, parseResult.parseResult, versionNumber, printedCode)
 }
+
+function asSyncResults(
+  results: (ParseFileResult | Promise<ParseFileResult> | PrintAndReparseResult)[],
+): ParseOrPrintResults {
+  return results as ParseOrPrintResults
+}
diff --git a/editor/src/core/workers/parser-printer/parser-printer.worker.ts b/editor/src/core/workers/parser-printer/parser-printer.worker.ts
index 97ef0e1130bc..777543ed4761 100644
--- a/editor/src/core/workers/parser-printer/parser-printer.worker.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer.worker.ts
@@ -1,13 +1,13 @@
 import '../../../vite-shims'
-import type { ParsePrintResultMessage } from '../common/worker-types'
+import type { ClearParseCacheMessage, ParsePrintResultMessage } from '../common/worker-types'
 import { handleMessage } from './parser-printer-worker'
 
 const ctx: Worker = self as any
 
-function sendMessageWebWorker(content: ParsePrintResultMessage) {
+function sendMessageWebWorker(content: ParsePrintResultMessage | ClearParseCacheMessage) {
   ctx.postMessage(content)
 }
 
 ctx.addEventListener('message', (event: MessageEvent) => {
-  handleMessage(event.data, sendMessageWebWorker)
+  void handleMessage(event.data, sendMessageWebWorker)
 })
diff --git a/editor/src/core/workers/test-workers.ts b/editor/src/core/workers/test-workers.ts
index 83e6074bf654..af69fab1a8f6 100644
--- a/editor/src/core/workers/test-workers.ts
+++ b/editor/src/core/workers/test-workers.ts
@@ -25,7 +25,11 @@ export class FakeParserPrinterWorker implements ParserPrinterWorker {
   }
 
   sendParsePrintMessage = (request: ParsePrintFilesRequest): void => {
-    handleParserPrinterMessage(request, this.receiveMessage)
+    void handleParserPrinterMessage(request, this.receiveMessage)
+  }
+
+  sendClearParseCacheMessage = (): void => {
+    // empty
   }
 }
 
diff --git a/editor/src/core/workers/workers.ts b/editor/src/core/workers/workers.ts
index e04f7e7cd865..a034212948a7 100644
--- a/editor/src/core/workers/workers.ts
+++ b/editor/src/core/workers/workers.ts
@@ -8,8 +8,14 @@ import {
   DEFAULT_HEARTBEAT_INTERVAL_MS,
   createWatchdogTerminateMessage,
 } from './watchdog-worker'
-import type { UtopiaTsWorkers, FileContent, ParsePrintFilesRequest } from './common/worker-types'
+import {
+  type UtopiaTsWorkers,
+  type FileContent,
+  type ParsePrintFilesRequest,
+  createClearParseCacheMessage,
+} from './common/worker-types'
 import type { ProjectContentTreeRoot } from '../../components/assets'
+import type { ParseCacheOptions } from '../shared/parse-cache-utils'
 
 export class UtopiaTsWorkersImplementation implements UtopiaTsWorkers {
   constructor(
@@ -26,6 +32,10 @@ export class UtopiaTsWorkersImplementation implements UtopiaTsWorkers {
     this.parserPrinterWorker.sendParsePrintMessage(request)
   }
 
+  sendClearParseCacheMessage(parsingCacheOptions: ParseCacheOptions): void {
+    this.parserPrinterWorker.sendClearParseCacheMessage(parsingCacheOptions)
+  }
+
   addParserPrinterEventListener(handler: (e: MessageEvent) => void): void {
     this.parserPrinterWorker.addParseFileResultEventListener(handler)
   }
@@ -58,6 +68,8 @@ export class UtopiaTsWorkersImplementation implements UtopiaTsWorkers {
 export interface ParserPrinterWorker {
   sendParsePrintMessage: (request: ParsePrintFilesRequest) => void
 
+  sendClearParseCacheMessage: (parsingCacheOptions: ParseCacheOptions) => void
+
   addParseFileResultEventListener(handler: (e: MessageEvent) => void): void
 
   removeParseFileResultEventListener(handler: (e: MessageEvent) => void): void
@@ -73,6 +85,10 @@ export class RealParserPrinterWorker implements ParserPrinterWorker {
     this.worker.postMessage(request)
   }
 
+  sendClearParseCacheMessage(parsingCacheOptions: ParseCacheOptions): void {
+    this.worker.postMessage(createClearParseCacheMessage(parsingCacheOptions))
+  }
+
   addParseFileResultEventListener(handler: (e: MessageEvent) => void): void {
     this.worker.addEventListener('message', handler)
   }
@@ -192,6 +208,10 @@ export class MockUtopiaTsWorkers implements UtopiaTsWorkers {
     // empty
   }
 
+  sendClearParseCacheMessage(): void {
+    // empty
+  }
+
   sendLinterRequestMessage(_filename: string, _content: string): void {
     // empty
   }
diff --git a/editor/src/utils/feature-switches.ts b/editor/src/utils/feature-switches.ts
index 9fa1a0064189..95a3541fbd1c 100644
--- a/editor/src/utils/feature-switches.ts
+++ b/editor/src/utils/feature-switches.ts
@@ -15,6 +15,9 @@ export type FeatureName =
   | 'Debug - Print UIDs'
   | 'Debug – Connections'
   | 'Condensed Navigator Entries'
+  | 'Use Parsing Cache'
+  | 'Verbose Log Cache'
+  | 'Arbitrary Code Cache'
   | 'Canvas Fast Selection Hack'
   | 'Roll Your Own'
   | 'Tailwind'
@@ -33,6 +36,9 @@ export const AllFeatureNames: FeatureName[] = [
   'Debug - Print UIDs',
   'Debug – Connections',
   'Condensed Navigator Entries',
+  'Use Parsing Cache',
+  'Verbose Log Cache',
+  'Arbitrary Code Cache',
   'Canvas Fast Selection Hack',
   'Roll Your Own',
   'Tailwind',
@@ -52,10 +58,19 @@ let FeatureSwitches: { [feature in FeatureName]: boolean } = {
   'Debug – Connections': false,
   Tailwind: false,
   'Condensed Navigator Entries': !IS_TEST_ENVIRONMENT,
+  'Use Parsing Cache': !IS_TEST_ENVIRONMENT,
+  'Verbose Log Cache': false,
+  'Arbitrary Code Cache': false,
   'Canvas Fast Selection Hack': true,
   'Roll Your Own': false,
 }
 
+export const FeaturesHiddenFromMainSettingsPane: FeatureName[] = [
+  'Use Parsing Cache',
+  'Verbose Log Cache',
+  'Arbitrary Code Cache',
+]
+
 export const STEGANOGRAPHY_ENABLED = false
 
 let FeatureSwitchLoaded: { [feature in FeatureName]?: boolean } = {}

From d48265010de699ef2ed74cf92f2cd96e964519a7 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Sat, 5 Oct 2024 13:18:39 +0300
Subject: [PATCH 097/272] feat(parser): parallel file parsing (#6382)

This PR enables parallel parsing of files, utilizing multiple parser
workers.
Until now we had only one `ParserPrinterWorker`, which had to handle
parsing all of the files serially. In our sample store this could be
~10-15s spent only on parsing (depending on the machine).

In this PR we're introducting the ability to spin multiple workers, and
divide the file load between them, allowing the parsing to be parallel.

**Note to reviewers:** Main logic changes are in `worker-types.ts` and
`workers.ts`

Some important points:
1. Since parsing the files happens on the load critical path, we can
easily hit a hardware limitation due to multiple workers/main thread
that take up all the processes. This limits us both in the number of new
workers we can spin up, and also causing N workers to work for more that
1/N of the time in parallel. Even though - there are still meaningful
gains.
2. There is an overhead to spinning up workers, since our parsing code
itself is heavy and takes some time to evaluate. A proper threadpool
solution might be able to solve that (spin workers when needed and keep
them alive as long as the parse load is large). However this requires
changing our entire worker mechansim, and can even hurt performance
since spinning up new workers in the "middle" of the parsing flow
creates an overhead. However this can be a future optimization - to
start with 3-4 workers in advance and if needed spin up more using a
threadpool library (`workerspool` or `threads`, for example).
3. Our current chunking algorithm splits the parsable files (not all
files are parsable) into N chunks that are more-or-less equal in terms
of the sum of their file length, and sends them in parallel to N
workers. This makes sure that all of the workers will work for roughly
the same amount of time. A proper threadpool queue-based solution could
be more efficient here (since it will always send the next file to an
available worker) but the difference to the current "naive" chunking
implementation wouldn't be that large, and it will also add a small
messaging overhead (sending each file in turn).
4. The current concurrency is 3, and this will be configurable from the
settings/RYO menu after #6381 will be merged.

**Commit Details:**

- Added support for multiple parse workers in `UtopiaTsWorkers`
- Changed `getParseResult` to chunk the files, and call on each chunk
`getParseResultSerial`, waiting for all of them to return before
returning the result
- `getParseResultSerial` now looks for the next available
`ParserPrinterWorker` to send the next chunk to, for parsing
- Worker code itself remained unchanged
- The feature can be toggles on/off from the settings menu

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode

Fixes #5655
---
 .../components/canvas/ui-jsx.test-utils.tsx   |  4 +-
 .../editor/store/dispatch-strategies.spec.tsx |  2 +-
 .../editor/store/dispatch-strategies.tsx      |  8 +-
 .../src/components/editor/store/dispatch.tsx  | 28 ++++--
 .../editor-dispatch-performance-logging.tsx   |  7 +-
 .../editor/store/worker-update-race.spec.tsx  |  2 +
 .../left-pane/roll-your-own-pane.tsx          | 17 +++-
 .../src/core/performance/performance-utils.ts | 38 ++++++++
 .../property-controls-local-parser-bridge.ts  |  2 +
 editor/src/core/shared/array-utils.spec.ts    | 20 ++++
 editor/src/core/shared/array-utils.ts         | 38 ++++++++
 .../shared/parser-projectcontents-utils.ts    |  2 +
 .../core/workers/common/concurrency-utils.ts  | 23 +++++
 .../src/core/workers/common/worker-types.ts   | 96 +++++++++++++++++--
 editor/src/core/workers/workers.ts            | 36 +++++--
 editor/src/templates/editor.tsx               | 12 +--
 editor/src/utils/feature-switches.ts          |  8 ++
 17 files changed, 299 insertions(+), 44 deletions(-)
 create mode 100644 editor/src/core/workers/common/concurrency-utils.ts

diff --git a/editor/src/components/canvas/ui-jsx.test-utils.tsx b/editor/src/components/canvas/ui-jsx.test-utils.tsx
index 62f1e81f2cb2..1b8796cbcb92 100644
--- a/editor/src/components/canvas/ui-jsx.test-utils.tsx
+++ b/editor/src/components/canvas/ui-jsx.test-utils.tsx
@@ -569,7 +569,7 @@ export async function renderTestEditorWithModel(
   }
 
   const workers = new UtopiaTsWorkersImplementation(
-    new FakeParserPrinterWorker(),
+    [new FakeParserPrinterWorker()],
     new FakeLinterWorker(),
     new FakeWatchdogWorker(),
   )
@@ -1042,7 +1042,7 @@ export function createBuiltinDependenciesWithTestWorkers(
   extraBuiltinDependencies: BuiltInDependencies,
 ): BuiltInDependencies {
   const workers = new UtopiaTsWorkersImplementation(
-    new FakeParserPrinterWorker(),
+    [new FakeParserPrinterWorker()],
     new FakeLinterWorker(),
     new FakeWatchdogWorker(),
   )
diff --git a/editor/src/components/editor/store/dispatch-strategies.spec.tsx b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
index f2788b0c7837..b85b7cdf2280 100644
--- a/editor/src/components/editor/store/dispatch-strategies.spec.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
@@ -105,7 +105,7 @@ function createEditorStore(
       },
     },
     workers: new UtopiaTsWorkersImplementation(
-      new FakeParserPrinterWorker(),
+      [new FakeParserPrinterWorker()],
       new FakeLinterWorker(),
       new FakeWatchdogWorker(),
     ),
diff --git a/editor/src/components/editor/store/dispatch-strategies.tsx b/editor/src/components/editor/store/dispatch-strategies.tsx
index 994c9e322cdc..8d2c0f818fdb 100644
--- a/editor/src/components/editor/store/dispatch-strategies.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.tsx
@@ -51,13 +51,12 @@ import type {
   StrategyApplicationResult,
 } from '../../canvas/canvas-strategies/canvas-strategy-types'
 import { strategyApplicationResult } from '../../canvas/canvas-strategies/canvas-strategy-types'
-import { isFeatureEnabled } from '../../../utils/feature-switches'
-import { PERFORMANCE_MARKS_ALLOWED } from '../../../common/env-vars'
 import { last } from '../../../core/shared/array-utils'
 import type { BuiltInDependencies } from '../../../core/es-modules/package-manager/built-in-dependencies-list'
 import { isInsertMode } from '../editor-modes'
 import { patchedCreateRemixDerivedDataMemo } from './remix-derived-data'
 import { allowedToEditProject } from './collaborative-editing'
+import { canMeasurePerformance } from '../../../core/performance/performance-utils'
 
 interface HandleStrategiesResult {
   unpatchedEditorState: EditorState
@@ -672,10 +671,7 @@ export function handleStrategies(
   result: EditorStoreUnpatched,
   oldDerivedState: DerivedState,
 ): HandleStrategiesResult & { patchedDerivedState: DerivedState } {
-  const MeasureDispatchTime =
-    (isFeatureEnabled('Debug – Performance Marks (Fast)') ||
-      isFeatureEnabled('Debug – Performance Marks (Slow)')) &&
-    PERFORMANCE_MARKS_ALLOWED
+  const MeasureDispatchTime = canMeasurePerformance()
 
   if (MeasureDispatchTime) {
     window.performance.mark('strategies_begin')
diff --git a/editor/src/components/editor/store/dispatch.tsx b/editor/src/components/editor/store/dispatch.tsx
index 0b3d0e8ab4cd..e8a522d2d7f1 100644
--- a/editor/src/components/editor/store/dispatch.tsx
+++ b/editor/src/components/editor/store/dispatch.tsx
@@ -1,4 +1,3 @@
-import { PERFORMANCE_MARKS_ALLOWED } from '../../../common/env-vars'
 import type { UtopiaTsWorkers } from '../../../core/workers/common/worker-types'
 import { getParseResult } from '../../../core/workers/common/worker-types'
 import { runLocalCanvasAction } from '../../../templates/editor-canvas'
@@ -59,7 +58,6 @@ import {
   getProjectChanges,
   sendVSCodeChanges,
 } from './vscode-changes'
-import { isFeatureEnabled } from '../../../utils/feature-switches'
 import { handleStrategies, updatePostActionState } from './dispatch-strategies'
 
 import type { MetaCanvasStrategy } from '../../canvas/canvas-strategies/canvas-strategies'
@@ -89,6 +87,15 @@ import {
 import type { PropertyControlsInfo } from '../../custom-code/code-file'
 import { getFilePathMappings } from '../../../core/model/project-file-utils'
 import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template'
+import {
+  getParserChunkCount,
+  getParserWorkerCount,
+  isConcurrencyLoggingEnabled,
+} from '../../../core/workers/common/concurrency-utils'
+import {
+  canMeasurePerformance,
+  startPerformanceMeasure,
+} from '../../../core/performance/performance-utils'
 import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 
 type DispatchResultFields = {
@@ -327,15 +334,27 @@ function maybeRequestModelUpdate(
 
   // Should anything need to be sent across, do so here.
   if (filesToUpdate.length > 0) {
+    const { endMeasure } = startPerformanceMeasure('file-parse', { uniqueId: true })
     const parseFinished = getParseResult(
       workers,
       filesToUpdate,
       getFilePathMappings(projectContents),
       existingUIDs,
       isSteganographyEnabled(),
+      getParserChunkCount(),
       getParseCacheOptions(),
     )
       .then((parseResult) => {
+        const duration = endMeasure()
+        if (isConcurrencyLoggingEnabled() && filesToUpdate.length > 1) {
+          console.info(
+            `parse finished for ${
+              filesToUpdate.length
+            } files, using ${getParserChunkCount()} chunks and ${getParserWorkerCount()} workers, in ${duration.toFixed(
+              2,
+            )}ms`,
+          )
+        }
         const updates = parseResult.map((fileResult) => {
           return parseResultToWorkerUpdates(fileResult)
         })
@@ -810,10 +829,7 @@ function editorDispatchInner(
 ): DispatchResult {
   // console.log('DISPATCH', simpleStringifyActions(dispatchedActions), dispatchedActions)
 
-  const MeasureDispatchTime =
-    (isFeatureEnabled('Debug – Performance Marks (Fast)') ||
-      isFeatureEnabled('Debug – Performance Marks (Slow)')) &&
-    PERFORMANCE_MARKS_ALLOWED
+  const MeasureDispatchTime = canMeasurePerformance()
 
   if (MeasureDispatchTime) {
     window.performance.mark('dispatch_begin')
diff --git a/editor/src/components/editor/store/editor-dispatch-performance-logging.tsx b/editor/src/components/editor/store/editor-dispatch-performance-logging.tsx
index 6f1290045faf..457bf3b37c58 100644
--- a/editor/src/components/editor/store/editor-dispatch-performance-logging.tsx
+++ b/editor/src/components/editor/store/editor-dispatch-performance-logging.tsx
@@ -1,14 +1,11 @@
-import { PERFORMANCE_MARKS_ALLOWED } from '../../../common/env-vars'
+import { canMeasurePerformance } from '../../../core/performance/performance-utils'
 import { isFeatureEnabled } from '../../../utils/feature-switches'
 import type { EditorAction } from '../action-types'
 import { simpleStringifyActions } from '../actions/action-utils'
 
 export function createPerformanceMeasure() {
   const MeasureSelectorsEnabled = isFeatureEnabled('Debug – Measure Selectors')
-  const PerformanceMarks =
-    (isFeatureEnabled('Debug – Performance Marks (Slow)') ||
-      isFeatureEnabled('Debug – Performance Marks (Fast)')) &&
-    PERFORMANCE_MARKS_ALLOWED
+  const PerformanceMarks = canMeasurePerformance()
 
   let stringifiedActions = ''
 
diff --git a/editor/src/components/editor/store/worker-update-race.spec.tsx b/editor/src/components/editor/store/worker-update-race.spec.tsx
index 1f84c4963a60..bd3a636d7210 100644
--- a/editor/src/components/editor/store/worker-update-race.spec.tsx
+++ b/editor/src/components/editor/store/worker-update-race.spec.tsx
@@ -27,6 +27,7 @@ jest.mock('../../../core/workers/common/worker-types', () => ({
     filePathMappings: FilePathMappings,
     alreadyExistingUIDs: Set<string>,
     applySteganography: SteganographyMode,
+    parserChunkCount: number,
     parsingCacheOptions: ParseCacheOptions,
   ): Promise<Array<ParseOrPrintResult>> {
     mockParseStartedCount++
@@ -38,6 +39,7 @@ jest.mock('../../../core/workers/common/worker-types', () => ({
         filePathMappings,
         alreadyExistingUIDs,
         applySteganography,
+        parserChunkCount,
         parsingCacheOptions,
       )
     mockLock2.resolve()
diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
index 936840a19ff8..5a47482e00bf 100644
--- a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
+++ b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
@@ -30,8 +30,10 @@ type GridFeatures = {
 
 type PerformanceFeatures = {
   parseCache: boolean
-  verboseLogCache: boolean
+  parallelParsing: boolean
   cacheArbitraryCode: boolean
+  verboseLogCache: boolean
+  logParseTimings: boolean
 }
 
 type RollYourOwnFeaturesTypes = {
@@ -47,6 +49,8 @@ const featureToFeatureFlagMap: Record<keyof Partial<PerformanceFeatures>, Featur
   parseCache: 'Use Parsing Cache',
   verboseLogCache: 'Verbose Log Cache',
   cacheArbitraryCode: 'Arbitrary Code Cache',
+  parallelParsing: 'Parallel Parsing',
+  logParseTimings: 'Log Parse Timings',
 }
 
 const defaultRollYourOwnFeatures: () => RollYourOwnFeatures = () => ({
@@ -64,8 +68,10 @@ const defaultRollYourOwnFeatures: () => RollYourOwnFeatures = () => ({
   },
   Performance: {
     parseCache: getFeatureFlagValue('parseCache'),
-    verboseLogCache: getFeatureFlagValue('verboseLogCache'),
+    parallelParsing: getFeatureFlagValue('parallelParsing'),
     cacheArbitraryCode: getFeatureFlagValue('cacheArbitraryCode'),
+    logParseTimings: getFeatureFlagValue('logParseTimings'),
+    verboseLogCache: getFeatureFlagValue('verboseLogCache'),
   },
 })
 
@@ -256,10 +262,15 @@ const SimpleFeatureControls = React.memo(({ subsection }: { subsection: Section
     <React.Fragment>
       {Object.keys(defaultFeatures[subsection]).map((key) => {
         const feat = key as keyof RollYourOwnFeaturesTypes[Section]
+        const featName = Object.keys(featureToFeatureFlagMap).includes(
+          feat as keyof typeof featureToFeatureFlagMap,
+        )
+          ? featureToFeatureFlagMap[feat as keyof typeof featureToFeatureFlagMap]
+          : feat
         const value = features[subsection][feat] ?? defaultFeatures[subsection][feat]
         return (
           <UIGridRow padded variant='<----------1fr---------><-auto->' key={`feat-${feat}`}>
-            <Ellipsis title={feat}>{feat}</Ellipsis>
+            <Ellipsis title={featName}>{featName}</Ellipsis>
             {typeof value === 'boolean' ? (
               <input type='checkbox' checked={value} onChange={onChange(feat)} />
             ) : typeof value === 'string' ? (
diff --git a/editor/src/core/performance/performance-utils.ts b/editor/src/core/performance/performance-utils.ts
index d67246dacfc1..ca0ca4c0bc2a 100644
--- a/editor/src/core/performance/performance-utils.ts
+++ b/editor/src/core/performance/performance-utils.ts
@@ -1,3 +1,6 @@
+import { PERFORMANCE_MARKS_ALLOWED } from '../../common/env-vars'
+import { isFeatureEnabled } from '../../utils/feature-switches'
+
 export function timeFunction(fnName: string, fn: () => any, iterations: number = 100) {
   const start = Date.now()
   for (var i = 0; i < iterations; i++) {
@@ -8,3 +11,38 @@ export function timeFunction(fnName: string, fn: () => any, iterations: number =
   // eslint-disable-next-line no-console
   console.log(`${fnName} took ${timeTaken}ms`)
 }
+
+export function canMeasurePerformance(): boolean {
+  return (
+    (isFeatureEnabled('Debug – Performance Marks (Fast)') ||
+      isFeatureEnabled('Debug – Performance Marks (Slow)')) &&
+    PERFORMANCE_MARKS_ALLOWED
+  )
+}
+
+export function startPerformanceMeasure(
+  measureName: string,
+  { uniqueId }: { uniqueId?: boolean } = {},
+): { id: string; endMeasure: () => number } {
+  const id = uniqueId ? `${measureName}-${Math.random()}` : measureName
+  if (PERFORMANCE_MARKS_ALLOWED) {
+    performance.mark(`${id}-start`)
+  }
+  return {
+    id: id,
+    endMeasure: () => endPerformanceMeasure(id),
+  }
+}
+
+export function endPerformanceMeasure(id: string): number {
+  if (PERFORMANCE_MARKS_ALLOWED) {
+    performance.mark(`${id}-end`)
+    performance.measure(`${id}-duration`, `${id}-start`, `${id}-end`)
+    const measurements = performance.getEntriesByName(`${id}-duration`)
+    const latestMeasurement = measurements[measurements.length - 1]
+    if (latestMeasurement != null) {
+      return latestMeasurement.duration
+    }
+  }
+  return 0
+}
diff --git a/editor/src/core/property-controls/property-controls-local-parser-bridge.ts b/editor/src/core/property-controls/property-controls-local-parser-bridge.ts
index 08a55f0e197d..466827543689 100644
--- a/editor/src/core/property-controls/property-controls-local-parser-bridge.ts
+++ b/editor/src/core/property-controls/property-controls-local-parser-bridge.ts
@@ -7,6 +7,7 @@ import type { Imports } from '../shared/project-file-types'
 import { isParseFailure, isParseSuccess } from '../shared/project-file-types'
 import { emptySet } from '../shared/set-utils'
 import { isSteganographyEnabled } from '../shared/stegano-text'
+import { getParserChunkCount } from '../workers/common/concurrency-utils'
 import type { UtopiaTsWorkers } from '../workers/common/worker-types'
 import { createParseFile, getParseResult } from '../workers/common/worker-types'
 import { ARBITRARY_CODE_FILE_NAME } from '../workers/common/worker-types'
@@ -51,6 +52,7 @@ async function getParseResultForUserStrings(
     [],
     emptySet(),
     isSteganographyEnabled(),
+    getParserChunkCount(),
     getParseCacheOptions(),
   )
 
diff --git a/editor/src/core/shared/array-utils.spec.ts b/editor/src/core/shared/array-utils.spec.ts
index 1b92c3856055..4ecdfaa5c882 100644
--- a/editor/src/core/shared/array-utils.spec.ts
+++ b/editor/src/core/shared/array-utils.spec.ts
@@ -3,6 +3,8 @@ import {
   intersection,
   mapAndFilter,
   possiblyUniqueInArray,
+  sortArrayByAndReturnPermutation,
+  revertArrayOrder,
   strictEvery,
 } from './array-utils'
 
@@ -53,6 +55,24 @@ describe('aperture', () => {
   })
 })
 
+describe('sortArrayByAndReturnPermutation', () => {
+  it('should sort the array', () => {
+    const { sortedArray } = sortArrayByAndReturnPermutation([3, 1, 2], (a) => a)
+    expect(sortedArray).toEqual([1, 2, 3])
+  })
+  it('should respect the sort order', () => {
+    const { sortedArray } = sortArrayByAndReturnPermutation([3, 1, 2], (a) => a, false)
+    expect(sortedArray).toEqual([3, 2, 1])
+  })
+  it('should return the permutation that reverses the sort', () => {
+    const originalArray = [10, 5, 6, 32, 102, 7, 91]
+    const { sortedArray, permutation } = sortArrayByAndReturnPermutation(originalArray, (a) => a)
+    expect(sortedArray).toEqual([5, 6, 7, 10, 32, 91, 102])
+    const reversedToOriginal = revertArrayOrder(sortedArray, permutation)
+    expect(reversedToOriginal).toEqual(originalArray)
+  })
+})
+
 describe('mapAndFilter', () => {
   const input = [1, 2, 3, 4, 5]
   const mapFn = (n: number) => n + 10
diff --git a/editor/src/core/shared/array-utils.ts b/editor/src/core/shared/array-utils.ts
index d4381589a4be..3823f2dde770 100644
--- a/editor/src/core/shared/array-utils.ts
+++ b/editor/src/core/shared/array-utils.ts
@@ -538,3 +538,41 @@ export function matrixGetter<T>(array: T[], width: number): (row: number, column
     return array[row * width + column]
   }
 }
+
+export function chunkArrayEqually<T>(
+  sortedArray: T[],
+  numberOfChunks: number,
+  valueFn: (t: T) => number,
+): T[][] {
+  const chunks: T[][] = Array.from({ length: numberOfChunks }, () => [])
+  const chunkSums: number[] = Array(numberOfChunks).fill(0)
+  for (const data of sortedArray) {
+    let minIndex = 0
+    for (let i = 1; i < numberOfChunks; i++) {
+      if (chunkSums[i] < chunkSums[minIndex]) {
+        minIndex = i
+      }
+    }
+    chunks[minIndex].push(data)
+    chunkSums[minIndex] += valueFn(data)
+  }
+  return chunks.filter((chunk) => chunk.length > 0)
+}
+
+export function sortArrayByAndReturnPermutation<T>(
+  array: T[],
+  sortFn: (t: T) => number,
+  ascending: boolean = true,
+): { sortedArray: T[]; permutation: number[] } {
+  const permutation = array.map((_, index) => index)
+  permutation.sort((a, b) => {
+    const sortResult = sortFn(array[a]) - sortFn(array[b])
+    return ascending ? sortResult : -sortResult
+  })
+  const sortedArray = permutation.map((index) => array[index])
+  return { sortedArray, permutation }
+}
+
+export function revertArrayOrder<T>(array: T[], permutation: number[]): T[] {
+  return array.map((_, index) => array[permutation.indexOf(index)])
+}
diff --git a/editor/src/core/shared/parser-projectcontents-utils.ts b/editor/src/core/shared/parser-projectcontents-utils.ts
index 0199fdbe41b8..8e17834abefb 100644
--- a/editor/src/core/shared/parser-projectcontents-utils.ts
+++ b/editor/src/core/shared/parser-projectcontents-utils.ts
@@ -35,6 +35,7 @@ import { fastForEach } from '../../core/shared/utils'
 import { codeNeedsPrinting, codeNeedsParsing } from '../../core/workers/common/project-file-utils'
 import { isFeatureEnabled } from '../../utils/feature-switches'
 import { isSteganographyEnabled } from './stegano-text'
+import { getParserChunkCount } from '../workers/common/concurrency-utils'
 import { getParseCacheOptions } from './parse-cache-utils'
 
 export function parseResultToWorkerUpdates(fileResult: ParseOrPrintResult): WorkerUpdate {
@@ -204,6 +205,7 @@ export async function updateProjectContentsWithParseResults(
     getFilePathMappings(projectContents),
     existingUIDs,
     isSteganographyEnabled(),
+    getParserChunkCount(),
     getParseCacheOptions(),
   )
 
diff --git a/editor/src/core/workers/common/concurrency-utils.ts b/editor/src/core/workers/common/concurrency-utils.ts
new file mode 100644
index 000000000000..c8d5e015e22d
--- /dev/null
+++ b/editor/src/core/workers/common/concurrency-utils.ts
@@ -0,0 +1,23 @@
+import { isFeatureEnabled } from '../../../utils/feature-switches'
+
+// TODO: this will be configurable from the RYO menu
+export const PARSE_CONCURRENCY = 3
+const PARSER_CONCURRENCY_FEATURE = 'Parallel Parsing'
+const LOG_CONCURRENCY_TIMINGS_FEATURE = 'Log Parse Timings'
+
+export function isConcurrencyEnabled() {
+  return isFeatureEnabled(PARSER_CONCURRENCY_FEATURE)
+}
+
+export function getParserWorkerCount() {
+  return isConcurrencyEnabled() ? PARSE_CONCURRENCY : 1
+}
+
+export function getParserChunkCount() {
+  return isConcurrencyEnabled() ? PARSE_CONCURRENCY : 1
+}
+
+// TODO: this will be configurable from the RYO menu
+export function isConcurrencyLoggingEnabled() {
+  return isFeatureEnabled(LOG_CONCURRENCY_TIMINGS_FEATURE)
+}
diff --git a/editor/src/core/workers/common/worker-types.ts b/editor/src/core/workers/common/worker-types.ts
index c094cc8e71c5..e8d3a89145ab 100644
--- a/editor/src/core/workers/common/worker-types.ts
+++ b/editor/src/core/workers/common/worker-types.ts
@@ -1,3 +1,8 @@
+import {
+  chunkArrayEqually,
+  sortArrayByAndReturnPermutation,
+  revertArrayOrder,
+} from '../../../core/shared/array-utils'
 import type { ParseCacheOptions } from '../../shared/parse-cache-utils'
 import type { ProjectContentTreeRoot } from '../../../components/assets'
 import type { ErrorMessage } from '../../shared/error-messages'
@@ -11,6 +16,8 @@ import type {
 import type { SteganographyMode } from '../parser-printer/parser-printer'
 import type { RawSourceMap } from '../ts/ts-typings/RawSourceMap'
 import type { FilePathMappings } from './project-file-utils'
+import type { ParserPrinterWorker } from '../workers'
+import { isParseableFile } from '../../../core/shared/file-utils'
 
 export const ARBITRARY_CODE_FILE_NAME = 'code.tsx'
 
@@ -207,7 +214,75 @@ export function createParsePrintFilesRequest(
 
 let PARSE_PRINT_MESSAGE_COUNTER: number = 0
 
+const fileParsableLength = (file: ParseOrPrint) =>
+  file.type === 'parsefile' && isParseableFile(file.filename) ? file.content.length : 0
+
 export function getParseResult(
+  workers: UtopiaTsWorkers,
+  files: Array<ParseOrPrint>,
+  filePathMappings: FilePathMappings,
+  alreadyExistingUIDs: Set<string>,
+  applySteganography: SteganographyMode,
+  numChunks: number = 1,
+  parsingCacheOptions: ParseCacheOptions,
+): Promise<Array<ParseOrPrintResult>> {
+  // this is to eliminate unnecessary overhead when numChunks is 1
+  if (numChunks === 1 || files.length === 1) {
+    return getParseResultSerial(
+      workers,
+      files,
+      filePathMappings,
+      alreadyExistingUIDs,
+      applySteganography,
+      parsingCacheOptions,
+    )
+  } else {
+    return getParseResultChunked(
+      workers,
+      files,
+      filePathMappings,
+      alreadyExistingUIDs,
+      applySteganography,
+      numChunks,
+      parsingCacheOptions,
+    )
+  }
+}
+
+export async function getParseResultChunked(
+  workers: UtopiaTsWorkers,
+  files: Array<ParseOrPrint>,
+  filePathMappings: FilePathMappings,
+  alreadyExistingUIDs: Set<string>,
+  applySteganography: SteganographyMode,
+  numChunks: number = 1,
+  parsingCacheOptions: ParseCacheOptions,
+): Promise<Array<ParseOrPrintResult>> {
+  const { sortedArray, permutation } = sortArrayByAndReturnPermutation(
+    [...files],
+    fileParsableLength,
+    false,
+  )
+  const chunks = chunkArrayEqually(sortedArray, numChunks, fileParsableLength)
+
+  const promises = chunks.map((chunk) =>
+    getParseResultSerial(
+      workers,
+      chunk,
+      filePathMappings,
+      alreadyExistingUIDs,
+      applySteganography,
+      parsingCacheOptions,
+    ),
+  )
+  const results = await Promise.all(promises)
+  const flattenedResults = results.flat()
+
+  // this is to return the results in the original order
+  return revertArrayOrder(flattenedResults, permutation)
+}
+
+export function getParseResultSerial(
   workers: UtopiaTsWorkers,
   files: Array<ParseOrPrint>,
   filePathMappings: FilePathMappings,
@@ -217,6 +292,7 @@ export function getParseResult(
 ): Promise<Array<ParseOrPrintResult>> {
   const messageIDForThisRequest = PARSE_PRINT_MESSAGE_COUNTER++
   return new Promise((resolve, reject) => {
+    const availableWorker = workers.getNextParserPrinterWorker()
     const handleMessage = (e: MessageEvent) => {
       const data = e.data as ParsePrintResultMessage
       // Ensure that rapidly fired requests are distinguished between the handlers.
@@ -224,19 +300,19 @@ export function getParseResult(
         switch (data.type) {
           case 'parseprintfilesresult': {
             resolve(data.files)
-            workers.removeParserPrinterEventListener(handleMessage)
+            workers.removeParserPrinterEventListener(handleMessage, availableWorker)
             break
           }
           case 'parseprintfailed': {
             reject()
-            workers.removeParserPrinterEventListener(handleMessage)
+            workers.removeParserPrinterEventListener(handleMessage, availableWorker)
             break
           }
         }
       }
     }
 
-    workers.addParserPrinterEventListener(handleMessage)
+    workers.addParserPrinterEventListener(handleMessage, availableWorker)
     workers.sendParsePrintMessage(
       createParsePrintFilesRequest(
         files,
@@ -246,6 +322,7 @@ export function getParseResult(
         applySteganography,
         parsingCacheOptions,
       ),
+      availableWorker,
     )
   })
 }
@@ -407,11 +484,18 @@ export function createInitTSWorkerMessage(
 }
 
 export interface UtopiaTsWorkers {
-  sendParsePrintMessage: (request: ParsePrintFilesRequest) => void
+  getNextParserPrinterWorker: () => ParserPrinterWorker
+  sendParsePrintMessage: (request: ParsePrintFilesRequest, worker: ParserPrinterWorker) => void
   sendClearParseCacheMessage: (parsingCacheOptions: ParseCacheOptions) => void
   sendLinterRequestMessage: (filename: string, content: string) => void
-  addParserPrinterEventListener: (handler: (e: MessageEvent) => void) => void
-  removeParserPrinterEventListener: (handler: (e: MessageEvent) => void) => void
+  addParserPrinterEventListener: (
+    handler: (e: MessageEvent) => void,
+    worker: ParserPrinterWorker,
+  ) => void
+  removeParserPrinterEventListener: (
+    handler: (e: MessageEvent) => void,
+    worker: ParserPrinterWorker,
+  ) => void
   addLinterResultEventListener: (handler: (e: MessageEvent) => void) => void
   removeLinterResultEventListener: (handler: (e: MessageEvent) => void) => void
   initWatchdogWorker(projectID: string): void
diff --git a/editor/src/core/workers/workers.ts b/editor/src/core/workers/workers.ts
index a034212948a7..667439e27381 100644
--- a/editor/src/core/workers/workers.ts
+++ b/editor/src/core/workers/workers.ts
@@ -15,11 +15,13 @@ import {
   createClearParseCacheMessage,
 } from './common/worker-types'
 import type { ProjectContentTreeRoot } from '../../components/assets'
+import { FakeParserPrinterWorker } from './test-workers'
 import type { ParseCacheOptions } from '../shared/parse-cache-utils'
 
 export class UtopiaTsWorkersImplementation implements UtopiaTsWorkers {
+  private parserArrayCounter = 0
   constructor(
-    private parserPrinterWorker: ParserPrinterWorker,
+    private parserPrinterWorkerArray: ParserPrinterWorker[],
     private linterWorker: LinterWorker,
     private watchdogWorker: WatchdogWorker,
   ) {}
@@ -28,20 +30,34 @@ export class UtopiaTsWorkersImplementation implements UtopiaTsWorkers {
     this.linterWorker.sendLinterRequestMessage(filename, content)
   }
 
-  sendParsePrintMessage(request: ParsePrintFilesRequest): void {
-    this.parserPrinterWorker.sendParsePrintMessage(request)
+  getNextParserPrinterWorker(): ParserPrinterWorker {
+    const parserPrinterWorker = this.parserPrinterWorkerArray[this.parserArrayCounter]
+    this.parserArrayCounter = (this.parserArrayCounter + 1) % this.parserPrinterWorkerArray.length
+    return parserPrinterWorker
+  }
+
+  sendParsePrintMessage(request: ParsePrintFilesRequest, worker: ParserPrinterWorker): void {
+    worker.sendParsePrintMessage(request)
   }
 
   sendClearParseCacheMessage(parsingCacheOptions: ParseCacheOptions): void {
-    this.parserPrinterWorker.sendClearParseCacheMessage(parsingCacheOptions)
+    this.parserPrinterWorkerArray.forEach((worker) => {
+      worker.sendClearParseCacheMessage(parsingCacheOptions)
+    })
   }
 
-  addParserPrinterEventListener(handler: (e: MessageEvent) => void): void {
-    this.parserPrinterWorker.addParseFileResultEventListener(handler)
+  addParserPrinterEventListener(
+    handler: (e: MessageEvent) => void,
+    worker: ParserPrinterWorker,
+  ): void {
+    worker.addParseFileResultEventListener(handler)
   }
 
-  removeParserPrinterEventListener(handler: (e: MessageEvent) => void): void {
-    this.parserPrinterWorker.removeParseFileResultEventListener(handler)
+  removeParserPrinterEventListener(
+    handler: (e: MessageEvent) => void,
+    worker: ParserPrinterWorker,
+  ): void {
+    worker.removeParseFileResultEventListener(handler)
   }
 
   addLinterResultEventListener(handler: (e: MessageEvent) => void): void {
@@ -193,6 +209,10 @@ export class RealWatchdogWorker implements WatchdogWorker {
 }
 
 export class MockUtopiaTsWorkers implements UtopiaTsWorkers {
+  getNextParserPrinterWorker(): ParserPrinterWorker {
+    return new FakeParserPrinterWorker()
+  }
+
   sendInitMessage(
     _typeDefinitions: TypeDefinitions,
     _projectContents: ProjectContentTreeRoot,
diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index 8f9350ce9114..d65daff780fb 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -10,7 +10,6 @@ import { useAtomsDevtools } from 'jotai-devtools'
 import '../utils/vite-hmr-config'
 import {
   getProjectID,
-  PERFORMANCE_MARKS_ALLOWED,
   PROBABLY_ELECTRON,
   PRODUCTION_ENV,
   requireElectron,
@@ -101,7 +100,7 @@ import * as EP from '../core/shared/element-path'
 import { waitUntil } from '../core/shared/promise-utils'
 import { sendSetVSCodeTheme } from '../core/vscode/vscode-bridge'
 import type { ElementPath } from '../core/shared/project-file-types'
-import { uniq, uniqBy } from '../core/shared/array-utils'
+import { createArrayWithLength, uniq, uniqBy } from '../core/shared/array-utils'
 import { updateUserDetailsWhenAuthenticated } from '../core/shared/github/helpers'
 import { DispatchContext } from '../components/editor/store/dispatch-context'
 import {
@@ -132,6 +131,8 @@ import {
   runDomSamplerGroups,
 } from '../components/canvas/dom-sampler'
 import { omitWithPredicate } from '../core/shared/object-utils'
+import { getParserWorkerCount } from '../core/workers/common/concurrency-utils'
+import { canMeasurePerformance } from '../core/performance/performance-utils'
 import { getChildGroupsForNonGroupParents } from '../components/canvas/canvas-strategies/strategies/fragment-like-helpers'
 
 if (PROBABLY_ELECTRON) {
@@ -250,7 +251,7 @@ export class Editor {
       )
 
     const workers = new UtopiaTsWorkersImplementation(
-      new RealParserPrinterWorker(),
+      createArrayWithLength(getParserWorkerCount(), () => new RealParserPrinterWorker()),
       new RealLinterWorker(),
       watchdogWorker,
     )
@@ -442,10 +443,7 @@ export class Editor {
     Measure.logActions(dispatchedActions)
 
     const MeasureSelectors = isFeatureEnabled('Debug – Measure Selectors')
-    const PerformanceMarks =
-      (isFeatureEnabled('Debug – Performance Marks (Slow)') ||
-        isFeatureEnabled('Debug – Performance Marks (Fast)')) &&
-      PERFORMANCE_MARKS_ALLOWED
+    const PerformanceMarks = canMeasurePerformance()
 
     const runDispatch = () => {
       const oldEditorState = this.storedState
diff --git a/editor/src/utils/feature-switches.ts b/editor/src/utils/feature-switches.ts
index 95a3541fbd1c..31674c965b38 100644
--- a/editor/src/utils/feature-switches.ts
+++ b/editor/src/utils/feature-switches.ts
@@ -14,6 +14,8 @@ export type FeatureName =
   | 'Project Thumbnail Generation'
   | 'Debug - Print UIDs'
   | 'Debug – Connections'
+  | 'Parallel Parsing'
+  | 'Log Parse Timings'
   | 'Condensed Navigator Entries'
   | 'Use Parsing Cache'
   | 'Verbose Log Cache'
@@ -35,6 +37,8 @@ export const AllFeatureNames: FeatureName[] = [
   'Project Thumbnail Generation',
   'Debug - Print UIDs',
   'Debug – Connections',
+  'Parallel Parsing',
+  'Log Parse Timings',
   'Condensed Navigator Entries',
   'Use Parsing Cache',
   'Verbose Log Cache',
@@ -56,6 +60,8 @@ let FeatureSwitches: { [feature in FeatureName]: boolean } = {
   'Project Thumbnail Generation': false,
   'Debug - Print UIDs': false,
   'Debug – Connections': false,
+  'Parallel Parsing': !IS_TEST_ENVIRONMENT,
+  'Log Parse Timings': false,
   Tailwind: false,
   'Condensed Navigator Entries': !IS_TEST_ENVIRONMENT,
   'Use Parsing Cache': !IS_TEST_ENVIRONMENT,
@@ -69,6 +75,8 @@ export const FeaturesHiddenFromMainSettingsPane: FeatureName[] = [
   'Use Parsing Cache',
   'Verbose Log Cache',
   'Arbitrary Code Cache',
+  'Parallel Parsing',
+  'Log Parse Timings',
 ]
 
 export const STEGANOGRAPHY_ENABLED = false

From 102ad76c1ddb0330c136d52338da25c70291af79 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Mon, 7 Oct 2024 12:18:34 +0200
Subject: [PATCH 098/272] Better grid rearrange strategies (#6472)

**Problem:**
The grid rearrange strategies were stateful: they used the grid custom
strategy state to store the cell under the mouse at the beginning, and
used that to check how much the element has to be moved. It also cached
the last cell under the mouse, so the element does not jump back to its
original position while you are over a gap between cells.

**Fix:**
I modified the strategy so the behavior does not rely on the custom
strategy state. It still writes into the strategy state though, because
that is the input for the grid control and the cell animation, but the
strategy result does not depend on it. (migrating those to prop controls
can come in a subsequent PR)

The new algorithm:
- strategy checks the grid cell position of the drag start mouse
position in the grid child
- strategy uses the offset from above to get the new grid cell coords of
the elements compared to the current mouse position

**Changes**:
- I needed a way to find a cell under the mouse which returns the
closest cell even when you are over a gap.
(`getClosestGridCellToPointFromMetadata`)
- Removed `draggingFromCell` and `originalRootCell` from
`GridCustomStrategyState`
- Custom state is not an input to `runGridRearrangeMove` anymore

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../canvas-strategy-types.ts                  |   4 -
 .../strategies/grid-cell-bounds.ts            |  48 ++++-
 .../strategies/grid-helpers.ts                | 192 +++++++-----------
 .../grid-rearrange-keyboard-strategy.ts       |   4 +-
 .../grid-rearrange-move-duplicate-strategy.ts |   9 +-
 .../grid-rearrange-move-strategy.ts           |  13 +-
 .../editor/store/dispatch-strategies.spec.tsx |  16 --
 .../components/inspector/inspector-common.ts  |   1 -
 editor/src/core/shared/math-utils.ts          |  26 +++
 9 files changed, 149 insertions(+), 164 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
index 2ba1bcf77e78..7ce93c8adb09 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
@@ -30,8 +30,6 @@ export interface CustomStrategyState {
 
 export type GridCustomStrategyState = {
   targetCellData: TargetGridCellData | null
-  draggingFromCell: GridCellCoordinates | null
-  originalRootCell: GridCellCoordinates | null
   currentRootCell: GridCellCoordinates | null
   metadataCacheForGrids: { [gridPath: string]: ElementInstanceMetadata }
 }
@@ -48,8 +46,6 @@ export function defaultCustomStrategyState(): CustomStrategyState {
     action: null,
     grid: {
       targetCellData: null,
-      draggingFromCell: null,
-      originalRootCell: null,
       currentRootCell: null,
       metadataCacheForGrids: {},
     },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
index 29f819d35a98..ea07d028e61d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -2,12 +2,13 @@ import type { ElementPath } from 'utopia-shared/src/types'
 import type { ElementInstanceMetadata } from '../../../../core/shared/element-template'
 import {
   canvasPoint,
+  distanceFromPointToRectangle,
   isInfinityRectangle,
   offsetPoint,
   rectContainsPointInclusive,
 } from '../../../../core/shared/math-utils'
 import * as EP from '../../../../core/shared/element-path'
-import { type GridCellGlobalFrames, type TargetGridCellData } from './grid-helpers'
+import type { TargetGridCellData, GridCellGlobalFrames } from './grid-helpers'
 import type { CanvasPoint } from '../../../../core/shared/math-utils'
 
 export type GridCellCoordinates = { row: number; column: number }
@@ -57,16 +58,51 @@ function getGridCellUnderPoint(
   return null
 }
 
-export function getGridCellBoundsFromCanvas(
-  cell: ElementInstanceMetadata,
+export function getClosestGridCellToPointFromMetadata(
+  grid: ElementInstanceMetadata,
+  point: CanvasPoint,
+): TargetGridCellData | null {
+  const gridCellGlobalFrames = grid.specialSizeMeasurements.gridCellGlobalFrames
+
+  if (gridCellGlobalFrames == null) {
+    return null
+  }
+
+  return getClosestGridCellToPoint(gridCellGlobalFrames, point)
+}
+
+export function getClosestGridCellToPoint(
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  point: CanvasPoint,
+): TargetGridCellData | null {
+  let closestCell: TargetGridCellData | null = null
+  let closestDistance = Infinity
+
+  for (let i = 0; i < gridCellGlobalFrames.length; i++) {
+    for (let j = 0; j < gridCellGlobalFrames[i].length; j++) {
+      const currentDistance = distanceFromPointToRectangle(point, gridCellGlobalFrames[i][j])
+      if (currentDistance < closestDistance) {
+        closestCell = {
+          gridCellCoordinates: gridCellCoordinates(i + 1, j + 1),
+          cellCanvasRectangle: gridCellGlobalFrames[i][j],
+        }
+        closestDistance = currentDistance
+      }
+    }
+  }
+  return closestCell
+}
+
+export function getGridChildCellCoordBoundsFromCanvas(
+  child: ElementInstanceMetadata,
   grid: ElementInstanceMetadata,
 ) {
-  const cellFrame = cell.globalFrame
+  const cellFrame = child.globalFrame
   if (cellFrame == null || isInfinityRectangle(cellFrame)) {
     return null
   }
 
-  const cellOrigin = getGridCellUnderMouseFromMetadata(grid, cellFrame)
+  const cellOrigin = getClosestGridCellToPointFromMetadata(grid, cellFrame)
   if (cellOrigin == null) {
     return null
   }
@@ -78,7 +114,7 @@ export function getGridCellBoundsFromCanvas(
       y: cellFrame.height,
     }),
   )
-  const cellEnd = getGridCellUnderMouseFromMetadata(grid, cellEndPoint)
+  const cellEnd = getClosestGridCellToPointFromMetadata(grid, cellEndPoint)
   if (cellEnd == null) {
     return null
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index f5e59e79df05..38b71a3b4a9b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -34,124 +34,101 @@ import { deleteProperties } from '../../commands/delete-properties-command'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { setCssLengthProperty } from '../../commands/set-css-length-command'
 import { setProperty } from '../../commands/set-property-command'
-import type {
-  CustomStrategyState,
-  CustomStrategyStatePatch,
-  GridCustomStrategyState,
-} from '../canvas-strategy-types'
+import type { CustomStrategyState } from '../canvas-strategy-types'
 import type { DragInteractionData } from '../interaction-state'
 import type { GridCellCoordinates } from './grid-cell-bounds'
-import { getGridCellUnderMouseFromMetadata, gridCellCoordinates } from './grid-cell-bounds'
+import {
+  getClosestGridCellToPoint,
+  getGridChildCellCoordBoundsFromCanvas,
+  gridCellCoordinates,
+} from './grid-cell-bounds'
 import { mapDropNulls } from '../../../../core/shared/array-utils'
 import { assertNever } from '../../../../core/shared/utils'
 
+const emptyGridRearrangeMoveResult = {
+  commands: [],
+  targetCell: null,
+  targetRootCell: null,
+}
+
 export function runGridRearrangeMove(
   targetElement: ElementPath,
   selectedElement: ElementPath,
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
-  customState: GridCustomStrategyState,
 ): {
   commands: CanvasCommand[]
   targetCell: TargetGridCellData | null
-  draggingFromCell: GridCellCoordinates | null
-  originalRootCell: GridCellCoordinates | null
   targetRootCell: GridCellCoordinates | null
 } {
   if (interactionData.drag == null) {
-    return {
-      commands: [],
-      targetCell: null,
-      originalRootCell: null,
-      draggingFromCell: null,
-      targetRootCell: null,
-    }
+    return emptyGridRearrangeMoveResult
   }
 
   const parentGridPath = EP.parentPath(selectedElement)
   const grid = MetadataUtils.findElementByElementPath(jsxMetadata, parentGridPath)
 
   if (grid == null) {
-    return {
-      commands: [],
-      targetCell: null,
-      originalRootCell: null,
-      draggingFromCell: null,
-      targetRootCell: null,
-    }
+    return emptyGridRearrangeMoveResult
   }
 
-  const mousePos = offsetPoint(interactionData.dragStart, interactionData.drag)
-
-  const targetCellData =
-    getGridCellUnderMouseFromMetadata(grid, mousePos) ?? customState.targetCellData
+  const { gridCellGlobalFrames, containerGridProperties: gridTemplate } =
+    grid.specialSizeMeasurements
+  if (gridCellGlobalFrames == null) {
+    return emptyGridRearrangeMoveResult
+  }
 
-  if (targetCellData == null) {
-    return {
-      commands: [],
-      targetCell: null,
-      draggingFromCell: null,
-      originalRootCell: null,
-      targetRootCell: null,
-    }
+  const mousePos = offsetPoint(interactionData.dragStart, interactionData.drag)
+  const targetCellData = getClosestGridCellToPoint(gridCellGlobalFrames, mousePos)
+  const targetCellCoords = targetCellData?.gridCellCoordinates
+  if (targetCellCoords == null) {
+    return emptyGridRearrangeMoveResult
   }
 
-  const targetCellUnderMouse = targetCellData?.gridCellCoordinates ?? null
+  const draggingFromCellCoords = getClosestGridCellToPoint(
+    gridCellGlobalFrames,
+    interactionData.dragStart,
+  )?.gridCellCoordinates
+  if (draggingFromCellCoords == null) {
+    return emptyGridRearrangeMoveResult
+  }
 
   const originalElementMetadata = MetadataUtils.findElementByElementPath(
     jsxMetadata,
     selectedElement,
   )
   if (originalElementMetadata == null) {
-    return {
-      commands: [],
-      targetCell: null,
-      originalRootCell: null,
-      draggingFromCell: null,
-      targetRootCell: null,
-    }
+    return emptyGridRearrangeMoveResult
   }
 
-  const containerMetadata = MetadataUtils.findElementByElementPath(
-    jsxMetadata,
-    EP.parentPath(selectedElement),
+  // measured cell coord bounds on the canvas, this is the default when the cell position is not explicitly set
+  const originalElementCellCoordsOnCanvas = getGridChildCellCoordBoundsFromCanvas(
+    originalElementMetadata,
+    grid,
   )
-  if (containerMetadata == null) {
-    return {
-      commands: [],
-      targetCell: null,
-      originalRootCell: null,
-      draggingFromCell: null,
-      targetRootCell: null,
-    }
-  }
-  const gridTemplate = containerMetadata.specialSizeMeasurements.containerGridProperties
 
-  const cellGridProperties = getElementGridProperties(originalElementMetadata, targetCellUnderMouse)
+  // get the bounds from the props, or the canvas, or just default to the cell of the starting mouse position
+  const originalCellBounds = getGridChildCellCoordBoundsFromProps(
+    originalElementMetadata,
+    originalElementCellCoordsOnCanvas ?? draggingFromCellCoords,
+  )
 
-  // calculate the difference between the cell the mouse started the interaction from, and the "root"
-  // cell of the element, meaning the top-left-most cell the element occupies.
-  const draggingFromCell = customState.draggingFromCell ?? targetCellUnderMouse
-  const rootCell =
-    customState.originalRootCell ??
-    gridCellCoordinates(cellGridProperties.row, cellGridProperties.column)
-  const coordsDiff = getCellCoordsDelta(draggingFromCell, rootCell)
+  // the cell position of the mouse relative to the original element (we have to keep this offset while dragging)
+  const mouseCellPosInOriginalElement = getCellCoordsDelta(
+    draggingFromCellCoords,
+    originalCellBounds,
+  )
 
   // get the new adjusted row
-  const row = getCoordBounds(targetCellUnderMouse, 'row', cellGridProperties.width, coordsDiff.row)
+  const row = targetCellCoords.row - mouseCellPosInOriginalElement.row
   // get the new adjusted column
-  const column = getCoordBounds(
-    targetCellUnderMouse,
-    'column',
-    cellGridProperties.height,
-    coordsDiff.column,
-  )
+  const column = targetCellCoords.column - mouseCellPosInOriginalElement.column
 
   const gridCellMoveCommands = setGridPropsCommands(targetElement, gridTemplate, {
-    gridColumnStart: gridPositionValue(column.start),
-    gridColumnEnd: gridPositionValue(column.end),
-    gridRowEnd: gridPositionValue(row.end),
-    gridRowStart: gridPositionValue(row.start),
+    gridColumnStart: gridPositionValue(column),
+    gridColumnEnd: gridPositionValue(column + originalCellBounds.height),
+    gridRowStart: gridPositionValue(row),
+    gridRowEnd: gridPositionValue(row + originalCellBounds.width),
   })
 
   const gridTemplateColumns =
@@ -161,8 +138,8 @@ export function runGridRearrangeMove(
 
   // The "pure" index in the grid children for the cell under mouse
   const possiblyReorderIndex = getGridPositionIndex({
-    row: targetCellUnderMouse.row,
-    column: targetCellUnderMouse.column,
+    row: targetCellCoords.row,
+    column: targetCellCoords.column,
     gridTemplateColumns: gridTemplateColumns,
   })
 
@@ -182,10 +159,10 @@ export function runGridRearrangeMove(
   const cellsSortedByPosition = siblings
     .concat({
       ...{
-        gridColumnStart: gridPositionValue(targetCellUnderMouse.column),
-        gridColumnEnd: gridPositionValue(targetCellUnderMouse.column),
-        gridRowStart: gridPositionValue(targetCellUnderMouse.row),
-        gridRowEnd: gridPositionValue(targetCellUnderMouse.row),
+        gridColumnStart: gridPositionValue(targetCellCoords.column),
+        gridColumnEnd: gridPositionValue(targetCellCoords.column),
+        gridRowStart: gridPositionValue(targetCellCoords.row),
+        gridRowEnd: gridPositionValue(targetCellCoords.row),
       },
       path: selectedElement,
       index: siblings.length + 1,
@@ -212,15 +189,13 @@ export function runGridRearrangeMove(
       )
       return {
         commands: absoluteMoveCommands,
-        targetCell: targetCellData ?? customState.targetCellData,
-        originalRootCell: rootCell,
-        draggingFromCell: draggingFromCell,
-        targetRootCell: gridCellCoordinates(row.start, column.start),
+        targetCell: targetCellData,
+        targetRootCell: gridCellCoordinates(row, column),
       }
     }
     case 'rearrange': {
-      const targetRootCell = gridCellCoordinates(row.start, column.start)
-      const canvasRect = getGlobalFrameOfGridCell(containerMetadata, targetRootCell)
+      const targetRootCell = gridCellCoordinates(row, column)
+      const canvasRect = getGlobalFrameOfGridCell(grid, targetRootCell)
       const absoluteMoveCommands =
         canvasRect == null
           ? []
@@ -239,10 +214,8 @@ export function runGridRearrangeMove(
             absolute(Math.max(indexInSortedCellsForRearrange, 0)),
           ),
         ],
-        targetCell: targetCellData ?? customState.targetCellData,
-        originalRootCell: rootCell,
-        draggingFromCell: draggingFromCell,
-        targetRootCell: gridCellCoordinates(row.start, column.start),
+        targetCell: targetCellData,
+        targetRootCell: gridCellCoordinates(row, column),
       }
     }
     case 'reorder': {
@@ -258,10 +231,8 @@ export function runGridRearrangeMove(
             PP.create('style', 'gridRowEnd'),
           ]),
         ],
-        targetCell: targetCellData ?? customState.targetCellData,
-        originalRootCell: rootCell,
-        draggingFromCell: draggingFromCell,
-        targetRootCell: targetCellUnderMouse,
+        targetCell: targetCellData,
+        targetRootCell: targetCellCoords,
       }
     }
     default:
@@ -364,9 +335,9 @@ export interface TargetGridCellData {
   cellCanvasRectangle: CanvasRectangle
 }
 
-function getElementGridProperties(
+function getGridChildCellCoordBoundsFromProps(
   element: ElementInstanceMetadata,
-  cellUnderMouse: { row: number; column: number },
+  fallback: { row: number; column: number; width?: number; height?: number },
 ): {
   row: number
   width: number
@@ -374,17 +345,17 @@ function getElementGridProperties(
   height: number
 } {
   // get the grid fixtures (start and end for column and row) from the element metadata
-  function getGridProperty(field: keyof GridElementProperties, fallback: number) {
+  function getGridProperty(field: keyof GridElementProperties, innerFallback: number) {
     const propValue = element.specialSizeMeasurements.elementGridProperties[field]
     if (propValue == null || isCSSKeyword(propValue)) {
-      return fallback
+      return innerFallback
     }
-    return propValue.numericalPosition ?? fallback
+    return propValue.numericalPosition ?? innerFallback
   }
-  const column = getGridProperty('gridColumnStart', cellUnderMouse.column)
-  const height = getGridProperty('gridColumnEnd', cellUnderMouse.column + 1) - column
-  const row = getGridProperty('gridRowStart', cellUnderMouse.row)
-  const width = getGridProperty('gridRowEnd', cellUnderMouse.row + 1) - row
+  const column = getGridProperty('gridColumnStart', fallback.column)
+  const height = getGridProperty('gridColumnEnd', fallback.column + (fallback.height ?? 1)) - column
+  const row = getGridProperty('gridRowStart', fallback.row)
+  const width = getGridProperty('gridRowEnd', fallback.row + (fallback.width ?? 1)) - row
 
   return {
     row,
@@ -404,19 +375,6 @@ function getCellCoordsDelta(
   return gridCellCoordinates(rowDiff, columnDiff)
 }
 
-function getCoordBounds(
-  cell: GridCellCoordinates,
-  coord: 'column' | 'row',
-  size: number, // width or height
-  adjustOffset: number, // adjustment based on the difference between the initial dragging cell and the root cell
-): { start: number; end: number } {
-  // the start is the first cell's coord the element will occupy
-  const start = Math.max(1, cell[coord] - adjustOffset)
-  // the end is the last cell's coord the element will occupy
-  const end = Math.max(1, start + size)
-  return { start, end }
-}
-
 function asMaybeNamedAreaOrValue(
   grid: GridContainerProperties,
   axis: 'row' | 'column',
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
index 082370c9d723..61c2e7b107ce 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
@@ -15,7 +15,7 @@ import {
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
 import { setGridPropsCommands } from './grid-helpers'
-import { getGridCellBoundsFromCanvas } from './grid-cell-bounds'
+import { getGridChildCellCoordBoundsFromCanvas } from './grid-cell-bounds'
 import { accumulatePresses } from './shared-keyboard-strategy-helpers'
 
 export function gridRearrangeResizeKeyboardStrategy(
@@ -54,7 +54,7 @@ export function gridRearrangeResizeKeyboardStrategy(
   }
   const gridTemplate = grid.specialSizeMeasurements.containerGridProperties
 
-  const initialCellBounds = getGridCellBoundsFromCanvas(cell, grid)
+  const initialCellBounds = getGridChildCellCoordBoundsFromCanvas(cell, grid)
   if (initialCellBounds == null) {
     return null
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
index bf8d3fa9fb23..5a62ff4d0f7a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
@@ -74,16 +74,13 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
 
       const {
         commands: moveCommands,
-        targetCell: targetGridCellData,
-        draggingFromCell,
-        originalRootCell,
+        targetCell,
         targetRootCell,
       } = runGridRearrangeMove(
         targetElement,
         selectedElement,
         canvasState.startingMetadata,
         interactionSession.interactionData,
-        customState.grid,
       )
       if (moveCommands.length === 0) {
         return emptyStrategyApplicationResult
@@ -101,9 +98,7 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
         {
           grid: {
             ...customState.grid,
-            targetCellData: targetGridCellData,
-            draggingFromCell: draggingFromCell,
-            originalRootCell: originalRootCell,
+            targetCellData: targetCell,
             currentRootCell: targetRootCell,
           },
           duplicatedElementNewUids: duplicatedElementNewUids,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index da300050fd1a..274ab4efbca9 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -176,18 +176,11 @@ function getCommandsAndPatchForGridRearrange(
     return { commands: [], patch: {}, elementsToRerender: [] }
   }
 
-  const {
-    commands,
-    targetCell: targetGridCell,
-    draggingFromCell,
-    originalRootCell,
-    targetRootCell,
-  } = runGridRearrangeMove(
+  const { commands, targetCell, targetRootCell } = runGridRearrangeMove(
     selectedElement,
     selectedElement,
     canvasState.startingMetadata,
     interactionData,
-    customState.grid,
   )
 
   return {
@@ -195,9 +188,7 @@ function getCommandsAndPatchForGridRearrange(
     patch: {
       grid: {
         ...customState.grid,
-        targetCellData: targetGridCell,
-        draggingFromCell: draggingFromCell,
-        originalRootCell: originalRootCell,
+        targetCellData: targetCell,
         currentRootCell: targetRootCell,
       },
     },
diff --git a/editor/src/components/editor/store/dispatch-strategies.spec.tsx b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
index b85b7cdf2280..23aa738142c4 100644
--- a/editor/src/components/editor/store/dispatch-strategies.spec.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
@@ -200,9 +200,7 @@ describe('interactionStart', () => {
           "escapeHatchActivated": false,
           "grid": Object {
             "currentRootCell": null,
-            "draggingFromCell": null,
             "metadataCacheForGrids": Object {},
-            "originalRootCell": null,
             "targetCellData": null,
           },
           "lastReorderIdx": null,
@@ -269,9 +267,7 @@ describe('interactionStart', () => {
           "escapeHatchActivated": false,
           "grid": Object {
             "currentRootCell": null,
-            "draggingFromCell": null,
             "metadataCacheForGrids": Object {},
-            "originalRootCell": null,
             "targetCellData": null,
           },
           "lastReorderIdx": null,
@@ -358,9 +354,7 @@ describe('interactionUpdate', () => {
           "escapeHatchActivated": false,
           "grid": Object {
             "currentRootCell": null,
-            "draggingFromCell": null,
             "metadataCacheForGrids": Object {},
-            "originalRootCell": null,
             "targetCellData": null,
           },
           "lastReorderIdx": null,
@@ -447,9 +441,7 @@ describe('interactionUpdate', () => {
           "escapeHatchActivated": false,
           "grid": Object {
             "currentRootCell": null,
-            "draggingFromCell": null,
             "metadataCacheForGrids": Object {},
-            "originalRootCell": null,
             "targetCellData": null,
           },
           "lastReorderIdx": null,
@@ -530,9 +522,7 @@ describe('interactionHardReset', () => {
           "escapeHatchActivated": false,
           "grid": Object {
             "currentRootCell": null,
-            "draggingFromCell": null,
             "metadataCacheForGrids": Object {},
-            "originalRootCell": null,
             "targetCellData": null,
           },
           "lastReorderIdx": null,
@@ -621,9 +611,7 @@ describe('interactionHardReset', () => {
           "escapeHatchActivated": false,
           "grid": Object {
             "currentRootCell": null,
-            "draggingFromCell": null,
             "metadataCacheForGrids": Object {},
-            "originalRootCell": null,
             "targetCellData": null,
           },
           "lastReorderIdx": null,
@@ -718,9 +706,7 @@ describe('interactionUpdate with user changed strategy', () => {
           "escapeHatchActivated": false,
           "grid": Object {
             "currentRootCell": null,
-            "draggingFromCell": null,
             "metadataCacheForGrids": Object {},
-            "originalRootCell": null,
             "targetCellData": null,
           },
           "lastReorderIdx": null,
@@ -810,9 +796,7 @@ describe('interactionUpdate with user changed strategy', () => {
           "escapeHatchActivated": false,
           "grid": Object {
             "currentRootCell": null,
-            "draggingFromCell": null,
             "metadataCacheForGrids": Object {},
-            "originalRootCell": null,
             "targetCellData": null,
           },
           "lastReorderIdx": null,
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index 06588173c38b..296f0900a7b2 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -75,7 +75,6 @@ import { fixedSizeDimensionHandlingText } from '../text-editor/text-handling'
 import { convertToAbsolute } from '../canvas/commands/convert-to-absolute-command'
 import { hugPropertiesFromStyleMap } from '../../core/shared/dom-utils'
 import { setHugContentForAxis } from './inspector-strategies/hug-contents-strategy'
-import { getGridCellBoundsFromCanvas } from '../canvas/canvas-strategies/strategies/grid-cell-bounds'
 
 export type StartCenterEnd = 'flex-start' | 'center' | 'flex-end'
 
diff --git a/editor/src/core/shared/math-utils.ts b/editor/src/core/shared/math-utils.ts
index 2ea10738c293..37d54197e16e 100644
--- a/editor/src/core/shared/math-utils.ts
+++ b/editor/src/core/shared/math-utils.ts
@@ -408,6 +408,32 @@ export function distance<C extends CoordinateMarker>(from: Point<C>, to: Point<C
   return magnitude({ x: from.x - to.x, y: from.y - to.y } as Vector<C>)
 }
 
+export function distanceFromPointToRectangle<C extends CoordinateMarker>(
+  p: Point<C>,
+  rectangle: Rectangle<C>,
+): number {
+  // Normalize the rectangle to ensure positive width and height
+  const normalizedRect = normalizeRect(rectangle)
+
+  // Calculate the nearest point on the rectangle to the given point
+  const nearestX = Math.max(
+    normalizedRect.x,
+    Math.min(p.x, normalizedRect.x + normalizedRect.width),
+  )
+  const nearestY = Math.max(
+    normalizedRect.y,
+    Math.min(p.y, normalizedRect.y + normalizedRect.height),
+  )
+
+  // If the nearest point is the same as the given point, it's inside or on the edge of the rectangle
+  if (nearestX === p.x && nearestY === p.y) {
+    return 0
+  }
+
+  // Calculate the distance between the nearest point and the given point
+  return distance(p, { x: nearestX, y: nearestY } as Point<C>)
+}
+
 export function product<C extends CoordinateMarker>(a: Point<C>, b: Point<C>): number {
   return a.x * b.x + a.y * b.y
 }

From d293134f3d2edbe63d7fbde1d8724161aecf7024 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 7 Oct 2024 12:27:13 +0200
Subject: [PATCH 099/272] Check null when syncing flags (#6482)

**Problem:**

The object passed to `syncWithFeatureFlags` might be undefined, and if
it is the editor crashes.

**Fix:**

Handle with an early exit the case for which the features passed/loaded
from the atom are undefined.
---
 .../components/navigator/left-pane/roll-your-own-pane.tsx    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
index 5a47482e00bf..65429a62f082 100644
--- a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
+++ b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
@@ -302,7 +302,10 @@ function syncFeatureFlagIfExists(
   setFeatureEnabled(featureFlag, value)
 }
 
-function syncWithFeatureFlags(features: Record<string, any>) {
+function syncWithFeatureFlags(features: Record<string, any> | undefined) {
+  if (features == null) {
+    return {}
+  }
   return Object.fromEntries(
     Object.entries(features).map(([key, value]) => {
       if (typeof value === 'boolean' && key in featureToFeatureFlagMap) {

From 3b167ce14ad406305d86d2179caab12c02c3cebf Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:35:34 +0300
Subject: [PATCH 100/272] chore(types): remove duplicate type definitions
 (#6477)

**Problem:**
Today we have shared types between the editor and our Remix code
(`utopia-shared`), however some of these definitions are still
duplicated in the editor code (even if identical), which can lead to
divergence over time.

**Fix:**
Make sure the duplicated types are identical and remove them, reference
`utopia-shared` as the source of truth.
Actual code (functions) was not moved, only types, since `utopia-shared`
should be kept separated from editor code and imports.

**Note:**
In the future this can allow us to have `utopia-shared` code hash (or
package version) as the cache version for `ParseSuccess` objects.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/core/shared/project-file-types.ts  | 362 ++++++------------
 utopia-shared/src/types/project-file-types.ts |   1 +
 2 files changed, 111 insertions(+), 252 deletions(-)

diff --git a/editor/src/core/shared/project-file-types.ts b/editor/src/core/shared/project-file-types.ts
index 0d3550a2ee08..383828338fc1 100644
--- a/editor/src/core/shared/project-file-types.ts
+++ b/editor/src/core/shared/project-file-types.ts
@@ -7,59 +7,116 @@ import type {
 } from './element-template'
 import type { ErrorMessage } from './error-messages'
 import { arrayEqualsByValue, objectEquals } from './utils'
-import type { ImageFile, AssetFile, RevisionsStateType } from 'utopia-shared/src/types'
-import { imageFile, assetFile, RevisionsState } from 'utopia-shared/src/types'
-
-export type { ImageFile, AssetFile, RevisionsStateType }
-export { imageFile, assetFile, RevisionsState }
-
-export type id = string
-enum StaticModifier {}
-
-export type StaticElementPathPart = StaticModifier & Array<id>
-export type ElementPathPart = Array<id> | StaticElementPathPart
-
-export interface StaticElementPath {
-  type: 'elementpath'
-  parts: Array<StaticElementPathPart>
-}
-
-export interface ElementPath {
-  type: 'elementpath'
-  parts: Array<ElementPathPart>
-}
-
-export type PropertyPathPart = string | number
-
-export type PropertyPath<T extends Array<PropertyPathPart> = Array<PropertyPathPart>> = {
-  propertyElements: T
-}
-
-export type PackageType = 'base' | 'svg' | 'app'
-export type BaseTemplateName =
-  | 'output'
-  | 'view'
-  | 'multi-generator'
-  | 'placeholder'
-  | 'image'
-  | 'text'
-  | 'rectangle'
-  | 'ellipse'
-  | 'custom-code'
-  | 'code-component'
-export type SvgTemplateName = 'arc' | 'circle' | 'ellipse' | 'path' | 'polygon' | 'rect'
-
-export type ElementPropertyPath = {
-  elementPath: ElementPath
-  propertyPath: PropertyPath
-}
-
-export type Dependencies = { [key: string]: ElementPropertyPath }
-
-export enum PinType {
-  Absolute = 'absolute',
-  Relative = 'relative',
-}
+import type {
+  ImageFile,
+  AssetFile,
+  RevisionsStateType,
+  ParsedJSONResult,
+  TextFileContents,
+  ParseSuccess,
+  ParseFailure,
+  Unparsed,
+  ParsedTextFile,
+  ImportAlias,
+  ImportDetails,
+  Imports,
+  ExportFunction,
+  ExportClass,
+  ExportVariable,
+  ExportVariables,
+  ExportDestructuredAssignment,
+  ExportDefaultFunctionOrClass,
+  ExportDefaultIdentifier,
+  ReexportWildcard,
+  ReexportVariables,
+  ExportDetail,
+  ExportsDetail,
+  ExportVariablesWithModifier,
+  HighlightBounds,
+  HighlightBoundsForUids,
+  TextFile,
+  ParsedJSONSuccess,
+  ParsedJSONFailure,
+  ESCodeFile,
+  ESCodeFileOrigin,
+  ProjectFile,
+  ProjectFileType,
+  NodeModules,
+  ProjectContents,
+  NodeModuleFile,
+  PackageType,
+  BaseTemplateName,
+  SvgTemplateName,
+  Dependencies,
+  id,
+  StaticElementPathPart,
+  ElementPathPart,
+  StaticElementPath,
+  ElementPath,
+  PropertyPathPart,
+  PropertyPath,
+  ElementPropertyPath,
+} from 'utopia-shared/src/types'
+import {
+  imageFile,
+  assetFile,
+  RevisionsState,
+  unparsed,
+  EmptyExportsDetail,
+  PinType,
+} from 'utopia-shared/src/types'
+
+export type {
+  ImageFile,
+  AssetFile,
+  RevisionsStateType,
+  ParsedJSONResult,
+  TextFileContents,
+  ParseSuccess,
+  ParseFailure,
+  Unparsed,
+  ParsedTextFile,
+  ImportAlias,
+  ImportDetails,
+  Imports,
+  ExportFunction,
+  ExportClass,
+  ExportVariable,
+  ExportVariables,
+  ExportDestructuredAssignment,
+  ExportDefaultFunctionOrClass,
+  ExportDefaultIdentifier,
+  ReexportWildcard,
+  ReexportVariables,
+  ExportDetail,
+  ExportsDetail,
+  ExportVariablesWithModifier,
+  HighlightBounds,
+  HighlightBoundsForUids,
+  TextFile,
+  ParsedJSONSuccess,
+  ParsedJSONFailure,
+  ESCodeFile,
+  ESCodeFileOrigin,
+  ProjectFile,
+  ProjectFileType,
+  NodeModules,
+  ProjectContents,
+  NodeModuleFile,
+  PackageType,
+  BaseTemplateName,
+  SvgTemplateName,
+  Dependencies,
+  id,
+  StaticElementPathPart,
+  ElementPathPart,
+  StaticElementPath,
+  ElementPath,
+  PropertyPathPart,
+  PropertyPath,
+  ElementPropertyPath,
+}
+export { imageFile, assetFile, RevisionsState, unparsed, EmptyExportsDetail, PinType }
 
 export interface SceneMetadata {
   uid: string
@@ -69,11 +126,6 @@ export interface SceneMetadata {
   label?: string
 }
 
-export interface ImportAlias {
-  name: string
-  alias: string
-}
-
 export function importAlias(name: string, alias?: string): ImportAlias {
   return {
     name: name,
@@ -85,12 +137,6 @@ export function importAliasEquals(first: ImportAlias, second: ImportAlias): bool
   return first.name === second.name && first.alias === second.alias
 }
 
-export interface ImportDetails {
-  importedWithName: string | null // import name from './place'
-  importedFromWithin: Array<ImportAlias> // import { name as alias } from './place'
-  importedAs: string | null // import * as name from './place'
-}
-
 export function importDetails(
   importedWithName: string | null,
   importedFromWithin: Array<ImportAlias>,
@@ -153,8 +199,6 @@ export function importDetailsEquals(first: ImportDetails, second: ImportDetails)
   )
 }
 
-export type Imports = { [importSource: string]: ImportDetails }
-
 export type ImportsMergeResolution = {
   imports: Imports
   duplicateNameMapping: Map<string, string>
@@ -190,13 +234,6 @@ export function importDetailsFromImportOption(importOption: ImportType): ImportD
   return importDetails(importedWithName, importedFromWithin, importedAs)
 }
 
-// export let name1, name2, …, nameN; // also var, const
-// export let name1 = …, name2 = …, …, nameN; // also var, const
-export interface ExportVariablesWithModifier {
-  type: 'EXPORT_VARIABLES_WITH_MODIFIER'
-  variables: Array<string>
-}
-
 export function exportVariablesWithModifier(variables: Array<string>): ExportVariablesWithModifier {
   return {
     type: 'EXPORT_VARIABLES_WITH_MODIFIER',
@@ -204,12 +241,6 @@ export function exportVariablesWithModifier(variables: Array<string>): ExportVar
   }
 }
 
-// export function functionName(){...}
-export interface ExportFunction {
-  type: 'EXPORT_FUNCTION'
-  functionName: string
-}
-
 export function exportFunction(functionName: string): ExportFunction {
   return {
     type: 'EXPORT_FUNCTION',
@@ -221,12 +252,6 @@ export function isExportFunction(e: ExportDetail): e is ExportFunction {
   return e.type === 'EXPORT_FUNCTION'
 }
 
-// export class ClassName {...}
-export interface ExportClass {
-  type: 'EXPORT_CLASS'
-  className: string
-}
-
 export function exportClass(className: string): ExportClass {
   return {
     type: 'EXPORT_CLASS',
@@ -234,14 +259,6 @@ export function exportClass(className: string): ExportClass {
   }
 }
 
-// export { name1, name2, …, nameN };
-// export { variable1 as name1, variable2 as name2, …, nameN };
-// export { name1 as default, … };
-export interface ExportVariable {
-  variableName: string
-  variableAlias: string | null
-}
-
 export function exportVariable(variableName: string, variableAlias: string | null): ExportVariable {
   return {
     variableName: variableName,
@@ -249,11 +266,6 @@ export function exportVariable(variableName: string, variableAlias: string | nul
   }
 }
 
-export interface ExportVariables {
-  type: 'EXPORT_VARIABLES'
-  variables: Array<ExportVariable>
-}
-
 export function exportVariables(variables: Array<ExportVariable>): ExportVariables {
   return {
     type: 'EXPORT_VARIABLES',
@@ -261,12 +273,6 @@ export function exportVariables(variables: Array<ExportVariable>): ExportVariabl
   }
 }
 
-// export const { name1, name2: bar } = o;
-export interface ExportDestructuredAssignment {
-  type: 'EXPORT_DESTRUCTURED_ASSIGNMENT'
-  variables: Array<ExportVariable>
-}
-
 export function exportDestructuredAssignment(
   variables: Array<ExportVariable>,
 ): ExportDestructuredAssignment {
@@ -276,13 +282,6 @@ export function exportDestructuredAssignment(
   }
 }
 
-// export default function (…) { … } // also class, function*
-// export default function name1(…) { … } // also class, function*
-export interface ExportDefaultFunctionOrClass {
-  type: 'EXPORT_DEFAULT_FUNCTION_OR_CLASS'
-  name: string | null
-}
-
 export function exportDefaultFunctionOrClass(name: string | null): ExportDefaultFunctionOrClass {
   return {
     type: 'EXPORT_DEFAULT_FUNCTION_OR_CLASS',
@@ -294,13 +293,6 @@ export function isExportDefaultFunctionOrClass(e: ExportDetail): e is ExportDefa
   return e.type === 'EXPORT_DEFAULT_FUNCTION_OR_CLASS'
 }
 
-// const App = (…) { … }
-// export default App;
-export interface ExportDefaultIdentifier {
-  type: 'EXPORT_DEFAULT_IDENTIFIER'
-  name: string
-}
-
 export function exportDefaultIdentifier(name: string): ExportDefaultIdentifier {
   return {
     type: 'EXPORT_DEFAULT_IDENTIFIER',
@@ -318,14 +310,6 @@ export function isExportDefault(
   return isExportDefaultFunctionOrClass(e) || isExportDefaultIdentifier(e)
 }
 
-// export * from …; // does not set the default export
-// export * as name1 from …; // Draft ECMAScript® 2O21
-export interface ReexportWildcard {
-  type: 'REEXPORT_WILDCARD'
-  reexportedModule: string
-  namespacedVariable: string | null
-}
-
 export function reexportWildcard(
   reexportedModule: string,
   namespacedVariable: string | null,
@@ -337,15 +321,6 @@ export function reexportWildcard(
   }
 }
 
-//export { name1, name2, …, nameN } from …;
-//export { import1 as name1, import2 as name2, …, nameN } from …;
-//export { default, … } from …;
-export interface ReexportVariables {
-  type: 'REEXPORT_VARIABLES'
-  reexportedModule: string
-  variables: Array<ExportVariable>
-}
-
 export function reexportVariables(
   reexportedModule: string,
   variables: Array<ExportVariable>,
@@ -357,21 +332,6 @@ export function reexportVariables(
   }
 }
 
-export type ExportDetail =
-  | ExportVariablesWithModifier
-  | ExportFunction
-  | ExportClass
-  | ExportVariables
-  | ExportDestructuredAssignment
-  | ExportDefaultFunctionOrClass
-  | ExportDefaultIdentifier
-  | ReexportWildcard
-  | ReexportVariables
-
-export type ExportsDetail = Array<ExportDetail>
-
-export const EmptyExportsDetail: ExportsDetail = []
-
 export function mergeExportsDetail(first: ExportsDetail, second: ExportsDetail): ExportsDetail {
   return [...first, ...second]
 }
@@ -388,14 +348,6 @@ export function isReexportExportDetail(
   return exportDetail.type === 'REEXPORT_WILDCARD' || exportDetail.type === 'REEXPORT_VARIABLES'
 }
 
-export interface HighlightBounds {
-  startLine: number
-  startCol: number
-  endLine: number
-  endCol: number
-  uid: string
-}
-
 export function highlightBounds(
   startLine: number,
   startCol: number,
@@ -411,9 +363,6 @@ export function highlightBounds(
     uid: uid,
   }
 }
-
-export type HighlightBoundsForUids = { [uid: string]: HighlightBounds }
-
 export interface HighlightBoundsWithFile {
   bounds: HighlightBounds
   filePath: string
@@ -421,18 +370,6 @@ export interface HighlightBoundsWithFile {
 
 export type HighlightBoundsWithFileForUids = { [uid: string]: HighlightBoundsWithFile }
 
-// Ensure this is kept up to date with clientmodel/lib/src/Utopia/ClientModel.hs.
-export interface ParseSuccess {
-  type: 'PARSE_SUCCESS'
-  imports: Imports
-  topLevelElements: Array<TopLevelElement>
-  highlightBounds: HighlightBoundsForUids
-  fullHighlightBounds: HighlightBoundsForUids
-  jsxFactoryFunction: string | null
-  combinedTopLevelArbitraryBlock: ArbitraryJSBlock | null
-  exportsDetail: ExportsDetail
-}
-
 export function parseSuccess(
   imports: Imports,
   topLevelElements: Array<TopLevelElement>,
@@ -458,15 +395,6 @@ export function isParseSuccess(parsed: ParsedTextFile): parsed is ParseSuccess {
   return parsed.type === 'PARSE_SUCCESS'
 }
 
-// Ensure this is kept up to date with clientmodel/lib/src/Utopia/ClientModel.hs.
-export interface ParseFailure {
-  type: 'PARSE_FAILURE'
-  diagnostics: Array<ErrorMessage> | null
-  parsedJSONFailure: ParsedJSONFailure | null
-  errorMessage: string | null
-  errorMessages: Array<ErrorMessage>
-}
-
 export function parseFailure(
   diagnostics: Array<ErrorMessage> | null,
   parsedJSON: ParsedJSONFailure | null,
@@ -486,22 +414,10 @@ export function isParseFailure(parsed: ParsedTextFile): parsed is ParseFailure {
   return parsed.type === 'PARSE_FAILURE'
 }
 
-// Ensure this is kept up to date with clientmodel/lib/src/Utopia/ClientModel.hs.
-export interface Unparsed {
-  type: 'UNPARSED'
-}
-
-export const unparsed: Unparsed = {
-  type: 'UNPARSED',
-}
-
 export function isUnparsed(parsed: ParsedTextFile): parsed is Unparsed {
   return parsed.type === 'UNPARSED'
 }
 
-// Ensure this is kept up to date with clientmodel/lib/src/Utopia/ClientModel.hs.
-export type ParsedTextFile = ParseFailure | ParseSuccess | Unparsed
-
 export function foldParsedTextFile<X>(
   foldFailure: (failure: ParseFailure) => X,
   foldSuccess: (success: ParseSuccess) => X,
@@ -541,41 +457,14 @@ export function forEachParseSuccess(
   }
 }
 
-// Ensure this is kept up to date with clientmodel/lib/src/Utopia/ClientModel.hs.
-export interface ParsedJSONSuccess {
-  type: 'SUCCESS'
-  value: any
-}
-
 export function isParsedJSONSuccess(result: ParsedJSONResult): result is ParsedJSONSuccess {
   return result.type === 'SUCCESS'
 }
 
-// Ensure this is kept up to date with clientmodel/lib/src/Utopia/ClientModel.hs.
-export interface ParsedJSONFailure {
-  type: 'FAILURE'
-  codeSnippet: string
-  reason: string
-  startLine: number
-  startCol: number
-  endLine: number
-  endCol: number
-}
-
 export function isParsedJSONFailure(result: ParsedJSONResult): result is ParsedJSONFailure {
   return result.type === 'FAILURE'
 }
 
-// Ensure this is kept up to date with clientmodel/lib/src/Utopia/ClientModel.hs.
-export type ParsedJSONResult = ParsedJSONSuccess | ParsedJSONFailure
-
-// Ensure this is kept up to date with clientmodel/lib/src/Utopia/ClientModel.hs.
-export interface TextFileContents {
-  code: string
-  parsed: ParsedTextFile
-  revisionsState: RevisionsStateType
-}
-
 export function textFileContents(
   code: string,
   parsed: ParsedTextFile,
@@ -588,15 +477,6 @@ export function textFileContents(
   }
 }
 
-// Ensure this is kept up to date with clientmodel/lib/src/Utopia/ClientModel.hs.
-export interface TextFile {
-  type: 'TEXT_FILE'
-  fileContents: TextFileContents
-  lastSavedContents: TextFileContents | null // it is null when the file is saved
-  lastParseSuccess: ParseSuccess | null
-  versionNumber: number
-}
-
 export function textFile(
   fileContents: TextFileContents,
   lastSavedContents: TextFileContents | null,
@@ -656,15 +536,6 @@ interface EvalResult {
   }
 }
 
-export type ESCodeFileOrigin = 'PROJECT_CONTENTS' | 'NODE_MODULES'
-
-export interface ESCodeFile {
-  type: 'ES_CODE_FILE'
-  fileContents: string
-  origin: ESCodeFileOrigin
-  fullPath: string
-}
-
 export function esCodeFile(
   fileContents: string,
   origin: ESCodeFileOrigin,
@@ -726,16 +597,3 @@ export function directory(): Directory {
 export function isDirectory(projectFile: ProjectFile): projectFile is Directory {
   return projectFile.type === 'DIRECTORY'
 }
-
-export type ProjectFile = TextFile | ImageFile | Directory | AssetFile
-
-export type ProjectFileType = ProjectFile['type']
-
-export type NodeModuleFile = ESCodeFile | ESRemoteDependencyPlaceholder // TODO maybe ESCodeFile is too strict, eventually we want to have ProjectFile here
-
-export type NodeModules = {
-  [filepath: string]: NodeModuleFile
-}
-
-// Key here is the full filename.
-export type ProjectContents = { [filepath: string]: ProjectFile }
diff --git a/utopia-shared/src/types/project-file-types.ts b/utopia-shared/src/types/project-file-types.ts
index 200e16b4fa85..e683baaa35b3 100644
--- a/utopia-shared/src/types/project-file-types.ts
+++ b/utopia-shared/src/types/project-file-types.ts
@@ -74,6 +74,7 @@ export interface ExportVariablesWithModifier {
   variables: Array<string>
 }
 
+// export function functionName(){...}
 export interface ExportFunction {
   type: 'EXPORT_FUNCTION'
   functionName: string

From 00b93bd4b40b7f50021c78c67ade42a973a1676e Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:36:24 +0300
Subject: [PATCH 101/272] fix(editor): fix warning about giving a ref to a
 function component (#6479)

**Problem:**
Today we have a constant warning about giving a ref to a function
component inside `DesignPanelRoot`

<img width="988" alt="image"
src="https://github.com/user-attachments/assets/0c245ef1-4de0-4f05-a4f7-4fa3baa0a9c7">


**Fix:**
Wrap the component in `forwardRef` to avoid this warning.
This will also greatly reduce our tests logs.

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 editor/src/uuiui/widgets/layout/flex-row.tsx | 26 +++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/editor/src/uuiui/widgets/layout/flex-row.tsx b/editor/src/uuiui/widgets/layout/flex-row.tsx
index 2565c5f8e55a..64c90cdb5693 100644
--- a/editor/src/uuiui/widgets/layout/flex-row.tsx
+++ b/editor/src/uuiui/widgets/layout/flex-row.tsx
@@ -13,16 +13,18 @@ import React from 'react'
 export const FlexRow = styled.div([commonSenseUtopiaLayoutShorthands, { ...flexRowStyle }])
 FlexRow.displayName = 'FlexRow'
 
-export const SimpleFlexRow = (props: JSX.IntrinsicElements['div']) => {
-  const mergedProps = React.useMemo(() => {
-    return {
-      ...props,
-      style: {
-        ...flexRowStyle,
-        ...props.style,
-      },
-    }
-  }, [props])
-  return <div {...mergedProps} />
-}
+export const SimpleFlexRow = React.forwardRef<HTMLDivElement, JSX.IntrinsicElements['div']>(
+  (props, ref) => {
+    const mergedProps = React.useMemo(() => {
+      return {
+        ...props,
+        style: {
+          ...flexRowStyle,
+          ...props.style,
+        },
+      }
+    }, [props])
+    return <div ref={ref} {...mergedProps} />
+  },
+)
 SimpleFlexRow.displayName = 'SimpleFlexRow'

From 1e9d18a4723480d47493d3f9d5511d27c9b48c92 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:36:38 +0300
Subject: [PATCH 102/272] fix(test): dont install AtomDevtools in test envs
 (#6480)

**Problem:**
Today we get a lot of long warnings in the test logs about AtomDevtools.

**Fix:**
Don't install AtomDevtools in test environments, since they are only
relevant for browser debugging.

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 editor/src/templates/editor.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index d65daff780fb..c31c2a933d5d 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -10,6 +10,7 @@ import { useAtomsDevtools } from 'jotai-devtools'
 import '../utils/vite-hmr-config'
 import {
   getProjectID,
+  IS_TEST_ENVIRONMENT,
   PROBABLY_ELECTRON,
   PRODUCTION_ENV,
   requireElectron,
@@ -709,7 +710,7 @@ export class Editor {
 let canvasUpdateId: number = 0
 
 const AtomsDevtools = (props: { children: React.ReactNode }) => {
-  if (!PRODUCTION_ENV) {
+  if (!PRODUCTION_ENV && !IS_TEST_ENVIRONMENT) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useAtomsDevtools(`Utopia Jotai Atoms Debug Store`)
   }

From 98eda7257f9f41afdf8d0d7a6c41255e529f3dec Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 7 Oct 2024 12:47:42 +0200
Subject: [PATCH 103/272] Remove grid RYO features (#6483)

**Problem:**

The RYO panel for the grid served its purpose and now that things are
more stable the regular improvement process can take place.

**Fix:**

Remove the grid features from the RYO panel and their references in the
grid controls code.
---
 .../canvas/controls/grid-controls.tsx         | 156 ++++++++----------
 .../left-pane/roll-your-own-pane.tsx          |  46 +-----
 2 files changed, 71 insertions(+), 131 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index db6ed6b586d3..1b881e001dc0 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -665,7 +665,6 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
   const dispatch = useDispatch()
   const controls = useAnimationControls()
   const colorTheme = useColorTheme()
-  const features = useRollYourOwnFeatures()
 
   const editorMetadata = useEditorState(
     Substores.metadata,
@@ -819,7 +818,7 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
     'GridControl interactionData',
   )
 
-  const { hoveringStart, mouseCanvasPosition } = useMouseMove(activelyDraggingOrResizingCell)
+  const { hoveringStart } = useMouseMove(activelyDraggingOrResizingCell)
 
   // NOTE: this stuff is meant to be temporary, until we settle on the set of interaction pieces we like.
   // After that, we should get rid of this.
@@ -838,21 +837,13 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
     }
 
     const getCoord = (axis: 'x' | 'y', dimension: 'width' | 'height') => {
-      if (features.Grid.dragVerbatim) {
-        return initialShadowFrame[axis] + drag[axis]
-      } else if (features.Grid.dragMagnetic) {
-        return shadow.globalFrame[axis] + (mouseCanvasPosition[axis] - hoveringStart.point[axis])
-      } else if (features.Grid.dragRatio) {
-        return (
-          shadow.globalFrame[axis] +
-          drag[axis] -
-          (shadow.globalFrame[axis] - dragStart[axis]) -
-          shadow.globalFrame[dimension] *
-            ((dragStart[axis] - initialShadowFrame[axis]) / initialShadowFrame[dimension])
-        )
-      } else {
-        return undefined
-      }
+      return (
+        shadow.globalFrame[axis] +
+        drag[axis] -
+        (shadow.globalFrame[axis] - dragStart[axis]) -
+        shadow.globalFrame[dimension] *
+          ((dragStart[axis] - initialShadowFrame[axis]) / initialShadowFrame[dimension])
+      )
     }
 
     // make sure the shadow is displayed only inside the grid container bounds
@@ -883,10 +874,6 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
     grid.frame.width,
     grid.frame.y,
     grid.frame.height,
-    features.Grid.dragVerbatim,
-    features.Grid.dragMagnetic,
-    features.Grid.dragRatio,
-    mouseCanvasPosition,
   ])
 
   const gridPath = optionalMap(EP.parentPath, shadow?.elementPath)
@@ -916,7 +903,7 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
     gridTemplateColumns: getNullableAutoOrTemplateBaseString(grid.gridTemplateColumns),
     gridTemplateRows: getNullableAutoOrTemplateBaseString(grid.gridTemplateRows),
     backgroundColor:
-      activelyDraggingOrResizingCell != null ? features.Grid.activeGridBackground : 'transparent',
+      activelyDraggingOrResizingCell != null ? colorTheme.primary10.value : 'transparent',
     border: `1px solid ${
       activelyDraggingOrResizingCell != null ? colorTheme.primary.value : 'transparent'
     }`,
@@ -960,8 +947,7 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
           const countedColumn = Math.floor(cell % grid.columns) + 1
           const id = gridCellTargetId(grid.elementPath, countedRow, countedColumn)
           const borderID = `${id}-border`
-          const dotgridColor =
-            activelyDraggingOrResizingCell != null ? features.Grid.dotgridColor : 'transparent'
+          const dotgridColor = activelyDraggingOrResizingCell != null ? `#00000033` : 'transparent'
 
           const isActiveCell =
             countedColumn === currentHoveredCell?.column && countedRow === currentHoveredCell?.row
@@ -969,7 +955,7 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
           const borderColor =
             isActiveCell && targetsAreCellsWithPositioning
               ? colorTheme.brandNeonPink.value
-              : features.Grid.inactiveGridColor
+              : `#00000033`
           return (
             <div
               key={id}
@@ -1010,65 +996,62 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
                         : undefined,
                   }}
                 />
-                {when(
-                  features.Grid.dotgrid,
-                  <React.Fragment>
-                    <div
-                      style={{
-                        position: 'absolute',
-                        top: -1,
-                        bottom: -1,
-                        left: -1,
-                        right: -1,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                      }}
-                    >
-                      <div style={{ width: 2, height: 2, backgroundColor: dotgridColor }} />
-                    </div>
-                    <div
-                      style={{
-                        width: 2,
-                        height: 2,
-                        backgroundColor: dotgridColor,
-                        position: 'absolute',
-                        top: -1,
-                        left: -1,
-                      }}
-                    />
-                    <div
-                      style={{
-                        width: 2,
-                        height: 2,
-                        backgroundColor: dotgridColor,
-                        position: 'absolute',
-                        bottom: -1,
-                        left: -1,
-                      }}
-                    />
-                    <div
-                      style={{
-                        width: 2,
-                        height: 2,
-                        backgroundColor: dotgridColor,
-                        position: 'absolute',
-                        top: -1,
-                        right: -1,
-                      }}
-                    />
-                    <div
-                      style={{
-                        width: 2,
-                        height: 2,
-                        backgroundColor: dotgridColor,
-                        position: 'absolute',
-                        bottom: -1,
-                        right: -1,
-                      }}
-                    />
-                  </React.Fragment>,
-                )}
+                <React.Fragment>
+                  <div
+                    style={{
+                      position: 'absolute',
+                      top: -1,
+                      bottom: -1,
+                      left: -1,
+                      right: -1,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <div style={{ width: 2, height: 2, backgroundColor: dotgridColor }} />
+                  </div>
+                  <div
+                    style={{
+                      width: 2,
+                      height: 2,
+                      backgroundColor: dotgridColor,
+                      position: 'absolute',
+                      top: -1,
+                      left: -1,
+                    }}
+                  />
+                  <div
+                    style={{
+                      width: 2,
+                      height: 2,
+                      backgroundColor: dotgridColor,
+                      position: 'absolute',
+                      bottom: -1,
+                      left: -1,
+                    }}
+                  />
+                  <div
+                    style={{
+                      width: 2,
+                      height: 2,
+                      backgroundColor: dotgridColor,
+                      position: 'absolute',
+                      top: -1,
+                      right: -1,
+                    }}
+                  />
+                  <div
+                    style={{
+                      width: 2,
+                      height: 2,
+                      backgroundColor: dotgridColor,
+                      position: 'absolute',
+                      bottom: -1,
+                      right: -1,
+                    }}
+                  />
+                </React.Fragment>
               </React.Fragment>
             </div>
           )
@@ -1109,8 +1092,7 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
         )
       })}
       {/* shadow */}
-      {features.Grid.shadow &&
-      !anyTargetAbsolute &&
+      {!anyTargetAbsolute &&
       shadow != null &&
       initialShadowFrame != null &&
       interactionData?.dragStart != null &&
@@ -1127,7 +1109,7 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
                 ? `${shadow.borderRadius.top}px ${shadow.borderRadius.right}px ${shadow.borderRadius.bottom}px ${shadow.borderRadius.left}px`
                 : 0,
             backgroundColor: 'black',
-            opacity: features.Grid.shadowOpacity,
+            opacity: 0.1,
             border: '1px solid white',
             top: shadowPosition?.y,
             left: shadowPosition?.x,
diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
index 65429a62f082..08b1df58930f 100644
--- a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
+++ b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, colorTheme, FlexColumn, FlexRow, Section } from '../../../uuiui'
+import { Button, FlexColumn, FlexRow, Section } from '../../../uuiui'
 import { when } from '../../../utils/react-conditionals'
 import { atom, useAtom, useSetAtom } from 'jotai'
 import { UIGridRow } from '../../inspector/widgets/ui-grid-row'
@@ -12,22 +12,9 @@ import type { FeatureName } from '../../../utils/feature-switches'
 import { isFeatureEnabled, setFeatureEnabled } from '../../../utils/feature-switches'
 import { getParseCacheVersion } from '../../../core/workers/parser-printer/parse-cache-utils.worker'
 
-const sections = ['Grid', 'Performance'] as const
+const sections = ['Performance'] as const
 type Section = (typeof sections)[number]
 
-type GridFeatures = {
-  dragVerbatim: boolean
-  dragMagnetic: boolean
-  dragRatio: boolean
-  dotgrid: boolean
-  shadow: boolean
-  activeGridColor: string
-  dotgridColor: string
-  inactiveGridColor: string
-  shadowOpacity: number
-  activeGridBackground: string
-}
-
 type PerformanceFeatures = {
   parseCache: boolean
   parallelParsing: boolean
@@ -37,7 +24,6 @@ type PerformanceFeatures = {
 }
 
 type RollYourOwnFeaturesTypes = {
-  Grid: GridFeatures
   Performance: PerformanceFeatures
 }
 
@@ -54,18 +40,6 @@ const featureToFeatureFlagMap: Record<keyof Partial<PerformanceFeatures>, Featur
 }
 
 const defaultRollYourOwnFeatures: () => RollYourOwnFeatures = () => ({
-  Grid: {
-    dragVerbatim: false,
-    dragMagnetic: false,
-    dragRatio: true,
-    dotgrid: true,
-    shadow: true,
-    activeGridColor: '#0099ff77',
-    activeGridBackground: colorTheme.primary10.value,
-    dotgridColor: '#0099ffaa',
-    inactiveGridColor: '#00000033',
-    shadowOpacity: 0.1,
-  },
   Performance: {
     parseCache: getFeatureFlagValue('parseCache'),
     parallelParsing: getFeatureFlagValue('parallelParsing'),
@@ -95,10 +69,6 @@ export function useRollYourOwnFeatures() {
   const [features] = useAtom(getRollYourOwnFeaturesAtom())
   const defaultFeatures = defaultRollYourOwnFeatures()
   const merged: RollYourOwnFeatures = {
-    Grid: {
-      ...defaultFeatures.Grid,
-      ...features.Grid,
-    },
     Performance: {
       ...defaultFeatures.Performance,
       ...syncWithFeatureFlags(features.Performance),
@@ -158,7 +128,6 @@ export const RollYourOwnFeaturesPane = React.memo(() => {
           </select>
         </FlexRow>
 
-        {when(currentSection === 'Grid', <GridSection />)}
         {when(currentSection === 'Performance', <PerformanceSection />)}
       </Section>
     </FlexColumn>
@@ -179,17 +148,6 @@ function getNewFeatureValueOrNull(currentValue: any, e: React.ChangeEvent<HTMLIn
   }
 }
 
-/** GRID SECTION */
-const GridSection = React.memo(() => {
-  return (
-    <FlexColumn style={{ gap: 10 }}>
-      <ResetDefaultsButton subsection='Grid' />
-      <SimpleFeatureControls subsection='Grid' />
-    </FlexColumn>
-  )
-})
-GridSection.displayName = 'GridSection'
-
 /** PERFORMANCE SECTION */
 const PerformanceSection = React.memo(() => {
   const workersRef = useRefEditorState((store) => {

From 1b1988126beea696f014eeaa374a7230dec81089 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:49:11 +0300
Subject: [PATCH 104/272] fix(test): resolve imports correctly in tests (#6478)

**Problem:**
We have a major problem in tests where code like `import X from
'./file1.js'` is actually trying to resolve it to `test.js/file1.js` and
fails.
It happens due to `resolveTestFiles` calling:
```ts
path.normalize(`${importOrigin}/${normalizedName}`)
```
creating - for example - imports like `'test.js/app.js'` that weren't
found.
The function returned an error value of "Test error, the dumbResolveFn
did not know about this file: 'test.js/app.js'", but no one checked it
down the road, causing the valid paths generation to ignore its contents
completely.
The tests were asserting an incorrect snapshot, with partial, incorrect
valid paths, and that's the reason they passed.

**Fix:**
- Fix `resolveTestFiles` so it will be closer to our real code, using
`path.parse` to get the directory of the import origin
- Fix the tests snapshots to assert a correct expected result
- Log the error (throwing it seemed too obtrusive since some tests might
actually check for missing file functionality)

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../canvas/ui-jsx-canvas-bugs.spec.tsx        | 26 +++++++++++++------
 .../canvas/ui-jsx-canvas-errors.spec.tsx      |  2 +-
 .../canvas/ui-jsx-canvas.test-utils.tsx       | 16 +++++++++---
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx b/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
index 92e358376fe7..fb46578fdadb 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
@@ -132,7 +132,7 @@ export var storyboard = (
 )
 `,
       {
-        'app.js': `
+        '/app.js': `
 import React from 'react'
 export default function App(props) {
   return <div data-uid='app-outer-div'>
@@ -148,7 +148,7 @@ export default function App(props) {
           id=\\"canvas-container\\"
           data-testid=\\"canvas-container\\"
           style=\\"position: absolute\\"
-          data-utopia-valid-paths=\\"sb sb/scene sb/scene/app\\"
+          data-utopia-valid-paths=\\"sb sb/scene sb/scene/app sb/scene/app:app-outer-div sb/scene/app:app-outer-div/inner-div\\"
           data-utopia-root-element-path=\\"sb\\"
         >
           <div
@@ -175,8 +175,13 @@ export default function App(props) {
             \\"
             data-uid=\\"scene\\"
           >
-            <div data-uid=\\"app-outer-div\\" data-path=\\"sb/scene/app\\">
-              <div data-uid=\\"inner-div\\">hello</div>
+            <div data-uid=\\"app-outer-div\\" data-path=\\"sb/scene/app:app-outer-div\\">
+              <div
+                data-uid=\\"inner-div\\"
+                data-path=\\"sb/scene/app:app-outer-div/inner-div\\"
+              >
+                hello
+              </div>
             </div>
           </div>
         </div>
@@ -240,7 +245,7 @@ export var storyboard = (
 )
 `,
       {
-        'app.js': `
+        '/app.js': `
 import React from 'react'
 export default function App(props) {
   return <div data-uid='app-outer-div'>
@@ -256,7 +261,7 @@ export default function App(props) {
           id=\\"canvas-container\\"
           data-testid=\\"canvas-container\\"
           style=\\"position: absolute\\"
-          data-utopia-valid-paths=\\"storyboard-entity storyboard-entity/scene-1-entity storyboard-entity/scene-1-entity/app-entity storyboard-entity/scene-2-entity storyboard-entity/scene-2-entity/same-file-app-entity storyboard-entity/scene-2-entity/same-file-app-entity:same-file-app-div\\"
+          data-utopia-valid-paths=\\"storyboard-entity storyboard-entity/scene-1-entity storyboard-entity/scene-1-entity/app-entity storyboard-entity/scene-1-entity/app-entity:app-outer-div storyboard-entity/scene-1-entity/app-entity:app-outer-div/inner-div storyboard-entity/scene-2-entity storyboard-entity/scene-2-entity/same-file-app-entity storyboard-entity/scene-2-entity/same-file-app-entity:same-file-app-div\\"
           data-utopia-root-element-path=\\"storyboard-entity\\"
         >
           <div
@@ -286,9 +291,14 @@ export default function App(props) {
           >
             <div
               data-uid=\\"app-outer-div\\"
-              data-path=\\"storyboard-entity/scene-1-entity/app-entity\\"
+              data-path=\\"storyboard-entity/scene-1-entity/app-entity:app-outer-div\\"
             >
-              <div data-uid=\\"inner-div\\">hello</div>
+              <div
+                data-uid=\\"inner-div\\"
+                data-path=\\"storyboard-entity/scene-1-entity/app-entity:app-outer-div/inner-div\\"
+              >
+                hello
+              </div>
             </div>
           </div>
           <div
diff --git a/editor/src/components/canvas/ui-jsx-canvas-errors.spec.tsx b/editor/src/components/canvas/ui-jsx-canvas-errors.spec.tsx
index ed270a596405..38790532a507 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-errors.spec.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-errors.spec.tsx
@@ -1465,7 +1465,7 @@ export var ${BakedInStoryboardVariableName} = (props) => {
       }
   `,
       {
-        'app.js': `
+        '/app.js': `
     import { throwError } from './card'
 
     export function throwErrorFromCard() {
diff --git a/editor/src/components/canvas/ui-jsx-canvas.test-utils.tsx b/editor/src/components/canvas/ui-jsx-canvas.test-utils.tsx
index 450653a9d639..dc7dc9c7cd2f 100644
--- a/editor/src/components/canvas/ui-jsx-canvas.test-utils.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas.test-utils.tsx
@@ -60,8 +60,13 @@ export interface PartialCanvasProps {
 }
 
 export const dumbResolveFn = (filenames: Array<string>): CurriedResolveFn => {
-  return (_: ProjectContentTreeRoot) => (importOrigin: string, toImport: string) =>
-    resolveTestFiles(filenames, importOrigin, toImport)
+  return (_: ProjectContentTreeRoot) => (importOrigin: string, toImport: string) => {
+    const result = resolveTestFiles(filenames, importOrigin, toImport)
+    if (!isRight(result)) {
+      console.error(result.value)
+    }
+    return result
+  }
 }
 
 function resolveTestFiles(
@@ -72,7 +77,8 @@ function resolveTestFiles(
   let normalizedName = normalizeName(importOrigin, toImport)
   // Partly restoring what `normalizeName` strips away.
   if (toImport.startsWith('.')) {
-    normalizedName = path.normalize(`${importOrigin}/${normalizedName}`)
+    const parsedOrigin = path.parse(importOrigin)
+    normalizedName = path.normalize(`${parsedOrigin.dir}/${normalizedName}`)
   } else if (toImport.startsWith('/')) {
     normalizedName = `/${normalizedName}`
   }
@@ -92,7 +98,9 @@ function resolveTestFiles(
     case UiFilePath:
       return right(UiFilePath)
     default:
-      return left(`Test error, the dumbResolveFn did not know about this file: ${toImport}`)
+      return left(
+        `Test error, the dumbResolveFn did not know about this file: ${toImport}, got ${normalizedName}`,
+      )
   }
 }
 

From f2fb515befb334149193e528f6ea74bdc802ce77 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:49:25 +0300
Subject: [PATCH 105/272] fix(parse): don't lookup non-parsable files in the
 cache (#6476)

**Problem:**
Today we try to read every file from the cache, even if it's
non-parsable, and always get a cache miss (since we don't parse it and
thus not storing anything). We shouldn't try and access the cache for
non-parsable files at all.
<img width="366" alt="image"
src="https://github.com/user-attachments/assets/e7c4ec79-2c97-47b2-b272-bc7124795f4d">


**Fix:**
Ignore cache for non-parsable files.

**Commit Details:**
- Other than tidying the code, the only change is to also check for
`isParsableFile()` inside `shouldUseCacheForFile()`.
- As part of this change, since I now import `isParsableFile`, I also
moved `gitBlobChecksumFromBuffer` out of `assets.ts` and into
`file-utils.ts`. `file-utils` is in `shared` but was importing it from
the editor's `assets.ts`, and along with it the entire editor code,
unnecessarily.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/components/assets.ts               | 25 ++-----------------
 editor/src/components/editor/server.ts        |  2 +-
 editor/src/core/model/project-import.ts       |  2 +-
 editor/src/core/shared/file-utils.ts          | 25 ++++++++++++++++++-
 .../parse-cache-utils.worker.ts               | 20 ++++++++++-----
 5 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/editor/src/components/assets.ts b/editor/src/components/assets.ts
index 39e02fe1bf8f..1d57845374fb 100644
--- a/editor/src/components/assets.ts
+++ b/editor/src/components/assets.ts
@@ -19,7 +19,6 @@ import { dropLeadingSlash } from './filebrowser/filepath-utils'
 import { assertNever, fastForEach } from '../core/shared/utils'
 import { mapValues, propOrNull } from '../core/shared/object-utils'
 import { emptySet } from '../core/shared/set-utils'
-import { sha1 } from 'sha.js'
 import type { GithubFileChanges, TreeConflicts } from '../core/shared/github/helpers'
 import type { FileChecksumsWithFile } from './editor/store/editor-state'
 import { memoize, valueDependentCache } from '../core/shared/memoize'
@@ -34,6 +33,8 @@ import type {
 } from 'utopia-shared/src/types/assets'
 import { filtered, fromField, fromTypeGuard } from '../core/shared/optics/optic-creators'
 import { anyBy, toArrayOf } from '../core/shared/optics/optic-utilities'
+import { gitBlobChecksumFromBuffer } from '../core/shared/file-utils'
+
 export type {
   AssetFileWithFileName,
   ProjectContentTreeRoot,
@@ -60,18 +61,6 @@ export function getAllProjectAssetFiles(
   return allProjectAssets
 }
 
-function getSHA1ChecksumInner(contents: string | Buffer): string {
-  return new sha1().update(contents).digest('hex')
-}
-
-// Memoized because it can be called for the same piece of code more than once before the
-// checksum gets cached. For example in the canvas strategies and the regular dispatch flow, which don't share
-// those cached checksum objects.
-export const getSHA1Checksum = memoize(getSHA1ChecksumInner, {
-  maxSize: 10,
-  matchesArg: (first, second) => first === second,
-})
-
 export function gitBlobChecksumFromBase64(base64: string): string {
   return gitBlobChecksumFromBuffer(Buffer.from(base64, 'base64'))
 }
@@ -80,16 +69,6 @@ export function gitBlobChecksumFromText(text: string): string {
   return gitBlobChecksumFromBuffer(Buffer.from(text, 'utf8'))
 }
 
-export function gitBlobChecksumFromBuffer(buffer: Buffer): string {
-  // This function returns the same SHA1 checksum string that git would return for the same contents.
-  // Given the contents in the buffer variable, the final checksum is calculated by hashing
-  // a string built as "<prefix><contents>". The prefix looks like "blob <contents_length_in_bytes><null_character>".
-  // Ref: https://git-scm.com/book/en/v2/Git-Internals-Git-Objects
-  const prefix = Buffer.from(`blob ${buffer.byteLength}\0`)
-  const wrapped = Buffer.concat([prefix, buffer])
-  return getSHA1Checksum(wrapped)
-}
-
 export function checkFilesHaveSameContent(first: ProjectFile, second: ProjectFile): boolean {
   switch (first.type) {
     case 'DIRECTORY':
diff --git a/editor/src/components/editor/server.ts b/editor/src/components/editor/server.ts
index 634600c305fd..65f6a5dbc5a8 100644
--- a/editor/src/components/editor/server.ts
+++ b/editor/src/components/editor/server.ts
@@ -20,7 +20,7 @@ import type { LoginState } from '../../uuiui-deps'
 import urljoin from 'url-join'
 import JSZip from 'jszip'
 import type { AssetFileWithFileName } from '../assets'
-import { gitBlobChecksumFromBuffer } from '../assets'
+import { gitBlobChecksumFromBuffer } from '../../core/shared/file-utils'
 import { isLoginLost } from '../../common/user'
 import { notice } from '../common/notice'
 import type { EditorDispatch } from './action-types'
diff --git a/editor/src/core/model/project-import.ts b/editor/src/core/model/project-import.ts
index 089a5d51f1c5..8b0c3b243de4 100644
--- a/editor/src/core/model/project-import.ts
+++ b/editor/src/core/model/project-import.ts
@@ -13,7 +13,7 @@ import {
 import { fileTypeFromFileName } from './project-file-utils'
 import { assetResultForBase64, getFileExtension, imageResultForBase64 } from '../shared/file-utils'
 import type { ProjectContentTreeRoot } from '../../components/assets'
-import { gitBlobChecksumFromBuffer } from '../../components/assets'
+import { gitBlobChecksumFromBuffer } from '../shared/file-utils'
 import { addFileToProjectContents, walkContentsTreeAsync } from '../../components/assets'
 import type { Either } from '../shared/either'
 import { isRight, left, right } from '../shared/either'
diff --git a/editor/src/core/shared/file-utils.ts b/editor/src/core/shared/file-utils.ts
index be0d00383c96..d16a5720e90f 100644
--- a/editor/src/core/shared/file-utils.ts
+++ b/editor/src/core/shared/file-utils.ts
@@ -1,4 +1,5 @@
-import { gitBlobChecksumFromBuffer } from '../../components/assets'
+import { memoize } from './memoize'
+import { sha1 } from 'sha.js'
 import stringHash from 'string-hash'
 import type { Size } from './math-utils'
 import { size } from './math-utils'
@@ -263,3 +264,25 @@ export function isJsOrTsFile(filename: string): boolean {
 export function isParseableFile(filename: string): boolean {
   return isJsOrTsFile(filename)
 }
+
+export function gitBlobChecksumFromBuffer(buffer: Buffer): string {
+  // This function returns the same SHA1 checksum string that git would return for the same contents.
+  // Given the contents in the buffer variable, the final checksum is calculated by hashing
+  // a string built as "<prefix><contents>". The prefix looks like "blob <contents_length_in_bytes><null_character>".
+  // Ref: https://git-scm.com/book/en/v2/Git-Internals-Git-Objects
+  const prefix = Buffer.from(`blob ${buffer.byteLength}\0`)
+  const wrapped = Buffer.concat([prefix, buffer])
+  return getSHA1Checksum(wrapped)
+}
+
+function getSHA1ChecksumInner(contents: string | Buffer): string {
+  return new sha1().update(contents).digest('hex')
+}
+
+// Memoized because it can be called for the same piece of code more than once before the
+// checksum gets cached. For example in the canvas strategies and the regular dispatch flow, which don't share
+// those cached checksum objects.
+export const getSHA1Checksum = memoize(getSHA1ChecksumInner, {
+  maxSize: 10,
+  matchesArg: (first, second) => first === second,
+})
diff --git a/editor/src/core/workers/parser-printer/parse-cache-utils.worker.ts b/editor/src/core/workers/parser-printer/parse-cache-utils.worker.ts
index 851fef617172..463be361a299 100644
--- a/editor/src/core/workers/parser-printer/parse-cache-utils.worker.ts
+++ b/editor/src/core/workers/parser-printer/parse-cache-utils.worker.ts
@@ -1,3 +1,4 @@
+import { isParseableFile } from '../../../core/shared/file-utils'
 import { URL_HASH } from '../../../common/env-vars'
 import { type ParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 import {
@@ -33,15 +34,22 @@ function logCacheMessage(parsingCacheOptions: ParseCacheOptions, ...messages: (s
   }
 }
 
+function isArbitraryCodeFile(filename: string): boolean {
+  return filename === ARBITRARY_CODE_FILE_NAME
+}
+
 function stringIdentifiers(filename: string, content: string): (string | object)[] {
-  if (filename === ARBITRARY_CODE_FILE_NAME) {
+  if (isArbitraryCodeFile(filename)) {
     return ['code', [{ content: content }]]
   }
   return [filename]
 }
 
-function shouldSkipCacheForFile(filename: string, parsingCacheOptions: ParseCacheOptions): boolean {
-  return filename === ARBITRARY_CODE_FILE_NAME && !parsingCacheOptions.cacheArbitraryCode
+function shouldUseCacheForFile(filename: string, parsingCacheOptions: ParseCacheOptions): boolean {
+  return (
+    isParseableFile(filename) &&
+    (!isArbitraryCodeFile(filename) || parsingCacheOptions.cacheArbitraryCode)
+  )
 }
 
 export function getParseCacheVersion(): string {
@@ -59,7 +67,7 @@ export async function getParseResultFromCache(
   parsingCacheOptions: ParseCacheOptions,
 ): Promise<ParseFileResult | null> {
   const { filename, content } = file
-  if (shouldSkipCacheForFile(filename, parsingCacheOptions)) {
+  if (!shouldUseCacheForFile(filename, parsingCacheOptions)) {
     return null
   }
   const cacheKey = getCacheKey(filename)
@@ -80,12 +88,12 @@ export async function storeParseResultInCache(
   parsingCacheOptions: ParseCacheOptions,
 ): Promise<void> {
   const { filename, content } = file
-  if (shouldSkipCacheForFile(filename, parsingCacheOptions)) {
+  if (!shouldUseCacheForFile(filename, parsingCacheOptions)) {
     return
   }
   logCacheMessage(parsingCacheOptions, 'Caching', ...stringIdentifiers(filename, content))
   const cacheKey = getCacheKey(filename)
-  if (filename === ARBITRARY_CODE_FILE_NAME) {
+  if (isArbitraryCodeFile(filename)) {
     // for the special filename 'code.tsx', we store multiple contents, so we need to read it first
     const cachedResult = (await getParseCacheStore().getItem<CachedParseResult>(cacheKey)) ?? {}
     // limit the arbitrary code cache keys size

From 52508eb34d20b9503fc417358cfe89074d323ed2 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 7 Oct 2024 14:05:00 +0300
Subject: [PATCH 106/272] fix(import): correctly identify a default exported
 component (#6453)

**Problem:**
Today we don't recognize when a default export is declared separately.
```ts
function App(){...}
export default App
```
this is not treated as a component when it's imported:

<video
src="https://github.com/user-attachments/assets/a52ce448-c324-44e9-bae1-9c64c3af21e5"></video>

**Fix:**
Use `isExportDefault` instead of a specific check for a function or a
class

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6439
---
 editor/src/components/canvas/canvas-utils.ts  |  6 +-
 .../canvas/ui-jsx-canvas-bugs.spec.tsx        | 82 +++++++++++++++++++
 editor/src/core/model/project-file-utils.ts   |  2 +-
 3 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/editor/src/components/canvas/canvas-utils.ts b/editor/src/components/canvas/canvas-utils.ts
index de3d1b6857ea..50b5f71e9ac6 100644
--- a/editor/src/components/canvas/canvas-utils.ts
+++ b/editor/src/components/canvas/canvas-utils.ts
@@ -63,7 +63,7 @@ import type {
   HighlightBoundsForUids,
   ExportsDetail,
 } from '../../core/shared/project-file-types'
-import { isParseSuccess, isTextFile } from '../../core/shared/project-file-types'
+import { isExportDefault, isParseSuccess, isTextFile } from '../../core/shared/project-file-types'
 import {
   applyUtopiaJSXComponentsChanges,
   getDefaultExportedTopLevelElement,
@@ -1730,9 +1730,9 @@ export function getValidElementPaths(
       const { topLevelElements: resolvedTopLevelElements, exportsDetail } =
         getParseSuccessForFilePath(resolvedFilePath, projectContents)
       // Handle default exports as they may actually be named.
-      if (originTopLevelName == null) {
+      if (originTopLevelName == null || originTopLevelName === 'default') {
         for (const exportDetail of exportsDetail) {
-          if (exportDetail.type === 'EXPORT_DEFAULT_FUNCTION_OR_CLASS') {
+          if (isExportDefault(exportDetail)) {
             originTopLevelName = exportDetail.name
           }
         }
diff --git a/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx b/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
index fb46578fdadb..d4850376f185 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
@@ -190,6 +190,88 @@ export default function App(props) {
     `)
   })
 
+  it('Handles importing default exports declared separately', () => {
+    const result = testCanvasRenderInlineMultifile(
+      null,
+      `
+import React from 'react'
+import Utopia, {
+  Scene,
+  Storyboard,
+} from 'utopia-api'
+import {default as Appy} from '/app'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      data-uid='scene'
+      style={{ position: 'absolute', left: 0, top: 0, width: 375, height: 812 }}
+    >
+      <Appy data-uid='app' />
+    </Scene>
+  </Storyboard>
+)
+`,
+      {
+        '/app.js': `
+import React from 'react'
+function App(props) {
+  return <div data-uid='app-outer-div'>
+    <div data-uid='inner-div'>hello</div>
+  </div>
+}
+export default App`,
+      },
+    )
+
+    expect(result).toMatchInlineSnapshot(`
+      "<div style=\\"all: initial\\">
+        <div
+          id=\\"canvas-container\\"
+          data-testid=\\"canvas-container\\"
+          style=\\"position: absolute\\"
+          data-utopia-valid-paths=\\"sb sb/scene sb/scene/app sb/scene/app:app-outer-div sb/scene/app:app-outer-div/inner-div\\"
+          data-utopia-root-element-path=\\"sb\\"
+        >
+          <div
+            data-utopia-scene-id=\\"sb/scene\\"
+            data-path=\\"sb/scene\\"
+            style=\\"
+              overflow: hidden;
+              position: absolute;
+              background-color: var(--utopitheme-emphasizedBackground);
+              box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
+                0px 2px 4px -1px var(--utopitheme-shadow50);
+              background-image: conic-gradient(
+                var(--utopitheme-checkerboardLight) 0.25turn,
+                var(--utopitheme-checkerboardDark) 0.25turn 0.5turn,
+                var(--utopitheme-checkerboardLight) 0.5turn 0.75turn,
+                var(--utopitheme-checkerboardDark) 0.75turn
+              );
+              background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px;
+              background-position: -9px 0px, -3px -6px, 3px 6px, -3px 0;
+              left: 0;
+              top: 0;
+              width: 375px;
+              height: 812px;
+            \\"
+            data-uid=\\"scene\\"
+          >
+            <div data-uid=\\"app-outer-div\\" data-path=\\"sb/scene/app:app-outer-div\\">
+              <div
+                data-uid=\\"inner-div\\"
+                data-path=\\"sb/scene/app:app-outer-div/inner-div\\"
+              >
+                hello
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      "
+    `)
+  })
+
   it('#1717 - Works with user components called Scene', () => {
     const result = testCanvasRenderInlineMultifile(
       null,
diff --git a/editor/src/core/model/project-file-utils.ts b/editor/src/core/model/project-file-utils.ts
index 2b41567a1571..259bbbf7f89d 100644
--- a/editor/src/core/model/project-file-utils.ts
+++ b/editor/src/core/model/project-file-utils.ts
@@ -840,7 +840,7 @@ export function getDefaultExportedTopLevelElement(file: TextFile): JSXElementChi
   }
 
   const defaultExportName =
-    file.fileContents.parsed.exportsDetail.find(isExportDefaultFunctionOrClass)?.name ?? null
+    file.fileContents.parsed.exportsDetail.find(isExportDefault)?.name ?? null
 
   if (defaultExportName == null) {
     return null

From a20a528ec7a9afe9178cc6411161c3a733324bf1 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Mon, 7 Oct 2024 13:47:37 +0200
Subject: [PATCH 107/272] always call exitPointerLock (#6458)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Problem:**
If a scrubbing using the new pointer lock based scrubber control was
quick enough, we would often not release the pointer on mouse up –
instead leaving you with a hidden cursor until you press Esc.

**Fix:**
Turns out, `document.pointerLockElement` is still null for a few moments
after getting pointer lock, and our code calling
`document.exitPointerLock` checks if the pointer lock element is the
same as the current control's target.

By simply removing the check, we call exitPointerLock() all of the time,
making it not brittle anymore.
---
 editor/src/uuiui/inputs/number-input.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/editor/src/uuiui/inputs/number-input.tsx b/editor/src/uuiui/inputs/number-input.tsx
index aeb9d054fee5..3d5b2afc656e 100644
--- a/editor/src/uuiui/inputs/number-input.tsx
+++ b/editor/src/uuiui/inputs/number-input.tsx
@@ -383,9 +383,7 @@ export const NumberInput = React.memo<NumberInputProps>(
 
     const cancelPointerLock = React.useCallback(
       (revertChanges: 'revert-nothing' | 'revert-changes') => {
-        if (document.pointerLockElement === pointerOriginRef.current) {
-          document.exitPointerLock()
-        }
+        document.exitPointerLock()
         if (
           revertChanges === 'revert-changes' &&
           onSubmitValue != null &&

From 562aec5f656886546262abaa4eb8c4ea0b1a1157 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 7 Oct 2024 17:03:49 +0300
Subject: [PATCH 108/272] fix(vite): fix vite project import (#6420)

**Problem:**
Trying to import a [vanilla Vite
project](https://github.com/liady/utopia-vite-project) fails today, with
multiple issues, and results in a broken editor.

**Fix:**
Create a `FrameworkHooks` interface that the Vite specific code can
implement, to hook into storyboard creation as well as module resolution
([`frameworks-hooks-vite.ts`](https://github.com/concrete-utopia/utopia/pull/6420/files#diff-b640da014227f136acea49663e81e9106c84da8f6e2c305ed21b51615c8048fe)).

<img width="1083" alt="image"
src="https://github.com/user-attachments/assets/dee615a5-b218-4c94-a349-386c7c9ccc24">

### Creation of `storyboard.js`
([`storyboard-utils.ts`](https://github.com/concrete-utopia/utopia/pull/6420/files#diff-a071a27ce64f0de07b4bcf1da78fb0ba2113311d20653a726272561f0314902b)):
* Detect main html file (`index.html`) if present, extract from it root
element class name, root element id (`root`) and main script module
(`main.js`)
* From main script module, if present, extract main app candidate (`<App
/>`) and relevant css imports (`./index.css`)
* Have the `storyboard.js` file import correctly the main app component,
as well as relevant css imports. Assign id and class name to the
`Scene`, if found.

### Module resolution fallbacks
([`package-manager.ts`](https://github.com/concrete-utopia/utopia/pull/6420/files#diff-a48ec59247957af2197227e3d2c2c2e5156fd31589c4981df5828ca15ac9db5b))
* Have a framework-specific fallback for cases like `/vite.svg`, that
can lookup root files in the public folder as well.

### Fixes in other PRs:
* #6445 - Prevent css root dimensions (`*-width`, `*-height`) from
affecting the canvas itself.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode
---
 .../package-manager/module-resolution.ts      |   8 +-
 .../package-manager/package-manager.ts        |  15 +-
 .../frameworks/framework-hooks-default.ts     |  16 ++
 .../core/frameworks/framework-hooks-vite.ts   | 173 ++++++++++++++++++
 editor/src/core/frameworks/framework-hooks.ts |  25 +++
 .../storyboard-utils.spec.ts.snap             |   2 +-
 editor/src/core/model/scene-utils.ts          |   6 +-
 editor/src/core/model/storyboard-utils.ts     | 139 ++++++++++----
 editor/src/core/shared/dom-utils.ts           |  29 +++
 editor/src/core/shared/project-file-types.ts  |   8 +
 10 files changed, 380 insertions(+), 41 deletions(-)
 create mode 100644 editor/src/core/frameworks/framework-hooks-default.ts
 create mode 100644 editor/src/core/frameworks/framework-hooks-vite.ts
 create mode 100644 editor/src/core/frameworks/framework-hooks.ts

diff --git a/editor/src/core/es-modules/package-manager/module-resolution.ts b/editor/src/core/es-modules/package-manager/module-resolution.ts
index 6a08633e3f02..8904005017ff 100644
--- a/editor/src/core/es-modules/package-manager/module-resolution.ts
+++ b/editor/src/core/es-modules/package-manager/module-resolution.ts
@@ -92,12 +92,18 @@ export function isResolveSuccess<T>(
   return resolveResult.type === 'RESOLVE_SUCCESS'
 }
 
+export function isResolveNotPresent<T>(
+  resolveResult: ResolveResult<T>,
+): resolveResult is ResolveNotPresent {
+  return resolveResult.type === 'RESOLVE_NOT_PRESENT'
+}
+
 interface FoundFile {
   path: string
   file: ESCodeFile | ESRemoteDependencyPlaceholder
 }
 
-type FileLookupResult = ResolveResult<FoundFile>
+export type FileLookupResult = ResolveResult<FoundFile>
 
 function fileLookupResult(
   path: string,
diff --git a/editor/src/core/es-modules/package-manager/package-manager.ts b/editor/src/core/es-modules/package-manager/package-manager.ts
index bc0663d11f9c..0e90fe32c94a 100644
--- a/editor/src/core/es-modules/package-manager/package-manager.ts
+++ b/editor/src/core/es-modules/package-manager/package-manager.ts
@@ -2,10 +2,10 @@ import type { NodeModules, ESCodeFile } from '../../shared/project-file-types'
 import { isEsCodeFile, isEsRemoteDependencyPlaceholder } from '../../shared/project-file-types'
 import type { RequireFn, TypeDefinitions } from '../../shared/npm-dependency-types'
 import {
+  isResolveNotPresent,
   isResolveSuccess,
   isResolveSuccessIgnoreModule,
   resolveModule,
-  resolveModulePath,
 } from './module-resolution'
 import { evaluator } from '../evaluator/evaluator'
 import { fetchMissingFileDependency } from './fetch-packages'
@@ -21,6 +21,8 @@ import { string } from 'prop-types'
 import { Either } from '../../shared/either'
 import type { CurriedUtopiaRequireFn } from '../../../components/custom-code/code-file'
 import type { BuiltInDependencies } from './built-in-dependencies-list'
+import type { FrameworkHooks } from '../../frameworks/framework-hooks'
+import { getFrameworkHooks } from '../../frameworks/framework-hooks'
 
 export interface FileEvaluationCache {
   exports: any
@@ -96,6 +98,7 @@ export function getRequireFn(
   builtInDependencies: BuiltInDependencies,
   injectedEvaluator = evaluator,
 ): RequireFn {
+  const frameworkHooks: FrameworkHooks = getFrameworkHooks(projectContents)
   return function require(importOrigin, toImport): unknown {
     const builtInDependency = resolveBuiltInDependency(builtInDependencies, toImport)
     if (builtInDependency != null) {
@@ -181,6 +184,16 @@ export function getRequireFn(
 
         throw createResolvingRemoteDependencyError(toImport)
       }
+    } else if (isResolveNotPresent(resolveResult)) {
+      const frameworkLookupPath = frameworkHooks.onResolveModuleNotPresent(
+        projectContents,
+        nodeModules,
+        importOrigin,
+        toImport,
+      )
+      if (frameworkLookupPath != null) {
+        return require(importOrigin, frameworkLookupPath)
+      }
     }
     throw createDependencyNotFoundError(importOrigin, toImport)
   }
diff --git a/editor/src/core/frameworks/framework-hooks-default.ts b/editor/src/core/frameworks/framework-hooks-default.ts
new file mode 100644
index 000000000000..d4f5aea44e2e
--- /dev/null
+++ b/editor/src/core/frameworks/framework-hooks-default.ts
@@ -0,0 +1,16 @@
+import type { CreationDataFromProject } from '../model/storyboard-utils'
+import type { FrameworkHooks } from './framework-hooks'
+
+export class DefaultFrameworkHooks implements FrameworkHooks {
+  detect(): boolean {
+    return true
+  }
+
+  onProjectImport(): CreationDataFromProject | null {
+    return null
+  }
+
+  onResolveModuleNotPresent(): string | null {
+    return null
+  }
+}
diff --git a/editor/src/core/frameworks/framework-hooks-vite.ts b/editor/src/core/frameworks/framework-hooks-vite.ts
new file mode 100644
index 000000000000..c5b67b7cfe2f
--- /dev/null
+++ b/editor/src/core/frameworks/framework-hooks-vite.ts
@@ -0,0 +1,173 @@
+import type { NodeModules } from '../shared/project-file-types'
+import type { FrameworkHooks } from './framework-hooks'
+import { getProjectFileByFilePath, isProjectContentFile } from '../../components/assets'
+import type { Imports } from '../shared/project-file-types'
+import { forEachParseSuccess, isEmptyImportDetails, isTextFile } from '../shared/project-file-types'
+import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
+import { getFilePathMappings } from '../model/project-file-utils'
+import type { ComponentToImport, CreationDataFromProject } from '../model/storyboard-utils'
+import { namedComponentToImport, PossiblyMainComponentNames } from '../model/storyboard-utils'
+import { mergeImports } from '../workers/common/project-file-utils'
+import { absolutePathFromRelativePath } from '../../utils/path-utils'
+import type { FileLookupResult } from '../es-modules/package-manager/module-resolution'
+import { isResolveSuccess, resolveModule } from '../es-modules/package-manager/module-resolution'
+import { getMainScriptElement, getRootElement, parseHtml } from '../shared/dom-utils'
+
+export class ViteFrameworkHooks implements FrameworkHooks {
+  detect(projectContents: ProjectContentTreeRoot): boolean {
+    return hasViteConfig(projectContents)
+  }
+
+  onProjectImport(projectContents: ProjectContentTreeRoot): CreationDataFromProject | null {
+    return getCreationDataFromProject(projectContents)
+  }
+
+  onResolveModuleNotPresent(
+    projectContents: ProjectContentTreeRoot,
+    nodeModules: NodeModules,
+    importOrigin: string,
+    toImport: string,
+  ): string | null {
+    if (isInRootPath(toImport)) {
+      const publicResolveResult = resolveModuleFromPublicDir(
+        projectContents,
+        nodeModules,
+        importOrigin,
+        toImport,
+      )
+      if (isResolveSuccess(publicResolveResult)) {
+        return publicResolveResult.success.path
+      }
+    }
+    return null
+  }
+}
+
+const configFileNames = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs']
+
+function hasViteConfig(projectContents: ProjectContentTreeRoot): boolean {
+  return configFileNames.some((fileName) => projectContents[fileName] != null)
+}
+
+export function getCreationDataFromProject(
+  projectContents: ProjectContentTreeRoot,
+): CreationDataFromProject {
+  const componentsToImport: ComponentToImport[] = []
+  let extraImports: Imports = {}
+  const creationDataFromHtml = extractCreationDataFromMainHtmlFile(projectContents)
+  if (creationDataFromHtml.maybeMainScriptFilePath != null) {
+    const mainScriptFile = getProjectFileByFilePath(
+      projectContents,
+      creationDataFromHtml.maybeMainScriptFilePath,
+    )
+
+    if (mainScriptFile != null && isTextFile(mainScriptFile)) {
+      forEachParseSuccess((success) => {
+        // check for import candidates
+        function toAbsolutePath(importSource: string): string {
+          if (creationDataFromHtml.maybeMainScriptFilePath != null) {
+            return absolutePathFromRelativePath(
+              creationDataFromHtml.maybeMainScriptFilePath,
+              false,
+              importSource,
+            )
+          }
+          return importSource
+        }
+        Object.entries(success.imports).forEach(([importSource, importDetails]) => {
+          // "import App from '...'"
+          if (
+            importDetails.importedWithName != null &&
+            PossiblyMainComponentNames.includes(importDetails.importedWithName)
+          ) {
+            componentsToImport.push(
+              namedComponentToImport(
+                toAbsolutePath(importSource),
+                true,
+                'default',
+                importDetails.importedWithName,
+              ),
+            )
+          }
+          // "import { App } from '...'"
+          importDetails.importedFromWithin.forEach((importAlias) => {
+            if (PossiblyMainComponentNames.includes(importAlias.alias)) {
+              componentsToImport.push(
+                namedComponentToImport(
+                  toAbsolutePath(importSource),
+                  true,
+                  importAlias.name,
+                  importAlias.alias,
+                ),
+              )
+            }
+          })
+          // "import '...'"
+          if (isEmptyImportDetails(importDetails)) {
+            extraImports = mergeImports(
+              creationDataFromHtml.maybeMainScriptFilePath ?? '',
+              getFilePathMappings(projectContents),
+              extraImports,
+              {
+                [toAbsolutePath(importSource)]: importDetails,
+              },
+            ).imports
+          }
+        })
+      }, mainScriptFile.fileContents.parsed)
+    }
+  }
+  return {
+    maybeRootElementId: creationDataFromHtml.maybeRootElementId,
+    maybeRootElementClass: creationDataFromHtml.maybeRootElementClass,
+    componentsToImport: componentsToImport,
+    extraImports: extraImports,
+  }
+}
+
+// TODO: read from vite config
+const MAIN_HTML_FILE_NAME = 'index.html'
+
+function extractCreationDataFromMainHtmlFile(projectContents: ProjectContentTreeRoot): {
+  maybeRootElementId?: string
+  maybeRootElementClass?: string
+  maybeMainScriptFilePath?: string
+} {
+  const indexHtmlFile = projectContents[MAIN_HTML_FILE_NAME]
+  if (
+    indexHtmlFile != null &&
+    isProjectContentFile(indexHtmlFile) &&
+    isTextFile(indexHtmlFile.content)
+  ) {
+    // try to parse the html file
+    const doc = parseHtml(indexHtmlFile.content.fileContents.code)
+    if (doc != null) {
+      const rootElement = getRootElement(doc)
+      const mainScriptElement = getMainScriptElement(doc)
+      return {
+        maybeRootElementId: rootElement?.id,
+        maybeRootElementClass: rootElement?.className,
+        maybeMainScriptFilePath: mainScriptElement?.getAttribute('src') ?? undefined,
+      }
+    }
+  }
+  return {}
+}
+
+// TODO: read from vite config
+const PUBLIC_FOLDER_PATH = 'public'
+
+function isInRootPath(toImport: string, publicDir: string = PUBLIC_FOLDER_PATH): boolean {
+  return toImport.startsWith('/') && !toImport.startsWith(`/${publicDir}/`)
+}
+
+function resolveModuleFromPublicDir(
+  projectContents: ProjectContentTreeRoot,
+  nodeModules: NodeModules,
+  importOrigin: string,
+  toImport: string,
+  publicDir: string = PUBLIC_FOLDER_PATH,
+): FileLookupResult {
+  const publicPath = `/${publicDir}/${toImport}`.replace('//', '/').replace('/./', '/')
+  return resolveModule(projectContents, nodeModules, importOrigin, publicPath)
+}
diff --git a/editor/src/core/frameworks/framework-hooks.ts b/editor/src/core/frameworks/framework-hooks.ts
new file mode 100644
index 000000000000..3fd0c30cf143
--- /dev/null
+++ b/editor/src/core/frameworks/framework-hooks.ts
@@ -0,0 +1,25 @@
+import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
+import type { CreationDataFromProject } from '../model/storyboard-utils'
+import type { NodeModules } from '../shared/project-file-types'
+import { ViteFrameworkHooks } from './framework-hooks-vite'
+import { DefaultFrameworkHooks } from './framework-hooks-default'
+
+export interface FrameworkHooks {
+  detect: (projectContents: ProjectContentTreeRoot) => boolean
+  onProjectImport: (projectContents: ProjectContentTreeRoot) => CreationDataFromProject | null
+  onResolveModuleNotPresent: (
+    projectContents: ProjectContentTreeRoot,
+    nodeModules: NodeModules,
+    importOrigin: string,
+    toImport: string,
+  ) => string | null
+}
+
+const defaultFrameworkHooks = new DefaultFrameworkHooks()
+const frameworkHooks: Array<FrameworkHooks> = [new ViteFrameworkHooks(), defaultFrameworkHooks]
+
+export function getFrameworkHooks(projectContents: ProjectContentTreeRoot): FrameworkHooks {
+  return (
+    frameworkHooks.find((framework) => framework.detect(projectContents)) ?? defaultFrameworkHooks
+  )
+}
diff --git a/editor/src/core/model/__snapshots__/storyboard-utils.spec.ts.snap b/editor/src/core/model/__snapshots__/storyboard-utils.spec.ts.snap
index 8cfa27acee6e..be0e8367eb66 100644
--- a/editor/src/core/model/__snapshots__/storyboard-utils.spec.ts.snap
+++ b/editor/src/core/model/__snapshots__/storyboard-utils.spec.ts.snap
@@ -11,7 +11,7 @@ Array [
   Object {
     "arbitraryJSBlock": null,
     "blockOrExpression": "block",
-    "declarationSyntax": "var",
+    "declarationSyntax": "const",
     "functionWrapping": Array [],
     "isFunction": false,
     "name": "storyboard",
diff --git a/editor/src/core/model/scene-utils.ts b/editor/src/core/model/scene-utils.ts
index 4b441e003a51..17fe08d60aba 100644
--- a/editor/src/core/model/scene-utils.ts
+++ b/editor/src/core/model/scene-utils.ts
@@ -6,6 +6,7 @@ import type {
   JSXElementChild,
   TopLevelElement,
   JSXAttributes,
+  JSExpression,
 } from '../shared/element-template'
 import {
   utopiaJSXComponent,
@@ -34,6 +35,7 @@ import { getProjectFileByFilePath } from '../../components/assets'
 import { getUtopiaJSXComponentsFromSuccess } from './project-file-utils'
 import { generateConsistentUID, getUtopiaID } from '../shared/uid-utils'
 import { hashObject } from '../shared/hash'
+import type { MapLike } from 'typescript'
 
 export const PathForSceneComponent = PP.create('component')
 export const PathForSceneDataUid = PP.create('data-uid')
@@ -114,7 +116,7 @@ export function convertScenesToUtopiaCanvasComponent(
   return utopiaJSXComponent(
     BakedInStoryboardVariableName,
     false,
-    'var',
+    'const',
     'block',
     [],
     null,
@@ -135,6 +137,7 @@ export function createSceneFromComponent(
   filePath: string,
   componentImportedAs: string,
   uid: string,
+  additionalAttributes: MapLike<JSExpression> = {},
 ): JSXElement {
   const sceneProps = jsxAttributesFromMap({
     [UTOPIA_UID_KEY]: jsExpressionValue(uid, emptyComments),
@@ -148,6 +151,7 @@ export function createSceneFromComponent(
       },
       emptyComments,
     ),
+    ...additionalAttributes,
   })
   const hash = hashObject({
     fileName: filePath,
diff --git a/editor/src/core/model/storyboard-utils.ts b/editor/src/core/model/storyboard-utils.ts
index a4fe4a8d8ecb..e8f233e89f9e 100644
--- a/editor/src/core/model/storyboard-utils.ts
+++ b/editor/src/core/model/storyboard-utils.ts
@@ -1,11 +1,10 @@
+import { getFrameworkHooks } from '../frameworks/framework-hooks'
 import type { ProjectContentTreeRoot } from '../../components/assets'
 import {
   addFileToProjectContents,
   getProjectFileByFilePath,
   walkContentsTree,
 } from '../../components/assets'
-import type { EditorModel } from '../../components/editor/action-types'
-import type { EditorState } from '../../components/editor/store/editor-state'
 import { StoryboardFilePath } from '../../components/editor/store/editor-state'
 import type { Compare } from '../../utils/compare'
 import {
@@ -15,20 +14,16 @@ import {
   compareOn,
   comparePrimitive,
 } from '../../utils/compare'
-import type { JSXElement } from '../shared/element-template'
+import type { JSExpression, JSXElement } from '../shared/element-template'
 import {
   emptyComments,
-  isUtopiaJSXComponent,
+  jsExpressionValue,
   unparsedCode,
-  UtopiaJSXComponent,
   utopiaJSXComponent,
 } from '../shared/element-template'
-import { forEachValue } from '../shared/object-utils'
 import { forceNotNull } from '../shared/optional-utils'
-import type { ParseSuccess } from '../shared/project-file-types'
+import type { Imports, ParseSuccess } from '../shared/project-file-types'
 import {
-  EmptyExportsDetail,
-  ExportDetail,
   exportVariable,
   exportVariables,
   forEachParseSuccess,
@@ -42,15 +37,16 @@ import {
   textFile,
   textFileContents,
 } from '../shared/project-file-types'
-import { addImport } from '../workers/common/project-file-utils'
+import { addImport, mergeImports } from '../workers/common/project-file-utils'
 import {
   BakedInStoryboardUID,
   BakedInStoryboardVariableName,
   createSceneFromComponent,
   createStoryboardElement,
 } from './scene-utils'
+import type { MapLike } from 'typescript'
 
-const PossiblyMainComponentNames: Array<string> = ['App', 'Application', 'Main']
+export const PossiblyMainComponentNames: Array<string> = ['App', 'Application', 'Main']
 
 interface DefaultComponentToImport {
   type: 'DEFAULT_COMPONENT_TO_IMPORT'
@@ -62,6 +58,7 @@ interface NamedComponentToImport {
   path: string
   possibleMainComponentName: boolean
   toImport: string
+  toImportAlias?: string
 }
 
 interface UnexportedRenderedComponent {
@@ -70,23 +67,25 @@ interface UnexportedRenderedComponent {
   elementName: string
 }
 
-function defaultComponentToImport(path: string): DefaultComponentToImport {
+export function defaultComponentToImport(path: string): DefaultComponentToImport {
   return {
     type: 'DEFAULT_COMPONENT_TO_IMPORT',
     path: path,
   }
 }
 
-function namedComponentToImport(
+export function namedComponentToImport(
   path: string,
   possibleMainComponentName: boolean,
   toImport: string,
+  toImportAlias?: string,
 ): NamedComponentToImport {
   return {
     type: 'NAMED_COMPONENT_TO_IMPORT',
     path: path,
     possibleMainComponentName: possibleMainComponentName,
     toImport: toImport,
+    toImportAlias: toImportAlias,
   }
 }
 
@@ -101,7 +100,35 @@ function unexportedRenderedComponent(
   }
 }
 
-type ComponentToImport =
+type StoryboardCreationData = {
+  componentToImport: ComponentToImport
+  imports: Imports
+  sceneClassName?: string
+  sceneId?: string
+}
+
+export interface CreationDataFromProject {
+  maybeRootElementId?: string
+  maybeRootElementClass?: string
+  componentsToImport: ComponentToImport[]
+  extraImports: Imports
+}
+
+function createStoryboardCreationData(
+  componentToImport: ComponentToImport,
+  imports: Imports,
+  sceneClassName?: string,
+  sceneId?: string,
+): StoryboardCreationData {
+  return {
+    componentToImport: componentToImport,
+    imports: imports,
+    sceneClassName: sceneClassName,
+    sceneId: sceneId,
+  }
+}
+
+export type ComponentToImport =
   | DefaultComponentToImport
   | NamedComponentToImport
   | UnexportedRenderedComponent
@@ -161,9 +188,11 @@ const compareComponentToImport: Compare<ComponentToImport> = compareCompose(
 export function addStoryboardFileToProject(
   projectContents: ProjectContentTreeRoot,
 ): ProjectContentTreeRoot | null {
+  const frameworkHooks = getFrameworkHooks(projectContents)
   const storyboardFile = getProjectFileByFilePath(projectContents, StoryboardFilePath)
   if (storyboardFile == null) {
     let currentImportCandidate: ComponentToImport | null = null
+    let imports: Imports = {}
     function updateCandidate(importCandidate: ComponentToImport): void {
       if (currentImportCandidate == null) {
         currentImportCandidate = importCandidate
@@ -173,6 +202,14 @@ export function addStoryboardFileToProject(
         }
       }
     }
+    const creationData: CreationDataFromProject | null =
+      frameworkHooks.onProjectImport(projectContents)
+    if (creationData != null) {
+      creationData.componentsToImport.forEach((componentToImport) => {
+        updateCandidate(componentToImport)
+      })
+      imports = mergeImports(StoryboardFilePath, [], imports, creationData.extraImports).imports
+    }
     walkContentsTree(projectContents, (fullPath, file) => {
       if (isParsedTextFile(file)) {
         // For those successfully parsed files, we want to search all of the components.
@@ -234,7 +271,12 @@ export function addStoryboardFileToProject(
                     exportDetail.name,
                   )
                   updateCandidate(
-                    namedComponentToImport(fullPath, possibleMainComponentName, exportDetail.name),
+                    namedComponentToImport(
+                      fullPath,
+                      possibleMainComponentName,
+                      'default',
+                      exportDetail.name,
+                    ),
                   )
                 }
                 break
@@ -266,19 +308,28 @@ export function addStoryboardFileToProject(
     if (currentImportCandidate == null) {
       return null
     } else {
-      return addStoryboardFileForComponent(currentImportCandidate, projectContents)
+      return addStoryboardFile(
+        createStoryboardCreationData(
+          currentImportCandidate,
+          imports,
+          creationData?.maybeRootElementClass,
+          creationData?.maybeRootElementId,
+        ),
+        projectContents,
+      )
     }
   } else {
     return null
   }
 }
 
-function addStoryboardFileForComponent(
-  createFileWithComponent: ComponentToImport,
+function addStoryboardFile(
+  storyboardCreationData: StoryboardCreationData,
   projectContents: ProjectContentTreeRoot,
 ): ProjectContentTreeRoot {
+  const { componentToImport, imports } = storyboardCreationData
   // Add import of storyboard and scene components.
-  let importsResolution = addImport(StoryboardFilePath, [], 'react', null, [], 'React', {})
+  let importsResolution = addImport(StoryboardFilePath, [], 'react', null, [], 'React', imports)
   importsResolution = addImport(
     StoryboardFilePath,
     [],
@@ -291,29 +342,42 @@ function addStoryboardFileForComponent(
   // Create the storyboard variable.
   let sceneElement: JSXElement
   let updatedProjectContents: ProjectContentTreeRoot = projectContents
-  switch (createFileWithComponent.type) {
+  const sceneId = storyboardCreationData.sceneId
+  const sceneAttributes: MapLike<JSExpression> =
+    sceneId != null
+      ? {
+          id: jsExpressionValue(sceneId, emptyComments),
+        }
+      : {}
+  switch (componentToImport.type) {
     case 'NAMED_COMPONENT_TO_IMPORT':
       sceneElement = createSceneFromComponent(
         StoryboardFilePath,
-        createFileWithComponent.toImport,
+        componentToImport.toImportAlias ?? componentToImport.toImport,
         'scene-1',
+        sceneAttributes,
       )
       importsResolution = addImport(
         StoryboardFilePath,
         [],
-        createFileWithComponent.path,
+        componentToImport.path,
         null,
-        [importAlias(createFileWithComponent.toImport)],
+        [importAlias(componentToImport.toImport, componentToImport.toImportAlias)],
         null,
         importsResolution.imports,
       )
       break
     case 'DEFAULT_COMPONENT_TO_IMPORT':
-      sceneElement = createSceneFromComponent(StoryboardFilePath, 'StoryboardComponent', 'scene-1')
+      sceneElement = createSceneFromComponent(
+        StoryboardFilePath,
+        'StoryboardComponent',
+        'scene-1',
+        sceneAttributes,
+      )
       importsResolution = addImport(
         StoryboardFilePath,
         [],
-        createFileWithComponent.path,
+        componentToImport.path,
         'StoryboardComponent',
         [],
         null,
@@ -323,28 +387,29 @@ function addStoryboardFileForComponent(
     case 'UNEXPORTED_RENDERED_COMPONENT':
       sceneElement = createSceneFromComponent(
         StoryboardFilePath,
-        createFileWithComponent.elementName,
+        componentToImport.elementName,
         'scene-1',
+        sceneAttributes,
       )
       importsResolution = addImport(
         StoryboardFilePath,
         [],
-        createFileWithComponent.path,
+        componentToImport.path,
         null,
-        [importAlias(createFileWithComponent.elementName)],
+        [importAlias(componentToImport.elementName)],
         null,
         importsResolution.imports,
       )
       // Modify the targeted file to export the component we're interested in.
       const fileToModify = forceNotNull(
-        `Unable to find file at ${createFileWithComponent.path}`,
-        getProjectFileByFilePath(updatedProjectContents, createFileWithComponent.path),
+        `Unable to find file at ${componentToImport.path}`,
+        getProjectFileByFilePath(updatedProjectContents, componentToImport.path),
       )
       if (isTextFile(fileToModify)) {
         if (isParseSuccess(fileToModify.fileContents.parsed)) {
           const currentSuccess: ParseSuccess = fileToModify.fileContents.parsed
           const updatedExports = mergeExportsDetail(currentSuccess.exportsDetail, [
-            exportVariables([exportVariable(createFileWithComponent.elementName, null)]),
+            exportVariables([exportVariable(componentToImport.elementName, null)]),
           ])
           const updatedParseSuccess = parseSuccess(
             currentSuccess.imports,
@@ -368,25 +433,25 @@ function addStoryboardFileForComponent(
           )
           updatedProjectContents = addFileToProjectContents(
             updatedProjectContents,
-            createFileWithComponent.path,
+            componentToImport.path,
             updatedTextFile,
           )
         } else {
-          throw new Error(`Unexpectedly ${createFileWithComponent.path} is not a parse success.`)
+          throw new Error(`Unexpectedly ${componentToImport.path} is not a parse success.`)
         }
       } else {
-        throw new Error(`${createFileWithComponent.path} was not a text file as expected.`)
+        throw new Error(`${componentToImport.path} was not a text file as expected.`)
       }
       break
     default:
-      const _exhaustiveCheck: never = createFileWithComponent
-      throw new Error(`Unhandled type ${JSON.stringify(createFileWithComponent)}`)
+      const _exhaustiveCheck: never = componentToImport
+      throw new Error(`Unhandled type ${JSON.stringify(componentToImport)}`)
   }
   const storyboardElement = createStoryboardElement([sceneElement], BakedInStoryboardUID)
   const storyboardComponent = utopiaJSXComponent(
     BakedInStoryboardVariableName,
     false,
-    'var',
+    'const',
     'block',
     [],
     null,
diff --git a/editor/src/core/shared/dom-utils.ts b/editor/src/core/shared/dom-utils.ts
index cdba86d50b35..75edf7a06fb7 100644
--- a/editor/src/core/shared/dom-utils.ts
+++ b/editor/src/core/shared/dom-utils.ts
@@ -481,3 +481,32 @@ function hugPropertyFromStyleValue(
   }
   return hugProp
 }
+
+export function parseHtml(html: string): Document | null {
+  try {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(html, 'text/html')
+    return doc
+  } catch (e) {
+    return null
+  }
+}
+
+export function getRootElement(doc: Document): Element | null {
+  const body = doc.body
+  if (body != null) {
+    return body.firstElementChild
+  }
+  return null
+}
+
+export function getMainScriptElement(doc: Document): Element | null {
+  const body = doc.body
+  if (body != null) {
+    const scriptElement = body.querySelector('script[type="module"]')
+    if (scriptElement != null) {
+      return scriptElement
+    }
+  }
+  return null
+}
diff --git a/editor/src/core/shared/project-file-types.ts b/editor/src/core/shared/project-file-types.ts
index 383828338fc1..e76546c0f96a 100644
--- a/editor/src/core/shared/project-file-types.ts
+++ b/editor/src/core/shared/project-file-types.ts
@@ -199,6 +199,14 @@ export function importDetailsEquals(first: ImportDetails, second: ImportDetails)
   )
 }
 
+export function isEmptyImportDetails(details: ImportDetails): boolean {
+  return (
+    details.importedWithName == null &&
+    details.importedFromWithin.length === 0 &&
+    details.importedAs == null
+  )
+}
+
 export type ImportsMergeResolution = {
   imports: Imports
   duplicateNameMapping: Map<string, string>

From 42f3ef270b59978eeb90358faa6c3c01355407c2 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 7 Oct 2024 17:26:16 +0300
Subject: [PATCH 109/272] feat(settings): remove Roll Your Own in favor of
 debug switches (#6487)

This PR removes the "Roll Your Own" panel (all the switched moved back
to the Settings menu), and supports showing debug switches selectively
![Monosnap screencast 2024-10-07
15-36-33](https://github.com/user-attachments/assets/c6fb89ca-39c6-47e8-a207-9d2ad0d07a2b)

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 .../canvas/controls/grid-controls.tsx         |   1 -
 .../components/canvas/design-panel-root.tsx   |  15 -
 .../components/editor/store/editor-state.ts   |   1 -
 .../left-pane/roll-your-own-pane.tsx          | 275 ------------------
 .../navigator/left-pane/settings-pane.tsx     |  27 +-
 editor/src/core/shared/parse-cache-utils.ts   |   4 +-
 .../core/workers/common/concurrency-utils.ts  |   2 +-
 editor/src/utils/feature-switches.ts          |  51 ++--
 8 files changed, 44 insertions(+), 332 deletions(-)
 delete mode 100644 editor/src/components/navigator/left-pane/roll-your-own-pane.tsx

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 1b881e001dc0..9f23bff592dd 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -58,7 +58,6 @@ import { when } from '../../../utils/react-conditionals'
 import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
-import { useRollYourOwnFeatures } from '../../navigator/left-pane/roll-your-own-pane'
 import CanvasActions from '../canvas-actions'
 import type { ControlWithProps } from '../canvas-strategies/canvas-strategy-types'
 import { controlForStrategyMemoized } from '../canvas-strategies/canvas-strategy-types'
diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
index 5852f12f0e23..13d381968d01 100644
--- a/editor/src/components/canvas/design-panel-root.tsx
+++ b/editor/src/components/canvas/design-panel-root.tsx
@@ -35,8 +35,6 @@ import { EditorModes, isCommentMode } from '../editor/editor-modes'
 import { useAllowedToEditProject } from '../editor/store/collaborative-editing'
 import { useCanComment } from '../../core/commenting/comment-hooks'
 import { ElementsOutsideVisibleAreaIndicator } from '../editor/elements-outside-visible-area-indicator'
-import { isFeatureEnabled } from '../../utils/feature-switches'
-import { RollYourOwnFeaturesPane } from '../navigator/left-pane/roll-your-own-pane'
 import { AnimationContext } from './ui-jsx-canvas-renderer/animation-context'
 
 function isCodeEditorEnabled(): boolean {
@@ -163,10 +161,6 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
     onClickTab(RightMenuTab.Settings)
   }, [onClickTab])
 
-  const onClickRollYourOwnTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.RollYourOwn)
-  }, [onClickTab])
-
   const canComment = useCanComment()
 
   const allowedToEdit = useAllowedToEditProject()
@@ -235,14 +229,6 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
             selected={selectedTab === RightMenuTab.Settings}
             onClick={onClickSettingsTab}
           />
-          {when(
-            isFeatureEnabled('Roll Your Own'),
-            <MenuTab
-              label={'RYO'}
-              selected={selectedTab === RightMenuTab.RollYourOwn}
-              onClick={onClickRollYourOwnTab}
-            />,
-          )}
         </FlexRow>
         <SimpleFlexRow
           className='Inspector-entrypoint'
@@ -260,7 +246,6 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
           {when(selectedTab === RightMenuTab.Inspector, <InspectorEntryPoint />)}
           {when(selectedTab === RightMenuTab.Settings, <SettingsPane />)}
           {when(selectedTab === RightMenuTab.Comments, <CommentsPane />)}
-          {when(selectedTab === RightMenuTab.RollYourOwn, <RollYourOwnFeaturesPane />)}
         </SimpleFlexRow>
         <CanvasStrategyInspector />
       </FlexColumn>
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index 1e83b99dda2f..6f4b09dd4bb9 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -214,7 +214,6 @@ export enum RightMenuTab {
   Inspector = 'inspector',
   Settings = 'settings',
   Comments = 'comments',
-  RollYourOwn = 'roll-your-own',
 }
 
 // TODO: this should just contain an NpmDependency and a status
diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
deleted file mode 100644
index 08b1df58930f..000000000000
--- a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-import React from 'react'
-import { Button, FlexColumn, FlexRow, Section } from '../../../uuiui'
-import { when } from '../../../utils/react-conditionals'
-import { atom, useAtom, useSetAtom } from 'jotai'
-import { UIGridRow } from '../../inspector/widgets/ui-grid-row'
-import { atomWithStorage } from 'jotai/utils'
-import { IS_TEST_ENVIRONMENT } from '../../../common/env-vars'
-import { Ellipsis } from './github-pane/github-file-changes-list'
-import { deleteParseCache } from '../../../core/shared/parse-cache-utils'
-import { useRefEditorState } from '../../../components/editor/store/store-hook'
-import type { FeatureName } from '../../../utils/feature-switches'
-import { isFeatureEnabled, setFeatureEnabled } from '../../../utils/feature-switches'
-import { getParseCacheVersion } from '../../../core/workers/parser-printer/parse-cache-utils.worker'
-
-const sections = ['Performance'] as const
-type Section = (typeof sections)[number]
-
-type PerformanceFeatures = {
-  parseCache: boolean
-  parallelParsing: boolean
-  cacheArbitraryCode: boolean
-  verboseLogCache: boolean
-  logParseTimings: boolean
-}
-
-type RollYourOwnFeaturesTypes = {
-  Performance: PerformanceFeatures
-}
-
-type RollYourOwnFeatures = {
-  [K in Section]: RollYourOwnFeaturesTypes[K]
-}
-
-const featureToFeatureFlagMap: Record<keyof Partial<PerformanceFeatures>, FeatureName> = {
-  parseCache: 'Use Parsing Cache',
-  verboseLogCache: 'Verbose Log Cache',
-  cacheArbitraryCode: 'Arbitrary Code Cache',
-  parallelParsing: 'Parallel Parsing',
-  logParseTimings: 'Log Parse Timings',
-}
-
-const defaultRollYourOwnFeatures: () => RollYourOwnFeatures = () => ({
-  Performance: {
-    parseCache: getFeatureFlagValue('parseCache'),
-    parallelParsing: getFeatureFlagValue('parallelParsing'),
-    cacheArbitraryCode: getFeatureFlagValue('cacheArbitraryCode'),
-    logParseTimings: getFeatureFlagValue('logParseTimings'),
-    verboseLogCache: getFeatureFlagValue('verboseLogCache'),
-  },
-})
-
-const ROLL_YOUR_OWN_FEATURES_KEY: string = 'roll-your-own-features'
-
-let rollYourOwnFeaturesAtom:
-  | ReturnType<typeof atom<RollYourOwnFeatures>>
-  | ReturnType<typeof atomWithStorage<RollYourOwnFeatures>>
-  | null = null
-
-function getRollYourOwnFeaturesAtom() {
-  if (rollYourOwnFeaturesAtom == null) {
-    rollYourOwnFeaturesAtom = IS_TEST_ENVIRONMENT
-      ? atom(defaultRollYourOwnFeatures())
-      : atomWithStorage(ROLL_YOUR_OWN_FEATURES_KEY, defaultRollYourOwnFeatures())
-  }
-  return rollYourOwnFeaturesAtom
-}
-
-export function useRollYourOwnFeatures() {
-  const [features] = useAtom(getRollYourOwnFeaturesAtom())
-  const defaultFeatures = defaultRollYourOwnFeatures()
-  const merged: RollYourOwnFeatures = {
-    Performance: {
-      ...defaultFeatures.Performance,
-      ...syncWithFeatureFlags(features.Performance),
-    },
-  }
-  return merged
-}
-
-export const RollYourOwnFeaturesPane = React.memo(() => {
-  const [currentSection, setCurrentSection] = React.useState<Section | null>(null)
-
-  const onChangeSection = React.useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
-    const maybeSectionValue = e.target.value as Section
-    if (sections.includes(maybeSectionValue)) {
-      setCurrentSection(maybeSectionValue)
-    } else {
-      setCurrentSection(null)
-    }
-  }, [])
-
-  return (
-    <FlexColumn
-      id='leftPaneRollYourOwn'
-      key='leftPaneRollYourOwn'
-      style={{
-        display: 'relative',
-        alignItems: 'stretch',
-        paddingBottom: 50,
-        overflowY: 'scroll',
-        alignSelf: 'stretch',
-      }}
-    >
-      <Section>
-        <FlexRow
-          style={{
-            margin: 8,
-            gap: 12,
-            height: 22,
-          }}
-        >
-          <span style={{ fontWeight: 600 }}>Roll Your Own</span>
-        </FlexRow>
-        <FlexRow style={{ gap: 12, margin: 8 }}>
-          <select
-            value={currentSection ?? undefined}
-            style={{ flex: 1 }}
-            onChange={onChangeSection}
-          >
-            <option value=''>–</option>
-            {sections.map((section) => {
-              return (
-                <option key={`section-${section}`} value={section}>
-                  {section}
-                </option>
-              )
-            })}
-          </select>
-        </FlexRow>
-
-        {when(currentSection === 'Performance', <PerformanceSection />)}
-      </Section>
-    </FlexColumn>
-  )
-})
-RollYourOwnFeaturesPane.displayName = 'RollYourOwnFeaturesPane'
-
-function getNewFeatureValueOrNull(currentValue: any, e: React.ChangeEvent<HTMLInputElement>) {
-  switch (typeof currentValue) {
-    case 'boolean':
-      return e.target.checked
-    case 'string':
-      return e.target.value
-    case 'number':
-      return parseFloat(e.target.value)
-    default:
-      return null
-  }
-}
-
-/** PERFORMANCE SECTION */
-const PerformanceSection = React.memo(() => {
-  const workersRef = useRefEditorState((store) => {
-    return store.workers
-  })
-  const handleDeleteParseCache = React.useCallback(() => {
-    deleteParseCache(workersRef.current)
-  }, [workersRef])
-  return (
-    <FlexColumn style={{ gap: 10 }}>
-      <SimpleFeatureControls subsection='Performance' />
-      <UIGridRow padded variant='<--1fr--><--1fr-->' key={`feat-cache-version`}>
-        <Ellipsis title='Cache Version'>Cache Version</Ellipsis>
-        <Ellipsis title={getParseCacheVersion()}>{getParseCacheVersion()}</Ellipsis>
-      </UIGridRow>
-      <UIGridRow padded variant='<-------------1fr------------->'>
-        <Button highlight spotlight onClick={handleDeleteParseCache}>
-          Clear cache
-        </Button>
-      </UIGridRow>
-    </FlexColumn>
-  )
-})
-PerformanceSection.displayName = 'PerformanceSection'
-
-/** GENERAL COMPONENTS */
-
-const ResetDefaultsButton = React.memo(({ subsection }: { subsection: Section }) => {
-  const setFeatures = useSetAtom(getRollYourOwnFeaturesAtom())
-  const defaultFeatures = defaultRollYourOwnFeatures()
-  const resetDefaults = React.useCallback(() => {
-    setFeatures((prevFeatures) => ({
-      ...prevFeatures,
-      [subsection]: defaultFeatures[subsection],
-    }))
-  }, [defaultFeatures, setFeatures, subsection])
-  return (
-    <UIGridRow padded variant='<-------------1fr------------->'>
-      <Button highlight spotlight onClick={resetDefaults}>
-        Reset defaults
-      </Button>
-    </UIGridRow>
-  )
-})
-ResetDefaultsButton.displayName = 'ResetDefaultsButton'
-
-const SimpleFeatureControls = React.memo(({ subsection }: { subsection: Section }) => {
-  const features = useRollYourOwnFeatures()
-  const setFeatures = useSetAtom(getRollYourOwnFeaturesAtom())
-  const onChange = React.useCallback(
-    (feat: keyof RollYourOwnFeaturesTypes[Section]) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = getNewFeatureValueOrNull(features[subsection][feat], e)
-      if (newValue != null) {
-        setFeatures({
-          ...features,
-          [subsection]: {
-            ...features[subsection],
-            [feat]: newValue,
-          },
-        })
-        if (typeof newValue === 'boolean') {
-          syncFeatureFlagIfExists(feat, newValue)
-        }
-      }
-    },
-    [features, setFeatures, subsection],
-  )
-  const defaultFeatures = defaultRollYourOwnFeatures()
-  return (
-    <React.Fragment>
-      {Object.keys(defaultFeatures[subsection]).map((key) => {
-        const feat = key as keyof RollYourOwnFeaturesTypes[Section]
-        const featName = Object.keys(featureToFeatureFlagMap).includes(
-          feat as keyof typeof featureToFeatureFlagMap,
-        )
-          ? featureToFeatureFlagMap[feat as keyof typeof featureToFeatureFlagMap]
-          : feat
-        const value = features[subsection][feat] ?? defaultFeatures[subsection][feat]
-        return (
-          <UIGridRow padded variant='<----------1fr---------><-auto->' key={`feat-${feat}`}>
-            <Ellipsis title={featName}>{featName}</Ellipsis>
-            {typeof value === 'boolean' ? (
-              <input type='checkbox' checked={value} onChange={onChange(feat)} />
-            ) : typeof value === 'string' ? (
-              <input type='text' value={value} onChange={onChange(feat)} />
-            ) : typeof value === 'number' ? (
-              <input type='number' value={value} onChange={onChange(feat)} />
-            ) : null}
-          </UIGridRow>
-        )
-      })}
-    </React.Fragment>
-  )
-})
-SimpleFeatureControls.displayName = 'SimpleFeatureControls'
-
-function getFeatureFlagValue(featureName: keyof typeof featureToFeatureFlagMap): boolean {
-  const featureFlag = featureToFeatureFlagMap[featureName]
-  return isFeatureEnabled(featureFlag)
-}
-
-function syncFeatureFlagIfExists(
-  featureName: keyof typeof featureToFeatureFlagMap,
-  value: boolean,
-) {
-  const featureFlag = featureToFeatureFlagMap[featureName]
-  if (featureFlag == null) {
-    return
-  }
-  setFeatureEnabled(featureFlag, value)
-}
-
-function syncWithFeatureFlags(features: Record<string, any> | undefined) {
-  if (features == null) {
-    return {}
-  }
-  return Object.fromEntries(
-    Object.entries(features).map(([key, value]) => {
-      if (typeof value === 'boolean' && key in featureToFeatureFlagMap) {
-        return [key, getFeatureFlagValue(key as keyof typeof featureToFeatureFlagMap)]
-      }
-      return [key, value]
-    }),
-  )
-}
diff --git a/editor/src/components/navigator/left-pane/settings-pane.tsx b/editor/src/components/navigator/left-pane/settings-pane.tsx
index 90a22afbac08..76741a0993c3 100644
--- a/editor/src/components/navigator/left-pane/settings-pane.tsx
+++ b/editor/src/components/navigator/left-pane/settings-pane.tsx
@@ -27,8 +27,7 @@ import type { FeatureName } from '../../../utils/feature-switches'
 import {
   toggleFeatureEnabled,
   isFeatureEnabled,
-  AllFeatureNames,
-  FeaturesHiddenFromMainSettingsPane,
+  getFeaturesToDisplay,
 } from '../../../utils/feature-switches'
 import json5 from 'json5'
 import { load } from '../../../components/editor/actions/actions'
@@ -60,10 +59,11 @@ const themeOptions = [
 const defaultTheme = themeOptions[0]
 
 export const FeatureSwitchesSection = React.memo(() => {
-  const featuresToDisplay = React.useMemo(
-    () => AllFeatureNames.filter((name) => !FeaturesHiddenFromMainSettingsPane.includes(name)),
-    [],
-  )
+  const [changeCount, setChangeCount] = React.useState(0)
+  // this replaces the 'forceRender' in the original implementation
+  const onFeatureChange = React.useCallback(() => setChangeCount(changeCount + 1), [changeCount])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const featuresToDisplay = React.useMemo(() => getFeaturesToDisplay(), [changeCount])
   if (featuresToDisplay.length > 0) {
     return (
       <Section>
@@ -71,7 +71,11 @@ export const FeatureSwitchesSection = React.memo(() => {
           <H2>Experimental Toggle Features</H2>
         </UIGridRow>
         {featuresToDisplay.map((name) => (
-          <FeatureSwitchRow key={`feature-switch-${name}`} name={name} />
+          <FeatureSwitchRow
+            key={`feature-switch-${name}`}
+            name={name}
+            onFeatureChange={onFeatureChange}
+          />
         ))}
       </Section>
     )
@@ -80,15 +84,14 @@ export const FeatureSwitchesSection = React.memo(() => {
   }
 })
 
-const FeatureSwitchRow = React.memo((props: { name: FeatureName }) => {
+const FeatureSwitchRow = React.memo((props: { name: FeatureName; onFeatureChange: () => void }) => {
   const name = props.name
+  const onFeatureChange = props.onFeatureChange
   const id = `toggle-${name}`
-  const [changeCount, setChangeCount] = React.useState(0)
-  const forceRender = React.useCallback(() => setChangeCount(changeCount + 1), [changeCount])
   const onChange = React.useCallback(() => {
     toggleFeatureEnabled(name)
-    forceRender()
-  }, [forceRender, name])
+    onFeatureChange()
+  }, [name, onFeatureChange])
   return (
     <FlexRow style={{ paddingLeft: 16, height: UtopiaTheme.layout.rowHeight.normal }}>
       <CheckboxInput
diff --git a/editor/src/core/shared/parse-cache-utils.ts b/editor/src/core/shared/parse-cache-utils.ts
index 3bb102961280..c20d4015e59e 100644
--- a/editor/src/core/shared/parse-cache-utils.ts
+++ b/editor/src/core/shared/parse-cache-utils.ts
@@ -12,11 +12,11 @@ function isParseCacheEnabled(): boolean {
 }
 
 function isVerboseLogCacheEnabled(): boolean {
-  return isFeatureEnabled('Verbose Log Cache')
+  return isFeatureEnabled('Debug - Verbose Log Cache')
 }
 
 function isArbitraryCodeCacheEnabled(): boolean {
-  return isFeatureEnabled('Arbitrary Code Cache')
+  return isFeatureEnabled('Debug - Arbitrary Code Cache')
 }
 
 export function getParseCacheOptions(): ParseCacheOptions {
diff --git a/editor/src/core/workers/common/concurrency-utils.ts b/editor/src/core/workers/common/concurrency-utils.ts
index c8d5e015e22d..d9a88ebedfe8 100644
--- a/editor/src/core/workers/common/concurrency-utils.ts
+++ b/editor/src/core/workers/common/concurrency-utils.ts
@@ -3,7 +3,7 @@ import { isFeatureEnabled } from '../../../utils/feature-switches'
 // TODO: this will be configurable from the RYO menu
 export const PARSE_CONCURRENCY = 3
 const PARSER_CONCURRENCY_FEATURE = 'Parallel Parsing'
-const LOG_CONCURRENCY_TIMINGS_FEATURE = 'Log Parse Timings'
+const LOG_CONCURRENCY_TIMINGS_FEATURE = 'Debug - Log Parse Timings'
 
 export function isConcurrencyEnabled() {
   return isFeatureEnabled(PARSER_CONCURRENCY_FEATURE)
diff --git a/editor/src/utils/feature-switches.ts b/editor/src/utils/feature-switches.ts
index 31674c965b38..7ea53ffa2188 100644
--- a/editor/src/utils/feature-switches.ts
+++ b/editor/src/utils/feature-switches.ts
@@ -15,36 +15,36 @@ export type FeatureName =
   | 'Debug - Print UIDs'
   | 'Debug – Connections'
   | 'Parallel Parsing'
-  | 'Log Parse Timings'
+  | 'Debug - Log Parse Timings'
   | 'Condensed Navigator Entries'
   | 'Use Parsing Cache'
-  | 'Verbose Log Cache'
-  | 'Arbitrary Code Cache'
+  | 'Debug - Verbose Log Cache'
+  | 'Debug - Arbitrary Code Cache'
   | 'Canvas Fast Selection Hack'
-  | 'Roll Your Own'
   | 'Tailwind'
+  | 'Show Debug Features'
 
 export const AllFeatureNames: FeatureName[] = [
   // 'Dragging Reparents By Default', // Removing this option so that we can experiment on this later
   // 'Dragging Shows Overlay', // Removing this option so that we can experiment on this later
+  'Show Debug Features',
   'Debug – Redux Devtools',
   'Debug – Performance Marks (Slow)',
   'Debug – Performance Marks (Fast)',
   'Debug – Measure Selectors',
+  'Debug – Connections',
+  'Debug - Log Parse Timings',
+  'Debug - Verbose Log Cache',
+  'Debug - Arbitrary Code Cache',
+  'Debug - Print UIDs',
   'Re-parse Project Button',
   'Performance Test Triggers',
   'Canvas Strategies Debug Panel',
   'Project Thumbnail Generation',
-  'Debug - Print UIDs',
-  'Debug – Connections',
   'Parallel Parsing',
-  'Log Parse Timings',
-  'Condensed Navigator Entries',
   'Use Parsing Cache',
-  'Verbose Log Cache',
-  'Arbitrary Code Cache',
+  'Condensed Navigator Entries',
   'Canvas Fast Selection Hack',
-  'Roll Your Own',
   'Tailwind',
 ]
 
@@ -53,32 +53,24 @@ let FeatureSwitches: { [feature in FeatureName]: boolean } = {
   'Debug – Performance Marks (Slow)': false,
   'Debug – Performance Marks (Fast)': false,
   'Debug – Measure Selectors': false,
+  'Debug – Connections': false,
+  'Debug - Verbose Log Cache': false,
+  'Debug - Arbitrary Code Cache': false,
   'Dragging Reparents By Default': false,
   'Re-parse Project Button': !(PRODUCTION_CONFIG as boolean),
   'Performance Test Triggers': !(PRODUCTION_CONFIG as boolean),
   'Canvas Strategies Debug Panel': false,
   'Project Thumbnail Generation': false,
   'Debug - Print UIDs': false,
-  'Debug – Connections': false,
   'Parallel Parsing': !IS_TEST_ENVIRONMENT,
-  'Log Parse Timings': false,
+  'Debug - Log Parse Timings': false,
   Tailwind: false,
   'Condensed Navigator Entries': !IS_TEST_ENVIRONMENT,
   'Use Parsing Cache': !IS_TEST_ENVIRONMENT,
-  'Verbose Log Cache': false,
-  'Arbitrary Code Cache': false,
   'Canvas Fast Selection Hack': true,
-  'Roll Your Own': false,
+  'Show Debug Features': false,
 }
 
-export const FeaturesHiddenFromMainSettingsPane: FeatureName[] = [
-  'Use Parsing Cache',
-  'Verbose Log Cache',
-  'Arbitrary Code Cache',
-  'Parallel Parsing',
-  'Log Parse Timings',
-]
-
 export const STEGANOGRAPHY_ENABLED = false
 
 let FeatureSwitchLoaded: { [feature in FeatureName]?: boolean } = {}
@@ -141,12 +133,13 @@ export function isFeatureEnabled(featureName: FeatureName): boolean {
   return FeatureSwitches[featureName] ?? false
 }
 
-export function toggleFeatureEnabled(featureName: FeatureName): void {
+export function toggleFeatureEnabled(featureName: FeatureName): boolean {
   const newValue = !isFeatureEnabled(featureName)
   FeatureSwitches[featureName] = newValue
   if (isBrowserEnvironment) {
     void localforage.setItem(settingKeyForName(featureName), newValue)
   }
+  return newValue
 }
 
 export function setFeatureEnabled(featureName: FeatureName, newValue: boolean): void {
@@ -155,3 +148,11 @@ export function setFeatureEnabled(featureName: FeatureName, newValue: boolean):
     void localforage.setItem(settingKeyForName(featureName), newValue)
   }
 }
+
+export function getFeaturesToDisplay(): FeatureName[] {
+  if (isFeatureEnabled('Show Debug Features')) {
+    return AllFeatureNames
+  } else {
+    return AllFeatureNames.filter((name) => !name.startsWith('Debug'))
+  }
+}

From c5f1d00a5631c469fca10c8bd3e68eafe52a0e03 Mon Sep 17 00:00:00 2001
From: McKayla Lankau <lankaukk@yahoo.com>
Date: Mon, 7 Oct 2024 16:06:17 -0400
Subject: [PATCH 110/272] Icons for distribute evenly on the canvas (#6491)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Uploading icons to be used in distribute evenly buttons on the canvas

<img width="556" alt="Screenshot 2024-10-07 at 4 00 01 PM"
src="https://github.com/user-attachments/assets/3ce08593-bd69-4599-a367-d71e63db7c04">


![image](https://github.com/user-attachments/assets/ba98b998-df10-4c5d-b914-99d3eb972b67)
---
 .../inspector/tidy-horizontal-black-16x16@2x.png  | Bin 0 -> 563 bytes
 .../inspector/tidy-horizontal-blue-16x16@2x.png   | Bin 0 -> 560 bytes
 .../tidy-horizontal-darkgray-16x16@2x.png         | Bin 0 -> 561 bytes
 .../inspector/tidy-horizontal-gray-16x16@2x.png   | Bin 0 -> 555 bytes
 .../tidy-horizontal-lightblue-16x16@2x.png        | Bin 0 -> 562 bytes
 .../tidy-horizontal-lightgray-16x16@2x.png        | Bin 0 -> 563 bytes
 .../inspector/tidy-horizontal-white-16x16@2x.png  | Bin 0 -> 541 bytes
 .../inspector/tidy-vertical-black-16x16@2x.png    | Bin 0 -> 565 bytes
 .../inspector/tidy-vertical-blue-16x16@2x.png     | Bin 0 -> 547 bytes
 .../inspector/tidy-vertical-darkgray-16x16@2x.png | Bin 0 -> 560 bytes
 .../inspector/tidy-vertical-gray-16x16@2x.png     | Bin 0 -> 553 bytes
 .../tidy-vertical-lightblue-16x16@2x.png          | Bin 0 -> 564 bytes
 .../tidy-vertical-lightgray-16x16@2x.png          | Bin 0 -> 565 bytes
 .../inspector/tidy-vertical-white-16x16@2x.png    | Bin 0 -> 544 bytes
 14 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-horizontal-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-horizontal-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-horizontal-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-horizontal-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-horizontal-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-horizontal-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-horizontal-white-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-vertical-black-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-vertical-blue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-vertical-darkgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-vertical-gray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-vertical-lightblue-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-vertical-lightgray-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/inspector/tidy-vertical-white-16x16@2x.png

diff --git a/editor/resources/editor/icons/light/inspector/tidy-horizontal-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-horizontal-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..7411ad73bb42857a1bcb3542b719aefe8eb71c2a
GIT binary patch
literal 563
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?393lL^>oo1N8z`&T9
z>FgZfl384klUS(`V9dZ!F{gCGUhl&JB1ipK2VJo0;FFax>U6$xiL0zILtDhvAcS>w
z@T@w{+!__lphDqr%^&g+2O|qMbc7TX76`bo3*Mb$rMV-c;@<R-TT1tiKmBVlr+8<~
z0qFoq?QcvPFQ-lPIkIHym0eG&o7?9FuS(mrVv!ElzrVX*f4=zjo_|NA@9r{zoBlD=
z&*@Dso5vJf|2OvP{FAe!{@%ah*efaaU}ERg+-}Z$s&a-InvYgJ*mL@L(`CK+*7K&O
z%=s}b;u2R@+YV2i<<?(n*r#`;uHD*v<KFzM;nR=Gyb3&%D6A&Y6%g3S!uqiO&*eV*
zKHZ}5gaEyMCY@6*o`S-gj(onbFj2^;ki+rSgdN4N>-g9HKAD^QUUWuo!8!d~x15+Q
z<}RFk_4cg_76~bayjMP^A?~jhetTAQ;5Vni45qgC8k-ZJ9a1c>uIG7C{qRpR&j(qi
zvZ<ffE1!ES)jGdX`!Bn=X4W1<O@BLJOcZ#!IEGX(zCFK@x50pi;oywYNwSTylPi7r
zMI1%ed(<yY_5K&MB>s_I##-5#JMG1k&)xeSsCFglbFSU7j?T~i_BpAAY!`SINIDod
oq%oXjn8j$qoPkTgA?gk*^A3>^w)wZO0PSY*boFyt=akR{0Qr&X!~g&Q

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-horizontal-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-horizontal-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..824528ab37535917b33f844ebbbb7d9d8e8d5e7c
GIT binary patch
literal 560
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?393lL^>oo1N8z`&T9
z>FgZfl384klUS(`V9dZ!F{gCGUhl&JB1ipK2VJo0;FFax>U6$xiL0zILtDhvAcS>w
z@T@w{+!__lphDqr%^&g+2O|qMbc7TX76`bo3*Mb$rMV-c;@<R-TT1tiKmBVlr+8<~
z0qFoq?QcvPFQ-lPIkIHym0eG&o7?9FuS(mrVv!ElzrVX*f4=zjo_|NA@9r{zoBlD=
z&*@Dso5vJf|2OvP{FAe!{@%ah*efaaU}ERg+-}Z$s&a-InvYgJ*mL@L(`CK+*7K&O
z%=s}b;u2R@+YV2i<<?(n*r#`;uHD*v<KFzM;nR=Gyb3&%D6A&Y6%g3S!uqiO&*eV*
zKHZ}5gaEyMCY@6*o`S-gj(onbFj2^;ki+rSgdN4N>-g9HKAD^QUUWuo!8!d~x15+Q
z<}RFk_4cg_76~bayjMP^A?~jhetTAQ;5Vni45qgC8k-ZJ9a1c>uIG7C{qRpR&j(qi
zvZ<ffE1!ES)jGdX`!Bn=X4W1<O@BLJOyqjHIEGX(zCEwV*I*#PdXc|PxS3UF&W=?w
z4P8P<mYlTtxj9LFV%^NR(_wvA-t?X}zFxHCcvM#L{^^>wc7F`g3)n93ERb|CZb)M|
l%P@=4ggFD3fP>T>=KROJAs(&gWq=klc)I$ztaD0e0swr#>M;NS

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-horizontal-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-horizontal-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..34eaa35d53d607a845b8cb53c2d4bf930315b32a
GIT binary patch
literal 561
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?393lL^>oo1N8z`&T9
z>FgZfl384klUS(`V9dZ!F{gCGUhl&JB1ipK2VJo0;FFax>U6$xiL0zILtDhvAcS>w
z@T@w{+!__lphDqr%^&g+2O|qMbc7TX76`bo3*Mb$rMV-c;@<R-TT1tiKmBVlr+8<~
z0qFoq?QcvPFQ-lPIkIHym0eG&o7?9FuS(mrVv!ElzrVX*f4=zjo_|NA@9r{zoBlD=
z&*@Dso5vJf|2OvP{FAe!{@%ah*efaaU}ERg+-}Z$s&a-InvYgJ*mL@L(`CK+*7K&O
z%=s}b;u2R@+YV2i<<?(n*r#`;uHD*v<KFzM;nR=Gyb3&%D6A&Y6%g3S!uqiO&*eV*
zKHZ}5gaEyMCY@6*o`S-gj(onbFj2^;ki+rSgdN4N>-g9HKAD^QUUWuo!8!d~x15+Q
z<}RFk_4cg_76~bayjMP^A?~jhetTAQ;5Vni45qgC8k-ZJ9a1c>uIG7C{qRpR&j(qi
zvZ<ffE1!ES)jGdX`!Bn=X4W1<O@BLJOyqgGIEGX(zCG{AbwGiK;ouGPU-NJMf6||O
z?r8JUcGnv_ISzJ6EB?K7ule5Z6_4lK*=tmMq^auhytCQ+b=TDYIxINbxFL<<EW<2D
m6Xp!I3p@)X9dHU<dM39(i7%w-x|IOXW(H4JKbLh*2~7YnCGsKw

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-horizontal-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-horizontal-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..93502238ae711e9d15b46d795823e8402452b161
GIT binary patch
literal 555
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?393lL^>oo1N8z`&T9
z>FgZfl384klUS(`V9dZ!F{gCGUhl&JB1ipK2VJo0;FFax>U6$xiL0zILtDhvAcS>w
z@T@w{+!__lphDqr%^&g+2O|qMbc7TX76`bo3*Mb$rMV-c;@<R-TT1tiKmBVlr+8<~
z0qFoq?QcvPFQ-lPIkIHym0eG&o7?9FuS(mrVv!ElzrVX*f4=zjo_|NA@9r{zoBlD=
z&*@Dso5vJf|2OvP{FAe!{@%ah*efaaU}ERg+-}Z$s&a-InvYgJ*mL@L(`CK+*7K&O
z%=s}b;u2R@+YV2i<<?(n*r#`;uHD*v<KFzM;nR=Gyb3&%D6A&Y6%g3S!uqiO&*eV*
zKHZ}5gaEyMCY@6*o`S-gj(onbFj2^;ki+rSgdN4N>-g9HKAD^QUUWuo!8!d~x15+Q
z<}RFk_4cg_76~bayjMP^A?~jhetTAQ;5Vni45qgC8k-ZJ9a1c>uIG7C{qRpR&j(qi
zvZ<ffE1!ES)jGdX`!Bn=X4W1<O@BLJOk{YvIEGX(zCFK@>wp3e!^Io&`M;m$w)wdR
z7Fx7acMB+22ws}>Nj^rifAgm5`tsPF-%OsRKKOY>zVF5yMib@?whKH9Bpr+!(iqM%
g%)%uw!R$NJ$t1pzzC%l6fOax?y85}Sb4q9e07s(f^Z)<=

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-horizontal-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-horizontal-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..0af639ef0be79b7605e20a07303c5971e220fbc6
GIT binary patch
literal 562
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?393lL^>oo1N8z`&T9
z>FgZfl384klUS(`V9dZ!F{gCGUhl&JB1ipK2VJo0;FFax>U6$xiL0zILtDhvAcS>w
z@T@w{+!__lphDqr%^&g+2O|qMbc7TX76`bo3*Mb$rMV-c;@<R-TT1tiKmBVlr+8<~
z0qFoq?QcvPFQ-lPIkIHym0eG&o7?9FuS(mrVv!ElzrVX*f4=zjo_|NA@9r{zoBlD=
z&*@Dso5vJf|2OvP{FAe!{@%ah*efaaU}ERg+-}Z$s&a-InvYgJ*mL@L(`CK+*7K&O
z%=s}b;u2R@+YV2i<<?(n*r#`;uHD*v<KFzM;nR=Gyb3&%D6A&Y6%g3S!uqiO&*eV*
zKHZ}5gaEyMCY@6*o`S-gj(onbFj2^;ki+rSgdN4N>-g9HKAD^QUUWuo!8!d~x15+Q
z<}RFk_4cg_76~bayjMP^A?~jhetTAQ;5Vni45qgC8k-ZJ9a1c>uIG7C{qRpR&j(qi
zvZ<ffE1!ES)jGdX`!Bn=X4W1<O@BLJOyqmIIEGX(zCFK@x50piHL!hQg3XzV4O14f
zbt!ZOFR6YSuJluBN&Kza6MH{JT|a)hOLzLTi;DfLuGi+Ref)d5^fHM#j3&$(Y!`SI
oNIDodq%oXjn1xGV0$Vu~pPWEQ#E<t?K&u%%UHx3vIVCg!09s$|XaE2J

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-horizontal-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-horizontal-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..870c06cc17eab037d19eecbb5d8c2487be28e2d1
GIT binary patch
literal 563
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?393lL^>oo1N8z`&T9
z>FgZfl384klUS(`V9dZ!F{gCGUhl&JB1ipK2VJo0;FFax>U6$xiL0zILtDhvAcS>w
z@T@w{+!__lphDqr%^&g+2O|qMbc7TX76`bo3*Mb$rMV-c;@<R-TT1tiKmBVlr+8<~
z0qFoq?QcvPFQ-lPIkIHym0eG&o7?9FuS(mrVv!ElzrVX*f4=zjo_|NA@9r{zoBlD=
z&*@Dso5vJf|2OvP{FAe!{@%ah*efaaU}ERg+-}Z$s&a-InvYgJ*mL@L(`CK+*7K&O
z%=s}b;u2R@+YV2i<<?(n*r#`;uHD*v<KFzM;nR=Gyb3&%D6A&Y6%g3S!uqiO&*eV*
zKHZ}5gaEyMCY@6*o`S-gj(onbFj2^;ki+rSgdN4N>-g9HKAD^QUUWuo!8!d~x15+Q
z<}RFk_4cg_76~bayjMP^A?~jhetTAQ;5Vni45qgC8k-ZJ9a1c>uIG7C{qRpR&j(qi
zvZ<ffE1!ES)jGdX`!Bn=X4W1<O@BLJOcZ#!IEGX(zCFK@^MC;lYoNCA&CjYc&)@TW
z>C4qF(*7{+r{e-`*I%m77JjdDJ!1KOX65#4>oz6yOw6xdYbtim{%^sQvyu+R4QUK#
n8D=q>FlVq`;8}oEAhVcX$wMTBfl(k9Xg7nWtDnm{r-UW|SGeqD

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-horizontal-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-horizontal-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..d22acbb431e3cbd2dcb515445e4cf2ff25d76e14
GIT binary patch
literal 541
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?393lL^>oo1N8z`&T9
z>FgZfl384klUS(`V9dZ!F{gCGUhl&JB1ipK2VJo0;FFax>U6$xiL0zILtDhvAcS>w
z@T@w{+!__lphDqr%^&g+2O|qMbc7TX76`bo3*Mb$rMV-c;@<R-TT1tiKmBVlr+8<~
z0qFoq?QcvPFQ-lPIkIHym0eG&o7?9FuS(mrVv!ElzrVX*f4=zjo_|NA@9r{zoBlD=
z&*@Dso5vJf|2OvP{FAe!{@%ah*efaaU}ERg+-}Z$s&a-InvYgJ*mL@L(`CK+*7K&O
z%=s}b;u2R@+YV2i<<?(n*r#`;uHD*v<KFzM;nR=Gyb3&%D6A&Y6%g3S!uqiO&*eV*
zKHZ}5gaEyMCY@6*o`S-gj(onbFj2^;ki+rSgdN4N>-g9HKAD^QUUWuo!8!d~x15+Q
z<}RFk_4cg_76~bayjMP^A?~jhetTAQ;5Vni45qgC8k-ZJ9a1c>uIG7C{qRpR&j(qi
zvZ<ffE1!ES)jGdX`!Bn=X4W1<O@BLJOhkFQIEGX(zCG{AbwELY#qs3nzdL_6v~x7N
zt=RS6$d>I-_FB{H_iTP_EG_t7dDvJ_eSsP=kU{S|Q>wim`(eL}vOrrHJYD@<);T3K
F0RZxd=1>3t

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-vertical-black-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-vertical-black-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..7625d1e09619e321e47fdfea81c62d03dc9ad6e3
GIT binary patch
literal 565
zcmV-50?Pe~P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm001F4
z001F40Y#QEU;qFCX=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0CGu0K~#7F?b$I7z#s^PVQ6|Ay<_Pe^*nT<(XAUH
z{l5w0;u}mLhyeel>!J5<QotC)qCVFPcfX_ti{g;t2#~FOfbA2j>MZ~O0H19GO>51i
zfH~*;Zo1KI1jtrC0002U#DXJ<ML{>3jR4tLZ~(<UJr@-&g<`VX00000NkvXXu0mjf
D^y>3%

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-vertical-blue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-vertical-blue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6a7f4106b3b578ebe7735211dae738e8cea07c8
GIT binary patch
literal 547
zcmV+;0^I$HP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm001F4
z001F40Y#QEU;qFCX=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0ANW(K~#7F?b)#oKu`=o(GrO-W@hD!O-v+jvsL4q
z>2-T|Y#IUo)-}_7EK$KWF88wyn2s|l*vIGJeH14kTls*YnYvg50N^$IKsEu{1ONbk
l=D?A{Lh~U4vN>=-aTiBK5G;Ag&a40c002ovPDHLkV1iJA>JR_`

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-vertical-darkgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-vertical-darkgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..013431baeeb13ea11efbea0eadf155302fce30eb
GIT binary patch
literal 560
zcmV-00?+-4P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm001F4
z001F40Y#QEU;qFCX=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0BuP`K~#7F?b)#nfG`Y1(E~AJ_QC9v9f2kYrJ_5X
z_^)!5CRaqVWeNDV<$Y+al>+qMYt-9xw<|-9VpTW-xWxyUKk*>|0D#Ztf#y_zd!TvV
yO*iUB0Jr!6006*=1&2wEf^O7}0B$TefN&SD^bam|oOE{p0000<MNUMnLSTX<Gx4ba

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-vertical-gray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-vertical-gray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..229e421c3f8d00c2f2e851da850b0221ef9d6e6a
GIT binary patch
literal 553
zcmV+^0@nSBP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm001F4
z001F40Y#QEU;qFCX=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0A@)<K~#7F?b)#kfG`Y%;ZuBX<CANbO3CDQ9RA;w
z(j_+(QX&EWwylR66kzT1Xm_VF)GT&|BY<0cfc}Ut0RRAe);~120*pT2zL`ed2;deU
r0000uvEVSNSul;d5x|WF2N3Q7v*Qmg@Jwyp00000NkvXXu0mjfBQfln

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-vertical-lightblue-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-vertical-lightblue-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..5bacf82e5f27c2c2cfec5d9231be7039bdab507c
GIT binary patch
literal 564
zcmV-40?Yl0P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm001F4
z001F40Y#QEU;qFCX=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0C7n~K~#7F?b$I7gfI+5(eY}}1joZ14=!b@AkxuU
zBmS!#rO6bLY*_-nEuM!wDrF$o$Wi~No6sf?If|dm5ulrWfcX=bb^!nYyfzOsXO#@(
z68F35M!ON9n|%NP0MLmAN0S@{-Do!gbYsB*n7aU$(-AJ9f<GMq0000<MNUMnLSTaB
CWbX?A

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-vertical-lightgray-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-vertical-lightgray-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8a1ad7f9ed281cccef2411653007bccd839996a
GIT binary patch
literal 565
zcmV-50?Pe~P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm001F4
z001F40Y#QEU;qFCX=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0CGu0K~#7F?b$I7z#s^PVQ6|JJzweh^iFi5(XAUH
z{l5w0;u}mLhyeel>tT#xQb6zBqCVFPRlTGJi{g;t2#~FOfbA2z`z-(f0H19G&79Mv
zfY#dkZo1KI1jtrC0002U#DXJ<ML{>3jR4tLZ~(<UdOj5{lR4J<00000NkvXXu0mjf
DRfP3u

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/inspector/tidy-vertical-white-16x16@2x.png b/editor/resources/editor/icons/light/inspector/tidy-vertical-white-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..664a3170f82b03a089351c94a8fafbc27e95ec1d
GIT binary patch
literal 544
zcmV+*0^j|KP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm001F4
z001F40Y#QEU;qFCX=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u09{E$K~#7F?b$I7fFKM&(PBKfo*bD7adN8-?@bUE
z{@64E_SV)*@BNAbT5H!luMZ=jM*$;X{`-jH1Y|28aK7$$004Yu9>^vjn*ab{XBHe8
i3^actAe#jT6!!pz<`pV=V24Bi0000<MNUMnLSTZYw&O+s

literal 0
HcmV?d00001


From 2779ddd7b606d3b87d29d8cf1fb635534893eb07 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 8 Oct 2024 10:00:34 +0200
Subject: [PATCH 111/272] Fix duplicate grid control keys (#6474)

**Problem:**

The grid controls show a bunch of duplicate keys while active.

**Fix:**

The problem is that there may be multiple instances of the same grid
being rendered caused by how they are initialized, so this PS cleans
that up.

Fixes #6473
---
 editor/src/components/canvas/controls/grid-controls.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 9f23bff592dd..89ae8fbed134 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -20,7 +20,7 @@ import {
   printGridCSSNumber,
 } from '../../../components/inspector/common/css-utils'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
-import { mapDropNulls, stripNulls } from '../../../core/shared/array-utils'
+import { mapDropNulls, stripNulls, uniqBy } from '../../../core/shared/array-utils'
 import { defaultEither } from '../../../core/shared/either'
 import * as EP from '../../../core/shared/element-path'
 import type {
@@ -1137,7 +1137,7 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
     'GridControls hoveredGrids',
   )
 
-  const grids = useGridData([...targets, ...hoveredGrids])
+  const grids = useGridData(uniqBy([...targets, ...hoveredGrids], (a, b) => EP.pathsEqual(a, b)))
 
   if (grids.length === 0) {
     return null

From ddc54cb25d99235e6f19eef7a2caf24e6b4bb210 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Tue, 8 Oct 2024 12:23:03 +0200
Subject: [PATCH 112/272] No more stateful grid strategies (#6490)

**Description:**
I removed custom state strategy usage from grid reparent strategy:
- the target cell was cached in custom strategy state to make sure we
can reparent over gaps between cells. I removed this and just reparent
into the closest cell.

Removed custom strategy state usage from grid controls, and moved the
necessary information to `EditorStateCanvasControls`. Instead of custom
strategy state patches i needed to return showGridControls commands.

Removed all fields from `GridCustomStrategyState` except
`metadataCacheForGrids`, which is still necessary

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../canvas-strategy-types.ts                  |  6 --
 .../grid-draw-to-insert-strategy.tsx          | 20 ++---
 .../strategies/grid-helpers.ts                | 88 ++++++++-----------
 .../grid-rearrange-move-duplicate-strategy.ts | 11 +--
 .../grid-rearrange-move-strategy.ts           | 12 +--
 .../strategies/grid-reparent-strategy.tsx     | 21 +++--
 .../commands/show-grid-controls-command.ts    | 15 +++-
 .../canvas/controls/grid-controls.tsx         | 15 ++--
 .../editor/store/dispatch-strategies.spec.tsx | 16 ----
 .../components/editor/store/editor-state.ts   | 21 +++--
 .../store/store-deep-equality-instances.ts    | 30 ++++++-
 .../store/store-hook-substore-helpers.ts      |  2 +-
 12 files changed, 122 insertions(+), 135 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
index 7ce93c8adb09..709fc7d5c7dc 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
@@ -14,8 +14,6 @@ import type { AllElementProps } from '../../editor/store/editor-state'
 import type { CanvasCommand } from '../commands/commands'
 import type { ActiveFrameAction } from '../commands/set-active-frames-command'
 import type { StrategyApplicationStatus } from './interaction-state'
-import type { TargetGridCellData } from './strategies/grid-helpers'
-import type { GridCellCoordinates } from './strategies/grid-cell-bounds'
 
 // TODO: fill this in, maybe make it an ADT for different strategies
 export interface CustomStrategyState {
@@ -29,8 +27,6 @@ export interface CustomStrategyState {
 }
 
 export type GridCustomStrategyState = {
-  targetCellData: TargetGridCellData | null
-  currentRootCell: GridCellCoordinates | null
   metadataCacheForGrids: { [gridPath: string]: ElementInstanceMetadata }
 }
 
@@ -45,8 +41,6 @@ export function defaultCustomStrategyState(): CustomStrategyState {
     elementsToRerender: [],
     action: null,
     grid: {
-      targetCellData: null,
-      currentRootCell: null,
       metadataCacheForGrids: {},
     },
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index 58a4d5663525..894570a5266e 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -161,27 +161,21 @@ const gridDrawToInsertStrategyInner =
         const newTargetCell = getGridCellUnderMouseFromMetadata(parent, canvasPointToUse)
 
         if (strategyLifecycle === 'mid-interaction' && interactionData.type === 'HOVER') {
-          const baseCustomState = updatedCustomState ?? customStrategyState
-          const customStatePatch = {
-            ...baseCustomState,
-            grid: {
-              ...baseCustomState.grid,
-              // this is added here during the hover interaction so that
-              // `GridControls` can render the hover highlight based on the
-              // coordinates in `targetCellData`
-              targetCellData: newTargetCell ?? customStrategyState.grid.targetCellData,
-            },
-          }
           return strategyApplicationResult(
             [
               wildcardPatch('mid-interaction', {
                 selectedViews: { $set: [] },
               }),
-              showGridControls('mid-interaction', targetParent),
+              showGridControls(
+                'mid-interaction',
+                targetParent,
+                newTargetCell?.gridCellCoordinates ?? null,
+                null,
+              ),
               updateHighlightedViews('mid-interaction', [targetParent]),
             ],
             [targetParent],
-            customStatePatch,
+            updatedCustomState ?? undefined,
           )
         }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 38b71a3b4a9b..4af8c8ee8ee8 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -44,45 +44,36 @@ import {
 } from './grid-cell-bounds'
 import { mapDropNulls } from '../../../../core/shared/array-utils'
 import { assertNever } from '../../../../core/shared/utils'
-
-const emptyGridRearrangeMoveResult = {
-  commands: [],
-  targetCell: null,
-  targetRootCell: null,
-}
+import { showGridControls } from '../../commands/show-grid-controls-command'
 
 export function runGridRearrangeMove(
   targetElement: ElementPath,
   selectedElement: ElementPath,
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
-): {
-  commands: CanvasCommand[]
-  targetCell: TargetGridCellData | null
-  targetRootCell: GridCellCoordinates | null
-} {
+): CanvasCommand[] {
   if (interactionData.drag == null) {
-    return emptyGridRearrangeMoveResult
+    return []
   }
 
   const parentGridPath = EP.parentPath(selectedElement)
   const grid = MetadataUtils.findElementByElementPath(jsxMetadata, parentGridPath)
 
   if (grid == null) {
-    return emptyGridRearrangeMoveResult
+    return []
   }
 
   const { gridCellGlobalFrames, containerGridProperties: gridTemplate } =
     grid.specialSizeMeasurements
   if (gridCellGlobalFrames == null) {
-    return emptyGridRearrangeMoveResult
+    return []
   }
 
   const mousePos = offsetPoint(interactionData.dragStart, interactionData.drag)
   const targetCellData = getClosestGridCellToPoint(gridCellGlobalFrames, mousePos)
   const targetCellCoords = targetCellData?.gridCellCoordinates
   if (targetCellCoords == null) {
-    return emptyGridRearrangeMoveResult
+    return []
   }
 
   const draggingFromCellCoords = getClosestGridCellToPoint(
@@ -90,7 +81,7 @@ export function runGridRearrangeMove(
     interactionData.dragStart,
   )?.gridCellCoordinates
   if (draggingFromCellCoords == null) {
-    return emptyGridRearrangeMoveResult
+    return []
   }
 
   const originalElementMetadata = MetadataUtils.findElementByElementPath(
@@ -98,7 +89,7 @@ export function runGridRearrangeMove(
     selectedElement,
   )
   if (originalElementMetadata == null) {
-    return emptyGridRearrangeMoveResult
+    return []
   }
 
   // measured cell coord bounds on the canvas, this is the default when the cell position is not explicitly set
@@ -180,6 +171,13 @@ export function runGridRearrangeMove(
     cellsSortedByPosition: cellsSortedByPosition,
   })
 
+  const updateGridControlsCommand = showGridControls(
+    'mid-interaction',
+    parentGridPath,
+    targetCellData?.gridCellCoordinates ?? null,
+    gridCellCoordinates(row, column),
+  )
+
   switch (moveType) {
     case 'absolute': {
       const absoluteMoveCommands = gridChildAbsoluteMoveCommands(
@@ -187,11 +185,7 @@ export function runGridRearrangeMove(
         MetadataUtils.getFrameOrZeroRectInCanvasCoords(grid.elementPath, jsxMetadata),
         interactionData,
       )
-      return {
-        commands: absoluteMoveCommands,
-        targetCell: targetCellData,
-        targetRootCell: gridCellCoordinates(row, column),
-      }
+      return [...absoluteMoveCommands, updateGridControlsCommand]
     }
     case 'rearrange': {
       const targetRootCell = gridCellCoordinates(row, column)
@@ -204,36 +198,30 @@ export function runGridRearrangeMove(
               canvasRect,
               interactionData,
             )
-      return {
-        commands: [
-          ...gridCellMoveCommands,
-          ...absoluteMoveCommands,
-          reorderElement(
-            'always',
-            selectedElement,
-            absolute(Math.max(indexInSortedCellsForRearrange, 0)),
-          ),
-        ],
-        targetCell: targetCellData,
-        targetRootCell: gridCellCoordinates(row, column),
-      }
+      return [
+        ...gridCellMoveCommands,
+        ...absoluteMoveCommands,
+        reorderElement(
+          'always',
+          selectedElement,
+          absolute(Math.max(indexInSortedCellsForRearrange, 0)),
+        ),
+        updateGridControlsCommand,
+      ]
     }
     case 'reorder': {
-      return {
-        commands: [
-          reorderElement('always', selectedElement, absolute(possiblyReorderIndex)),
-          deleteProperties('always', selectedElement, [
-            PP.create('style', 'gridColumn'),
-            PP.create('style', 'gridRow'),
-            PP.create('style', 'gridColumnStart'),
-            PP.create('style', 'gridColumnEnd'),
-            PP.create('style', 'gridRowStart'),
-            PP.create('style', 'gridRowEnd'),
-          ]),
-        ],
-        targetCell: targetCellData,
-        targetRootCell: targetCellCoords,
-      }
+      return [
+        reorderElement('always', selectedElement, absolute(possiblyReorderIndex)),
+        deleteProperties('always', selectedElement, [
+          PP.create('style', 'gridColumn'),
+          PP.create('style', 'gridRow'),
+          PP.create('style', 'gridColumnStart'),
+          PP.create('style', 'gridColumnEnd'),
+          PP.create('style', 'gridRowStart'),
+          PP.create('style', 'gridRowEnd'),
+        ]),
+        updateGridControlsCommand,
+      ]
     }
     default:
       assertNever(moveType)
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
index 5a62ff4d0f7a..039583c1077c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
@@ -72,11 +72,7 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
 
       const targetElement = EP.appendToPath(EP.parentPath(selectedElement), newUid)
 
-      const {
-        commands: moveCommands,
-        targetCell,
-        targetRootCell,
-      } = runGridRearrangeMove(
+      const moveCommands = runGridRearrangeMove(
         targetElement,
         selectedElement,
         canvasState.startingMetadata,
@@ -96,11 +92,6 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
         ],
         [...selectedElements, targetElement],
         {
-          grid: {
-            ...customState.grid,
-            targetCellData: targetCell,
-            currentRootCell: targetRootCell,
-          },
           duplicatedElementNewUids: duplicatedElementNewUids,
         },
       )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index 274ab4efbca9..b8696111b321 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -135,7 +135,6 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
           ? getCommandsAndPatchForGridRearrange(
               canvasState,
               interactionSession.interactionData,
-              customState,
               selectedElement,
             )
           : getCommandsAndPatchForReparent(
@@ -165,7 +164,6 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
 function getCommandsAndPatchForGridRearrange(
   canvasState: InteractionCanvasState,
   interactionData: DragInteractionData,
-  customState: CustomStrategyState,
   selectedElement: ElementPath,
 ): {
   commands: CanvasCommand[]
@@ -176,7 +174,7 @@ function getCommandsAndPatchForGridRearrange(
     return { commands: [], patch: {}, elementsToRerender: [] }
   }
 
-  const { commands, targetCell, targetRootCell } = runGridRearrangeMove(
+  const commands = runGridRearrangeMove(
     selectedElement,
     selectedElement,
     canvasState.startingMetadata,
@@ -185,13 +183,7 @@ function getCommandsAndPatchForGridRearrange(
 
   return {
     commands: commands,
-    patch: {
-      grid: {
-        ...customState.grid,
-        targetCellData: targetCell,
-        currentRootCell: targetRootCell,
-      },
-    },
+    patch: {},
     elementsToRerender: [EP.parentPath(selectedElement)],
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index bfa996436f1b..7e41c20e2ed8 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -45,7 +45,11 @@ import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-prop
 import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentOutcome, pathToReparent } from './reparent-utils'
 import { flattenSelection } from './shared-move-strategies-helpers'
-import { getGridCellUnderMouseFromMetadata, type GridCellCoordinates } from './grid-cell-bounds'
+import {
+  getClosestGridCellToPointFromMetadata,
+  getGridCellUnderMouseFromMetadata,
+  type GridCellCoordinates,
+} from './grid-cell-bounds'
 
 export function gridReparentStrategy(
   reparentTarget: ReparentTarget,
@@ -195,9 +199,7 @@ export function applyGridReparent(
           interactionData.drag ?? canvasVector({ x: 0, y: 0 }),
         )
 
-        const targetCellData =
-          getGridCellUnderMouseFromMetadata(grid, mousePos) ??
-          customStrategyState.grid.targetCellData
+        const targetCellData = getClosestGridCellToPointFromMetadata(grid, mousePos)
 
         if (targetCellData == null) {
           return strategyApplicationResult([], [newParent.intendedParentPath])
@@ -247,10 +249,6 @@ export function applyGridReparent(
         const customStrategyStatePatch = {
           ...baseCustomState,
           elementsToRerender: elementsToRerender,
-          grid: {
-            ...baseCustomState.grid,
-            targetCellData: targetCellData,
-          },
         }
 
         return strategyApplicationResult(
@@ -259,7 +257,12 @@ export function applyGridReparent(
             gridContainerCommands,
             updateSelectedViews('always', newPaths),
             setCursorCommand(CSSCursor.Reparent),
-            showGridControls('mid-interaction', reparentTarget.newParent.intendedParentPath),
+            showGridControls(
+              'mid-interaction',
+              reparentTarget.newParent.intendedParentPath,
+              targetCellData.gridCellCoordinates,
+              null,
+            ),
           ],
           elementsToRerender,
           customStrategyStatePatch,
diff --git a/editor/src/components/canvas/commands/show-grid-controls-command.ts b/editor/src/components/canvas/commands/show-grid-controls-command.ts
index 8d92c0855510..0d1e4b07d1b8 100644
--- a/editor/src/components/canvas/commands/show-grid-controls-command.ts
+++ b/editor/src/components/canvas/commands/show-grid-controls-command.ts
@@ -1,20 +1,27 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
 import type { EditorState, EditorStatePatch } from '../../editor/store/editor-state'
+import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
 
 export interface ShowGridControlsCommand extends BaseCommand {
   type: 'SHOW_GRID_CONTROLS'
   target: ElementPath
+  targetCell: GridCellCoordinates | null
+  rootCell: GridCellCoordinates | null
 }
 
 export function showGridControls(
   whenToRun: WhenToRun,
   target: ElementPath,
+  targetCell: GridCellCoordinates | null,
+  rootCell: GridCellCoordinates | null,
 ): ShowGridControlsCommand {
   return {
     type: 'SHOW_GRID_CONTROLS',
     whenToRun: whenToRun,
     target: target,
+    targetCell: targetCell,
+    rootCell: rootCell,
   }
 }
 
@@ -25,7 +32,13 @@ export const runShowGridControlsCommand: CommandFunction<ShowGridControlsCommand
   const editorStatePatch: EditorStatePatch = {
     canvas: {
       controls: {
-        gridControls: { $set: command.target },
+        gridControlData: {
+          $set: {
+            grid: command.target,
+            targetCell: command.targetCell,
+            rootCell: command.rootCell,
+          },
+        },
       },
     },
   }
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 89ae8fbed134..2d70341e6b61 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -699,9 +699,8 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
   )
 
   const currentHoveredCell = useEditorState(
-    Substores.restOfStore,
-    (store) =>
-      store.strategyState.customStrategyState.grid.targetCellData?.gridCellCoordinates ?? null,
+    Substores.canvas,
+    (store) => store.editor.canvas.controls.gridControlData?.targetCell ?? null,
     'GridControl currentHoveredCell',
   )
 
@@ -878,8 +877,8 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
   const gridPath = optionalMap(EP.parentPath, shadow?.elementPath)
 
   const targetRootCell = useEditorState(
-    Substores.restOfStore,
-    (store) => store.strategyState.customStrategyState.grid.currentRootCell,
+    Substores.canvas,
+    (store) => store.editor.canvas.controls.gridControlData?.rootCell ?? null,
     'GridControl targetRootCell',
   )
 
@@ -1126,14 +1125,14 @@ export interface GridControlsProps {
 
 export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ targets }) => {
   const targetRootCell = useEditorState(
-    Substores.restOfStore,
-    (store) => store.strategyState.customStrategyState.grid.currentRootCell,
+    Substores.canvas,
+    (store) => store.editor.canvas.controls.gridControlData?.rootCell ?? null,
     'GridControls targetRootCell',
   )
 
   const hoveredGrids = useEditorState(
     Substores.canvas,
-    (store) => stripNulls([store.editor.canvas.controls.gridControls]),
+    (store) => stripNulls([store.editor.canvas.controls.gridControlData?.grid]),
     'GridControls hoveredGrids',
   )
 
diff --git a/editor/src/components/editor/store/dispatch-strategies.spec.tsx b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
index 23aa738142c4..69d3253550f9 100644
--- a/editor/src/components/editor/store/dispatch-strategies.spec.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
@@ -199,9 +199,7 @@ describe('interactionStart', () => {
           "elementsToRerender": Array [],
           "escapeHatchActivated": false,
           "grid": Object {
-            "currentRootCell": null,
             "metadataCacheForGrids": Object {},
-            "targetCellData": null,
           },
           "lastReorderIdx": null,
           "strategyGeneratedUidsCache": Object {},
@@ -266,9 +264,7 @@ describe('interactionStart', () => {
           "elementsToRerender": Array [],
           "escapeHatchActivated": false,
           "grid": Object {
-            "currentRootCell": null,
             "metadataCacheForGrids": Object {},
-            "targetCellData": null,
           },
           "lastReorderIdx": null,
           "strategyGeneratedUidsCache": Object {},
@@ -353,9 +349,7 @@ describe('interactionUpdate', () => {
           "elementsToRerender": Array [],
           "escapeHatchActivated": false,
           "grid": Object {
-            "currentRootCell": null,
             "metadataCacheForGrids": Object {},
-            "targetCellData": null,
           },
           "lastReorderIdx": null,
           "strategyGeneratedUidsCache": Object {},
@@ -440,9 +434,7 @@ describe('interactionUpdate', () => {
           "elementsToRerender": Array [],
           "escapeHatchActivated": false,
           "grid": Object {
-            "currentRootCell": null,
             "metadataCacheForGrids": Object {},
-            "targetCellData": null,
           },
           "lastReorderIdx": null,
           "strategyGeneratedUidsCache": Object {},
@@ -521,9 +513,7 @@ describe('interactionHardReset', () => {
           "elementsToRerender": Array [],
           "escapeHatchActivated": false,
           "grid": Object {
-            "currentRootCell": null,
             "metadataCacheForGrids": Object {},
-            "targetCellData": null,
           },
           "lastReorderIdx": null,
           "strategyGeneratedUidsCache": Object {},
@@ -610,9 +600,7 @@ describe('interactionHardReset', () => {
           "elementsToRerender": Array [],
           "escapeHatchActivated": false,
           "grid": Object {
-            "currentRootCell": null,
             "metadataCacheForGrids": Object {},
-            "targetCellData": null,
           },
           "lastReorderIdx": null,
           "strategyGeneratedUidsCache": Object {},
@@ -705,9 +693,7 @@ describe('interactionUpdate with user changed strategy', () => {
           "elementsToRerender": Array [],
           "escapeHatchActivated": false,
           "grid": Object {
-            "currentRootCell": null,
             "metadataCacheForGrids": Object {},
-            "targetCellData": null,
           },
           "lastReorderIdx": null,
           "strategyGeneratedUidsCache": Object {},
@@ -795,9 +781,7 @@ describe('interactionUpdate with user changed strategy', () => {
           "elementsToRerender": Array [],
           "escapeHatchActivated": false,
           "grid": Object {
-            "currentRootCell": null,
             "metadataCacheForGrids": Object {},
-            "targetCellData": null,
           },
           "lastReorderIdx": null,
           "strategyGeneratedUidsCache": Object {},
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index 6f4b09dd4bb9..800ae1ae55a3 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -31,7 +31,6 @@ import type {
 } from '../../../core/shared/element-template'
 import {
   emptyJsxMetadata,
-  getElementsByUIDFromTopLevelElements,
   isJSExpression,
   isJSXConditionalExpression,
   isJSXElement,
@@ -61,14 +60,12 @@ import type {
   NodeModules,
   ParseSuccess,
   ProjectFile,
-  PropertyPath,
   StaticElementPath,
   TextFile,
 } from '../../../core/shared/project-file-types'
 import {
   RevisionsState,
   codeFile,
-  foldParsedTextFile,
   isParseFailure,
   isParseSuccess,
   isParsedTextFile,
@@ -125,7 +122,6 @@ import type { Notice } from '../../common/notice'
 import type { ShortcutConfiguration } from '../shortcut-definitions'
 import {
   DerivedStateKeepDeepEquality,
-  ElementInstanceMetadataMapKeepDeepEquality,
   InvalidOverrideNavigatorEntryKeepDeepEquality,
   RenderPropNavigatorEntryKeepDeepEquality,
   RenderPropValueNavigatorEntryKeepDeepEquality,
@@ -192,6 +188,7 @@ import type { Collaborator } from '../../../core/shared/multiplayer'
 import type { OnlineState } from '../online-status'
 import type { NavigatorRow } from '../../navigator/navigator-row'
 import type { FancyError } from '../../../core/shared/code-exec-utils'
+import type { GridCellCoordinates } from '../../canvas/canvas-strategies/strategies/grid-cell-bounds'
 
 const ObjectPathImmutable: any = OPI
 
@@ -812,6 +809,12 @@ export interface DragToMoveIndicatorFlags {
   ancestor: boolean
 }
 
+export interface GridControlData {
+  grid: ElementPath
+  targetCell: GridCellCoordinates | null // the cell under the mouse
+  rootCell: GridCellCoordinates | null // the top-left cell of the target child
+}
+
 export interface EditorStateCanvasControls {
   // this is where we can put props for the strategy controls
   snappingGuidelines: Array<GuidelineWithSnappingVectorAndPointsOfRelevance>
@@ -822,7 +825,7 @@ export interface EditorStateCanvasControls {
   reparentedToPaths: Array<ElementPath>
   dragToMoveIndicatorFlags: DragToMoveIndicatorFlags
   parentOutlineHighlight: ElementPath | null
-  gridControls: ElementPath | null
+  gridControlData: GridControlData | null
 }
 
 export function editorStateCanvasControls(
@@ -834,7 +837,7 @@ export function editorStateCanvasControls(
   reparentedToPaths: Array<ElementPath>,
   dragToMoveIndicatorFlagsValue: DragToMoveIndicatorFlags,
   parentOutlineHighlight: ElementPath | null,
-  gridControls: ElementPath | null,
+  gridControlData: GridControlData | null,
 ): EditorStateCanvasControls {
   return {
     snappingGuidelines: snappingGuidelines,
@@ -845,7 +848,7 @@ export function editorStateCanvasControls(
     reparentedToPaths: reparentedToPaths,
     dragToMoveIndicatorFlags: dragToMoveIndicatorFlagsValue,
     parentOutlineHighlight: parentOutlineHighlight,
-    gridControls: gridControls,
+    gridControlData: gridControlData,
   }
 }
 
@@ -2624,7 +2627,7 @@ export function createEditorState(dispatch: EditorDispatch): EditorState {
         reparentedToPaths: [],
         dragToMoveIndicatorFlags: emptyDragToMoveIndicatorFlags,
         parentOutlineHighlight: null,
-        gridControls: null,
+        gridControlData: null,
       },
     },
     inspector: {
@@ -2999,7 +3002,7 @@ export function editorModelFromPersistentModel(
         reparentedToPaths: [],
         dragToMoveIndicatorFlags: emptyDragToMoveIndicatorFlags,
         parentOutlineHighlight: null,
-        gridControls: null,
+        gridControlData: null,
       },
     },
     inspector: {
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index c988b328bcfb..f22431510ddb 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -361,6 +361,7 @@ import type {
   RenderedAt,
   EditorRemixConfig,
   ErrorBoundaryHandling,
+  GridControlData,
 } from './editor-state'
 import {
   trueUpGroupElementChanged,
@@ -641,6 +642,7 @@ import type {
   ComponentDescriptorPropertiesBounds,
 } from '../../../core/property-controls/component-descriptor-parser'
 import type { Axis } from '../../../components/canvas/gap-utils'
+import type { GridCellCoordinates } from '../../canvas/canvas-strategies/strategies/grid-cell-bounds'
 
 export function ElementPropertyPathKeepDeepEquality(): KeepDeepEqualityCall<ElementPropertyPath> {
   return combine2EqualityCalls(
@@ -2718,6 +2720,30 @@ export const DragToMoveIndicatorFlagsKeepDeepEquality: KeepDeepEqualityCall<Drag
     dragToMoveIndicatorFlags,
   )
 
+export const GridCellCoordinatesKeepDeepEquality: KeepDeepEqualityCall<GridCellCoordinates> =
+  combine2EqualityCalls(
+    (data) => data.row,
+    createCallWithTripleEquals(),
+    (data) => data.column,
+    createCallWithTripleEquals(),
+    (row, column) => ({ row, column }),
+  )
+
+export const GridControlDataKeepDeepEquality: KeepDeepEqualityCall<GridControlData> =
+  combine3EqualityCalls(
+    (data) => data.grid,
+    ElementPathKeepDeepEquality,
+    (data) => data.targetCell,
+    nullableDeepEquality(GridCellCoordinatesKeepDeepEquality),
+    (data) => data.rootCell,
+    nullableDeepEquality(GridCellCoordinatesKeepDeepEquality),
+    (grid, targetCell, rootCell) => ({
+      grid,
+      targetCell,
+      rootCell,
+    }),
+  )
+
 export const EditorStateCanvasControlsKeepDeepEquality: KeepDeepEqualityCall<EditorStateCanvasControls> =
   combine9EqualityCalls(
     (controls) => controls.snappingGuidelines,
@@ -2736,8 +2762,8 @@ export const EditorStateCanvasControlsKeepDeepEquality: KeepDeepEqualityCall<Edi
     DragToMoveIndicatorFlagsKeepDeepEquality,
     (controls) => controls.parentOutlineHighlight,
     nullableDeepEquality(ElementPathKeepDeepEquality),
-    (controls) => controls.gridControls,
-    nullableDeepEquality(ElementPathKeepDeepEquality),
+    (controls) => controls.gridControlData,
+    nullableDeepEquality(GridControlDataKeepDeepEquality),
     editorStateCanvasControls,
   )
 
diff --git a/editor/src/components/editor/store/store-hook-substore-helpers.ts b/editor/src/components/editor/store/store-hook-substore-helpers.ts
index bd45ce5dd768..61e8565823a4 100644
--- a/editor/src/components/editor/store/store-hook-substore-helpers.ts
+++ b/editor/src/components/editor/store/store-hook-substore-helpers.ts
@@ -88,7 +88,7 @@ export const EmptyEditorStateForKeysOnly: EditorState = {
       reparentedToPaths: [],
       dragToMoveIndicatorFlags: null as any,
       parentOutlineHighlight: null,
-      gridControls: null,
+      gridControlData: null,
     },
   },
   inspector: {

From defc5a70ab8d74a2da386dda1750d303a830bd8d Mon Sep 17 00:00:00 2001
From: RheeseyB <1044774+Rheeseyb@users.noreply.github.com>
Date: Tue, 8 Oct 2024 12:14:56 +0100
Subject: [PATCH 113/272] Disable the two parsing feature flags by default for
 now (#6493)

**Problem:**
The two new parsing features are causing a couple of unexpected editor
breaking bugs

**Fix:**
Disable the feature flags by default until we've solved the cause of the
issues.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/utils/feature-switches.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor/src/utils/feature-switches.ts b/editor/src/utils/feature-switches.ts
index 7ea53ffa2188..4f996e50e1df 100644
--- a/editor/src/utils/feature-switches.ts
+++ b/editor/src/utils/feature-switches.ts
@@ -62,11 +62,11 @@ let FeatureSwitches: { [feature in FeatureName]: boolean } = {
   'Canvas Strategies Debug Panel': false,
   'Project Thumbnail Generation': false,
   'Debug - Print UIDs': false,
-  'Parallel Parsing': !IS_TEST_ENVIRONMENT,
+  'Parallel Parsing': false,
   'Debug - Log Parse Timings': false,
   Tailwind: false,
   'Condensed Navigator Entries': !IS_TEST_ENVIRONMENT,
-  'Use Parsing Cache': !IS_TEST_ENVIRONMENT,
+  'Use Parsing Cache': false,
   'Canvas Fast Selection Hack': true,
   'Show Debug Features': false,
 }

From 0724d877333831f8df4d4cd04d262619031055c4 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 8 Oct 2024 17:20:48 +0200
Subject: [PATCH 114/272] Trim dynamic grids' collapsed extra rows/cols from
 the computed template (#6496)

**Problem:**

In grid templates when using `repeat` functions and
`auto-fit`/`auto-fill`, the computed style might contain extra
rows/cols, collapsed to a `0px` size. Normally this is not an issue, but
since for dynamic templates we display the grid wireframe based on the
computed dimensions, those extra dimensions would appear visible on the
canvas as zombies. This behavior of appending extra collapsed tracks is
explained in https://www.w3.org/TR/css-grid-1/#repeat-notation.

<img width="928" alt="Screenshot 2024-10-08 at 13 55 48"
src="https://github.com/user-attachments/assets/042ab509-8e82-4f7a-842c-cbb6a8ef7267">

**Fix:**

When parsing the templates, first parse the `fromProps` template.
Then, after parsing the computed template, if the `fromProps` template
it contains dynamic tracks, trim any dangling collapsed elements in the
computed template dimensions array.
This is not necessarily optimal (if you have an explicit `0px` sized
column in your template, it will be hidden from the canvas), but
concretely it will do "the right thing" and you can always use the
inspector to target any 0-sized cols/rows (which you would have to do
anyways).

<img width="928" alt="Screenshot 2024-10-08 at 14 00 03"
src="https://github.com/user-attachments/assets/9bd5d76c-9eae-406b-956d-f1f300b19ba7">


Fixes #6495
---
 editor/src/components/canvas/dom-walker.ts | 64 ++++++++++++++++++----
 1 file changed, 52 insertions(+), 12 deletions(-)

diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 3a0e979335fe..912d3515f34b 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -9,6 +9,7 @@ import type {
   GridContainerProperties,
   GridElementProperties,
   DomElementMetadata,
+  GridAutoOrTemplateBase,
 } from '../../core/shared/element-template'
 import {
   specialSizeMeasurements,
@@ -16,6 +17,7 @@ import {
   gridElementProperties,
   gridAutoOrTemplateFallback,
   domElementMetadata,
+  gridAutoOrTemplateDimensions,
 } from '../../core/shared/element-template'
 import type { ElementPath } from '../../core/shared/project-file-types'
 import type { ElementCanvasRectangleCache } from '../../core/shared/dom-utils'
@@ -52,6 +54,7 @@ import {
   parseGridAutoOrTemplateBase,
   parseGridAutoFlow,
   isCSSKeyword,
+  isDynamicGridRepeat,
 } from '../inspector/common/css-utils'
 import type { UtopiaStoreAPI } from '../editor/store/store-hook'
 import {
@@ -555,6 +558,10 @@ export function collectDomElementMetadataForElement(
 
 function getGridContainerProperties(
   elementStyle: CSSStyleDeclaration | null,
+  options?: {
+    dynamicCols: boolean
+    dynamicRows: boolean
+  },
 ): GridContainerProperties {
   if (elementStyle == null) {
     return {
@@ -565,14 +572,23 @@ function getGridContainerProperties(
       gridAutoFlow: null,
     }
   }
-  const gridTemplateColumns = defaultEither(
-    gridAutoOrTemplateFallback(elementStyle.gridTemplateColumns),
-    parseGridAutoOrTemplateBase(elementStyle.gridTemplateColumns),
+
+  const gridTemplateColumns = trimDynamicEmptyDimensions(
+    defaultEither(
+      gridAutoOrTemplateFallback(elementStyle.gridTemplateColumns),
+      parseGridAutoOrTemplateBase(elementStyle.gridTemplateColumns),
+    ),
+    options?.dynamicCols === true,
   )
-  const gridTemplateRows = defaultEither(
-    gridAutoOrTemplateFallback(elementStyle.gridTemplateRows),
-    parseGridAutoOrTemplateBase(elementStyle.gridTemplateRows),
+
+  const gridTemplateRows = trimDynamicEmptyDimensions(
+    defaultEither(
+      gridAutoOrTemplateFallback(elementStyle.gridTemplateRows),
+      parseGridAutoOrTemplateBase(elementStyle.gridTemplateRows),
+    ),
+    options?.dynamicRows === true,
   )
+
   const gridAutoColumns = defaultEither(
     gridAutoOrTemplateFallback(elementStyle.gridAutoColumns),
     parseGridAutoOrTemplateBase(elementStyle.gridAutoColumns),
@@ -590,6 +606,23 @@ function getGridContainerProperties(
   )
 }
 
+function trimDynamicEmptyDimensions(
+  template: GridAutoOrTemplateBase,
+  isDynamic: boolean,
+): GridAutoOrTemplateBase {
+  if (!isDynamic) {
+    return template
+  }
+  if (template.type !== 'DIMENSIONS') {
+    return template
+  }
+
+  const lastNonEmptyColumn = template.dimensions.findLastIndex(
+    (d) => d.type === 'KEYWORD' || (d.type === 'NUMBER' && d.value.value !== 0),
+  )
+  return gridAutoOrTemplateDimensions(template.dimensions.slice(0, lastNonEmptyColumn + 1))
+}
+
 function getGridElementProperties(
   container: GridContainerProperties,
   elementStyle: CSSStyleDeclaration,
@@ -882,8 +915,6 @@ function getSpecialMeasurements(
 
   const parentContainerGridProperties = getGridContainerProperties(parentElementStyle)
 
-  const containerGridProperties = getGridContainerProperties(elementStyle)
-
   const paddingValue = isRight(padding)
     ? padding.value
     : sides(undefined, undefined, undefined, undefined)
@@ -898,15 +929,20 @@ function getSpecialMeasurements(
         )
       : null
 
-  const containerElementProperties = getGridElementProperties(
-    parentContainerGridProperties,
-    elementStyle,
-  )
   const containerGridPropertiesFromProps = getGridContainerProperties(element.style)
+  const containerGridProperties = getGridContainerProperties(elementStyle, {
+    dynamicCols: isDynamicGridTemplate(containerGridPropertiesFromProps.gridTemplateColumns),
+    dynamicRows: isDynamicGridTemplate(containerGridPropertiesFromProps.gridTemplateRows),
+  })
+
   const containerElementPropertiesFromProps = getGridElementProperties(
     parentContainerGridProperties,
     element.style,
   )
+  const containerElementProperties = getGridElementProperties(
+    parentContainerGridProperties,
+    elementStyle,
+  )
 
   return specialSizeMeasurements(
     offset,
@@ -965,6 +1001,10 @@ function getSpecialMeasurements(
   )
 }
 
+function isDynamicGridTemplate(template: GridAutoOrTemplateBase | null) {
+  return template?.type === 'DIMENSIONS' && template.dimensions.some((d) => isDynamicGridRepeat(d))
+}
+
 function elementContainsOnlyText(element: HTMLElement): boolean {
   if (element.childNodes.length === 0) {
     return false

From 0924afe76a7c29b018174e53be52f81cf9631fb2 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 9 Oct 2024 12:06:54 +0200
Subject: [PATCH 115/272] Better grid reparent (#6499)

**Problem:**
One of the root causes of some major issues is that the grid reparent
strategies were not created by the general reparent-metastrategy, but
the grid-rearrange-move strategy itself.

**Fix:**
- Removed reparent strategy creation from grid-rearrange-move. After
this grid-rearrange-move is always selectable when dragging from a grid,
even when outside of a grid (so you can manually switch to this strategy
and the child will jump back to the original grid, into the cell which
is closest to the mouse). This is a behavior which is similar to flex
reorder.
- reparent-metastrategy can create a reparent into grid strategy. To
achieve this I just had to allow `GRID_CELL_HANDLE` controls in the
strategy factory.
- Fortunately reparent-metastrategy does not allow reparenting into the
same parent, so this automagically solved the problem that reparenting
inside the original grid should just do a rearrange (because the
reparent strategy is not even selectable in that case)
- With this solution, when reparenting from one grid to a different
grid, the grid controls were shown on both the original and the new
parent grid too. Unfortunately, the grid controls do not support showing
the controls on multiple grid instances at the same time (e.g. they
shared the state that which cell was highlighted), so I had to switch
the grid control of the rearrange strategy to
`visible-only-while-active` (so it is not visible on the original grid
when the reparent strategy is active)
- I had to make sure the grid specific style props are removed during
all kinds of reparent (earlier this was manually handled in the grid
specific code)
- I could remove plenty of reparent specific code lines from
`grid-rearrange-move-strategy.ts`
- In the earlier solution reparent to flow was the default when
repareing into a flow target, but in our regular reparent flow reparent
is never the default. Because of this I had to rewrite one test to
select the flow strategy manually.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../strategies/drag-to-move-metastrategy.tsx  |   3 +-
 .../grid-rearrange-move-strategy.ts           | 179 +-----------------
 ...grid-reparent-strategies.spec.browser2.tsx |  19 +-
 .../strategies/grid-reparent-strategy.tsx     |   6 +-
 .../reparent-property-changes.ts              |   6 +
 .../strategies/reparent-metastrategy.tsx      |   3 +-
 .../canvas/controls/grid-controls.tsx         |  12 +-
 7 files changed, 43 insertions(+), 185 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-move-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-move-metastrategy.tsx
index 67255fe562d1..c70f692fd2e8 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-move-metastrategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-move-metastrategy.tsx
@@ -58,7 +58,8 @@ export const dragToMoveMetaStrategy: MetaCanvasStrategy = (
     selectedElements.length === 0 ||
     selectedElements.some(EP.isRootElementOfInstance) ||
     interactionSession == null ||
-    interactionSession.activeControl.type !== 'BOUNDING_AREA' ||
+    (interactionSession.activeControl.type !== 'BOUNDING_AREA' &&
+      interactionSession.activeControl.type !== 'GRID_CELL_HANDLE') ||
     interactionSession.interactionData.type !== 'DRAG' ||
     interactionSession.interactionData.modifiers.alt
   ) {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index b8696111b321..d79b46d21b00 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -77,7 +77,6 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
   }
 
   const strategyToApply = getStrategyToApply(
-    canvasState,
     interactionSession.interactionData,
     parentGridPath,
     canvasState.startingMetadata,
@@ -130,23 +129,11 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
         ),
       ]
 
-      const { commands, patch, elementsToRerender } =
-        strategyToApply.type === 'GRID_REARRANGE'
-          ? getCommandsAndPatchForGridRearrange(
-              canvasState,
-              interactionSession.interactionData,
-              selectedElement,
-            )
-          : getCommandsAndPatchForReparent(
-              strategyToApply.strategy,
-              canvasState,
-              interactionSession.interactionData,
-              interactionSession,
-              customState,
-              selectedElement,
-              strategyLifecycle,
-              gridFrame,
-            )
+      const { commands, patch, elementsToRerender } = getCommandsAndPatchForGridRearrange(
+        canvasState,
+        interactionSession.interactionData,
+        selectedElement,
+      )
 
       if (commands.length === 0) {
         return emptyStrategyApplicationResult
@@ -188,102 +175,6 @@ function getCommandsAndPatchForGridRearrange(
   }
 }
 
-function getCommandsAndPatchForReparent(
-  strategy: FindReparentStrategyResult,
-  canvasState: InteractionCanvasState,
-  interactionData: DragInteractionData,
-  interactionSession: InteractionSession,
-  customState: CustomStrategyState,
-  targetElement: ElementPath,
-  strategyLifecycle: InteractionLifecycle,
-  gridFrame: CanvasRectangle,
-): {
-  commands: CanvasCommand[]
-  patch: CustomStrategyStatePatch
-  elementsToRerender: ElementPath[]
-} {
-  if (interactionData.drag == null) {
-    return { commands: [], patch: {}, elementsToRerender: [] }
-  }
-
-  function applyReparent() {
-    switch (strategy.strategy) {
-      case 'REPARENT_AS_ABSOLUTE':
-        return applyAbsoluteReparent(
-          canvasState,
-          interactionSession,
-          customState,
-          strategy.target,
-          [targetElement],
-        )(strategyLifecycle)
-      case 'REPARENT_AS_STATIC':
-        return applyStaticReparent(canvasState, interactionSession, customState, strategy.target)
-      case 'REPARENT_INTO_GRID':
-        return applyGridReparent(
-          canvasState,
-          interactionData,
-          interactionSession,
-          customState,
-          strategy.target,
-          [targetElement],
-          gridFrame,
-        )()
-      default:
-        assertNever(strategy.strategy)
-    }
-  }
-  const result = applyReparent()
-
-  let commands: CanvasCommand[] = []
-
-  const frame = MetadataUtils.getFrameOrZeroRect(targetElement, canvasState.startingMetadata)
-
-  if (strategy.strategy === 'REPARENT_AS_ABSOLUTE') {
-    // for absolute reparents, set positioning and size props
-    commands.push(
-      updateBulkProperties('always', targetElement, [
-        propertyToSet(PP.create('style', 'position'), 'absolute'),
-        propertyToSet(PP.create('style', 'top'), frame.y + interactionData.drag.y),
-        propertyToSet(PP.create('style', 'left'), frame.x + interactionData.drag.x),
-        propertyToSet(PP.create('style', 'width'), frame.width),
-        propertyToSet(PP.create('style', 'height'), frame.height),
-      ]),
-    )
-  } else if (strategy.strategy === 'REPARENT_AS_STATIC') {
-    // for static reparents, set size props
-    commands.push(
-      updateBulkProperties('always', targetElement, [
-        propertyToSet(PP.create('style', 'width'), frame.width),
-        propertyToSet(PP.create('style', 'height'), frame.height),
-      ]),
-    )
-  }
-
-  // for absolute, static, or non-same-grid reparents, remove cell placement props
-  if (
-    strategy.strategy !== 'REPARENT_INTO_GRID' ||
-    !EP.pathsEqual(strategy.target.newParent.intendedParentPath, EP.parentPath(targetElement))
-  ) {
-    commands.push(
-      updateBulkProperties('on-complete', targetElement, [
-        propertyToDelete(PP.create('style', 'gridRow')),
-        propertyToDelete(PP.create('style', 'gridColumn')),
-      ]),
-    )
-  }
-
-  commands.push(...result.commands)
-
-  return {
-    commands: commands,
-    patch: result.customStatePatch,
-    elementsToRerender: [
-      EP.parentPath(targetElement),
-      strategy.target.newParent.intendedParentPath,
-    ],
-  }
-}
-
 function restoreGridTemplateFromProps(params: {
   columns: GridAutoOrTemplateBase
   rows: GridAutoOrTemplateBase
@@ -342,21 +233,12 @@ function getGridTemplates(jsxMetadata: ElementInstanceMetadataMap, gridPath: Ele
   }
 }
 
-type StrategyToApply =
-  | {
-      type: 'GRID_REARRANGE'
-      controlsToRender: ControlWithProps<any>[]
-      name: string
-    }
-  | {
-      type: 'REPARENT'
-      controlsToRender: ControlWithProps<any>[]
-      name: string
-      strategy: FindReparentStrategyResult
-    }
+type StrategyToApply = {
+  controlsToRender: ControlWithProps<any>[]
+  name: string
+}
 
 function getStrategyToApply(
-  canvasState: InteractionCanvasState,
   interactionData: DragInteractionData,
   parentGridPath: ElementPath,
   jsxMetadata: ElementInstanceMetadataMap,
@@ -366,46 +248,6 @@ function getStrategyToApply(
     return null
   }
 
-  const shouldReparent = interactionData.modifiers.cmd
-  if (shouldReparent) {
-    const pointOnCanvas = offsetPoint(interactionData.originalDragStart, interactionData.drag)
-    const reparentStrategies = findReparentStrategies(
-      canvasState,
-      true,
-      pointOnCanvas,
-      'allow-smaller-parent',
-    )
-
-    const strategy = reparentStrategies[0]
-    if (strategy != null) {
-      switch (strategy.strategy) {
-        case 'REPARENT_AS_ABSOLUTE':
-          return {
-            type: 'REPARENT',
-            name: 'Reparent (Abs)',
-            controlsToRender: controlsForAbsoluteReparent(strategy.target),
-            strategy: strategy,
-          }
-        case 'REPARENT_AS_STATIC':
-          return {
-            type: 'REPARENT',
-            name: 'Reparent (Flex)',
-            controlsToRender: controlsForStaticReparent(strategy.target),
-            strategy: strategy,
-          }
-        case 'REPARENT_INTO_GRID':
-          return {
-            type: 'REPARENT',
-            name: 'Reparent (Grid)',
-            controlsToRender: controlsForGridReparent(strategy.target),
-            strategy: strategy,
-          }
-        default:
-          assertNever(strategy.strategy)
-      }
-    }
-  }
-
   const element = MetadataUtils.findElementByElementPath(jsxMetadata, cell)
 
   const name =
@@ -415,8 +257,7 @@ function getStrategyToApply(
       : 'Rearrange Grid (Move)'
 
   return {
-    type: 'GRID_REARRANGE',
     name: name,
-    controlsToRender: [controlsForGridPlaceholders(parentGridPath)],
+    controlsToRender: [controlsForGridPlaceholders(parentGridPath, 'visible-only-while-active')],
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
index 96f1fa5a14a6..ad60b02414c2 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
@@ -14,6 +14,7 @@ import {
   mouseDragFromPointToPoint,
   mouseMoveToPoint,
   mouseUpAtPoint,
+  pressKey,
 } from '../../event-helpers.test-utils'
 import type { EditorRenderResult } from '../../ui-jsx.test-utils'
 import {
@@ -311,8 +312,8 @@ describe('grid reparent strategies', () => {
             width: 79,
             height: 86,
             position: 'absolute',
-            top: 934,
             left: 1627,
+            top: 934,
           }}
           data-uid='dragme'
           data-testid='dragme'
@@ -451,7 +452,7 @@ describe('grid reparent strategies', () => {
         ),
       )
     })
-    it('into a flow element', async () => {
+    it('into a flow element with flow strategy selected', async () => {
       const editor = await renderTestEditorWithCode(
         makeTestProjectCode({
           insideGrid: `
@@ -519,7 +520,9 @@ describe('grid reparent strategies', () => {
         y: fooRect.y + fooRect.height / 2,
       }
 
-      await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint)
+      await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint, async () => {
+        await pressKey('3', { modifiers: cmdModifier }) // this should select the Reparent (Flow) strategy
+      })
 
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
         formatTestProjectCode(
@@ -755,11 +758,11 @@ describe('grid reparent strategies', () => {
         <div
           style={{
             backgroundColor: '#f0f',
+            width: 87,
+            height: 135,
             position: 'absolute',
-            top: 934,
             left: 1627,
-            width: 86.5,
-            height: 135,
+            top: 934,
           }}
           data-uid='dragme'
           data-testid='dragme'
@@ -827,6 +830,7 @@ async function dragOut(
   renderResult: EditorRenderResult,
   cell: ElementPath,
   endPoint: Point,
+  midDragCallback?: () => Promise<void>,
 ): Promise<void> {
   const sourceGridCell = renderResult.renderedDOM.getByTestId(GridCellTestId(cell))
   const sourceRect = sourceGridCell.getBoundingClientRect()
@@ -857,6 +861,9 @@ async function dragOut(
     },
     modifiers: cmdModifier,
   })
+  if (midDragCallback != null) {
+    await midDragCallback()
+  }
   await mouseUpAtPoint(renderResult.renderedDOM.getByTestId(CanvasControlsContainerID), endPoint, {
     modifiers: cmdModifier,
   })
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 7e41c20e2ed8..f98ee00f7680 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -45,11 +45,7 @@ import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-prop
 import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentOutcome, pathToReparent } from './reparent-utils'
 import { flattenSelection } from './shared-move-strategies-helpers'
-import {
-  getClosestGridCellToPointFromMetadata,
-  getGridCellUnderMouseFromMetadata,
-  type GridCellCoordinates,
-} from './grid-cell-bounds'
+import { getClosestGridCellToPointFromMetadata, type GridCellCoordinates } from './grid-cell-bounds'
 
 export function gridReparentStrategy(
   reparentTarget: ReparentTarget,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-changes.ts b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-changes.ts
index 86a6f01ccc2d..307d87ad479b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-changes.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-changes.ts
@@ -73,6 +73,12 @@ const propertiesToRemove: Array<PropertyPath> = [
   PP.create('style', 'top'),
   PP.create('style', 'right'),
   PP.create('style', 'bottom'),
+  PP.create('style', 'gridRow'),
+  PP.create('style', 'gridColumn'),
+  PP.create('style', 'gridRowStart'),
+  PP.create('style', 'gridRowEnd'),
+  PP.create('style', 'gridColumnStart'),
+  PP.create('style', 'gridColumnEnd'),
 ]
 
 export type ForcePins = 'force-pins' | 'do-not-force-pins'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reparent-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/reparent-metastrategy.tsx
index a5d79e59521d..41478bff23f0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reparent-metastrategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reparent-metastrategy.tsx
@@ -274,7 +274,8 @@ export const reparentMetaStrategy: MetaCanvasStrategy = (
   if (
     reparentSubjects.length === 0 ||
     interactionSession == null ||
-    interactionSession.activeControl.type !== 'BOUNDING_AREA' ||
+    (interactionSession.activeControl.type !== 'BOUNDING_AREA' &&
+      interactionSession.activeControl.type !== 'GRID_CELL_HANDLE') ||
     interactionSession.interactionData.type !== 'DRAG' ||
     interactionSession.interactionData.drag == null ||
     interactionSession.interactionData.modifiers.alt
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 2d70341e6b61..176a10dd3eea 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -59,7 +59,10 @@ import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
 import CanvasActions from '../canvas-actions'
-import type { ControlWithProps } from '../canvas-strategies/canvas-strategy-types'
+import type {
+  ControlWithProps,
+  WhenToShowControl,
+} from '../canvas-strategies/canvas-strategy-types'
 import { controlForStrategyMemoized } from '../canvas-strategies/canvas-strategy-types'
 import type {
   GridResizeEdge,
@@ -1837,12 +1840,15 @@ function gridPlaceholderWidthOrHeight(scale: number): string {
   return `calc(100% + ${(placeholderBorderBaseWidth * 2) / scale}px)`
 }
 
-export function controlsForGridPlaceholders(gridPath: ElementPath): ControlWithProps<any> {
+export function controlsForGridPlaceholders(
+  gridPath: ElementPath,
+  whenToShow: WhenToShowControl = 'always-visible',
+): ControlWithProps<any> {
   return {
     control: GridControls,
     props: { targets: [gridPath] },
     key: GridControlsKey(gridPath),
-    show: 'always-visible',
+    show: whenToShow,
     priority: 'bottom',
   }
 }

From 108b2c2f5a187386596ddb5c453a7f74fb0c34a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Wed, 9 Oct 2024 12:11:21 +0200
Subject: [PATCH 116/272] Memoized Tailwind config evaluation (#6500)

## Problem
The Tailwind config is only accessible inside `useTailwindCompilation`,
which means that the upcoming element style plugins won't be able to
access it

## Fix
Store the last seen text contents of the Tailwind config file along with
the last evaluation result. If the new contents of the Tailwind config
file are the same as the last seen contents, the last evaluation result,
otherwise, re-evaluate the Tailwind config file, and store it, and
return it
---
 editor/package.json                           |   1 +
 editor/pnpm-lock.yaml                         |  39 +----
 .../property-controls-local.ts                | 146 ++++++++++--------
 .../src/core/tailwind/tailwind-compilation.ts |  27 +++-
 .../core/tailwind/tailwind.spec.browser2.tsx  |  84 +---------
 editor/src/core/tailwind/tailwind.spec.ts     |  72 +++++++++
 .../src/core/tailwind/tailwind.test-utils.ts  |  85 ++++++++++
 editor/webpack.config.js                      |   1 +
 8 files changed, 274 insertions(+), 181 deletions(-)
 create mode 100644 editor/src/core/tailwind/tailwind.spec.ts
 create mode 100644 editor/src/core/tailwind/tailwind.test-utils.ts

diff --git a/editor/package.json b/editor/package.json
index 9da259561b23..1d4fa750356a 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -424,6 +424,7 @@
     "source-map-loader": "0.2.3",
     "string-replace-loader": "2.2.0",
     "style-loader": "0.18.2",
+    "tailwindcss": "^3.4.13",
     "tar": "6.0.5",
     "terser-webpack-plugin": "5.3.9",
     "three": "0.140.2",
diff --git a/editor/pnpm-lock.yaml b/editor/pnpm-lock.yaml
index 9c062e509ccd..fe2bc6505a00 100644
--- a/editor/pnpm-lock.yaml
+++ b/editor/pnpm-lock.yaml
@@ -318,6 +318,7 @@ specifiers:
   string-replace-loader: 2.2.0
   strip-ansi: 6.0.0
   style-loader: 0.18.2
+  tailwindcss: ^3.4.13
   tar: 6.0.5
   terser-webpack-plugin: 5.3.9
   three: 0.140.2
@@ -643,6 +644,7 @@ devDependencies:
   source-map-loader: 0.2.3
   string-replace-loader: 2.2.0_webpack@5.88.2
   style-loader: 0.18.2
+  tailwindcss: 3.4.13
   tar: 6.0.5
   terser-webpack-plugin: 5.3.9_webpack@5.88.2
   three: 0.140.2
@@ -669,7 +671,6 @@ packages:
   /@alloc/quick-lru/5.2.0:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
-    dev: false
 
   /@alloc/types/1.3.0:
     resolution: {integrity: sha512-mH7LiFiq9g6rX2tvt1LtwsclfG5hnsmtIfkZiauAGrm1AwXhoRS0sF2WrN9JGN7eV5vFXqNaB0eXZ3IvMsVi9g==}
@@ -4649,7 +4650,7 @@ packages:
     dependencies:
       '@types/estree': 0.0.39
       estree-walker: 1.0.1
-      picomatch: 2.3.0
+      picomatch: 2.3.1
     dev: true
 
   /@rollup/pluginutils/4.2.1:
@@ -6428,7 +6429,6 @@ packages:
 
   /arg/5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: false
 
   /argparse/1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -7459,7 +7459,6 @@ packages:
   /camelcase-css/2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: false
 
   /camelcase/5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
@@ -8831,7 +8830,6 @@ packages:
 
   /didyoumean/1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: false
 
   /diff-match-patch/1.0.5:
     resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
@@ -8887,7 +8885,6 @@ packages:
 
   /dlv/1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: false
 
   /dnd-core/16.0.1:
     resolution: {integrity: sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==}
@@ -10875,7 +10872,6 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: false
 
   /glob-to-regexp/0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
@@ -10902,7 +10898,6 @@ packages:
       minipass: 7.1.2
       package-json-from-dist: 1.0.0
       path-scurry: 1.11.1
-    dev: false
 
   /glob/3.1.21:
     resolution: {integrity: sha512-ANhy2V2+tFpRajE3wN4DhkNQ08KDr0Ir1qL12/cUe5+a7STEK8jkW4onUYuY8/06qAFuT5je7mjAqzx0eKI2tQ==}
@@ -12334,7 +12329,6 @@ packages:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
-    dev: false
 
   /jake/10.8.2:
     resolution: {integrity: sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==}
@@ -12972,7 +12966,6 @@ packages:
   /jiti/1.21.6:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
-    dev: false
 
   /jotai-devtools/0.6.2_hgjqizhc26gc665cnflpub44vy:
     resolution: {integrity: sha512-iHKYt8V2T2Gh2DtGRpvpv2daVoFoHRJXqk5/LHnhFkJy9rMQuIGo4XgVu/v1ZMSvMzwDXdU3hDOQkfQWlDErUQ==}
@@ -13477,12 +13470,10 @@ packages:
   /lilconfig/2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
-    dev: false
 
   /lilconfig/3.1.2:
     resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
     engines: {node: '>=14'}
-    dev: false
 
   /lines-and-columns/1.1.6:
     resolution: {integrity: sha512-8ZmlJFVK9iCmtLz19HpSsR8HaAMWBT284VMNednLwlIMDP2hJDCIhUp0IZ2xUcZ+Ob6BM0VvCSJwzASDM45NLQ==}
@@ -14255,7 +14246,6 @@ packages:
       any-promise: 1.3.0
       object-assign: 4.1.1
       thenify-all: 1.6.0
-    dev: false
 
   /nanoid/3.1.20:
     resolution: {integrity: sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==}
@@ -14537,7 +14527,6 @@ packages:
   /object-hash/3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: false
 
   /object-inspect/1.11.0:
     resolution: {integrity: sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==}
@@ -14851,7 +14840,6 @@ packages:
 
   /package-json-from-dist/1.0.0:
     resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
-    dev: false
 
   /pako/0.2.9:
     resolution: {integrity: sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=}
@@ -14997,6 +14985,7 @@ packages:
 
   /path-parse/1.0.6:
     resolution: {integrity: sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==}
+    dev: false
 
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
@@ -15065,11 +15054,6 @@ packages:
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
-  /picomatch/2.3.0:
-    resolution: {integrity: sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==}
-    engines: {node: '>=8.6'}
-    dev: true
-
   /picomatch/2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -15207,7 +15191,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.2
-    dev: false
 
   /postcss-js/4.0.1_postcss@8.4.27:
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@@ -15217,7 +15200,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.27
-    dev: false
 
   /postcss-load-config/4.0.2_postcss@8.4.27:
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
@@ -15234,7 +15216,6 @@ packages:
       lilconfig: 3.1.2
       postcss: 8.4.27
       yaml: 2.5.1
-    dev: false
 
   /postcss-merge-idents/2.1.7:
     resolution: {integrity: sha1-TFUwMTwI4dWzu/PSu8dH4njuonA=}
@@ -15342,7 +15323,6 @@ packages:
     dependencies:
       postcss: 8.4.27
       postcss-selector-parser: 6.1.2
-    dev: false
 
   /postcss-normalize-charset/1.1.1:
     resolution: {integrity: sha1-757nEhLX/nWceO0WL2HtYrXLk/E=}
@@ -15401,7 +15381,6 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: false
 
   /postcss-svgo/2.1.6:
     resolution: {integrity: sha1-tt8YqmE7Zm4TPwittSGcJoSsEI0=}
@@ -15426,7 +15405,6 @@ packages:
 
   /postcss-value-parser/4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: false
 
   /postcss-zindex/2.2.0:
     resolution: {integrity: sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=}
@@ -16997,7 +16975,6 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: false
 
   /read-only-stream/2.0.0:
     resolution: {integrity: sha1-JyT9aoET1zdkrCiNQ4YnDB2/F/A=}
@@ -17262,7 +17239,7 @@ packages:
     resolution: {integrity: sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==}
     dependencies:
       is-core-module: 2.12.1
-      path-parse: 1.0.6
+      path-parse: 1.0.7
 
   /resolve/1.22.2:
     resolution: {integrity: sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==}
@@ -18475,7 +18452,6 @@ packages:
       mz: 2.7.0
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
-    dev: false
 
   /superstruct/0.8.4:
     resolution: {integrity: sha512-48Ors8IVWZm/tMr8r0Si6+mJiB7mkD7jqvIzktjJ4+EnP5tBp0qOpiM1J8sCUorKx+TXWrfb3i1UcjdD1YK/wA==}
@@ -18621,7 +18597,6 @@ packages:
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
-    dev: false
 
   /tapable/1.1.3:
     resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
@@ -18737,13 +18712,11 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       thenify: 3.3.1
-    dev: false
 
   /thenify/3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
     dependencies:
       any-promise: 1.3.0
-    dev: false
 
   /three/0.139.2:
     resolution: {integrity: sha512-gV7q7QY8rogu7HLFZR9cWnOQAUedUhu2WXAnpr2kdXZP9YDKsG/0ychwQvWkZN5PlNw9mv5MoCTin6zNTXoONg==}
@@ -18938,7 +18911,6 @@ packages:
 
   /ts-interface-checker/0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: false
 
   /ts-loader/5.3.3_typescript@5.5.4:
     resolution: {integrity: sha512-KwF1SplmOJepnoZ4eRIloH/zXL195F51skt7reEsS6jvDqzgc/YSbz9b8E07GxIUwLXdcD4ssrJu6v8CwaTafA==}
@@ -20139,7 +20111,6 @@ packages:
     resolution: {integrity: sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==}
     engines: {node: '>= 14'}
     hasBin: true
-    dev: false
 
   /yargs-parser/20.2.4:
     resolution: {integrity: sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==}
diff --git a/editor/src/core/property-controls/property-controls-local.ts b/editor/src/core/property-controls/property-controls-local.ts
index c4a4beac7048..ffd05dff6e82 100644
--- a/editor/src/core/property-controls/property-controls-local.ts
+++ b/editor/src/core/property-controls/property-controls-local.ts
@@ -76,7 +76,7 @@ import {
   right,
   sequenceEither,
 } from '../shared/either'
-import { assertNever } from '../shared/utils'
+import { assertNever, identity } from '../shared/utils'
 import type {
   Imports,
   ParsedTextFile,
@@ -157,73 +157,93 @@ function extendExportsWithInfo(exports: any, toImport: string): any {
   return exports
 }
 
-export type ModuleEvaluator = (moduleName: string) => any
-export function createModuleEvaluator(editor: EditorState): ModuleEvaluator {
-  return (moduleName: string) => {
-    let mutableContextRef: { current: MutableUtopiaCtxRefData } = { current: {} }
-    let topLevelComponentRendererComponents: {
-      current: MapLike<MapLike<ComponentRendererComponent>>
-    } = { current: {} }
-    const emptyMetadataContext: UiJsxCanvasContextData = {
-      current: {
-        spyValues: {
-          allElementProps: {},
-          metadata: {},
-          variablesInScope: {},
-        },
+export const createRequireFn = (
+  editor: EditorState,
+  moduleName: string,
+  transform: (result: any, absoluteFilenameOrPackage: string) => any = identity,
+) => {
+  let mutableContextRef: { current: MutableUtopiaCtxRefData } = { current: {} }
+  let topLevelComponentRendererComponents: {
+    current: MapLike<MapLike<ComponentRendererComponent>>
+  } = { current: {} }
+  const emptyMetadataContext: UiJsxCanvasContextData = {
+    current: {
+      spyValues: {
+        allElementProps: {},
+        metadata: {},
+        variablesInScope: {},
       },
-    }
+    },
+  }
 
-    let resolvedFiles: MapLike<MapLike<any>> = {}
-    let resolvedFileNames: Array<string> = [moduleName]
+  let resolvedFiles: MapLike<MapLike<any>> = {}
+  let resolvedFileNames: Array<string> = [moduleName]
 
-    const requireFn = editor.codeResultCache.curriedRequireFn(editor.projectContents)
-    const resolve = editor.codeResultCache.curriedResolveFn(editor.projectContents)
+  const requireFn = editor.codeResultCache.curriedRequireFn(editor.projectContents)
+  const resolve = editor.codeResultCache.curriedResolveFn(editor.projectContents)
 
-    const customRequire = (importOrigin: string, toImport: string) => {
-      if (resolvedFiles[importOrigin] == null) {
-        resolvedFiles[importOrigin] = []
-      }
-      let resolvedFromThisOrigin = resolvedFiles[importOrigin]
-
-      const alreadyResolved = resolvedFromThisOrigin[toImport] !== undefined
-      const filePathResolveResult = alreadyResolved
-        ? left<string, string>('Already resolved')
-        : resolve(importOrigin, toImport)
-
-      forEachRight(filePathResolveResult, (filepath) => resolvedFileNames.push(filepath))
-
-      const resolvedParseSuccess: Either<string, MapLike<any>> = attemptToResolveParsedComponents(
-        resolvedFromThisOrigin,
-        toImport,
-        editor.projectContents,
-        customRequire,
-        mutableContextRef,
-        topLevelComponentRendererComponents,
-        moduleName,
-        editor.canvas.base64Blobs,
-        editor.hiddenInstances,
-        editor.displayNoneInstances,
-        emptyMetadataContext,
-        NO_OP,
-        false,
-        filePathResolveResult,
-        null,
-      )
-      const result = foldEither(
-        () => {
-          // We did not find a ParseSuccess, fallback to standard require Fn
-          return requireFn(importOrigin, toImport, false)
-        },
-        (scope) => {
-          // Return an artificial exports object that contains our ComponentRendererComponents
-          return scope
-        },
-        resolvedParseSuccess,
-      )
-      const absoluteFilenameOrPackage = defaultEither(toImport, filePathResolveResult)
-      return extendExportsWithInfo(result, absoluteFilenameOrPackage)
+  const customRequire = (importOrigin: string, toImport: string) => {
+    if (resolvedFiles[importOrigin] == null) {
+      resolvedFiles[importOrigin] = []
     }
+    let resolvedFromThisOrigin = resolvedFiles[importOrigin]
+
+    const alreadyResolved = resolvedFromThisOrigin[toImport] !== undefined
+    const filePathResolveResult = alreadyResolved
+      ? left<string, string>('Already resolved')
+      : resolve(importOrigin, toImport)
+
+    forEachRight(filePathResolveResult, (filepath) => resolvedFileNames.push(filepath))
+
+    const resolvedParseSuccess: Either<string, MapLike<any>> = attemptToResolveParsedComponents(
+      resolvedFromThisOrigin,
+      toImport,
+      editor.projectContents,
+      customRequire,
+      mutableContextRef,
+      topLevelComponentRendererComponents,
+      moduleName,
+      editor.canvas.base64Blobs,
+      editor.hiddenInstances,
+      editor.displayNoneInstances,
+      emptyMetadataContext,
+      NO_OP,
+      false,
+      filePathResolveResult,
+      null,
+    )
+    const result = foldEither(
+      () => {
+        // We did not find a ParseSuccess, fallback to standard require Fn
+        return requireFn(importOrigin, toImport, false)
+      },
+      (scope) => {
+        // Return an artificial exports object that contains our ComponentRendererComponents
+        return scope
+      },
+      resolvedParseSuccess,
+    )
+    const absoluteFilenameOrPackage = defaultEither(toImport, filePathResolveResult)
+    return transform(result, absoluteFilenameOrPackage)
+  }
+
+  return {
+    customRequire,
+    emptyMetadataContext,
+    mutableContextRef,
+    topLevelComponentRendererComponents,
+  }
+}
+
+export type ModuleEvaluator = (moduleName: string) => any
+export function createModuleEvaluator(editor: EditorState): ModuleEvaluator {
+  return (moduleName: string) => {
+    const {
+      customRequire,
+      emptyMetadataContext,
+      mutableContextRef,
+      topLevelComponentRendererComponents,
+    } = createRequireFn(editor, moduleName, extendExportsWithInfo)
     return createExecutionScope(
       moduleName,
       customRequire,
diff --git a/editor/src/core/tailwind/tailwind-compilation.ts b/editor/src/core/tailwind/tailwind-compilation.ts
index 9e030e1b83ad..78f5ef83eae0 100644
--- a/editor/src/core/tailwind/tailwind-compilation.ts
+++ b/editor/src/core/tailwind/tailwind-compilation.ts
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { TailwindConfig, Tailwindcss } from '@mhsdesign/jit-browser-tailwindcss'
 import { createTailwindcss } from '@mhsdesign/jit-browser-tailwindcss'
-import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
+import type { ProjectContentTreeRoot, TextFile, TextFileContents } from 'utopia-shared/src/types'
 import { getProjectFileByFilePath, walkContentsTree } from '../../components/assets'
 import { interactionSessionIsActive } from '../../components/canvas/canvas-strategies/interaction-state'
 import { CanvasContainerID } from '../../components/canvas/canvas-types'
@@ -16,6 +16,31 @@ import type { RequireFn } from '../shared/npm-dependency-types'
 import { TailwindConfigPath } from './tailwind-config'
 import { ElementsToRerenderGLOBAL } from '../../components/canvas/ui-jsx-canvas'
 import { isFeatureEnabled } from '../../utils/feature-switches'
+import type { Config } from 'tailwindcss/types/config'
+import type { EditorState } from '../../components/editor/store/editor-state'
+import { createRequireFn } from '../property-controls/property-controls-local'
+
+const LatestConfig: { current: { code: string; config: Config } | null } = { current: null }
+export function getTailwindConfigCached(editorState: EditorState): Config | null {
+  const tailwindConfig = getProjectFileByFilePath(editorState.projectContents, TailwindConfigPath)
+  if (tailwindConfig == null || tailwindConfig.type !== 'TEXT_FILE') {
+    return null
+  }
+  const cached =
+    LatestConfig.current == null || LatestConfig.current.code !== tailwindConfig.fileContents.code
+      ? null
+      : LatestConfig.current.config
+
+  if (cached != null) {
+    return cached
+  }
+  // FIXME this should use a shared long-lived require function instead of creating a brand new one
+  const { customRequire } = createRequireFn(editorState, TailwindConfigPath)
+  const config = importDefault(customRequire('/', TailwindConfigPath)) as Config
+  LatestConfig.current = { code: tailwindConfig.fileContents.code, config: config }
+
+  return config
+}
 
 const TAILWIND_INSTANCE: { current: Tailwindcss | null } = { current: null }
 
diff --git a/editor/src/core/tailwind/tailwind.spec.browser2.tsx b/editor/src/core/tailwind/tailwind.spec.browser2.tsx
index 8040db905fdc..b95956046c32 100644
--- a/editor/src/core/tailwind/tailwind.spec.browser2.tsx
+++ b/editor/src/core/tailwind/tailwind.spec.browser2.tsx
@@ -1,88 +1,6 @@
 import { renderTestEditorWithModel } from '../../components/canvas/ui-jsx.test-utils'
-import { createModifiedProject } from '../../sample-projects/sample-project-utils.test-utils'
 import { setFeatureForBrowserTestsUseInDescribeBlockOnly } from '../../utils/utils.test-utils'
-import { wait } from '../model/performance-scripts'
-
-const Project = createModifiedProject({
-  '/utopia/storyboard.js': `import { Scene, Storyboard } from 'utopia-api'
-
-export var storyboard = (
-  <Storyboard data-uid='sb'>
-    <Scene
-      data-uid='scene'
-      id='playground-scene'
-      commentId='playground-scene'
-      className='absolute top-[100px] left-[200px] w-[700px] h-[1050px]'
-      data-label='Playground'
-    >
-      <div data-uid='absolute' data-testid='absolute' className='absolute top-[33px] left-[40px] w-[620px] h-[177px] bg-tahiti'>
-        <div data-uid='absolute-child' data-testid='absolute-child' className='absolute top-4 left-4 w-10 h-10 bg-midnight' />
-      </div>
-      <div data-uid='flex' data-testid='flex' className='absolute bg-metal left-10 top-[250px] w-[500px] h-max flex flex-row gap-10 px-5 py-[30px] items-center justify-start'>
-        <div data-uid='flex-child-1' data-testid='flex-child-1' className='bg-silver w-32 h-32' />
-        <div data-uid='flex-child-2' data-testid='flex-child-2' className='bg-silver w-32 h-32' />
-      </div>
-      <div data-uid='grid' data-testid='grid' className='absolute left-10 top-[450px] bg-bermuda w-[600px] h-[250px] grid grid-cols-4 grid-rows-4 gap-4'>
-        <div data-uid='grid-child-1' data-testid='grid-child-1' className='bg-bubble-gum m-2' />
-        <div data-uid='grid-child-2' data-testid='grid-child-2' className='bg-bubble-gum m-2 row-start-2 col-span-3' />
-        <div data-uid='grid-child-3' data-testid='grid-child-3' className='bg-bubble-gum m-2 row-start-3 col-start-4' />
-        <div data-uid='grid-child-4' data-testid='grid-child-4' className='bg-bubble-gum m-2' />
-      </div>
-      <div data-uid='text-shadow' data-testid='text-shadow' className='absolute left-10 top-[750px] bg-bermuda w-[600px] h-[250px] flex flex-col'>
-        <span data-uid='text-shadow-1' data-testid='text-shadow-1' className='text-4xl text-shadow'>Text Shadow</span>
-        <span data-uid='text-shadow-2' data-testid='text-shadow-2' class='text-3xl text-shadow-md'>This is a medium text shadow example</span>
-        <span data-uid='text-shadow-3' data-testid='text-shadow-3' class='text-2xl text-shadow-lg'>This is a large text shadow example</span>
-        <span data-uid='text-shadow-4' data-testid='text-shadow-4' class='text-xl text-shadow-none'>This has no text shadow</span>
-      </div>
-    </Scene>
-  </Storyboard>
-)
-`,
-  '/src/app.css': `
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-`,
-  'tailwind.config.js': `
-const Tailwind = {
-  theme: {
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      white: '#ffffff',
-      purple: '#3f3cbb',
-      midnight: '#121063',
-      metal: '#565584',
-      tahiti: '#3ab7bf',
-      silver: '#ecebff',
-      'bubble-gum': '#ff77e9',
-      bermuda: '#78dcca',
-    },
-  },
-  plugins: [
-    function ({ addUtilities }) {
-      const newUtilities = {
-        '.text-shadow': {
-          textShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)',
-        },
-        '.text-shadow-md': {
-          textShadow: '3px 3px 6px rgba(0, 0, 0, 0.2)',
-        },
-        '.text-shadow-lg': {
-          textShadow: '4px 4px 8px rgba(0, 0, 0, 0.3)',
-        },
-        '.text-shadow-none': {
-          textShadow: 'none',
-        },
-      }
-
-      addUtilities(newUtilities, ['responsive', 'hover'])
-    },
-  ],
-}
-export default Tailwind
-`,
-})
+import { Project } from './tailwind.test-utils'
 
 describe('rendering tailwind projects in the editor', () => {
   setFeatureForBrowserTestsUseInDescribeBlockOnly('Tailwind', true)
diff --git a/editor/src/core/tailwind/tailwind.spec.ts b/editor/src/core/tailwind/tailwind.spec.ts
new file mode 100644
index 000000000000..dcaa26fb51c2
--- /dev/null
+++ b/editor/src/core/tailwind/tailwind.spec.ts
@@ -0,0 +1,72 @@
+import { Project, TailwindConfigFileContents } from './tailwind.test-utils'
+import { renderTestEditorWithModel } from '../../components/canvas/ui-jsx.test-utils'
+import { TailwindConfigPath } from './tailwind-config'
+import { updateFromCodeEditor } from '../../components/editor/actions/actions-from-vscode'
+import { getTailwindConfigCached } from './tailwind-compilation'
+
+describe('tailwind config file in the editor', () => {
+  it('is set during editor load', async () => {
+    const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
+
+    expect(getTailwindConfigCached(editor.getEditorState().editor)).toMatchInlineSnapshot(`
+      Object {
+        "plugins": Array [
+          [Function],
+        ],
+        "theme": Object {
+          "colors": Object {
+            "bermuda": "#78dcca",
+            "bubble-gum": "#ff77e9",
+            "current": "currentColor",
+            "metal": "#565584",
+            "midnight": "#121063",
+            "purple": "#3f3cbb",
+            "silver": "#ecebff",
+            "tahiti": "#3ab7bf",
+            "transparent": "transparent",
+            "white": "#ffffff",
+          },
+        },
+      }
+    `)
+  })
+  it('is updated in the editor state when the tailwind config is updated', async () => {
+    const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
+
+    await editor.dispatch(
+      [
+        updateFromCodeEditor(
+          TailwindConfigPath,
+          TailwindConfigFileContents,
+          `
+const Tailwind = {
+    theme: {
+      colors: {
+        transparent: 'transparent',
+        current: 'currentColor',
+        white: '#ffffff',
+      },
+    },
+    plugins: [ ],
+  }
+  export default Tailwind
+`,
+        ),
+      ],
+      true,
+    )
+
+    expect(getTailwindConfigCached(editor.getEditorState().editor)).toMatchInlineSnapshot(`
+      Object {
+        "plugins": Array [],
+        "theme": Object {
+          "colors": Object {
+            "current": "currentColor",
+            "transparent": "transparent",
+            "white": "#ffffff",
+          },
+        },
+      }
+    `)
+  })
+})
diff --git a/editor/src/core/tailwind/tailwind.test-utils.ts b/editor/src/core/tailwind/tailwind.test-utils.ts
new file mode 100644
index 000000000000..80b5952ef0ab
--- /dev/null
+++ b/editor/src/core/tailwind/tailwind.test-utils.ts
@@ -0,0 +1,85 @@
+import { createModifiedProject } from '../../sample-projects/sample-project-utils.test-utils'
+import { TailwindConfigPath } from './tailwind-config'
+
+export const TailwindConfigFileContents = `
+const Tailwind = {
+    theme: {
+      colors: {
+        transparent: 'transparent',
+        current: 'currentColor',
+        white: '#ffffff',
+        purple: '#3f3cbb',
+        midnight: '#121063',
+        metal: '#565584',
+        tahiti: '#3ab7bf',
+        silver: '#ecebff',
+        'bubble-gum': '#ff77e9',
+        bermuda: '#78dcca',
+      },
+    },
+    plugins: [
+      function ({ addUtilities }) {
+        const newUtilities = {
+          '.text-shadow': {
+            textShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)',
+          },
+          '.text-shadow-md': {
+            textShadow: '3px 3px 6px rgba(0, 0, 0, 0.2)',
+          },
+          '.text-shadow-lg': {
+            textShadow: '4px 4px 8px rgba(0, 0, 0, 0.3)',
+          },
+          '.text-shadow-none': {
+            textShadow: 'none',
+          },
+        }
+  
+        addUtilities(newUtilities, ['responsive', 'hover'])
+      },
+    ],
+  }
+  export default Tailwind
+`
+
+export const Project = createModifiedProject({
+  '/utopia/storyboard.js': `import { Scene, Storyboard } from 'utopia-api'
+  
+  export var storyboard = (
+    <Storyboard data-uid='sb'>
+      <Scene
+        data-uid='scene'
+        id='playground-scene'
+        commentId='playground-scene'
+        className='absolute top-[100px] left-[200px] w-[700px] h-[1050px]'
+        data-label='Playground'
+      >
+        <div data-uid='absolute' data-testid='absolute' className='absolute top-[33px] left-[40px] w-[620px] h-[177px] bg-tahiti'>
+          <div data-uid='absolute-child' data-testid='absolute-child' className='absolute top-4 left-4 w-10 h-10 bg-midnight' />
+        </div>
+        <div data-uid='flex' data-testid='flex' className='absolute bg-metal left-10 top-[250px] w-[500px] h-max flex flex-row gap-10 px-5 py-[30px] items-center justify-start'>
+          <div data-uid='flex-child-1' data-testid='flex-child-1' className='bg-silver w-32 h-32' />
+          <div data-uid='flex-child-2' data-testid='flex-child-2' className='bg-silver w-32 h-32' />
+        </div>
+        <div data-uid='grid' data-testid='grid' className='absolute left-10 top-[450px] bg-bermuda w-[600px] h-[250px] grid grid-cols-4 grid-rows-4 gap-4'>
+          <div data-uid='grid-child-1' data-testid='grid-child-1' className='bg-bubble-gum m-2' />
+          <div data-uid='grid-child-2' data-testid='grid-child-2' className='bg-bubble-gum m-2 row-start-2 col-span-3' />
+          <div data-uid='grid-child-3' data-testid='grid-child-3' className='bg-bubble-gum m-2 row-start-3 col-start-4' />
+          <div data-uid='grid-child-4' data-testid='grid-child-4' className='bg-bubble-gum m-2' />
+        </div>
+        <div data-uid='text-shadow' data-testid='text-shadow' className='absolute left-10 top-[750px] bg-bermuda w-[600px] h-[250px] flex flex-col'>
+          <span data-uid='text-shadow-1' data-testid='text-shadow-1' className='text-4xl text-shadow'>Text Shadow</span>
+          <span data-uid='text-shadow-2' data-testid='text-shadow-2' class='text-3xl text-shadow-md'>This is a medium text shadow example</span>
+          <span data-uid='text-shadow-3' data-testid='text-shadow-3' class='text-2xl text-shadow-lg'>This is a large text shadow example</span>
+          <span data-uid='text-shadow-4' data-testid='text-shadow-4' class='text-xl text-shadow-none'>This has no text shadow</span>
+        </div>
+      </Scene>
+    </Storyboard>
+  )
+  `,
+  '/src/app.css': `
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+  `,
+  [TailwindConfigPath]: TailwindConfigFileContents,
+})
diff --git a/editor/webpack.config.js b/editor/webpack.config.js
index f0c7d9af5995..c236883873db 100644
--- a/editor/webpack.config.js
+++ b/editor/webpack.config.js
@@ -189,6 +189,7 @@ const config = {
     extensions: ['.ts', '.tsx', '.js', '.json', '.ttf'],
     symlinks: true, // We set this to false as we have symlinked some common code from the website project
     alias: {
+      'tailwindcss/resolveConfig': 'tailwindcss/resolveConfig.js',
       uuiui: srcPath('uuiui'),
       'worker-imports': path.resolve(__dirname, 'src/core/workers/worker-import-utils.ts'),
       'uuiui-deps': srcPath('uuiui-deps'),

From 4cdb407e2ef3928182253ac7b57c386e3827e00f Mon Sep 17 00:00:00 2001
From: McKayla Lankau <lankaukk@yahoo.com>
Date: Wed, 9 Oct 2024 06:12:16 -0400
Subject: [PATCH 117/272] Grid controls design (#6489)

Making some improvements to the visual design of canvas grid controls

- grid gap handles and canvas labels, are orange to match the orange
overlay pattern
- grid row/column resize handles are now labels with their width
(replacing the <-> arrows)
- grid row/column area names are now inside the highlight overlay when
being resized
- grid/row highlight is now a blue pattern instead of pink


![image](https://github.com/user-attachments/assets/7dd6256c-bfa9-4da1-93d1-a454fbc52c8a)

![image](https://github.com/user-attachments/assets/09fe10ed-0af5-469a-9a20-f208403f7033)

![image](https://github.com/user-attachments/assets/918ecc27-6d16-453a-a87d-edb90ecd6c89)

![image](https://github.com/user-attachments/assets/88de5103-0f81-4025-aa85-6b1caa94b80a)

---------

Co-authored-by: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
---
 .../strategies/set-flex-gap-strategy.tsx      |  2 +-
 .../strategies/set-grid-gap-strategy.tsx      |  2 +-
 .../canvas/controls/grid-controls.tsx         | 78 ++++++++-----------
 .../controls/select-mode/controls-common.tsx  |  2 +-
 .../controls/select-mode/flex-gap-control.tsx |  4 +-
 .../controls/select-mode/grid-gap-control.tsx |  4 +-
 editor/src/uuiui/styles/theme/dark.ts         |  4 +-
 editor/src/uuiui/styles/theme/light.ts        |  4 +-
 8 files changed, 45 insertions(+), 55 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
index 15b012d2b451..e247092ba7be 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
@@ -143,7 +143,7 @@ export const setFlexGapStrategy: CanvasStrategyFactory = (
         control: FloatingIndicator,
         props: {
           ...props,
-          color: colorTheme.brandNeonPink.value,
+          color: colorTheme.brandNeonOrange.value,
         },
         key: 'padding-value-indicator-control',
         show: 'visible-except-when-other-strategy-is-active',
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
index e20678016012..484d19455ef5 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
@@ -132,7 +132,7 @@ export const setGridGapStrategy: CanvasStrategyFactory = (
         control: FloatingIndicator,
         props: {
           ...maybeIndicatorProps,
-          color: colorTheme.brandNeonPink.value,
+          color: colorTheme.brandNeonOrange.value,
         },
         key: 'padding-value-indicator-control',
         show: 'visible-except-when-other-strategy-is-active',
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 176a10dd3eea..0a2ab0de5350 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -254,34 +254,22 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
         data-testid={labelId}
         style={{
           zoom: 1 / scale,
-          width: GRID_RESIZE_HANDLE_SIZE,
           height: GRID_RESIZE_HANDLE_SIZE,
-          borderRadius: '100%',
-          border: `1px solid ${colorTheme.border0.value}`,
-          boxShadow: `${colorTheme.canvasControlsSizeBoxShadowColor50.value} 0px 0px
-              1px, ${colorTheme.canvasControlsSizeBoxShadowColor20.value} 0px 1px 2px 2px`,
-          background: colorTheme.white.value,
+          borderRadius: 3,
+          padding: '0 4px',
+          border: `.1px solid ${colorTheme.white.value}`,
+          background: colorTheme.primary.value,
+          color: colorTheme.white.value,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           cursor: gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start'),
-          fontSize: 8,
           pointerEvents: 'initial',
         }}
-        css={{
-          opacity: props.resizing !== 'not-resizing' ? 1 : 0.5,
-          ':hover': {
-            opacity: 1,
-          },
-        }}
         onMouseDown={mouseDownHandler}
         onMouseMove={onMouseMove}
       >
-        {props.axis === 'row' ? '↕' : '↔'}
-        {when(
-          props.dimension.areaName != null,
-          <span style={{ position: 'absolute', top: 12 }}>{props.dimension.areaName}</span>,
-        )}
+        {getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)}
       </div>
       {when(
         props.resizing !== 'not-resizing',
@@ -305,37 +293,34 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
             justifyContent: 'center',
             border: `1px solid ${
               props.resizeLocked
-                ? colorTheme.brandNeonPink10.value
+                ? colorTheme.primary10.value
                 : props.resizing === 'resize-target'
-                ? colorTheme.brandNeonPink.value
-                : colorTheme.brandNeonPink60.value
+                ? colorTheme.primary.value
+                : colorTheme.primary50.value
             }`,
             ...(props.resizeLocked
-              ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.brandNeonPink10.value, scale)
+              ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.primary10.value, scale)
               : props.resizing === 'resize-target'
-              ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.brandNeonPink60.value, scale)
-              : UtopiaStyles.backgrounds.stripedBackground(
-                  colorTheme.brandNeonPink10.value,
-                  scale,
-                )),
+              ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.primary50.value, scale)
+              : UtopiaStyles.backgrounds.stripedBackground(colorTheme.primary10.value, scale)),
           }}
         >
-          <CanvasLabel
-            value={getLabelForAxis(
-              props.dimension,
-              props.dimensionIndex,
-              props.fromPropsAxisValues,
-            )}
-            scale={scale}
-            color={
-              props.resizeLocked
-                ? colorTheme.brandNeonPink10.value
-                : props.resizing === 'resize-target'
-                ? colorTheme.brandNeonPink.value
-                : colorTheme.brandNeonPink60.value
-            }
-            textColor={colorTheme.white.value}
-          />
+          {when(
+            props.dimension.areaName != null,
+            <div
+              style={{
+                position: 'absolute',
+                color: colorTheme.primary.value,
+                background: colorTheme.white.value,
+                top: 0,
+                left: 0,
+                padding: '0 4px',
+                borderRadius: '0 0 3px 0',
+              }}
+            >
+              {props.dimension.areaName}
+            </div>,
+          )}
         </div>,
       )}
     </div>
@@ -948,7 +933,8 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
           const countedColumn = Math.floor(cell % grid.columns) + 1
           const id = gridCellTargetId(grid.elementPath, countedRow, countedColumn)
           const borderID = `${id}-border`
-          const dotgridColor = activelyDraggingOrResizingCell != null ? `#00000033` : 'transparent'
+          const dotgridColor =
+            activelyDraggingOrResizingCell != null ? colorTheme.blackOpacity35.value : 'transparent'
 
           const isActiveCell =
             countedColumn === currentHoveredCell?.column && countedRow === currentHoveredCell?.row
@@ -956,7 +942,7 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
           const borderColor =
             isActiveCell && targetsAreCellsWithPositioning
               ? colorTheme.brandNeonPink.value
-              : `#00000033`
+              : colorTheme.blackOpacity35.value
           return (
             <div
               key={id}
@@ -1335,7 +1321,7 @@ const AbsoluteDistanceIndicators = React.memo(
       return null
     }
 
-    const backgroundColor = colorTheme.brandNeonPink.value
+    const backgroundColor = colorTheme.primary.value
     const dashedBorder = `1px dashed ${backgroundColor}`
 
     return (
diff --git a/editor/src/components/canvas/controls/select-mode/controls-common.tsx b/editor/src/components/canvas/controls/select-mode/controls-common.tsx
index d625dcc0fb06..7010cde16fe0 100644
--- a/editor/src/components/canvas/controls/select-mode/controls-common.tsx
+++ b/editor/src/components/canvas/controls/select-mode/controls-common.tsx
@@ -104,7 +104,7 @@ interface CanvasLabelProps {
   scale: number
   color: string
   textColor: string
-  value: string | number
+  value: string | number | null
   onMouseDown?: React.MouseEventHandler
   testId?: string
 }
diff --git a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
index ee073c9b828a..0e83aff83ffb 100644
--- a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
@@ -383,7 +383,7 @@ const GapControlSegment = React.memo<GapControlSegmentProps>((props) => {
               <CanvasLabel
                 value={printCSSNumber(gapValue, null)}
                 scale={scale}
-                color={colorTheme.brandNeonPink.value}
+                color={colorTheme.brandNeonOrange.value}
                 textColor={colorTheme.white.value}
               />,
             )}
@@ -391,7 +391,7 @@ const GapControlSegment = React.memo<GapControlSegmentProps>((props) => {
           <PillHandle
             width={width}
             height={height}
-            pillColor={colorTheme.brandNeonPink.value}
+            pillColor={colorTheme.brandNeonOrange.value}
             borderWidth={borderWidth}
           />
         </div>
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
index 5cf6af9f6779..adca71944cc3 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
@@ -452,7 +452,7 @@ function GridGapHandle({
           <CanvasLabel
             value={printCSSNumber(gapValue, null)}
             scale={scale}
-            color={colorTheme.brandNeonPink.value}
+            color={colorTheme.brandNeonOrange.value}
             textColor={colorTheme.white.value}
           />,
         )}
@@ -460,7 +460,7 @@ function GridGapHandle({
       <PillHandle
         width={width}
         height={height}
-        pillColor={colorTheme.brandNeonPink.value}
+        pillColor={colorTheme.brandNeonOrange.value}
         borderWidth={borderWidth}
       />
     </div>
diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
index 3081003c09c7..63c1564223f5 100644
--- a/editor/src/uuiui/styles/theme/dark.ts
+++ b/editor/src/uuiui/styles/theme/dark.ts
@@ -20,6 +20,7 @@ const darkBase = {
   brandNeonPink10: createUtopiColor('oklch(78.64% 0.237 327.81 / 10%)'),
   brandNeonPink60: createUtopiColor('oklch(78.64% 0.237 327.81 / 50%)'),
   brandNeonGreen: createUtopiColor('oklch(86.6% 0.27 158.6)'),
+  brandNeonOrange: createUtopiColor('oklch(79% 0.19 70)'),
   green: createUtopiColor('oklch(88% 0.2535 150)'),
   green10: createUtopiColor('oklch(88% 0.2535 150 / 10%)'),
   green20: createUtopiColor('oklch(88% 0.2535 150 / 20%)'),
@@ -133,6 +134,7 @@ const colorsWithOpacity = {
   whiteOpacity20: createUtopiColor('oklch(100% 0 0 /20%)'),
   whiteOpacity30: createUtopiColor('oklch(100% 0 0 /30%)'),
   whiteOpacity35: createUtopiColor('oklch(100% 0 0 /35%)'),
+  blackOpacity35: createUtopiColor('oklch(0% 0 0 / 35%)'),
   canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(255,255,255,0.20)'),
   canvasControlsSizeBoxShadowColor50: createUtopiColor('rgba(255,255,255,0.5)'),
   neutralInvertedBackground10: createUtopiColor('rgba(217, 220, 227, 0.1)'),
@@ -266,7 +268,7 @@ const darkTheme: typeof light = {
   codeEditorGrid: createUtopiColor('#6d705b'),
 
   // Gap controls
-  gapControlsBg: darkBase.brandNeonGreen,
+  gapControlsBg: darkBase.brandNeonOrange,
 }
 
 export const dark = enforceUtopiColorTheme(darkTheme)
diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts
index 2c14f9b169d5..0063da12508d 100644
--- a/editor/src/uuiui/styles/theme/light.ts
+++ b/editor/src/uuiui/styles/theme/light.ts
@@ -20,6 +20,7 @@ const lightBase = {
   brandNeonPink10: createUtopiColor('oklch(72.53% 0.353 331.69 / 10%)'),
   brandNeonPink60: createUtopiColor('oklch(72.53% 0.353 331.69 / 30%)'),
   brandNeonGreen: createUtopiColor('oklch(86.6% 0.27 158.6)'),
+  brandNeonOrange: createUtopiColor('oklch(79% 0.19 70)'),
   green: createUtopiColor('oklch(64.6% 0.17 150.6)'),
   green10: createUtopiColor('oklch(64.6% 0.17 150.6 / 10%)'),
   green20: createUtopiColor('oklch(64.6% 0.17 150.6 / 20%)'),
@@ -134,6 +135,7 @@ const colorsWithOpacity = {
   whiteOpacity20: createUtopiColor('oklch(100% 0 0 /20%)'),
   whiteOpacity30: createUtopiColor('oklch(100% 0 0 /30%)'),
   whiteOpacity35: createUtopiColor('oklch(100% 0 0 /35%)'),
+  blackOpacity35: createUtopiColor('oklch(0% 0 0 / 35%)'),
   canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(0,0,0,0.20)'),
   canvasControlsSizeBoxShadowColor50: createUtopiColor('rgba(0,0,0,0.5)'),
   neutralInvertedBackground10: createUtopiColor('hsla(0,0%,0%,0.1)'),
@@ -266,7 +268,7 @@ const lightTheme = {
   codeEditorGrid: createUtopiColor('#6d705b'),
 
   // Gap controls
-  gapControlsBg: createUtopiColor('#FFA500'),
+  gapControlsBg: lightBase.brandNeonOrange,
 }
 
 // all values in light must be of the type UtopiColor! This will break if you made a mistake.

From 37f1e75a0ef855aa3625f8c7f290df2eded04414 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:40:12 +0200
Subject: [PATCH 118/272] Use `auto` as value for Auto Flow dropdown (#6504)

**Problem:**

The `Auto Flow` dropdown should show `Auto` as its label instead of
`Unset` when the dropdown is closed, but still show `Unset` if the
dropdown is open _and_ the current value is not `auto` (or not set).

**Fix:**


https://github.com/user-attachments/assets/99bbfe1e-78f2-4512-afbb-a598985b0a0f

Fixes #6503
---
 .../src/components/inspector/flex-section.tsx |  6 ++--
 editor/src/uuiui/radix-components.tsx         | 35 ++++++++++++++++---
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 6eed0980a59a..8afca94bc45f 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -967,8 +967,8 @@ function selectOption(value: GridAutoFlow) {
 }
 
 const unsetSelectOption = regularRadixSelectOption({
-  label: 'unset',
-  value: 'unset',
+  label: (isOpen, currentValue) => (isOpen && currentValue !== 'auto' ? 'unset' : 'auto'),
+  value: 'auto',
   placeholder: true,
 })
 
@@ -1026,7 +1026,7 @@ const AutoFlowControl = React.memo(() => {
         selectededViewsRef.current.map((path) =>
           applyCommandsAction([
             updateBulkProperties('always', path, [
-              value === 'unset'
+              value === 'auto'
                 ? propertyToDelete(PP.create('style', 'gridAutoFlow'))
                 : propertyToSet(PP.create('style', 'gridAutoFlow'), value),
             ]),
diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx
index ad8787c65c6d..86ed787124af 100644
--- a/editor/src/uuiui/radix-components.tsx
+++ b/editor/src/uuiui/radix-components.tsx
@@ -228,7 +228,7 @@ Separator.displayName = 'Separator'
 type RegularRadixSelectOption = {
   type: 'REGULAR'
   value: string
-  label: string
+  label: string | ((isOpen: boolean, currentValue: string | null) => string)
   icon?: IcnProps
   placeholder?: boolean
 }
@@ -254,6 +254,20 @@ export function separatorRadixSelectOption(): Separator {
 
 export type RadixSelectOption = RegularRadixSelectOption | Separator
 
+function optionLabelToString(
+  option: RegularRadixSelectOption | null,
+  isOpen: boolean,
+  currentValue: string | null,
+): string | null {
+  if (option == null) {
+    return null
+  }
+
+  const label = typeof option.label === 'string' ? option.label : option.label(isOpen, currentValue)
+
+  return `${label.charAt(0).toUpperCase()}${label.slice(1)}`
+}
+
 export const RadixSelect = React.memo(
   (props: {
     id: string
@@ -269,11 +283,24 @@ export const RadixSelect = React.memo(
       e.stopPropagation()
     }, [])
 
+    const { onOpenChange: propsOnOpenChange } = props
+
+    const [isOpen, setIsOpen] = React.useState(false)
+    const onOpenChange = React.useCallback(
+      (open: boolean) => {
+        setIsOpen(open)
+        propsOnOpenChange?.(open)
+      },
+      [propsOnOpenChange],
+    )
+
+    const valueLabel = optionLabelToString(props.value ?? null, isOpen, props.value?.value ?? null)
+
     return (
       <Select.Root
         value={props.value?.value}
         onValueChange={props.onValueChange}
-        onOpenChange={props.onOpenChange}
+        onOpenChange={onOpenChange}
       >
         <Select.Trigger
           style={{
@@ -297,7 +324,7 @@ export const RadixSelect = React.memo(
             },
           }}
         >
-          <Select.Value placeholder={props.value?.label} />
+          <Select.Value placeholder={valueLabel} />
           <Select.Icon style={{ width: 12, height: 12 }}>
             <SmallerIcons.ExpansionArrowDown />
           </Select.Icon>
@@ -339,7 +366,7 @@ export const RadixSelect = React.memo(
                   )
                 }
 
-                const label = `${option.label.charAt(0).toUpperCase()}${option.label.slice(1)}`
+                const label = optionLabelToString(option, isOpen, props.value?.value ?? null)
                 return (
                   <Select.Item
                     key={`select-option-${props.id}-${index}`}

From 9ab108f2b43149210fe74b1a6bdbf19bac521f49 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:50:45 +0100
Subject: [PATCH 119/272] performance(editor) Switch Event Handlers 2.0 (#6469)

- Switched lots of event handlers from onClick to onMouseDown, along
with updating the name of props if those use that naming.
- Added `onMouseDown` handler that stops propagation to the
react-contextify menu, so that the mouse down doesn't pass through it
and activate things underneath the menu.
- Added `stopPropagation` call to the `onMouseDown` of the navigator so
that the event doesn't pass through to the canvas.
- Removed `stopPropagation` and `preventDefault` calls in
`NavigatorRowClickableWrapper` so that the event can still trigger
dragging.
---
 .../components/canvas/design-panel-root.tsx   | 34 ++++++++---------
 .../src/components/context-menu-wrapper.tsx   | 12 +++++-
 ...spector-end-to-end-tests.spec.browser2.tsx |  8 ++--
 .../components/inspector/section-header.tsx   |  2 +-
 .../component-section/component-section.tsx   |  4 +-
 .../header-section/target-selector.tsx        |  4 +-
 .../layout-section/list-source-cartouche.tsx  | 13 ++++---
 .../components/navigator/left-pane/index.tsx  | 34 ++++++++---------
 .../navigator-condensed-entry.tsx             | 12 +++---
 .../navigator-item-clickable-wrapper.tsx      | 17 ++++-----
 .../navigator-item-components.tsx             | 37 +++++++++----------
 .../navigator-item/navigator-item.tsx         | 29 ++++++++-------
 ...nent-picker-context-menu.spec.browser2.tsx |  9 +++--
 .../navigator/navigator.spec.browser2.tsx     |  9 +++--
 editor/src/components/navigator/navigator.tsx |  5 ++-
 15 files changed, 122 insertions(+), 107 deletions(-)

diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
index 13d381968d01..d9f877e33fc3 100644
--- a/editor/src/components/canvas/design-panel-root.tsx
+++ b/editor/src/components/canvas/design-panel-root.tsx
@@ -134,7 +134,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
   )
   const dispatch = useDispatch()
 
-  const onClickTab = React.useCallback(
+  const onMouseDownTab = React.useCallback(
     (menuTab: RightMenuTab) => {
       const actions: Array<EditorAction> = [EditorActions.setRightMenuTab(menuTab)]
       if (isCommentMode(editorModeRef.current) && menuTab !== RightMenuTab.Comments) {
@@ -145,21 +145,21 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
     [dispatch, editorModeRef],
   )
 
-  const onClickInsertTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Insert)
-  }, [onClickTab])
+  const onMouseDownInsertTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Insert)
+  }, [onMouseDownTab])
 
-  const onClickCommentsTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Comments)
-  }, [onClickTab])
+  const onMouseDownCommentsTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Comments)
+  }, [onMouseDownTab])
 
-  const onClickInspectorTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Inspector)
-  }, [onClickTab])
+  const onMouseDownInspectorTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Inspector)
+  }, [onMouseDownTab])
 
-  const onClickSettingsTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Settings)
-  }, [onClickTab])
+  const onMouseDownSettingsTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Settings)
+  }, [onMouseDownTab])
 
   const canComment = useCanComment()
 
@@ -200,7 +200,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
           <MenuTab
             label={'Inspector'}
             selected={selectedTab === RightMenuTab.Inspector}
-            onClick={onClickInspectorTab}
+            onMouseDown={onMouseDownInspectorTab}
           />
           {when(
             allowedToEdit,
@@ -210,7 +210,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
                 <MenuTab
                   label={'Insert'}
                   selected={selectedTab === RightMenuTab.Insert}
-                  onClick={onClickInsertTab}
+                  onMouseDown={onMouseDownInsertTab}
                 />,
               )}
             </>,
@@ -221,13 +221,13 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
               testId='comments-tab'
               label={'Comments'}
               selected={selectedTab === RightMenuTab.Comments}
-              onClick={onClickCommentsTab}
+              onMouseDown={onMouseDownCommentsTab}
             />,
           )}
           <MenuTab
             label={'Settings'}
             selected={selectedTab === RightMenuTab.Settings}
-            onClick={onClickSettingsTab}
+            onMouseDown={onMouseDownSettingsTab}
           />
         </FlexRow>
         <SimpleFlexRow
diff --git a/editor/src/components/context-menu-wrapper.tsx b/editor/src/components/context-menu-wrapper.tsx
index 42af87678d63..98e2b054ce04 100644
--- a/editor/src/components/context-menu-wrapper.tsx
+++ b/editor/src/components/context-menu-wrapper.tsx
@@ -155,8 +155,18 @@ export const ContextMenu = <T,>({ dispatch, getData, id, items }: ContextMenuPro
     [getData, dispatch, isDisabled, isHidden],
   )
 
+  const onMouseDown = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+  }, [])
+
   return (
-    <Menu key={id} id={id} animation={false} onVisibilityChange={onVisibilityChange}>
+    <Menu
+      key={id}
+      id={id}
+      animation={false}
+      onVisibilityChange={onVisibilityChange}
+      onMouseDown={onMouseDown}
+    >
       {splitItems.map((item, index) => {
         if (item?.type === 'submenu') {
           return (
diff --git a/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx b/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
index 3d9e79541755..bfbeb21cdc95 100644
--- a/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
+++ b/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
@@ -1479,12 +1479,12 @@ describe('inspector tests with real metadata', () => {
 
     await act(async () => {
       await screen.findByTestId('section-header-Advanced')
-      fireEvent.click(screen.getByTestId('section-header-Advanced'))
+      fireEvent.mouseDown(screen.getByTestId('section-header-Advanced'))
     })
 
     await act(async () => {
       await screen.findByTestId('target-selector-style')
-      fireEvent.click(screen.getByTestId('target-selector'))
+      fireEvent.mouseDown(screen.getByTestId('target-selector'))
     })
     await act(async () => {
       await screen.findByTestId('target-list-item-css')
@@ -1586,12 +1586,12 @@ describe('inspector tests with real metadata', () => {
 
     await act(async () => {
       await screen.findByTestId('section-header-Advanced')
-      fireEvent.click(screen.getByTestId('section-header-Advanced'))
+      fireEvent.mouseDown(screen.getByTestId('section-header-Advanced'))
     })
 
     await act(async () => {
       await screen.findByTestId('target-selector-style')
-      fireEvent.click(screen.getByTestId('target-selector'))
+      fireEvent.mouseDown(screen.getByTestId('target-selector'))
     })
     await act(async () => {
       await screen.findByTestId('target-list-item-css')
diff --git a/editor/src/components/inspector/section-header.tsx b/editor/src/components/inspector/section-header.tsx
index 1887359b8cd5..77719edac898 100644
--- a/editor/src/components/inspector/section-header.tsx
+++ b/editor/src/components/inspector/section-header.tsx
@@ -19,7 +19,7 @@ export function InspectorSectionHeader({
         padding: 8,
         cursor: 'pointer',
       }}
-      onClick={toggle}
+      onMouseDown={toggle}
       data-testid={`section-header-${title}`}
     >
       <div
diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
index 9fe1916b5d88..0db2eb8dd325 100644
--- a/editor/src/components/inspector/sections/component-section/component-section.tsx
+++ b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -1189,7 +1189,7 @@ interface ObjectIndicatorProps {
 const ObjectIndicator = (props: ObjectIndicatorProps) => {
   return (
     <div
-      onClick={props.toggle}
+      onMouseDown={props.toggle}
       style={{
         border: `1px solid ${colorTheme.bg3.value}`,
         paddingLeft: 2,
@@ -1579,7 +1579,7 @@ export const ComponentSectionInner = React.memo((props: ComponentSectionProps) =
             <span onClick={openInstanceFile}>Component</span>
           )}
         </FlexRow>
-        <SquareButton highlight onClick={toggleSection}>
+        <SquareButton highlight onMouseDown={toggleSection}>
           <ExpandableIndicator
             testId='component-section-expand'
             visible
diff --git a/editor/src/components/inspector/sections/header-section/target-selector.tsx b/editor/src/components/inspector/sections/header-section/target-selector.tsx
index 84a1e19dcc29..93115475a56b 100644
--- a/editor/src/components/inspector/sections/header-section/target-selector.tsx
+++ b/editor/src/components/inspector/sections/header-section/target-selector.tsx
@@ -408,10 +408,10 @@ const TargetListHeader = React.memo((props: TargetListHeaderProps) => {
         Target
       </H1>
       <SectionActionSheet className='actionsheet'>
-        <SquareButton highlight disabled={isAdding} onClick={startAdding}>
+        <SquareButton highlight disabled={isAdding} onMouseDown={startAdding}>
           <Icn category='semantic' type='cross' width={12} height={12} />
         </SquareButton>
-        <SquareButton highlight onClick={togglePathPanel}>
+        <SquareButton highlight onMouseDown={togglePathPanel}>
           <ExpandableIndicator
             testId='target-selector'
             visible
diff --git a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
index 831a8b20f88d..4771e65af340 100644
--- a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
+++ b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
@@ -100,11 +100,14 @@ const MapListSourceCartoucheInner = React.memo(
     const { popupIsOpen, DataPickerComponent, setReferenceElement, openPopup } =
       useDataPickerButton(variableNamesInScope, onPickMappedElement, pathToMappedExpression, target)
 
-    const onClick = React.useCallback(() => {
-      if (openOn === 'single-click') {
-        openPopup()
-      }
-    }, [openOn, openPopup])
+    const onClick = React.useCallback(
+      (e: React.MouseEvent) => {
+        if (openOn === 'single-click') {
+          openPopup()
+        }
+      },
+      [openOn, openPopup],
+    )
 
     const onDoubleClick = React.useCallback(() => {
       if (openOn === 'double-click') {
diff --git a/editor/src/components/navigator/left-pane/index.tsx b/editor/src/components/navigator/left-pane/index.tsx
index 286bf18cbbe5..8babed005899 100644
--- a/editor/src/components/navigator/left-pane/index.tsx
+++ b/editor/src/components/navigator/left-pane/index.tsx
@@ -48,7 +48,7 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
 
   const dispatch = useDispatch()
 
-  const onClickTab = React.useCallback(
+  const onMouseDownTab = React.useCallback(
     (menuTab: LeftMenuTab) => {
       let actions: Array<EditorAction> = []
       actions.push(setLeftMenuTab(menuTab))
@@ -57,21 +57,21 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
     [dispatch],
   )
 
-  const onClickPagesTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Pages)
-  }, [onClickTab])
+  const onMouseDownPagesTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Pages)
+  }, [onMouseDownTab])
 
-  const onClickProjectTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Project)
-  }, [onClickTab])
+  const onMouseDownProjectTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Project)
+  }, [onMouseDownTab])
 
-  const onClickNavigatorTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Navigator)
-  }, [onClickTab])
+  const onMouseDownNavigatorTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Navigator)
+  }, [onMouseDownTab])
 
-  const onClickGithubTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Github)
-  }, [onClickTab])
+  const onMouseDownGithubTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Github)
+  }, [onMouseDownTab])
 
   const isMyProject = useIsMyProject()
 
@@ -126,23 +126,23 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
                 <MenuTab
                   label={'Pages'}
                   selected={selectedTab === LeftMenuTab.Pages}
-                  onClick={onClickPagesTab}
+                  onMouseDown={onMouseDownPagesTab}
                 />,
               )}
               <MenuTab
                 label={'Navigator'}
                 selected={selectedTab === LeftMenuTab.Navigator}
-                onClick={onClickNavigatorTab}
+                onMouseDown={onMouseDownNavigatorTab}
               />
               <MenuTab
                 label={'Project'}
                 selected={selectedTab === LeftMenuTab.Project}
-                onClick={onClickProjectTab}
+                onMouseDown={onMouseDownProjectTab}
               />
               <MenuTab
                 label={'Github'}
                 selected={selectedTab === LeftMenuTab.Github}
-                onClick={onClickGithubTab}
+                onMouseDown={onMouseDownGithubTab}
               />
             </FlexRow>,
           )}
diff --git a/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx b/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
index 60f9e0afce4e..6f208b183679 100644
--- a/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
@@ -20,7 +20,7 @@ import { LayoutIcon } from './layout-icon'
 import { DataReferenceCartoucheControl } from '../../inspector/sections/component-section/data-reference-cartouche'
 import {
   NavigatorRowClickableWrapper,
-  useGetNavigatorClickActions,
+  useGetNavigatorMouseDownActions,
 } from './navigator-item-clickable-wrapper'
 import type { ThemeObject } from '../../../uuiui/styles/theme/theme-helpers'
 import { useNavigatorSelectionBoundsForEntry } from './use-navigator-selection-bounds-for-entry'
@@ -341,18 +341,18 @@ const CondensedEntryItemContent = React.memo(
       ])
     }, [props.entry, dispatch, highlightedViews])
 
-    const getClickActions = useGetNavigatorClickActions(
+    const getMouseDownActions = useGetNavigatorMouseDownActions(
       props.entry.elementPath,
       props.selected,
       condensedNavigatorRow([props.entry], 'leaf', props.indentation),
     )
 
-    const onClick = React.useCallback(
+    const onMouseDown = React.useCallback(
       (e: React.MouseEvent) => {
         e.stopPropagation()
-        dispatch(getClickActions(e))
+        dispatch(getMouseDownActions(e))
       },
-      [dispatch, getClickActions],
+      [dispatch, getMouseDownActions],
     )
 
     return (
@@ -374,7 +374,7 @@ const CondensedEntryItemContent = React.memo(
         }}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}
-        onClick={onClick}
+        onMouseDown={onMouseDown}
       >
         <div
           style={{
diff --git a/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx b/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
index 8b1deca408b7..856a766f22f8 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
@@ -46,21 +46,18 @@ export const NavigatorRowClickableWrapper = React.memo(
       return selectedViews.current.some((view) => EP.pathsEqual(targetPath, view))
     }, [selectedViews, targetPath])
 
-    const getActions = useGetNavigatorClickActions(targetPath, selected, props.row)
+    const getMouseDownActions = useGetNavigatorMouseDownActions(targetPath, selected, props.row)
 
-    const onClick = React.useCallback(
+    const onMouseDown = React.useCallback(
       (e: React.MouseEvent) => {
-        e.stopPropagation()
-        e.preventDefault()
-
-        const actions = getActions(e)
+        const actions = getMouseDownActions(e)
         dispatch(actions)
       },
-      [dispatch, getActions],
+      [dispatch, getMouseDownActions],
     )
 
     return (
-      <div style={{ display: 'flex', alignItems: 'center', flex: 1 }} onClick={onClick}>
+      <div style={{ display: 'flex', alignItems: 'center', flex: 1 }} onMouseDown={onMouseDown}>
         {props.children}
       </div>
     )
@@ -68,11 +65,11 @@ export const NavigatorRowClickableWrapper = React.memo(
 )
 NavigatorRowClickableWrapper.displayName = 'NavigatorRowClickableWrapper'
 
-export function useGetNavigatorClickActions(
+export function useGetNavigatorMouseDownActions(
   targetPath: ElementPath,
   selected: boolean,
   row: NavigatorRow,
-) {
+): (event: React.MouseEvent) => Array<EditorAction> {
   const navigatorTargets = useRefEditorState(navigatorTargetsSelector)
   const selectedViews = useRefEditorState((store) => store.editor.selectedViews)
   const collapsedViews = useRefEditorState((store) => store.editor.navigator.collapsedViews)
diff --git a/editor/src/components/navigator/navigator-item/navigator-item-components.tsx b/editor/src/components/navigator/navigator-item/navigator-item-components.tsx
index 3fe002f4ea84..1686b791019d 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item-components.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item-components.tsx
@@ -180,7 +180,7 @@ interface VisiblityIndicatorProps {
   visibilityEnabled: boolean
   selected: boolean
   iconColor: IcnProps['color']
-  onClick: () => void
+  onMouseDown: () => void
 }
 
 export const VisibilityIndicator: React.FunctionComponent<
@@ -190,7 +190,7 @@ export const VisibilityIndicator: React.FunctionComponent<
 
   return (
     <Button
-      onClick={props.onClick}
+      onMouseDown={props.onMouseDown}
       style={{
         height: 12,
         width: 12,
@@ -228,7 +228,7 @@ const AddChildButton = React.memo((props: AddChildButtonProps) => {
     'AddChildButton supportsChildren',
   )
 
-  const onClick = useCreateCallbackToShowComponentPicker()(
+  const onMouseDown = useCreateCallbackToShowComponentPicker()(
     [target],
     EditorActions.insertAsChildTarget(),
   )
@@ -239,7 +239,7 @@ const AddChildButton = React.memo((props: AddChildButtonProps) => {
 
   return (
     <Button
-      onClick={onClick}
+      onMouseDown={onMouseDown}
       style={{
         height: 12,
         width: 12,
@@ -292,12 +292,12 @@ const ReplaceElementButton = React.memo((props: ReplaceElementButtonProps) => {
     }
   })()
 
-  const onClick = useCreateCallbackToShowComponentPicker()([realTarget], insertionTarget)
+  const onMouseDown = useCreateCallbackToShowComponentPicker()([realTarget], insertionTarget)
 
   return (
     <Button
       data-testid={ReplaceElementButtonTestId(target, prop)}
-      onClick={onClick}
+      onMouseDown={onMouseDown}
       style={{
         height: 12,
         width: 12,
@@ -320,37 +320,36 @@ interface SelectionLockedIndicatorProps {
   selected: boolean
   iconColor: IcnProps['color']
   isDescendantOfLocked: boolean
-  onClick: (value: SelectionLocked) => void
+  onMouseDown: (value: SelectionLocked) => void
 }
 
 export const SelectionLockedIndicator: React.FunctionComponent<
   React.PropsWithChildren<SelectionLockedIndicatorProps>
 > = React.memo((props) => {
-  const { shouldShow, value, selected, iconColor, isDescendantOfLocked, onClick } = props
+  const { shouldShow, value, iconColor, isDescendantOfLocked, onMouseDown } = props
   const color = iconColor
 
-  const handleClick = React.useCallback(
+  const handleMouseDown = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
       event.stopPropagation()
       switch (value) {
         case 'selectable':
-          onClick('locked-hierarchy')
+          onMouseDown('locked-hierarchy')
           break
         case 'locked-hierarchy':
-          onClick('locked')
+          onMouseDown('locked')
           break
         case 'locked':
         default:
-          onClick('selectable')
+          onMouseDown('selectable')
           break
       }
     },
-    [onClick, value],
+    [onMouseDown, value],
   )
   return (
     <Button
-      onClick={handleClick}
-      onMouseDown={stopPropagation}
+      onMouseDown={handleMouseDown}
       style={{
         height: 12,
         width: 12,
@@ -474,7 +473,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
     props.navigatorEntry.elementPath,
   )
 
-  const collapse = React.useCallback(
+  const toggleCollapse = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       event.stopPropagation()
       dispatch([EditorActions.toggleCollapse(navigatorEntry.elementPath)])
@@ -539,7 +538,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
             isDescendantOfLocked={isDescendantOfLocked}
             selected={props.selected}
             iconColor={props.iconColor}
-            onClick={toggleSelectable}
+            onMouseDown={toggleSelectable}
           />
           <VisibilityIndicator
             key={`visibility-indicator-${varSafeNavigatorEntryToKey(navigatorEntry)}`}
@@ -549,7 +548,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
             visibilityEnabled={props.isVisibleOnCanvas}
             selected={props.selected}
             iconColor={props.iconColor}
-            onClick={toggleHidden}
+            onMouseDown={toggleHidden}
           />
         </>,
       )}
@@ -560,7 +559,7 @@ export const NavigatorItemActionSheet: React.FunctionComponent<
           visible={true}
           collapsed={props.collapsed}
           selected={props.selected}
-          onClick={collapse}
+          onMouseDown={toggleCollapse}
           style={{
             opacity: 'var(--paneHoverOpacity)',
           }}
diff --git a/editor/src/components/navigator/navigator-item/navigator-item.tsx b/editor/src/components/navigator/navigator-item/navigator-item.tsx
index bc951931c96a..a39e4af8276f 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item.tsx
@@ -650,7 +650,7 @@ export const NavigatorItem: React.FunctionComponent<
     return elementWarnings.invalidGroup != null || elementWarnings.invalidGroupChild != null
   }, [elementWarnings])
 
-  const collapse = React.useCallback(
+  const toggleCollapse = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       collapseItem(dispatch, navigatorEntry.elementPath, event)
       event.stopPropagation()
@@ -744,13 +744,16 @@ export const NavigatorItem: React.FunctionComponent<
 
   const currentlyRenaming = EP.pathsEqual(props.renamingTarget, props.navigatorEntry.elementPath)
 
-  const onClick = React.useCallback(
+  const onMouseDown = React.useCallback(
     (e: React.MouseEvent) => {
-      if (isRenderPropNavigatorEntry(navigatorEntry)) {
-        e.stopPropagation()
-      }
+      // Only do this for a left mouse down.
+      if (e.button === 0) {
+        if (isRenderPropNavigatorEntry(navigatorEntry)) {
+          e.stopPropagation()
+        }
 
-      contextMenu.hideAll()
+        contextMenu.hideAll()
+      }
     },
     [navigatorEntry],
   )
@@ -771,7 +774,7 @@ export const NavigatorItem: React.FunctionComponent<
       row={regularNavigatorRow(props.navigatorEntry, props.indentation)}
     >
       <div
-        onClick={onClick}
+        onMouseDown={onMouseDown}
         style={{
           flex: 1,
           borderRadius: 5,
@@ -859,7 +862,7 @@ export const NavigatorItem: React.FunctionComponent<
                     visible={canBeExpanded}
                     collapsed={collapsed}
                     selected={selected && !isInsideComponent}
-                    onClick={collapse}
+                    onMouseDown={toggleCollapse}
                     style={{
                       opacity: 'var(--paneHoverOpacity)',
                     }}
@@ -935,7 +938,7 @@ const RenderPropSlot = React.memo((props: RenderPropSlotProps) => {
       label={label}
       parentOutline={parentOutline}
       cursor={'pointer'}
-      onClick={showComponentPickerContextMenu}
+      onMouseDown={showComponentPickerContextMenu}
       testId={`toggle-render-prop-${NavigatorItemTestId(
         varSafeNavigatorEntryToKey(navigatorEntry),
       )}`}
@@ -964,7 +967,7 @@ const ConditionalBranchSlot = React.memo((props: ConditionalBranchSlotProps) =>
       label={label}
       parentOutline={parentOutline}
       cursor={'pointer'}
-      onClick={showComponentPickerContextMenu}
+      onMouseDown={showComponentPickerContextMenu}
       testId={`toggle-render-prop-${NavigatorItemTestId(
         varSafeNavigatorEntryToKey(navigatorEntry),
       )}`}
@@ -977,17 +980,17 @@ interface PlaceholderSlotProps {
   parentOutline: ParentOutline
   cursor?: 'pointer' | 'inherit'
   testId?: string
-  onClick?: React.MouseEventHandler
+  onMouseDown?: React.MouseEventHandler
 }
 
 const PlaceholderSlot = React.memo((props: PlaceholderSlotProps) => {
-  const { label, parentOutline, cursor, testId, onClick } = props
+  const { label, parentOutline, cursor, testId, onMouseDown } = props
   const colorTheme = useColorTheme()
 
   return (
     <div
       key={`label-${label}-slot`}
-      onClick={onClick}
+      onMouseDown={onMouseDown}
       style={{
         width: 140,
         height: 19,
diff --git a/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx b/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx
index 9ad51dcbb489..7571a2ad0090 100644
--- a/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx
@@ -19,6 +19,7 @@ import {
 import * as EP from '../../../core/shared/element-path'
 import {
   mouseClickAtPoint,
+  mouseDownAtPoint,
   mouseMoveToPoint,
   pressKey,
 } from '../../canvas/event-helpers.test-utils'
@@ -544,7 +545,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/card/prop_label_title',
     )
-    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
 
     const flexRowRow = editor.renderedDOM.queryByTestId(
       labelTestIdForComponentIcon('FlexRow', '/src/utils', 'row'),
@@ -718,7 +719,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/card/prop_label_title',
     )
-    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
 
     const menuButton = await waitFor(() => editor.renderedDOM.getByText('FlexCol'))
     await mouseClickAtPoint(menuButton, { x: 3, y: 3 })
@@ -897,7 +898,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/card/prop_label_title',
     )
-    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
 
     const submenuButton = await waitFor(() => editor.renderedDOM.getByText('FlexRow'))
     await mouseMoveToPoint(submenuButton, { x: 3, y: 3 })
@@ -1197,7 +1198,7 @@ describe('The navigator component picker context menu', () => {
     const emptySlot = editor.renderedDOM.getByTestId(
       'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:pg_root/card/prop_label_title',
     )
-    await mouseClickAtPoint(emptySlot, { x: 2, y: 2 })
+    await mouseDownAtPoint(emptySlot, { x: 2, y: 2 })
     await editor.getDispatchFollowUpActionsFinished()
 
     const menuButton = await waitFor(() => editor.renderedDOM.getByText('Flex Hello'))
diff --git a/editor/src/components/navigator/navigator.spec.browser2.tsx b/editor/src/components/navigator/navigator.spec.browser2.tsx
index e8911f87814c..fd27a18b0ebb 100644
--- a/editor/src/components/navigator/navigator.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator.spec.browser2.tsx
@@ -29,6 +29,7 @@ import {
   dragElementWithDNDEvents,
   mouseClickAtPoint,
   mouseDoubleClickAtPoint,
+  mouseDownAtPoint,
   pressKey,
 } from '../canvas/event-helpers.test-utils'
 import { NavigatorItemTestId } from './navigator-item/navigator-item'
@@ -5226,7 +5227,7 @@ describe('Navigator', () => {
         'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:dbc/78c/prop_label_header',
       )
 
-      await mouseClickAtPoint(slotElement, { x: 3, y: 3 })
+      await mouseDownAtPoint(slotElement, { x: 3, y: 3 })
 
       const renderPropOptionElement = await waitFor(() =>
         renderResult.renderedDOM.getByText('(empty)'),
@@ -5272,7 +5273,7 @@ describe('Navigator', () => {
         'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:dbc/78c/prop_label_header',
       )
 
-      await mouseClickAtPoint(slotElement, { x: 3, y: 3 })
+      await mouseDownAtPoint(slotElement, { x: 3, y: 3 })
 
       const renderPropOptionElement = await waitFor(() =>
         renderResult.renderedDOM.getByText('Span with Title'),
@@ -5308,7 +5309,7 @@ describe('Navigator', () => {
         'regular-sb/scene/pg:dbc/78c/d93',
       ])
     })
-    it('can insert an third-party component into render prop', async () => {
+    it('can insert a third-party component into render prop', async () => {
       const renderResult = await renderTestEditorWithModel(
         projectWithThirdPartyRenderProp(''), // <- no render prop
         'await-first-dom-report',
@@ -5318,7 +5319,7 @@ describe('Navigator', () => {
         'toggle-render-prop-NavigatorItemTestId-slot_sb/scene/pg:dbc/78c/prop_label_header',
       )
 
-      await mouseClickAtPoint(slotElement, { x: 3, y: 3 })
+      await mouseDownAtPoint(slotElement, { x: 3, y: 3 })
 
       const renderPropOptionElement = await waitFor(() =>
         renderResult.renderedDOM.getByText('Heading with Title'),
diff --git a/editor/src/components/navigator/navigator.tsx b/editor/src/components/navigator/navigator.tsx
index a889f6c6c3e8..2b10408294d5 100644
--- a/editor/src/components/navigator/navigator.tsx
+++ b/editor/src/components/navigator/navigator.tsx
@@ -286,8 +286,9 @@ export const NavigatorComponent = React.memo(() => {
     }
   }
 
-  const containerClick = React.useCallback(
+  const onMouseDown = React.useCallback(
     (mouseEvent: React.MouseEvent<HTMLElement>) => {
+      mouseEvent.stopPropagation()
       // Ensure this is a left click.
       if (mouseEvent.button === 0) {
         dispatch([clearSelection()])
@@ -319,7 +320,7 @@ export const NavigatorComponent = React.memo(() => {
         padding: 5,
         height: 0,
       }}
-      onClick={containerClick}
+      onMouseDown={onMouseDown}
     >
       <SectionBodyArea
         minimised={minimised}

From 9dce30964082f70a705d4f98b2c7b185579bb3e8 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:52:58 +0100
Subject: [PATCH 120/272] fix(canvas) Correctly Aligned Grid Controls (#6484)

- `alignContent` in `getSpecialMeasurements` now isn't filtered by
`getFlexJustifyContent`.
- Added `justifyContent` and `alignContent` to `GridResizingProps`.
- In `GridResizing`, the main div now includes `paddingRight`,
`paddingBottom`,
  `justifyContent` and `alignContent`.
- `GridControl` now uses `range` to build the `placeholders` value.
- Removed position shifting from `GridControl` and changed the `border`
to
  an `outline` as those were causing the content to be repositioned.
- Added `range` utility function.
- `SpecialSizeMeasurements.alignContent` is now typed to `AlignContent |
null` instead
  of `FlexJustifyContent | null` as that is more correct.
---
 .../canvas/controls/grid-controls.tsx         | 26 +++++--
 editor/src/components/canvas/dom-walker.ts    |  3 +-
 .../components/inspector/inspector-common.ts  | 69 +++++++++++++++++++
 editor/src/core/shared/array-utils.ts         |  8 +++
 editor/src/core/shared/element-template.ts    |  5 +-
 5 files changed, 103 insertions(+), 8 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 0a2ab0de5350..0ab0b0c43535 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -20,7 +20,7 @@ import {
   printGridCSSNumber,
 } from '../../../components/inspector/common/css-utils'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
-import { mapDropNulls, stripNulls, uniqBy } from '../../../core/shared/array-utils'
+import { mapDropNulls, range, stripNulls, uniqBy } from '../../../core/shared/array-utils'
 import { defaultEither } from '../../../core/shared/either'
 import * as EP from '../../../core/shared/element-path'
 import type {
@@ -336,6 +336,8 @@ export interface GridResizingProps {
   axis: Axis
   gap: number | null
   padding: Sides | null
+  justifyContent: string | null
+  alignContent: string | null
 }
 
 export const GridResizing = React.memo((props: GridResizingProps) => {
@@ -424,6 +426,16 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
                 : undefined,
             paddingTop:
               props.axis === 'row' && props.padding != null ? `${props.padding.top}px` : undefined,
+            paddingRight:
+              props.axis === 'column' && props.padding != null
+                ? `${props.padding.right}px`
+                : undefined,
+            paddingBottom:
+              props.axis === 'row' && props.padding != null
+                ? `${props.padding.bottom}px`
+                : undefined,
+            justifyContent: props.justifyContent ?? undefined,
+            alignContent: props.alignContent ?? undefined,
           }}
         >
           {dimensions.flatMap((dimension, dimensionIndex) => {
@@ -621,6 +633,8 @@ export const GridRowColumnResizingControls =
               gap={grid.columnGap ?? grid.gap}
               padding={grid.padding}
               stripedAreaLength={getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0)}
+              alignContent={grid.justifyContent}
+              justifyContent={grid.alignContent}
             />
           )
         })}
@@ -635,6 +649,8 @@ export const GridRowColumnResizingControls =
               gap={grid.rowGap ?? grid.gap}
               padding={grid.padding}
               stripedAreaLength={getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0)}
+              alignContent={grid.alignContent}
+              justifyContent={grid.justifyContent}
             />
           )
         })}
@@ -878,11 +894,11 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
     gridPath: gridPath,
   })
 
-  const placeholders = Array.from(Array(grid.cells).keys())
+  const placeholders = range(0, grid.cells)
   let style: CSSProperties = {
     position: 'absolute',
-    top: grid.frame.y - 1, // account for border!
-    left: grid.frame.x - 1, // account for border!
+    top: grid.frame.y,
+    left: grid.frame.x,
     width: grid.frame.width,
     height: grid.frame.height,
     display: 'grid',
@@ -890,7 +906,7 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
     gridTemplateRows: getNullableAutoOrTemplateBaseString(grid.gridTemplateRows),
     backgroundColor:
       activelyDraggingOrResizingCell != null ? colorTheme.primary10.value : 'transparent',
-    border: `1px solid ${
+    outline: `1px solid ${
       activelyDraggingOrResizingCell != null ? colorTheme.primary.value : 'transparent'
     }`,
     justifyContent: grid.justifyContent ?? 'initial',
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 912d3515f34b..2dfe03416b5a 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -69,6 +69,7 @@ import { fastForEach } from '../../core/shared/utils'
 import type { EditorState, EditorStorePatched } from '../editor/store/editor-state'
 import { shallowEqual } from '../../core/shared/equality-utils'
 import {
+  getAlignContent,
   getFlexAlignment,
   getFlexJustifyContent,
   getSelfAlignment,
@@ -756,7 +757,7 @@ function getSpecialMeasurements(
   const parentTextDirection = eitherToMaybe(parseDirection(parentElementStyle?.direction, null))
 
   const justifyContent = getFlexJustifyContent(elementStyle.justifyContent)
-  const alignContent = getFlexJustifyContent(elementStyle.alignContent)
+  const alignContent = getAlignContent(elementStyle.alignContent)
   const alignItems = getFlexAlignment(elementStyle.alignItems)
   const alignSelf = getSelfAlignment(elementStyle.alignSelf)
   const justifySelf = getSelfAlignment(elementStyle.justifySelf)
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index 296f0900a7b2..32eeadabddf6 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -99,6 +99,75 @@ export function getFlexJustifyContent(value: string | null): FlexJustifyContent
   }
 }
 
+export type AlignContent =
+  | 'normal'
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'flex-start'
+  | 'flex-end'
+  | 'baseline'
+  | 'first baseline'
+  | 'last baseline'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+  | 'stretch'
+  | 'safe center'
+  | 'unsafe center'
+  | 'inherit'
+  | 'initial'
+  | 'revert'
+  | 'revert-layer'
+  | 'unset'
+
+export function getAlignContent(value: string | null): AlignContent | null {
+  switch (value) {
+    case 'normal':
+      return 'normal'
+    case 'start':
+      return 'start'
+    case 'center':
+      return 'center'
+    case 'end':
+      return 'end'
+    case 'flex-start':
+      return 'flex-start'
+    case 'flex-end':
+      return 'flex-end'
+    case 'baseline':
+      return 'baseline'
+    case 'first baseline':
+      return 'first baseline'
+    case 'last baseline':
+      return 'last baseline'
+    case 'space-between':
+      return 'space-between'
+    case 'space-around':
+      return 'space-around'
+    case 'space-evenly':
+      return 'space-evenly'
+    case 'stretch':
+      return 'stretch'
+    case 'safe center':
+      return 'safe center'
+    case 'unsafe center':
+      return 'unsafe center'
+    case 'inherit':
+      return 'inherit'
+    case 'initial':
+      return 'initial'
+    case 'revert':
+      return 'revert'
+    case 'revert-layer':
+      return 'revert-layer'
+    case 'unset':
+      return 'unset'
+    default:
+      return null
+  }
+}
+
 export type FlexAlignment = StartCenterEnd | 'auto' | 'stretch'
 export type SelfAlignment = FlexAlignment | 'end' | 'start'
 
diff --git a/editor/src/core/shared/array-utils.ts b/editor/src/core/shared/array-utils.ts
index 3823f2dde770..4c52ed009c96 100644
--- a/editor/src/core/shared/array-utils.ts
+++ b/editor/src/core/shared/array-utils.ts
@@ -539,6 +539,14 @@ export function matrixGetter<T>(array: T[], width: number): (row: number, column
   }
 }
 
+export function range(start: number, end: number): Array<number> {
+  let result: Array<number> = []
+  for (let i = start; i < end; i++) {
+    result.push(i)
+  }
+  return result
+}
+
 export function chunkArrayEqually<T>(
   sortedArray: T[],
   numberOfChunks: number,
diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts
index 8a7b76c2d1e9..b1480315c7fb 100644
--- a/editor/src/core/shared/element-template.ts
+++ b/editor/src/core/shared/element-template.ts
@@ -35,6 +35,7 @@ import { intrinsicHTMLElementNamesAsStrings } from './dom-utils'
 import type { MapLike } from 'typescript'
 import { forceNotNull } from './optional-utils'
 import type {
+  AlignContent,
   FlexAlignment,
   FlexJustifyContent,
   SelfAlignment,
@@ -2814,7 +2815,7 @@ export interface SpecialSizeMeasurements {
   gap: number | null
   flexDirection: FlexDirection | null
   justifyContent: FlexJustifyContent | null
-  alignContent: FlexJustifyContent | null
+  alignContent: AlignContent | null
   alignItems: FlexAlignment | null
   alignSelf: SelfAlignment | null
   justifySelf: SelfAlignment | null
@@ -2867,7 +2868,7 @@ export function specialSizeMeasurements(
   gap: number | null,
   flexDirection: FlexDirection | null,
   justifyContent: FlexJustifyContent | null,
-  alignContent: FlexJustifyContent | null,
+  alignContent: AlignContent | null,
   alignItems: FlexAlignment | null,
   htmlElementName: string,
   renderedChildrenCount: number,

From 9ba3fe191f1fa700368aa6dbaf376546afafb97e Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:54:41 +0100
Subject: [PATCH 121/272] fix(inspector) Grid Template Field Dropdowns (#6498)

- Integrated some similar logic into `GridExpressionInput` that is in
`NumberOrKeywordControl`.
- Resurrected `gridDimensionDropdownKeywords` from the previous code so
that it can be passed to `GridExpressionInput`.
---
 .../src/components/inspector/flex-section.tsx |  35 ++++-
 .../uuiui/inputs/grid-expression-input.tsx    | 147 ++++++++++++++++--
 2 files changed, 165 insertions(+), 17 deletions(-)

diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 8afca94bc45f..811c3bdd8b67 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -30,6 +30,7 @@ import {
   SquareButton,
   Subdued,
   Tooltip,
+  UtopiaTheme,
 } from '../../uuiui'
 import type {
   CSSKeyword,
@@ -513,6 +514,12 @@ const TemplateDimensionControl = React.memo(
 )
 TemplateDimensionControl.displayName = 'TemplateDimensionControl'
 
+const gridDimensionDropdownKeywords = [
+  { label: 'Auto', value: cssKeyword('auto') },
+  { label: 'Min-Content', value: cssKeyword('min-content') },
+  { label: 'Max-Content', value: cssKeyword('max-content') },
+]
+
 function AxisDimensionControl({
   value,
   index,
@@ -574,10 +581,21 @@ function AxisDimensionControl({
         },
       }}
     >
-      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flex: 1 }}>
+      <div
+        style={{
+          display: 'grid',
+          gridAutoFlow: 'column',
+          alignItems: 'center',
+          gap: 6,
+          gridTemplateColumns: gridExpressionInputFocused.focused
+            ? `40px auto`
+            : `40px auto ${UtopiaTheme.layout.inputHeight.default}px`,
+          gridTemplateRows: '1fr',
+          width: `100%`,
+        }}
+      >
         <Subdued
           style={{
-            width: 40,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
@@ -593,14 +611,15 @@ function AxisDimensionControl({
           onUpdateDimension={onUpdateDimension(index)}
           onFocus={gridExpressionInputFocused.onFocus}
           onBlur={gridExpressionInputFocused.onBlur}
+          keywords={gridDimensionDropdownKeywords}
         />
+        {unless(
+          gridExpressionInputFocused.focused,
+          <SquareButton className={axisDropdownMenuButton}>
+            <DropdownMenu align='end' items={items} opener={opener} onOpenChange={onOpenChange} />
+          </SquareButton>,
+        )}
       </div>
-      {unless(
-        gridExpressionInputFocused.focused,
-        <SquareButton className={axisDropdownMenuButton}>
-          <DropdownMenu align='end' items={items} opener={opener} onOpenChange={onOpenChange} />
-        </SquareButton>,
-      )}
     </div>
   )
 }
diff --git a/editor/src/uuiui/inputs/grid-expression-input.tsx b/editor/src/uuiui/inputs/grid-expression-input.tsx
index b5a5bf3a1830..ddbfe783de5a 100644
--- a/editor/src/uuiui/inputs/grid-expression-input.tsx
+++ b/editor/src/uuiui/inputs/grid-expression-input.tsx
@@ -1,3 +1,7 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import type { CSSProperties } from 'react'
 import React from 'react'
 import {
   cssKeyword,
@@ -13,6 +17,16 @@ import {
 } from '../../components/inspector/common/css-utils'
 import { isRight } from '../../core/shared/either'
 import { StringInput } from './string-input'
+import type { DropdownMenuItem } from '../radix-components'
+import {
+  DropdownMenu,
+  regularDropdownMenuItem,
+  separatorDropdownMenuItem,
+} from '../radix-components'
+import { Icons, SmallerIcons } from '../icons'
+import { NO_OP } from '../../core/shared/utils'
+import { unless } from '../../utils/react-conditionals'
+import { useColorTheme } from '../styles/theme'
 
 interface GridExpressionInputProps {
   testId: string
@@ -21,8 +35,12 @@ interface GridExpressionInputProps {
   onUpdateDimension: (v: GridDimension) => void
   onFocus: () => void
   onBlur: () => void
+  keywords: Array<{ label: string; value: CSSKeyword<any> }>
+  style?: CSSProperties
 }
 
+const DropdownWidth = 25
+
 export const GridExpressionInput = React.memo(
   ({
     testId,
@@ -31,7 +49,11 @@ export const GridExpressionInput = React.memo(
     onUpdateDimension,
     onFocus,
     onBlur,
+    keywords,
+    style = {},
   }: GridExpressionInputProps) => {
+    const colorTheme = useColorTheme()
+
     const [printValue, setPrintValue] = React.useState<string>(stringifyGridDimension(value))
     React.useEffect(() => setPrintValue(stringifyGridDimension(value)), [value])
 
@@ -71,16 +93,123 @@ export const GridExpressionInput = React.memo(
       [printValue, onUpdateNumberOrKeyword, onUpdateDimension, value],
     )
 
+    const [hover, setHover] = React.useState(false)
+    const [dropdownOpen, setDropdownOpen] = React.useState(false)
+    const onMouseOver = React.useCallback(() => {
+      setHover(true)
+    }, [])
+    const onMouseOut = React.useCallback(() => {
+      setHover(false)
+    }, [])
+
+    const dropdownButtonId = `${testId}-dropdown`
+
+    const dropdownButton = React.useCallback(
+      () => (
+        <SmallerIcons.ExpansionArrowDown
+          testId={dropdownButtonId}
+          style={{
+            visibility: hover || dropdownOpen ? 'visible' : 'hidden',
+            cursor: 'pointer',
+            marginRight: 5,
+          }}
+        />
+      ),
+      [dropdownButtonId, hover, dropdownOpen],
+    )
+
+    const dropdownItems = React.useMemo((): DropdownMenuItem[] => {
+      let items: DropdownMenuItem[] = []
+      items.push(
+        regularDropdownMenuItem({
+          id: 'dropdown-input-value',
+          icon: <Icons.Checkmark color='white' width={16} height={16} />,
+          label: printValue,
+          disabled: true,
+          onSelect: NO_OP,
+        }),
+      )
+      if (keywords.length > 0) {
+        items.push(separatorDropdownMenuItem('dropdown-separator'))
+      }
+      items.push(
+        ...keywords.map((keyword, idx): DropdownMenuItem => {
+          return regularDropdownMenuItem({
+            id: `dropdown-label-${keyword.value.value}`,
+            icon: <div style={{ width: 16, height: 16 }} />,
+            label: keyword.label,
+            onSelect: () => onUpdateNumberOrKeyword(keyword.value),
+          })
+        }),
+      )
+      return items
+    }, [keywords, printValue, onUpdateNumberOrKeyword])
+
+    const [inputFocused, setInputFocused] = React.useState(false)
+
+    const inputOnFocus = React.useCallback(() => {
+      setInputFocused(true)
+      onFocus()
+    }, [onFocus])
+
+    const inputOnBlur = React.useCallback(() => {
+      setInputFocused(false)
+      onBlur()
+    }, [onBlur])
+
     return (
-      <StringInput
-        style={{ width: '100%' }}
-        testId={testId}
-        value={printValue}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-        onFocus={onFocus}
-        onBlur={onBlur}
-      />
+      <div
+        style={style}
+        css={{
+          borderRadius: 2,
+          display: 'flex',
+          alignItems: 'center',
+          flexGrow: 1,
+          flexDirection: 'row',
+          '&:hover': {
+            boxShadow: `inset 0px 0px 0px 1px ${
+              dropdownOpen ? colorTheme.dynamicBlue.value : colorTheme.fg7.value
+            }`,
+          },
+          '&:focus-within': {
+            boxShadow: `inset 0px 0px 0px 1px ${colorTheme.dynamicBlue.value}`,
+          },
+        }}
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
+      >
+        <StringInput
+          testId={testId}
+          value={printValue}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          onFocus={inputOnFocus}
+          onBlur={inputOnBlur}
+          showBorder={false}
+          includeBoxShadow={false}
+          style={{
+            width: inputFocused ? '100%' : `calc(100% - ${DropdownWidth}px)`,
+          }}
+        />
+        {unless(
+          inputFocused,
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: `${DropdownWidth}px`,
+            }}
+          >
+            <DropdownMenu
+              align='end'
+              items={dropdownItems}
+              opener={dropdownButton}
+              onOpenChange={setDropdownOpen}
+            />
+          </div>,
+        )}
+      </div>
     )
   },
 )

From 29c782932144e430111b434f9f628a530b03aa78 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 9 Oct 2024 15:41:56 +0200
Subject: [PATCH 122/272] Move grid placement section below layout, use self
 alignment icons for grid/flex children (#6502)

**Problem:**

1. The grid placement subsection should be just below the layout
section, since they are all related to the positioning of the selected
element
2. Grid and Flex children should use the `[align|justify]Self` icons for
the alignment buttons instead of the non-self ones.

**Fix:**

Do that.

| Before | After |
|---------|--------------|
| <img width="276" alt="Screenshot 2024-10-09 at 11 48 24"
src="https://github.com/user-attachments/assets/384dd748-17c6-4553-9d38-11b6c9dd1c8f">
|<img width="276" alt="Screenshot 2024-10-09 at 11 48 06"
src="https://github.com/user-attachments/assets/31a3beb2-5201-4980-b9aa-1e19382d53eb">
|


Fixes #6501
---
 .../inspector/alignment-buttons.tsx           | 40 +++++++++++++------
 editor/src/components/inspector/inspector.tsx | 10 -----
 .../simplified-layout-subsection.tsx          | 10 +++++
 ...performance-regression-tests.spec.tsx.snap |  2 -
 .../performance-regression-tests.spec.tsx     |  4 +-
 5 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/editor/src/components/inspector/alignment-buttons.tsx b/editor/src/components/inspector/alignment-buttons.tsx
index 130820f8c003..450654e57fd0 100644
--- a/editor/src/components/inspector/alignment-buttons.tsx
+++ b/editor/src/components/inspector/alignment-buttons.tsx
@@ -37,7 +37,7 @@ export const AlignmentButtons = React.memo(() => {
 
   const disableDistribute = selectedViews.current.length < 3
 
-  const activeAlignments = useActiveAlignments()
+  const { activeAlignments, allSelectedViewsAreFlexOrGridChildren } = useActiveAlignments()
   const hasActiveAlignments = React.useMemo(() => {
     return (
       activeAlignments.bottom ||
@@ -174,6 +174,9 @@ export const AlignmentButtons = React.memo(() => {
   const disableJustify = useDisableAlignment(selectedViews.current, 'horizontal')
   const disableAlign = useDisableAlignment(selectedViews.current, 'vertical')
 
+  const justifyIconPrefix = allSelectedViewsAreFlexOrGridChildren ? 'justifySelf' : 'justify'
+  const alignIconPrefix = allSelectedViewsAreFlexOrGridChildren ? 'alignSelf' : 'align'
+
   return (
     <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
       <OptionChainControl
@@ -187,19 +190,19 @@ export const AlignmentButtons = React.memo(() => {
         options={[
           {
             value: 'left',
-            icon: { category: 'inspector', type: 'justify-start' },
+            icon: { category: 'inspector', type: `${justifyIconPrefix}-start` },
             forceCallOnSubmitValue: true,
             disabled: disableJustify,
           },
           {
             value: 'hcenter',
-            icon: { category: 'inspector', type: 'justify-center' },
+            icon: { category: 'inspector', type: `${justifyIconPrefix}-center` },
             forceCallOnSubmitValue: true,
             disabled: disableJustify,
           },
           {
             value: 'right',
-            icon: { category: 'inspector', type: 'justify-end' },
+            icon: { category: 'inspector', type: `${justifyIconPrefix}-end` },
             forceCallOnSubmitValue: true,
             disabled: disableJustify,
           },
@@ -216,19 +219,19 @@ export const AlignmentButtons = React.memo(() => {
         options={[
           {
             value: 'top',
-            icon: { category: 'inspector', type: 'align-start' },
+            icon: { category: 'inspector', type: `${alignIconPrefix}-start` },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
           {
             value: 'vcenter',
-            icon: { category: 'inspector', type: 'align-center' },
+            icon: { category: 'inspector', type: `${alignIconPrefix}-center` },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
           {
             value: 'bottom',
-            icon: { category: 'inspector', type: 'align-end' },
+            icon: { category: 'inspector', type: `${alignIconPrefix}-end` },
             forceCallOnSubmitValue: true,
             disabled: disableAlign,
           },
@@ -241,7 +244,10 @@ export const AlignmentButtons = React.memo(() => {
 })
 AlignmentButtons.displayName = 'AlignmentButtons'
 
-function useActiveAlignments(): ActiveAlignments {
+function useActiveAlignments(): {
+  activeAlignments: ActiveAlignments
+  allSelectedViewsAreFlexOrGridChildren: boolean
+} {
   const selectedViews = useRefEditorState((store) => store.editor.selectedViews)
 
   const jsxMetadata = useEditorState(
@@ -250,6 +256,11 @@ function useActiveAlignments(): ActiveAlignments {
     'useActiveAlignments jsxMetadata',
   )
 
+  const allSelectedViewsAreFlexOrGridChildren = React.useMemo(
+    () => selectedViews.current.every((path) => MetadataUtils.isFlexOrGridChild(jsxMetadata, path)),
+    [selectedViews, jsxMetadata],
+  )
+
   const isActive = React.useCallback(
     (alignment: Alignment) => {
       if (selectedViews.current.length === 0) {
@@ -257,9 +268,7 @@ function useActiveAlignments(): ActiveAlignments {
       }
 
       // Only flex/grid children can have active alignments, because they would mean nothing for flow elements.
-      if (
-        !selectedViews.current.every((view) => MetadataUtils.isFlexOrGridChild(jsxMetadata, view))
-      ) {
+      if (!allSelectedViewsAreFlexOrGridChildren) {
         return false
       }
 
@@ -321,10 +330,10 @@ function useActiveAlignments(): ActiveAlignments {
         }
       })
     },
-    [jsxMetadata, selectedViews],
+    [jsxMetadata, selectedViews, allSelectedViewsAreFlexOrGridChildren],
   )
 
-  return React.useMemo(() => {
+  const activeAlignments = React.useMemo(() => {
     return {
       left: isActive('left'),
       hcenter: isActive('hcenter'),
@@ -334,6 +343,11 @@ function useActiveAlignments(): ActiveAlignments {
       bottom: isActive('bottom'),
     }
   }, [isActive])
+
+  return {
+    activeAlignments: activeAlignments,
+    allSelectedViewsAreFlexOrGridChildren: allSelectedViewsAreFlexOrGridChildren,
+  }
 }
 
 type UnsetAlignment = {
diff --git a/editor/src/components/inspector/inspector.tsx b/editor/src/components/inspector/inspector.tsx
index 2b6686ec0e4a..9ac261b7a0d9 100644
--- a/editor/src/components/inspector/inspector.tsx
+++ b/editor/src/components/inspector/inspector.tsx
@@ -87,7 +87,6 @@ import {
   replaceFirstChildAndDeleteSiblings,
 } from '../editor/element-children'
 import { InspectorSectionHeader } from './section-header'
-import { GridPlacementSubsection } from './sections/style-section/container-subsection/grid-cell-subsection'
 import { ContainerSubsection } from './sections/style-section/container-subsection/container-subsection'
 import { isTailwindEnabled } from '../../core/tailwind/tailwind-compilation'
 
@@ -296,14 +295,6 @@ export const Inspector = React.memo<InspectorProps>((props: InspectorProps) => {
 
   const shouldShowSimplifiedLayoutSection = inspectorPreferences.includes('layout')
 
-  const shouldShowGridCellSection = useEditorState(
-    Substores.metadata,
-    (store) =>
-      store.editor.selectedViews.length === 1 &&
-      MetadataUtils.isGridCell(store.editor.jsxMetadata, store.editor.selectedViews[0]),
-    'Inspector shouldShowGridCellSection',
-  )
-
   const shouldShowContainerSection =
     selectedViews.length > 0 && inspectorPreferences.includes('layout')
 
@@ -373,7 +364,6 @@ export const Inspector = React.memo<InspectorProps>((props: InspectorProps) => {
                         <ConstraintsSection />
                       </>,
                     )}
-                    {when(shouldShowGridCellSection, <GridPlacementSubsection />)}
                     {when(shouldShowFlexSection, <FlexSection />)}
                     {when(
                       multiselectedContract === 'frame' || multiselectedContract === 'wrapper-div',
diff --git a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx
index b532bfa8e977..7254d5b25790 100644
--- a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx
+++ b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx
@@ -17,6 +17,7 @@ import { FrameUpdatingLayoutSection } from './frame-updating-layout-section'
 import { MetadataUtils } from '../../../../../core/model/element-metadata-utils'
 import { getInspectorPreferencesForTargets } from '../../../../../core/property-controls/property-controls-utils'
 import { AlignmentButtons } from '../../../alignment-buttons'
+import { GridPlacementSubsection } from '../../style-section/container-subsection/grid-cell-subsection'
 
 export const SimplifiedLayoutSubsection = React.memo(() => {
   const selectedElementContract = useEditorState(
@@ -56,6 +57,14 @@ export const SimplifiedLayoutSubsection = React.memo(() => {
 
   const shouldShowAlignmentButtons = !isCodeElement && inspectorPreferences.includes('layout')
 
+  const shouldShowGridCellSection = useEditorState(
+    Substores.metadata,
+    (store) =>
+      store.editor.selectedViews.length === 1 &&
+      MetadataUtils.isGridCell(store.editor.jsxMetadata, store.editor.selectedViews[0]),
+    'Inspector shouldShowGridCellSection',
+  )
+
   return (
     <FlexColumn>
       <FlexRow
@@ -90,6 +99,7 @@ export const SimplifiedLayoutSubsection = React.memo(() => {
           </>,
         )}
       </FlexColumn>
+      {when(shouldShowGridCellSection, <GridPlacementSubsection />)}
     </FlexColumn>
   )
 })
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 8fb0117f29a4..4635c7a78aab 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -120,7 +120,6 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(ConstraintsSection)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(GridPlacementSubsection)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(StyleSection)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
@@ -901,7 +900,6 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(ConstraintsSection)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(GridPlacementSubsection)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)(StyleSection)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index 23838a562b02..7f53a8cd0879 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`651`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`650`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`776`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`775`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })

From 8314461da14aab5cdf4eaa1ffbb9e0da10f43ca7 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 9 Oct 2024 16:29:32 +0200
Subject: [PATCH 123/272] Grid reparent uses rearrange helper (#6505)

**Description:**
Grid reparent uses the grid rearrange helper to set the grid specific
properties.

When you reparent into a grid container, moving the element to the
target cell, setting the grid control properties to support animation,
etc. is really similar to grid rearrange. Despite that, the two
strategies did not share code.

I modified the grid reparent strategy to call runGridRearrangeMove. This
automatically added animation to grid reparent, and fixed some jumping
around.

**Commit Details:** (< vv pls delete this section if's not relevant)
- `runGridRearrangeMove` has a new parameter for the grid metadata
(before that it could assume that the grid is parent of the selected
element, but during reparent this is not true)
- some of the `runGridRearrangeMove` which handles multicell elements is
not needed for grid reparent, I needed to handle that (e.g. during grid
reparent we always put the element into a single target cell, so no need
to handle the original size in cells, the offset between the dragged
cell and root cell, etc)
- Removed `getGridPositioningCommands` which is replaced by
`runGridRearrangeMove`

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../strategies/grid-helpers.ts                | 119 +++++++++++-------
 .../grid-rearrange-move-duplicate-strategy.ts |   9 ++
 .../grid-rearrange-move-strategy.ts           |  34 ++---
 .../strategies/grid-reparent-strategy.tsx     |  64 ++--------
 4 files changed, 106 insertions(+), 120 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 4af8c8ee8ee8..bacc17c6ec2a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -51,17 +51,13 @@ export function runGridRearrangeMove(
   selectedElement: ElementPath,
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
+  grid: ElementInstanceMetadata,
 ): CanvasCommand[] {
   if (interactionData.drag == null) {
     return []
   }
 
-  const parentGridPath = EP.parentPath(selectedElement)
-  const grid = MetadataUtils.findElementByElementPath(jsxMetadata, parentGridPath)
-
-  if (grid == null) {
-    return []
-  }
+  const isReparent = !EP.isParentOf(grid.elementPath, selectedElement)
 
   const { gridCellGlobalFrames, containerGridProperties: gridTemplate } =
     grid.specialSizeMeasurements
@@ -76,39 +72,25 @@ export function runGridRearrangeMove(
     return []
   }
 
-  const draggingFromCellCoords = getClosestGridCellToPoint(
-    gridCellGlobalFrames,
-    interactionData.dragStart,
-  )?.gridCellCoordinates
-  if (draggingFromCellCoords == null) {
+  const originalElementGridConfiguration = isReparent
+    ? {
+        originalElementMetadata: null,
+        originalCellBounds: { width: 1, height: 1 }, //when reparenting, we just put it in a single cell
+        mouseCellPosInOriginalElement: { row: 0, column: 0 },
+      }
+    : getOriginalElementGridConfiguration(
+        gridCellGlobalFrames,
+        interactionData,
+        jsxMetadata,
+        selectedElement,
+        grid,
+      )
+  if (originalElementGridConfiguration == null) {
     return []
   }
 
-  const originalElementMetadata = MetadataUtils.findElementByElementPath(
-    jsxMetadata,
-    selectedElement,
-  )
-  if (originalElementMetadata == null) {
-    return []
-  }
-
-  // measured cell coord bounds on the canvas, this is the default when the cell position is not explicitly set
-  const originalElementCellCoordsOnCanvas = getGridChildCellCoordBoundsFromCanvas(
-    originalElementMetadata,
-    grid,
-  )
-
-  // get the bounds from the props, or the canvas, or just default to the cell of the starting mouse position
-  const originalCellBounds = getGridChildCellCoordBoundsFromProps(
-    originalElementMetadata,
-    originalElementCellCoordsOnCanvas ?? draggingFromCellCoords,
-  )
-
-  // the cell position of the mouse relative to the original element (we have to keep this offset while dragging)
-  const mouseCellPosInOriginalElement = getCellCoordsDelta(
-    draggingFromCellCoords,
-    originalCellBounds,
-  )
+  const { originalElementMetadata, originalCellBounds, mouseCellPosInOriginalElement } =
+    originalElementGridConfiguration
 
   // get the new adjusted row
   const row = targetCellCoords.row - mouseCellPosInOriginalElement.row
@@ -135,7 +117,7 @@ export function runGridRearrangeMove(
   })
 
   // The siblings of the grid element being moved
-  const siblings = MetadataUtils.getChildrenUnordered(jsxMetadata, EP.parentPath(selectedElement))
+  const siblings = MetadataUtils.getChildrenUnordered(jsxMetadata, grid.elementPath)
     .filter((s) => !EP.pathsEqual(s.elementPath, selectedElement))
     .map(
       (s, index): SortableGridElementProperties => ({
@@ -165,15 +147,18 @@ export function runGridRearrangeMove(
     EP.pathsEqual(selectedElement, s.path),
   )
 
-  const moveType = getGridMoveType({
-    originalElementMetadata: originalElementMetadata,
-    possiblyReorderIndex: possiblyReorderIndex,
-    cellsSortedByPosition: cellsSortedByPosition,
-  })
+  const moveType =
+    originalElementMetadata == null
+      ? 'rearrange'
+      : getGridMoveType({
+          originalElementMetadata: originalElementMetadata,
+          possiblyReorderIndex: possiblyReorderIndex,
+          cellsSortedByPosition: cellsSortedByPosition,
+        })
 
   const updateGridControlsCommand = showGridControls(
     'mid-interaction',
-    parentGridPath,
+    grid.elementPath,
     targetCellData?.gridCellCoordinates ?? null,
     gridCellCoordinates(row, column),
   )
@@ -768,3 +753,51 @@ export function getMetadataWithGridCellBounds(
     customStrategyState: null,
   }
 }
+
+function getOriginalElementGridConfiguration(
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  interactionData: DragInteractionData,
+  jsxMetadata: ElementInstanceMetadataMap,
+  selectedElement: ElementPath,
+  grid: ElementInstanceMetadata,
+) {
+  const draggingFromCellCoords = getClosestGridCellToPoint(
+    gridCellGlobalFrames,
+    interactionData.dragStart,
+  )?.gridCellCoordinates
+  if (draggingFromCellCoords == null) {
+    return null
+  }
+
+  const originalElementMetadata = MetadataUtils.findElementByElementPath(
+    jsxMetadata,
+    selectedElement,
+  )
+  if (originalElementMetadata == null) {
+    return null
+  }
+
+  // measured cell coord bounds on the canvas, this is the default when the cell position is not explicitly set
+  const originalElementCellCoordsOnCanvas = getGridChildCellCoordBoundsFromCanvas(
+    originalElementMetadata,
+    grid,
+  )
+
+  // get the bounds from the props, or the canvas, or just default to the cell of the starting mouse position
+  const originalCellBounds = getGridChildCellCoordBoundsFromProps(
+    originalElementMetadata,
+    originalElementCellCoordsOnCanvas ?? draggingFromCellCoords,
+  )
+
+  // the cell position of the mouse relative to the original element (we have to keep this offset while dragging)
+  const mouseCellPosInOriginalElement = getCellCoordsDelta(
+    draggingFromCellCoords,
+    originalCellBounds,
+  )
+
+  return {
+    originalElementMetadata,
+    originalCellBounds,
+    mouseCellPosInOriginalElement,
+  }
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
index 039583c1077c..18e54ec97035 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
@@ -72,11 +72,20 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
 
       const targetElement = EP.appendToPath(EP.parentPath(selectedElement), newUid)
 
+      const grid = MetadataUtils.findElementByElementPath(
+        canvasState.startingMetadata,
+        EP.parentPath(selectedElement),
+      )
+      if (grid == null) {
+        return emptyStrategyApplicationResult
+      }
+
       const moveCommands = runGridRearrangeMove(
         targetElement,
         selectedElement,
         canvasState.startingMetadata,
         interactionSession.interactionData,
+        grid,
       )
       if (moveCommands.length === 0) {
         return emptyStrategyApplicationResult
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index d79b46d21b00..01692a94abed 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -16,13 +16,7 @@ import {
 } from '../../commands/set-property-command'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
-import type {
-  ControlWithProps,
-  CustomStrategyState,
-  CustomStrategyStatePatch,
-  InteractionCanvasState,
-  InteractionLifecycle,
-} from '../canvas-strategy-types'
+import type { ControlWithProps, InteractionCanvasState } from '../canvas-strategy-types'
 import {
   getTargetPathsFromInteractionTarget,
   emptyStrategyApplicationResult,
@@ -30,20 +24,12 @@ import {
 } from '../canvas-strategy-types'
 import type { DragInteractionData, InteractionSession } from '../interaction-state'
 import { runGridRearrangeMove } from './grid-helpers'
-import type { CanvasRectangle } from '../../../../core/shared/math-utils'
-import { isInfinityRectangle, offsetPoint } from '../../../../core/shared/math-utils'
-import { findReparentStrategies } from './reparent-helpers/reparent-strategy-helpers'
-import { applyAbsoluteReparent, controlsForAbsoluteReparent } from './absolute-reparent-strategy'
+import { isInfinityRectangle } from '../../../../core/shared/math-utils'
 import type { CanvasCommand } from '../../commands/commands'
-import { applyStaticReparent, controlsForStaticReparent } from './reparent-as-static-strategy'
-import type { FindReparentStrategyResult } from './reparent-helpers/reparent-strategy-parent-lookup'
-import { applyGridReparent, controlsForGridReparent } from './grid-reparent-strategy'
-import { assertNever } from '../../../../core/shared/utils'
 
 export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
   interactionSession: InteractionSession | null,
-  customState: CustomStrategyState,
 ) => {
   const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget)
   if (
@@ -129,7 +115,7 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
         ),
       ]
 
-      const { commands, patch, elementsToRerender } = getCommandsAndPatchForGridRearrange(
+      const { commands, elementsToRerender } = getCommandsAndPatchForGridRearrange(
         canvasState,
         interactionSession.interactionData,
         selectedElement,
@@ -142,7 +128,6 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
       return strategyApplicationResult(
         [...midInteractionCommands, ...onCompleteCommands, ...commands],
         elementsToRerender,
-        patch,
       )
     },
   }
@@ -154,11 +139,18 @@ function getCommandsAndPatchForGridRearrange(
   selectedElement: ElementPath,
 ): {
   commands: CanvasCommand[]
-  patch: CustomStrategyStatePatch
   elementsToRerender: ElementPath[]
 } {
   if (interactionData.drag == null) {
-    return { commands: [], patch: {}, elementsToRerender: [] }
+    return { commands: [], elementsToRerender: [] }
+  }
+
+  const grid = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    EP.parentPath(selectedElement),
+  )
+  if (grid == null) {
+    return { commands: [], elementsToRerender: [] }
   }
 
   const commands = runGridRearrangeMove(
@@ -166,11 +158,11 @@ function getCommandsAndPatchForGridRearrange(
     selectedElement,
     canvasState.startingMetadata,
     interactionData,
+    grid,
   )
 
   return {
     commands: commands,
-    patch: {},
     elementsToRerender: [EP.parentPath(selectedElement)],
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index f98ee00f7680..419b1633ca7a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -5,11 +5,11 @@ import { mapDropNulls } from '../../../../core/shared/array-utils'
 import * as EP from '../../../../core/shared/element-path'
 import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
 import {
-  gridPositionValue,
+  type ElementInstanceMetadata,
   type ElementInstanceMetadataMap,
 } from '../../../../core/shared/element-template'
 import type { CanvasRectangle } from '../../../../core/shared/math-utils'
-import { canvasVector, isInfinityRectangle, offsetPoint } from '../../../../core/shared/math-utils'
+import { isInfinityRectangle } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 import * as PP from '../../../../core/shared/property-path'
 import type { AllElementProps } from '../../../editor/store/editor-state'
@@ -39,13 +39,12 @@ import {
 import type { DragInteractionData, InteractionSession, UpdatedPathMap } from '../interaction-state'
 import { honoursPropsPosition, shouldKeepMovingDraggedGroupChildren } from './absolute-utils'
 import { replaceFragmentLikePathsWithTheirChildrenRecursive } from './fragment-like-helpers'
-import { getMetadataWithGridCellBounds, setGridPropsCommands } from './grid-helpers'
+import { getMetadataWithGridCellBounds, runGridRearrangeMove } from './grid-helpers'
 import { ifAllowedToReparent, isAllowedToReparent } from './reparent-helpers/reparent-helpers'
 import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-property-changes'
 import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentOutcome, pathToReparent } from './reparent-utils'
 import { flattenSelection } from './shared-move-strategies-helpers'
-import { getClosestGridCellToPointFromMetadata, type GridCellCoordinates } from './grid-cell-bounds'
 
 export function gridReparentStrategy(
   reparentTarget: ReparentTarget,
@@ -190,16 +189,6 @@ export function applyGridReparent(
           return emptyStrategyApplicationResult
         }
 
-        const mousePos = offsetPoint(
-          interactionData.dragStart,
-          interactionData.drag ?? canvasVector({ x: 0, y: 0 }),
-        )
-
-        const targetCellData = getClosestGridCellToPointFromMetadata(grid, mousePos)
-
-        if (targetCellData == null) {
-          return strategyApplicationResult([], [newParent.intendedParentPath])
-        }
         const outcomes = mapDropNulls(
           (selectedElement) =>
             gridReparentCommands(
@@ -211,7 +200,8 @@ export function applyGridReparent(
               nodeModules,
               selectedElement,
               newParent,
-              targetCellData.gridCellCoordinates,
+              interactionData,
+              grid,
             ),
           selectedElements,
         )
@@ -253,12 +243,6 @@ export function applyGridReparent(
             gridContainerCommands,
             updateSelectedViews('always', newPaths),
             setCursorCommand(CSSCursor.Reparent),
-            showGridControls(
-              'mid-interaction',
-              reparentTarget.newParent.intendedParentPath,
-              targetCellData.gridCellCoordinates,
-              null,
-            ),
           ],
           elementsToRerender,
           customStrategyStatePatch,
@@ -268,35 +252,6 @@ export function applyGridReparent(
   }
 }
 
-function getGridPositioningCommands(
-  jsxMetadata: ElementInstanceMetadataMap,
-  hoveredCoordinates: GridCellCoordinates,
-  {
-    parentPath,
-    target,
-  }: {
-    parentPath: ElementPath
-    target: ElementPath
-  },
-) {
-  const containerMetadata = MetadataUtils.findElementByElementPath(jsxMetadata, parentPath)
-  if (containerMetadata == null) {
-    return null
-  }
-  const { column, row } = hoveredCoordinates
-
-  const gridTemplate = containerMetadata.specialSizeMeasurements.containerGridProperties
-
-  const gridPropsCommands = setGridPropsCommands(target, gridTemplate, {
-    gridColumnStart: gridPositionValue(column),
-    gridColumnEnd: gridPositionValue(column),
-    gridRowEnd: gridPositionValue(row),
-    gridRowStart: gridPositionValue(row),
-  })
-
-  return gridPropsCommands
-}
-
 function gridReparentCommands(
   jsxMetadata: ElementInstanceMetadataMap,
   tree: ElementPathTrees,
@@ -306,7 +261,8 @@ function gridReparentCommands(
   nodeModules: NodeModules,
   target: ElementPath,
   newParent: InsertionPath,
-  hoveredCoordinates: GridCellCoordinates,
+  interactionData: DragInteractionData,
+  grid: ElementInstanceMetadata,
 ) {
   const reparentResult = getReparentOutcome(
     jsxMetadata,
@@ -324,11 +280,7 @@ function gridReparentCommands(
   if (reparentResult == null) {
     return null
   }
-
-  const gridPropsCommands = getGridPositioningCommands(jsxMetadata, hoveredCoordinates, {
-    parentPath: newParent.intendedParentPath,
-    target: target,
-  })
+  const gridPropsCommands = runGridRearrangeMove(target, target, jsxMetadata, interactionData, grid)
 
   if (gridPropsCommands == null) {
     return null

From 0ff29ca8635cda58cb3f013530f2bbd5c1455479 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Wed, 9 Oct 2024 16:33:20 +0200
Subject: [PATCH 124/272] Update class list command (#6506)

## Problem

In order to add/remove/update tailwind classes on an element, we need a
way to edit the `className` property in a granular way.

## Constraints/considerations
- we can't treat the className property as a string, because we want to
edit the list of classnames in it
- we can't treat the className property as an array of strings, because
Tailwind classes have their own syntax (negative values, selectors) that
we need to respect
- not all classes in className property are parseable, Tailwind class
name updates should leave the non-tailwind classes alone

## Fix
This PR introduces `tailwind-class-list-utils`, which provides a toolkit
to edit the Tailwind classes in the className property. On top of that,
that PR adds a command that provides a high-level wrapper for
`tailwind-class-list-utils` that the rest of the editor can use
---
 editor/package.json                           |   1 +
 editor/pnpm-lock.yaml                         |  15 ++
 .../components/canvas/commands/commands.ts    |   6 +-
 .../commands/update-class-list-command.ts     | 108 ++++++++++
 .../tailwind-class-list-utils.spec.ts         | 194 ++++++++++++++++++
 .../tailwind/tailwind-class-list-utils.ts     | 106 ++++++++++
 editor/src/core/tailwind/tailwind-options.tsx |  24 ++-
 7 files changed, 451 insertions(+), 3 deletions(-)
 create mode 100644 editor/src/components/canvas/commands/update-class-list-command.ts
 create mode 100644 editor/src/core/tailwind/tailwind-class-list-utils.spec.ts
 create mode 100644 editor/src/core/tailwind/tailwind-class-list-utils.ts

diff --git a/editor/package.json b/editor/package.json
index 1d4fa750356a..6e1b3110a7bd 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -171,6 +171,7 @@
     "@types/w3c-css-typed-object-model-level-1": "20180410.0.5",
     "@use-it/interval": "0.1.3",
     "@vercel/stega": "0.1.0",
+    "@xengine/tailwindcss-class-parser": "1.1.17",
     "ajv": "6.4.0",
     "anser": "2.1.0",
     "antd": "4.3.5",
diff --git a/editor/pnpm-lock.yaml b/editor/pnpm-lock.yaml
index fe2bc6505a00..7117af5eb442 100644
--- a/editor/pnpm-lock.yaml
+++ b/editor/pnpm-lock.yaml
@@ -150,6 +150,7 @@ specifiers:
   '@vercel/stega': 0.1.0
   '@vitejs/plugin-react': 4.0.4
   '@welldone-software/why-did-you-render': 5.0.0-rc.1
+  '@xengine/tailwindcss-class-parser': 1.1.17
   ajv: 6.4.0
   anser: 2.1.0
   antd: 4.3.5
@@ -388,6 +389,7 @@ dependencies:
   '@types/w3c-css-typed-object-model-level-1': 20180410.0.5
   '@use-it/interval': 0.1.3_react@18.1.0
   '@vercel/stega': 0.1.0
+  '@xengine/tailwindcss-class-parser': 1.1.17_tailwindcss@3.4.13
   ajv: 6.4.0
   anser: 2.1.0
   antd: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
@@ -5998,6 +6000,15 @@ packages:
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
     dev: true
 
+  /@xengine/tailwindcss-class-parser/1.1.17_tailwindcss@3.4.13:
+    resolution: {integrity: sha512-LRod5tEDSpr3T2I8R3U0bRH4O18MDfAdybxQRLSbcIta4AboQEeIUrNVsz6wRmJcsrBXtQYbwP4k9zsE+QnKAg==}
+    peerDependencies:
+      tailwindcss: '*'
+    dependencies:
+      colord: 2.9.3
+      tailwindcss: 3.4.13
+    dev: false
+
   /@xstate/fsm/2.1.0:
     resolution: {integrity: sha512-oJlc0iD0qZvAM7If/KlyJyqUt7wVI8ocpsnlWzAPl97evguPbd+oJbRM9R4A1vYJffYH96+Bx44nLDE6qS8jQg==}
     dev: false
@@ -7890,6 +7901,10 @@ packages:
       color-string: 1.9.1
     dev: false
 
+  /colord/2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+    dev: false
+
   /colorette/2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: true
diff --git a/editor/src/components/canvas/commands/commands.ts b/editor/src/components/canvas/commands/commands.ts
index 2e496effcfa0..cf7428ce5209 100644
--- a/editor/src/components/canvas/commands/commands.ts
+++ b/editor/src/components/canvas/commands/commands.ts
@@ -82,6 +82,8 @@ import {
   runShowGridControlsCommand,
   type ShowGridControlsCommand,
 } from './show-grid-controls-command'
+import type { UpdateClassList } from './update-class-list-command'
+import { runUpdateClassList } from './update-class-list-command'
 
 export interface CommandFunctionResult {
   editorStatePatches: Array<EditorStatePatch>
@@ -135,6 +137,7 @@ export type CanvasCommand =
   | SetActiveFrames
   | UpdateBulkProperties
   | ShowGridControlsCommand
+  | UpdateClassList
 
 export function runCanvasCommand(
   editorState: EditorState,
@@ -178,7 +181,6 @@ export function runCanvasCommand(
       return runPushIntendedBoundsAndUpdateGroups(editorState, command, commandLifecycle)
     case 'PUSH_INTENDED_BOUNDS_AND_UPDATE_HUGGING_ELEMENTS':
       return runPushIntendedBoundsAndUpdateHuggingElements(editorState, command)
-
     case 'DELETE_PROPERTIES':
       return runDeleteProperties(editorState, command)
     case 'SET_PROPERTY':
@@ -219,6 +221,8 @@ export function runCanvasCommand(
       return runSetActiveFrames(editorState, command)
     case 'SHOW_GRID_CONTROLS':
       return runShowGridControlsCommand(editorState, command)
+    case 'UPDATE_CLASS_LIST':
+      return runUpdateClassList(editorState, command)
     default:
       const _exhaustiveCheck: never = command
       throw new Error(`Unhandled canvas command ${JSON.stringify(command)}`)
diff --git a/editor/src/components/canvas/commands/update-class-list-command.ts b/editor/src/components/canvas/commands/update-class-list-command.ts
new file mode 100644
index 000000000000..65e7781dcb9e
--- /dev/null
+++ b/editor/src/components/canvas/commands/update-class-list-command.ts
@@ -0,0 +1,108 @@
+import { mapDropNulls } from '../../../core/shared/array-utils'
+import * as EP from '../../../core/shared/element-path'
+import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
+import type { ElementPath } from '../../../core/shared/project-file-types'
+import * as PP from '../../../core/shared/property-path'
+import type { PropertiesToUpdate } from '../../../core/tailwind/tailwind-class-list-utils'
+import {
+  addNewClasses,
+  getClassListFromParsedClassList,
+  getParsedClassList,
+  removeClasses,
+  updateExistingClasses,
+} from '../../../core/tailwind/tailwind-class-list-utils'
+import { getTailwindConfigCached } from '../../../core/tailwind/tailwind-compilation'
+import { getClassNameAttribute } from '../../../core/tailwind/tailwind-options'
+import { getElementFromProjectContents, type EditorState } from '../../editor/store/editor-state'
+import { applyValuesAtPath } from './adjust-number-command'
+import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+
+export interface UpdateClassList extends BaseCommand {
+  type: 'UPDATE_CLASS_LIST'
+  element: ElementPath
+  classNameUpdates: ClassListUpdate[]
+}
+
+export type ClassListUpdate =
+  | { type: 'add'; property: string; value: string }
+  | { type: 'remove'; property: string }
+
+export const add = ({ property, value }: { property: string; value: string }): ClassListUpdate => ({
+  type: 'add',
+  property: property,
+  value: value,
+})
+export const remove = (property: string): ClassListUpdate => ({
+  type: 'remove',
+  property: property,
+})
+
+export function updateClassListCommand(
+  whenToRun: WhenToRun,
+  element: ElementPath,
+  classNameUpdates: ClassListUpdate[],
+): UpdateClassList {
+  return {
+    type: 'UPDATE_CLASS_LIST',
+    whenToRun: whenToRun,
+    element: element,
+    classNameUpdates: classNameUpdates,
+  }
+}
+
+export const runUpdateClassList: CommandFunction<UpdateClassList> = (
+  editorState: EditorState,
+  command: UpdateClassList,
+) => {
+  const { element, classNameUpdates } = command
+
+  const currentClassNameAttribute = getClassNameAttribute(
+    getElementFromProjectContents(element, editorState.projectContents),
+  )?.value
+
+  if (currentClassNameAttribute == null) {
+    return {
+      editorStatePatches: [],
+      commandDescription: `Update class list for ${EP.toUid(element)} with ${classNameUpdates}`,
+    }
+  }
+
+  const parsedClassList = getParsedClassList(
+    currentClassNameAttribute,
+    getTailwindConfigCached(editorState),
+  )
+
+  const propertiesToRemove = mapDropNulls(
+    (update) => (update.type !== 'remove' ? null : update.property),
+    classNameUpdates,
+  )
+
+  const propertiesToUpdate: PropertiesToUpdate = classNameUpdates.reduce(
+    (acc: { [property: string]: string }, val) =>
+      val.type === 'remove' ? acc : { ...acc, [val.property]: val.value },
+    {},
+  )
+
+  const updatedClassList = [
+    removeClasses(propertiesToRemove),
+    updateExistingClasses(propertiesToUpdate),
+    addNewClasses(propertiesToUpdate),
+  ].reduce((classList, fn) => fn(classList), parsedClassList)
+
+  const newClassList = getClassListFromParsedClassList(
+    updatedClassList,
+    getTailwindConfigCached(editorState),
+  )
+
+  const { editorStatePatch } = applyValuesAtPath(editorState, element, [
+    {
+      path: PP.create('className'),
+      value: jsExpressionValue(newClassList, emptyComments),
+    },
+  ])
+
+  return {
+    editorStatePatches: [editorStatePatch],
+    commandDescription: `Update class list for ${EP.toUid(element)} to ${newClassList}`,
+  }
+}
diff --git a/editor/src/core/tailwind/tailwind-class-list-utils.spec.ts b/editor/src/core/tailwind/tailwind-class-list-utils.spec.ts
new file mode 100644
index 000000000000..ca8816febed2
--- /dev/null
+++ b/editor/src/core/tailwind/tailwind-class-list-utils.spec.ts
@@ -0,0 +1,194 @@
+import type { TailwindClassParserResult } from './tailwind-class-list-utils'
+import {
+  addNewClasses,
+  getClassListFromParsedClassList,
+  getParsedClassList,
+  removeClasses,
+  updateExistingClasses,
+} from './tailwind-class-list-utils'
+
+describe('tailwind class list utils', () => {
+  describe('class list parsing / writing', () => {
+    function classNameAstSlice(ast: TailwindClassParserResult) {
+      switch (ast.type) {
+        case 'unparsed':
+          return ast
+        case 'parsed':
+          const slice: Record<string, unknown> = {
+            type: ast.type,
+            property: ast.ast.property,
+            value: ast.ast.value,
+          }
+          if (ast.ast.negative) {
+            slice.negative = true
+          }
+          return slice
+      }
+    }
+    it('can parse the class list', () => {
+      const classList = getParsedClassList(
+        'p-4 m-4 lg:w-4 hover:text-red-100 -top-4 flex flex-row fancyButton',
+        null,
+      )
+      expect(classList.map(classNameAstSlice)).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "property": "padding",
+            "type": "parsed",
+            "value": "1rem",
+          },
+          Object {
+            "property": "margin",
+            "type": "parsed",
+            "value": "1rem",
+          },
+          Object {
+            "property": "width",
+            "type": "parsed",
+            "value": "1rem",
+          },
+          Object {
+            "property": "textColor",
+            "type": "parsed",
+            "value": "#fee2e2",
+          },
+          Object {
+            "negative": true,
+            "property": "positionTop",
+            "type": "parsed",
+            "value": "1rem",
+          },
+          Object {
+            "property": "display",
+            "type": "parsed",
+            "value": "flex",
+          },
+          Object {
+            "property": "flexDirection",
+            "type": "parsed",
+            "value": "row",
+          },
+          Object {
+            "className": "fancyButton",
+            "type": "unparsed",
+          },
+        ]
+      `)
+    })
+
+    it('respects the tailwind config when parsing the class list', () => {
+      const classList = getParsedClassList('flex gap-huge', {
+        content: [],
+        theme: { extend: { gap: { huge: '123px' } } },
+      })
+      expect(classList.map(classNameAstSlice)).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "property": "display",
+            "type": "parsed",
+            "value": "flex",
+          },
+          Object {
+            "property": "gap",
+            "type": "parsed",
+            "value": "123px",
+          },
+        ]
+      `)
+    })
+
+    it('can stringify class list', () => {
+      const classList = getClassListFromParsedClassList(
+        [
+          {
+            type: 'parsed',
+            ast: { property: 'padding', value: '2rem', variants: [], negative: false },
+          },
+          {
+            type: 'parsed',
+            ast: { property: 'positionTop', value: '-14px', variants: [], negative: false },
+          },
+          {
+            type: 'parsed',
+            ast: { property: 'display', value: 'flex', variants: [], negative: false },
+          },
+          {
+            type: 'parsed',
+            ast: { property: 'gap', value: '123px', variants: [], negative: false },
+          },
+          { type: 'unparsed', className: 'highlight-button' },
+        ],
+        {
+          content: [],
+          theme: { extend: { gap: { huge: '123px' } } },
+        },
+      )
+
+      expect(classList).toMatchInlineSnapshot(`"p-8 -top-[14px] flex gap-huge highlight-button"`)
+    })
+
+    it('stringifying a parsed class list yields the same class list string', () => {
+      const startingClassList =
+        'p-4 m-2 w-4 lg:w-8 text-black hover:text-red-200 flex flex-row fancy-button'
+      const classList = getClassListFromParsedClassList(
+        getParsedClassList(startingClassList, null),
+        null,
+      )
+      expect(classList).toEqual(startingClassList)
+    })
+  })
+
+  describe('removing classes', () => {
+    it('can remove property', () => {
+      const classList = getParsedClassList('p-4 m-2 text-white w-4 flex flex-row', null)
+      const updatedClassList = removeClasses(['padding', 'textColor'])(classList)
+      expect(getClassListFromParsedClassList(updatedClassList, null)).toMatchInlineSnapshot(
+        `"m-2 w-4 flex flex-row"`,
+      )
+    })
+    it('does not remove property with selector', () => {
+      const classList = getParsedClassList(
+        'p-4 m-2 text-white hover:text-red-100 w-4 flex flex-row',
+        null,
+      )
+      const updatedClassList = removeClasses(['padding', 'textColor'])(classList)
+      expect(getClassListFromParsedClassList(updatedClassList, null)).toMatchInlineSnapshot(
+        `"m-2 hover:text-red-100 w-4 flex flex-row"`,
+      )
+    })
+  })
+
+  describe('updating classes', () => {
+    it('can update class in class list', () => {
+      const classList = getParsedClassList('p-4 m-2 text-white w-4 flex flex-row', null)
+      const updatedClassList = updateExistingClasses({
+        flexDirection: 'column',
+        width: '23px',
+      })(classList)
+      expect(getClassListFromParsedClassList(updatedClassList, null)).toMatchInlineSnapshot(
+        `"p-4 m-2 text-white w-[23px] flex flex-col"`,
+      )
+    })
+    it('does not remove property with selector', () => {
+      const classList = getParsedClassList('p-4 hover:p-6 m-2 text-white w-4 flex flex-row', null)
+      const updatedClassList = updateExistingClasses({ padding: '8rem' })(classList)
+      expect(getClassListFromParsedClassList(updatedClassList, null)).toMatchInlineSnapshot(
+        `"p-32 hover:p-6 m-2 text-white w-4 flex flex-row"`,
+      )
+    })
+  })
+
+  describe('adding new classes', () => {
+    it('can add new class to class list', () => {
+      const classList = getParsedClassList('p-4 m-2 text-white w-4 flex flex-row', null)
+      const updatedClassList = addNewClasses({
+        backgroundColor: 'white',
+        justifyContent: 'space-between',
+        positionLeft: '-20px',
+      })(classList)
+      expect(getClassListFromParsedClassList(updatedClassList, null)).toMatchInlineSnapshot(
+        `"p-4 m-2 text-white w-4 flex flex-row bg-white justify-between -left-[20px]"`,
+      )
+    })
+  })
+})
diff --git a/editor/src/core/tailwind/tailwind-class-list-utils.ts b/editor/src/core/tailwind/tailwind-class-list-utils.ts
new file mode 100644
index 000000000000..e2b0bd63b825
--- /dev/null
+++ b/editor/src/core/tailwind/tailwind-class-list-utils.ts
@@ -0,0 +1,106 @@
+import * as TailwindClassParser from '@xengine/tailwindcss-class-parser'
+import type { Config } from 'tailwindcss/types/config'
+import { mapDropNulls } from '../shared/array-utils'
+
+export type ParsedTailwindClass = {
+  property: string
+  value: string
+  variants: unknown[]
+  negative: boolean
+} & Record<string, unknown>
+
+export type TailwindClassParserResult =
+  | { type: 'unparsed'; className: string }
+  | { type: 'parsed'; ast: ParsedTailwindClass }
+
+export function getParsedClassList(
+  classList: string,
+  config: Config | null,
+): TailwindClassParserResult[] {
+  return classList.split(' ').map((c) => {
+    const result = TailwindClassParser.parse(c, config ?? undefined)
+    if (result.kind === 'error') {
+      return { type: 'unparsed', className: c }
+    }
+    return { type: 'parsed', ast: result }
+  })
+}
+
+export function getClassListFromParsedClassList(
+  parsedClassList: TailwindClassParserResult[],
+  config: Config | null,
+): string {
+  return parsedClassList
+    .map((c) => {
+      if (c.type === 'unparsed') {
+        return c.className
+      }
+      return TailwindClassParser.classname(
+        c.ast as any, // FIXME the types are not exported from @xengine/tailwindcss-class-parser
+        config ?? undefined,
+      )
+    })
+    .join(' ')
+}
+
+export type ClassListTransform = (
+  parsedClassList: TailwindClassParserResult[],
+) => TailwindClassParserResult[]
+
+export interface PropertiesToUpdate {
+  [property: string]: string
+}
+
+export const addNewClasses =
+  (propertiesToAdd: PropertiesToUpdate): ClassListTransform =>
+  (parsedClassList: TailwindClassParserResult[]) => {
+    const existingProperties = new Set(
+      mapDropNulls((cls) => (cls.type !== 'parsed' ? null : cls.ast.property), parsedClassList),
+    )
+
+    const newClasses: TailwindClassParserResult[] = mapDropNulls(
+      ([prop, value]) =>
+        existingProperties.has(prop)
+          ? null
+          : {
+              type: 'parsed',
+              ast: { property: prop, value: value, variants: [], negative: false },
+            },
+      Object.entries(propertiesToAdd),
+    )
+
+    const classListWithNewClasses = [...parsedClassList, ...newClasses]
+    return classListWithNewClasses
+  }
+
+export const updateExistingClasses =
+  (propertiesToUpdate: PropertiesToUpdate): ClassListTransform =>
+  (parsedClassList: TailwindClassParserResult[]) => {
+    const classListWithUpdatedClasses: TailwindClassParserResult[] = parsedClassList.map((cls) => {
+      if (cls.type !== 'parsed' || cls.ast.variants.length > 0) {
+        return cls
+      }
+      const updatedProperty = propertiesToUpdate[cls.ast.property]
+      if (updatedProperty == null) {
+        return cls
+      }
+      return {
+        type: 'parsed',
+        ast: { property: cls.ast.property, value: updatedProperty, variants: [], negative: false },
+      }
+    })
+    return classListWithUpdatedClasses
+  }
+
+export const removeClasses =
+  (propertiesToRemove: string[]): ClassListTransform =>
+  (parsedClassList: TailwindClassParserResult[]) => {
+    const propertiesToRemoveSet = new Set(propertiesToRemove)
+    const classListWithRemovedClasses = parsedClassList.filter((cls) => {
+      if (cls.type !== 'parsed' || cls.ast.variants.length > 0) {
+        return cls
+      }
+      return !propertiesToRemoveSet.has(cls.ast.property)
+    })
+    return classListWithRemovedClasses
+  }
diff --git a/editor/src/core/tailwind/tailwind-options.tsx b/editor/src/core/tailwind/tailwind-options.tsx
index 93710dce45f0..e7f60785b475 100644
--- a/editor/src/core/tailwind/tailwind-options.tsx
+++ b/editor/src/core/tailwind/tailwind-options.tsx
@@ -222,8 +222,8 @@ export function useFilteredOptions(
   }, [filter, maxResults, onEmptyResults])
 }
 
-function getClassNameAttribute(element: JSXElementChild | null): {
-  value: string | null
+function getClassNameJSXAttribute(element: JSXElementChild | null): {
+  value: any | null
   isSettable: boolean
 } {
   if (element != null && isJSXElement(element)) {
@@ -248,6 +248,26 @@ function getClassNameAttribute(element: JSXElementChild | null): {
   }
 }
 
+export function getClassNameAttribute(element: JSXElementChild | null): {
+  value: string | null
+  isSettable: boolean
+} {
+  const classNameJSXAttribute = getClassNameJSXAttribute(element)
+  if (
+    classNameJSXAttribute.value == null ||
+    // The type check here is necessary because in <div className /> the value
+    // of `className` would be `true`
+    typeof classNameJSXAttribute.value !== 'string'
+  ) {
+    return {
+      value: null,
+      isSettable: classNameJSXAttribute.isSettable,
+    }
+  }
+
+  return classNameJSXAttribute
+}
+
 export function useGetSelectedClasses(): {
   selectedClasses: Array<string>
   elementPaths: Array<ElementPath>

From 4eb10e3f3b30a153796376c3c372ea163b8cee0e Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Thu, 10 Oct 2024 11:42:18 +0300
Subject: [PATCH 125/272] fix(cache): dont include file version in cache
 (#6494)

**Problem:**
The current cache cached `ParseFileResult`, which contained the file
version, which was incorrect when saving files from the vs code.

**Fix:**
Cache `ParsedTextFile` (which is only the parse result itself), which
doesn't rely on the file version.

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 .../parser-printer/parse-cache-utils.worker.ts       | 12 +++++++-----
 .../workers/parser-printer/parser-printer-worker.ts  |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/editor/src/core/workers/parser-printer/parse-cache-utils.worker.ts b/editor/src/core/workers/parser-printer/parse-cache-utils.worker.ts
index 463be361a299..7687e09f1cc3 100644
--- a/editor/src/core/workers/parser-printer/parse-cache-utils.worker.ts
+++ b/editor/src/core/workers/parser-printer/parse-cache-utils.worker.ts
@@ -3,10 +3,12 @@ import { URL_HASH } from '../../../common/env-vars'
 import { type ParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 import {
   ARBITRARY_CODE_FILE_NAME,
+  createParseFileResult,
   type ParseFile,
   type ParseFileResult,
 } from '../common/worker-types'
 import localforage from 'localforage'
+import type { ParsedTextFile } from 'utopia-shared/src/types'
 
 export const CACHE_DB_NAME = 'editor-cache'
 export const PARSE_CACHE_STORE_NAME = 'file-parse-cache'
@@ -66,7 +68,7 @@ export async function getParseResultFromCache(
   file: ParseFile,
   parsingCacheOptions: ParseCacheOptions,
 ): Promise<ParseFileResult | null> {
-  const { filename, content } = file
+  const { filename, content, versionNumber } = file
   if (!shouldUseCacheForFile(filename, parsingCacheOptions)) {
     return null
   }
@@ -74,9 +76,9 @@ export async function getParseResultFromCache(
   //check localforage for cache
   const cachedResult = await getParseCacheStore().getItem<CachedParseResult>(cacheKey)
   const cachedResultForContent = cachedResult?.[getCacheIndexKeyWithVersion(content)]
-  if (cachedResultForContent?.parseResult?.type === 'PARSE_SUCCESS') {
+  if (cachedResultForContent?.type === 'PARSE_SUCCESS') {
     logCacheMessage(parsingCacheOptions, 'Cache hit for', ...stringIdentifiers(filename, content))
-    return cachedResultForContent
+    return createParseFileResult(filename, cachedResultForContent, versionNumber)
   }
   logCacheMessage(parsingCacheOptions, 'Cache miss for', ...stringIdentifiers(filename, content))
   return null
@@ -84,7 +86,7 @@ export async function getParseResultFromCache(
 
 export async function storeParseResultInCache(
   file: ParseFile,
-  result: ParseFileResult,
+  result: ParsedTextFile,
   parsingCacheOptions: ParseCacheOptions,
 ): Promise<void> {
   const { filename, content } = file
@@ -121,4 +123,4 @@ export async function clearParseCache(parsingCacheOptions: ParseCacheOptions) {
   })
 }
 
-type CachedParseResult = { [fileContent: string]: ParseFileResult }
+type CachedParseResult = { [fileContent: string]: ParsedTextFile }
diff --git a/editor/src/core/workers/parser-printer/parser-printer-worker.ts b/editor/src/core/workers/parser-printer/parser-printer-worker.ts
index e89289472261..9de424eb7f26 100644
--- a/editor/src/core/workers/parser-printer/parser-printer-worker.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer-worker.ts
@@ -104,7 +104,7 @@ export function getParseFileResult(
     parseOptions.parsingCacheOptions.useParsingCache
   ) {
     // non blocking cache write
-    void storeParseResultInCache(file, result, parseOptions.parsingCacheOptions)
+    void storeParseResultInCache(file, result.parseResult, parseOptions.parsingCacheOptions)
   }
 
   return result

From a844aad3cbd67089470d55829f3883c20ed9c4d8 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Thu, 10 Oct 2024 10:58:33 +0200
Subject: [PATCH 126/272] Fix grid rearrange bugs (#6509)

**Problem:**
This PR fixes 2 issues:
1. it is possible to drag a multicell child further to top/left and then
it collapses
2. dragging a multicell child to top/left corner collapses it to the
single top/left cell
3. width and height mismatch caused weird resize in multicell elements
without explicit row or column setting.

**Fix:**
1. Restrict the target row/column to >0 numbers
2. Make sure multicell children are not reordered, but rearranged,
because reorder deletes all explicit column/row properties
3. fix the crazy mistype in the code

and add tests!

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../strategies/grid-helpers.ts                |  26 +++-
 ...-rearrange-move-strategy.spec.browser2.tsx | 133 +++++++++++++++++-
 2 files changed, 151 insertions(+), 8 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index bacc17c6ec2a..bf51b4149b2c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -93,9 +93,9 @@ export function runGridRearrangeMove(
     originalElementGridConfiguration
 
   // get the new adjusted row
-  const row = targetCellCoords.row - mouseCellPosInOriginalElement.row
+  const row = Math.max(targetCellCoords.row - mouseCellPosInOriginalElement.row, 1)
   // get the new adjusted column
-  const column = targetCellCoords.column - mouseCellPosInOriginalElement.column
+  const column = Math.max(targetCellCoords.column - mouseCellPosInOriginalElement.column, 1)
 
   const gridCellMoveCommands = setGridPropsCommands(targetElement, gridTemplate, {
     gridColumnStart: gridPositionValue(column),
@@ -326,9 +326,9 @@ function getGridChildCellCoordBoundsFromProps(
     return propValue.numericalPosition ?? innerFallback
   }
   const column = getGridProperty('gridColumnStart', fallback.column)
-  const height = getGridProperty('gridColumnEnd', fallback.column + (fallback.height ?? 1)) - column
+  const height = getGridProperty('gridColumnEnd', fallback.column + (fallback.width ?? 1)) - column
   const row = getGridProperty('gridRowStart', fallback.row)
-  const width = getGridProperty('gridRowEnd', fallback.row + (fallback.width ?? 1)) - row
+  const width = getGridProperty('gridRowEnd', fallback.row + (fallback.height ?? 1)) - row
 
   return {
     row,
@@ -466,6 +466,18 @@ function getGridMoveType(params: {
   }
 
   const elementGridProperties = specialSizeMeasurements.elementGridProperties
+  const gridRowStart = gridPositionNumberValue(elementGridProperties.gridRowStart)
+  const gridColumnStart = gridPositionNumberValue(elementGridProperties.gridColumnStart)
+  const gridRowEnd = gridPositionNumberValue(elementGridProperties.gridRowEnd)
+  const gridColumnEnd = gridPositionNumberValue(elementGridProperties.gridColumnEnd)
+
+  const isMultiCellChild =
+    (gridRowEnd != null && gridRowStart != null && gridRowEnd > gridRowStart + 1) ||
+    (gridColumnEnd != null && gridColumnStart != null && gridColumnEnd > gridColumnStart + 1)
+
+  if (isMultiCellChild) {
+    return 'rearrange'
+  }
 
   // The first element is intrinsically in order, so try to adjust for that
   if (params.possiblyReorderIndex === 0) {
@@ -474,9 +486,9 @@ function getGridMoveType(params: {
       params.cellsSortedByPosition[0].path,
       params.originalElementMetadata.elementPath,
     )
-    const isAlreadyAtOrigin =
-      gridPositionNumberValue(elementGridProperties.gridRowStart) === 1 &&
-      gridPositionNumberValue(elementGridProperties.gridColumnStart) === 1
+
+    const isAlreadyAtOrigin = gridRowStart === 1 && gridColumnStart === 1
+
     if (isTheOnlyChild || isAlreadyTheFirstChild || isAlreadyAtOrigin) {
       return 'reorder'
     }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
index f72f00a4ef17..baf321a316f4 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
@@ -35,6 +35,26 @@ describe('grid rearrange move strategy', () => {
     })
   })
 
+  it('can not rearrange multicell element out of the grid', async () => {
+    const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+    const testId = 'aaa'
+    // moving a multi-cell element to the left, but it is already on the left of the grid
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
+      scale: 1,
+      pathString: `sb/scene/grid/${testId}`,
+      testId: testId,
+      targetCell: { row: 2, column: 1 },
+      draggedCell: { row: 2, column: 2 },
+    })
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '5',
+      gridColumnStart: '1',
+      gridRowEnd: '3',
+      gridRowStart: '1',
+    })
+  })
+
   it('can rearrange element with no explicit grid props set', async () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
@@ -684,6 +704,28 @@ export var storyboard = (
 
       expect(second.cells).toEqual(['orange', 'pink', 'cyan', 'blue'])
     })
+
+    it('doesnt reorder when element occupies multiple cells', async () => {
+      const editor = await renderTestEditorWithCode(
+        ProjectCodeReorderwithMultiCellChild,
+        'await-first-dom-report',
+      )
+
+      const result = await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 1 })
+      expect({
+        gridRowStart: result.gridRowStart,
+        gridRowEnd: result.gridRowEnd,
+        gridColumnStart: result.gridColumnStart,
+        gridColumnEnd: result.gridColumnEnd,
+      }).toEqual({
+        gridColumnEnd: '3',
+        gridColumnStart: '1',
+        gridRowEnd: 'auto',
+        gridRowStart: '1',
+      })
+
+      expect(result.cells).toEqual(['pink', 'orange', 'cyan', 'blue'])
+    })
   })
 })
 
@@ -694,6 +736,7 @@ async function runMoveTest(
     pathString: string
     testId: string
     targetCell?: GridCellCoordinates
+    draggedCell?: GridCellCoordinates
   },
 ) {
   const elementPathToDrag = EP.fromString(props.pathString)
@@ -704,7 +747,15 @@ async function runMoveTest(
     await editor.dispatch([CanvasActions.zoom(props.scale)], true)
   }
 
-  const sourceGridCell = editor.renderedDOM.getByTestId(GridCellTestId(elementPathToDrag))
+  const sourceGridCell = editor.renderedDOM.getByTestId(
+    props.draggedCell == null
+      ? GridCellTestId(elementPathToDrag)
+      : gridCellTargetId(
+          EP.fromString('sb/scene/grid'),
+          props.draggedCell.row,
+          props.draggedCell.column,
+        ),
+  )
   const targetGridCell = editor.renderedDOM.getByTestId(
     gridCellTargetId(
       EP.fromString('sb/scene/grid'),
@@ -928,3 +979,83 @@ export var storyboard = (
   </Storyboard>
 )
 `
+
+const ProjectCodeReorderwithMultiCellChild = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 600,
+        height: 600,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 500,
+          height: 500,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr',
+          gridGap: 10,
+          padding: 10,
+        }}
+        data-testid='grid'
+        data-uid='grid'
+      >
+        <div
+          style={{
+            backgroundColor: '#f09',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='pink'
+		  data-testid='pink'
+          data-label='pink'
+        />
+        <div
+          style={{
+            backgroundColor: '#f90',
+            width: '100%',
+            height: '100%',
+            gridColumnStart: 2,
+            gridColumnEnd: 4,
+          }}
+          data-uid='orange'
+		  data-testid='orange'
+          data-label='orange'
+        />
+        <div
+          style={{
+            backgroundColor: '#0f9',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='cyan'
+		  data-testid='cyan'
+          data-label='cyan'
+        />
+        <div
+          style={{
+            backgroundColor: '#09f',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='blue'
+		  data-testid='blue'
+          data-label='blue'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`

From 647fb2321572d606930e4c1a693c6389e376f943 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Thu, 10 Oct 2024 16:00:04 +0200
Subject: [PATCH 127/272] Style plugins (#6513)

# [Example project with a flex
gap](https://utopia.fish/p/71b4ada2-boatneck-lamp/?branch_name=feature-style-plugins)

## Problem
The canvas controls can't edit elements that are styled with Tailwind

## Fix
Add a plugin system, where each plugin provides a data source that
strategies can read from (so as of this PR, either Tailwind or the
inline style), and a function that takes props from the inline style,
and moves them to the right place the style element. For example, the
plugin that implements Tailwind styling takes the inline style props,
converts them to the right tailwind classes, and adds them to the
`className` prop.

The flex gap strategy and the flex gap control is updated to use the
data provided by the plugin system to read the necessary data.

### Out of scope
There's one known limitation of this system as implemented in this PR:
props that are removed by a strategy don't get removed by the
normalization step in plugins. This is only a problem for the Tailwind
plugin (since the inline style plugin leaves the inline style prop as
the strategies left them, so the fix for this will come on a follow-up
PR after this one (the actual fix is already implemented here for anyone
interested
https://github.com/concrete-utopia/utopia/pull/6510/commits/b2fc141d411d684c618792c6b4963e11c7a00f54)

### Details
- Types for the plugin system, and two concrete plugin implementations
are added in the `canvas/plugins` folder
- The data provided by the plugins is added to `InteractionCanvasState`
as the `styleInfoReader` function
- The normalization step provided by the plugins is hooked into the
strategy lifecycle in `interactionFinished`
- The flex gap strategy/controls are updated to use `styleInfoReader`
- `UpdateClassList` is fixed so that it can write the `className` prop
even if it doesn't exist on element at the start of the command

---------

Co-authored-by: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
---
 .../canvas-strategies/canvas-strategies.tsx   |  14 ++
 .../canvas-strategy-types.ts                  |  10 ++
 .../set-flex-gap-strategy.spec.browser2.tsx   |  61 +++++++-
 .../strategies/set-flex-gap-strategy.tsx      |   6 +-
 editor/src/components/canvas/canvas-types.ts  |  22 +++
 .../commands/update-class-list-command.ts     |  13 +-
 .../controls/select-mode/flex-gap-control.tsx |  59 +++++---
 .../select-mode/subdued-flex-gap-controls.tsx |  31 ++--
 editor/src/components/canvas/gap-utils.ts     |  17 +--
 .../canvas/plugins/inline-style-plugin.ts     |  41 +++++
 .../canvas/plugins/style-plugins.ts           |  30 ++++
 .../plugins/tailwind-style-plugin.spec.ts     | 121 +++++++++++++++
 .../canvas/plugins/tailwind-style-plugin.ts   | 143 ++++++++++++++++++
 .../editor/store/dispatch-strategies.tsx      |  11 +-
 .../components/inspector/common/css-utils.ts  |   5 +-
 .../tailwind/tailwind-class-list-utils.ts     |   1 +
 16 files changed, 533 insertions(+), 52 deletions(-)
 create mode 100644 editor/src/components/canvas/plugins/inline-style-plugin.ts
 create mode 100644 editor/src/components/canvas/plugins/style-plugins.ts
 create mode 100644 editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts
 create mode 100644 editor/src/components/canvas/plugins/tailwind-style-plugin.ts

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
index 29d4ae683ffc..97f5895519ff 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -82,6 +82,7 @@ import { reparentSubjectsForInteractionTarget } from './strategies/reparent-help
 import { getReparentTargetUnified } from './strategies/reparent-helpers/reparent-strategy-parent-lookup'
 import { gridRearrangeResizeKeyboardStrategy } from './strategies/grid-rearrange-keyboard-strategy'
 import createCachedSelector from 're-reselect'
+import { getActivePlugin } from '../plugins/style-plugins'
 
 export type CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -202,6 +203,7 @@ export function pickCanvasStateFromEditorState(
   editorState: EditorState,
   builtInDependencies: BuiltInDependencies,
 ): InteractionCanvasState {
+  const activePlugin = getActivePlugin(editorState)
   return {
     builtInDependencies: builtInDependencies,
     interactionTarget: getInteractionTargetFromEditorState(editorState, localSelectedViews),
@@ -214,6 +216,11 @@ export function pickCanvasStateFromEditorState(
     startingElementPathTree: editorState.elementPathTree,
     startingAllElementProps: editorState.allElementProps,
     propertyControlsInfo: editorState.propertyControlsInfo,
+    styleInfoReader: activePlugin.styleInfoFactory({
+      projectContents: editorState.projectContents,
+      metadata: editorState.jsxMetadata,
+      elementPathTree: editorState.elementPathTree,
+    }),
   }
 }
 
@@ -224,6 +231,8 @@ export function pickCanvasStateFromEditorStateWithMetadata(
   metadata: ElementInstanceMetadataMap,
   allElementProps?: AllElementProps,
 ): InteractionCanvasState {
+  const activePlugin = getActivePlugin(editorState)
+
   return {
     builtInDependencies: builtInDependencies,
     interactionTarget: getInteractionTargetFromEditorState(editorState, localSelectedViews),
@@ -236,6 +245,11 @@ export function pickCanvasStateFromEditorStateWithMetadata(
     startingElementPathTree: editorState.elementPathTree, // IMPORTANT! This isn't based on the passed in metadata
     startingAllElementProps: allElementProps ?? editorState.allElementProps,
     propertyControlsInfo: editorState.propertyControlsInfo,
+    styleInfoReader: activePlugin.styleInfoFactory({
+      projectContents: editorState.projectContents,
+      metadata: metadata,
+      elementPathTree: editorState.elementPathTree,
+    }),
   }
 }
 
diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
index 709fc7d5c7dc..e2ab2905af65 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
@@ -14,6 +14,7 @@ import type { AllElementProps } from '../../editor/store/editor-state'
 import type { CanvasCommand } from '../commands/commands'
 import type { ActiveFrameAction } from '../commands/set-active-frames-command'
 import type { StrategyApplicationStatus } from './interaction-state'
+import type { StyleInfo } from '../canvas-types'
 
 // TODO: fill this in, maybe make it an ADT for different strategies
 export interface CustomStrategyState {
@@ -105,6 +106,14 @@ export function controlWithProps<P>(value: ControlWithProps<P>): ControlWithProp
   return value
 }
 
+export type StyleInfoReader = (elementPath: ElementPath) => StyleInfo | null
+
+export type StyleInfoFactory = (context: {
+  projectContents: ProjectContentTreeRoot
+  metadata: ElementInstanceMetadataMap
+  elementPathTree: ElementPathTrees
+}) => StyleInfoReader
+
 export interface InteractionCanvasState {
   interactionTarget: InteractionTarget
   projectContents: ProjectContentTreeRoot
@@ -117,6 +126,7 @@ export interface InteractionCanvasState {
   startingElementPathTree: ElementPathTrees
   startingAllElementProps: AllElementProps
   propertyControlsInfo: PropertyControlsInfo
+  styleInfoReader: StyleInfoReader
 }
 
 export type InteractionTarget = TargetPaths | InsertionSubjects
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx
index 6a205486f4aa..72a3e7b527cf 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx
@@ -13,6 +13,7 @@ import {
   getPrintedUiJsCode,
   makeTestProjectCodeWithSnippet,
   renderTestEditorWithCode,
+  renderTestEditorWithModel,
 } from '../../ui-jsx.test-utils'
 import { shiftModifier } from '../../../../utils/modifiers'
 import { FlexGapTearThreshold } from './set-flex-gap-strategy'
@@ -20,8 +21,14 @@ import type { CanvasPoint } from '../../../../core/shared/math-utils'
 import { canvasPoint } from '../../../../core/shared/math-utils'
 import { checkFlexGapHandlesPositionedCorrectly } from '../../controls/select-mode/flex-gap-control.test-utils'
 import { BakedInStoryboardUID } from '../../../../core/model/scene-utils'
-import { selectComponentsForTest, wait } from '../../../../utils/utils.test-utils'
+import {
+  selectComponentsForTest,
+  setFeatureForBrowserTestsUseInDescribeBlockOnly,
+} from '../../../../utils/utils.test-utils'
 import * as EP from '../../../../core/shared/element-path'
+import { createModifiedProject } from '../../../../sample-projects/sample-project-utils.test-utils'
+import { StoryboardFilePath } from '../../../editor/store/editor-state'
+import { TailwindConfigPath } from '../../../../core/tailwind/tailwind-config'
 
 const DivTestId = 'mydiv'
 
@@ -714,6 +721,58 @@ export var storyboard = (
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(code(20))
     })
   })
+
+  describe('tailwind', () => {
+    setFeatureForBrowserTestsUseInDescribeBlockOnly('Tailwind', true)
+    const Project = createModifiedProject({
+      [StoryboardFilePath]: `
+  import React from 'react'
+  import { Scene, Storyboard } from 'utopia-api'
+  export var storyboard = (
+    <Storyboard data-uid='sb'>
+      <Scene
+        id='scene'
+        commentId='scene'
+        data-uid='scene'
+        style={{
+          width: 700,
+          height: 759,
+          position: 'absolute',
+          left: 212,
+          top: 128,
+        }}
+      >
+        <div
+          data-uid='div'
+          data-testid='${DivTestId}'
+          className='top-10 left-10 absolute flex flex-row gap-12'
+        >
+          <div className='bg-red-500 w-10 h-10' data-uid='child-1' />
+          <div className='bg-red-500 w-10 h-10' data-uid='child-2' />
+        </div>  
+      </Scene>
+    </Storyboard>
+  )
+  
+  `,
+      [TailwindConfigPath]: `
+      const TailwindConfig = { }
+      export default TailwindConfig
+  `,
+      'app.css': `
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;`,
+    })
+
+    it('can set tailwind gap', async () => {
+      const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
+      await selectComponentsForTest(editor, [EP.fromString('sb/scene/div')])
+      await doGapResize(editor, canvasPoint({ x: 10, y: 0 }))
+      const div = editor.renderedDOM.getByTestId(DivTestId)
+      expect(div.className).toEqual('top-10 left-10 absolute flex flex-row gap-16')
+    })
+  })
 })
 
 interface GapTestCodeParams {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
index e247092ba7be..b7740ceeb0e8 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
@@ -95,7 +95,11 @@ export const setFlexGapStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const flexGap = maybeFlexGapData(canvasState.startingMetadata, selectedElement)
+  const flexGap = maybeFlexGapData(
+    canvasState.styleInfoReader(selectedElement),
+    MetadataUtils.findElementByElementPath(canvasState.startingMetadata, selectedElement),
+  )
+
   if (flexGap == null) {
     return null
   }
diff --git a/editor/src/components/canvas/canvas-types.ts b/editor/src/components/canvas/canvas-types.ts
index 92033f498e91..8477786c2cab 100644
--- a/editor/src/components/canvas/canvas-types.ts
+++ b/editor/src/components/canvas/canvas-types.ts
@@ -26,6 +26,7 @@ import type {
 import { InteractionSession } from './canvas-strategies/interaction-state'
 import type { CanvasStrategyId } from './canvas-strategies/canvas-strategy-types'
 import type { MouseButtonsPressed } from '../../utils/mouse'
+import type { CSSNumber, FlexDirection } from '../inspector/common/css-utils'
 
 export const CanvasContainerID = 'canvas-container'
 
@@ -533,3 +534,24 @@ export const EdgePositionBottomRight: EdgePosition = { x: 1, y: 1 }
 export const EdgePositionTopRight: EdgePosition = { x: 1, y: 0 }
 
 export type SelectionLocked = 'locked' | 'locked-hierarchy' | 'selectable'
+
+export type PropertyTag = { type: 'hover' } | { type: 'breakpoint'; name: string }
+
+export interface WithPropertyTag<T> {
+  tag: PropertyTag | null
+  value: T
+}
+
+export const withPropertyTag = <T>(value: T): WithPropertyTag<T> => ({
+  tag: null,
+  value: value,
+})
+
+export type FlexGapInfo = WithPropertyTag<CSSNumber>
+
+export type FlexDirectionInfo = WithPropertyTag<FlexDirection>
+
+export interface StyleInfo {
+  gap: FlexGapInfo | null
+  flexDirection: FlexDirectionInfo | null
+}
diff --git a/editor/src/components/canvas/commands/update-class-list-command.ts b/editor/src/components/canvas/commands/update-class-list-command.ts
index 65e7781dcb9e..208c80719ec8 100644
--- a/editor/src/components/canvas/commands/update-class-list-command.ts
+++ b/editor/src/components/canvas/commands/update-class-list-command.ts
@@ -56,16 +56,9 @@ export const runUpdateClassList: CommandFunction<UpdateClassList> = (
 ) => {
   const { element, classNameUpdates } = command
 
-  const currentClassNameAttribute = getClassNameAttribute(
-    getElementFromProjectContents(element, editorState.projectContents),
-  )?.value
-
-  if (currentClassNameAttribute == null) {
-    return {
-      editorStatePatches: [],
-      commandDescription: `Update class list for ${EP.toUid(element)} with ${classNameUpdates}`,
-    }
-  }
+  const currentClassNameAttribute =
+    getClassNameAttribute(getElementFromProjectContents(element, editorState.projectContents))
+      ?.value ?? ''
 
   const parsedClassList = getParsedClassList(
     currentClassNameAttribute,
diff --git a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
index 0e83aff83ffb..7cd5ce22b8be 100644
--- a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
@@ -22,10 +22,11 @@ import CanvasActions from '../../canvas-actions'
 import { controlForStrategyMemoized } from '../../canvas-strategies/canvas-strategy-types'
 import { createInteractionViaMouse, flexGapHandle } from '../../canvas-strategies/interaction-state'
 import { windowToCanvasCoordinates } from '../../dom-lookup'
+import type { FlexGapData } from '../../gap-utils'
 import {
   cursorFromFlexDirection,
-  maybeFlexGapData,
   gapControlBoundsFromMetadata,
+  maybeFlexGapData,
   recurseIntoChildrenOfMapOrFragment,
 } from '../../gap-utils'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
@@ -46,6 +47,7 @@ import {
   reverseJustifyContent,
 } from '../../../../core/model/flex-utils'
 import { optionalMap } from '../../../../core/shared/optional-utils'
+import { getActivePlugin } from '../../plugins/style-plugins'
 
 interface FlexGapControlProps {
   selectedElement: ElementPath
@@ -130,21 +132,40 @@ export const FlexGapControl = controlForStrategyMemoized<FlexGapControlProps>((p
     elementPathTrees,
     selectedElement,
   )
-  const flexGap = maybeFlexGapData(metadata, selectedElement)
-  if (flexGap == null) {
-    return null
-  }
 
-  const flexGapValue = updatedGapValue ?? flexGap.value
+  const flexGapFromEditor = useEditorState(
+    Substores.fullStore,
+    (store) =>
+      maybeFlexGapData(
+        getActivePlugin(store.editor).styleInfoFactory({
+          projectContents: store.editor.projectContents,
+          metadata: metadata,
+          elementPathTree: store.editor.elementPathTree,
+        })(selectedElement),
+        MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, selectedElement),
+      ),
+    'FlexGapControl flexGapFromEditor',
+  )
 
-  const controlBounds = gapControlBoundsFromMetadata(
-    metadata,
-    selectedElement,
-    children.map((c) => c.elementPath),
-    flexGapValue.renderedValuePx,
-    flexGap.direction,
+  const flexGap: FlexGapData | null = optionalMap(
+    (gap) => ({
+      direction: gap.direction,
+      value: updatedGapValue ?? gap.value,
+    }),
+    flexGapFromEditor,
   )
 
+  const controlBounds =
+    flexGapFromEditor == null || flexGap == null
+      ? null
+      : gapControlBoundsFromMetadata(
+          metadata,
+          selectedElement,
+          children.map((c) => c.elementPath),
+          flexGap.value.renderedValuePx,
+          flexGapFromEditor.direction,
+        )
+
   const contentArea = React.useMemo((): Size => {
     function valueForDimension(
       directions: FlexDirection[],
@@ -162,7 +183,7 @@ export const FlexGapControl = controlForStrategyMemoized<FlexGapControlProps>((p
       }, children),
     )
 
-    if (bounds == null) {
+    if (bounds == null || flexGap == null) {
       return zeroSize
     } else {
       return {
@@ -170,17 +191,17 @@ export const FlexGapControl = controlForStrategyMemoized<FlexGapControlProps>((p
           ['column', 'column-reverse'],
           flexGap.direction,
           bounds.width,
-          flexGapValue.renderedValuePx,
+          flexGap.value.renderedValuePx,
         ),
         height: valueForDimension(
           ['row', 'row-reverse'],
           flexGap.direction,
           bounds.height,
-          flexGapValue.renderedValuePx,
+          flexGap.value.renderedValuePx,
         ),
       }
     }
-  }, [children, flexGap.direction, flexGapValue.renderedValuePx, metadata])
+  }, [children, flexGap, metadata])
 
   const justifyContent = React.useMemo(() => {
     return (
@@ -196,12 +217,16 @@ export const FlexGapControl = controlForStrategyMemoized<FlexGapControlProps>((p
     )
   }, [metadata, selectedElement])
 
+  if (flexGap == null || controlBounds == null) {
+    return null
+  }
+
   return (
     <CanvasOffsetWrapper>
       <div data-testid={FlexGapControlTestId} style={{ pointerEvents: 'none' }}>
         {controlBounds.map(({ bounds, path: p }) => {
           const path = EP.toString(p)
-          const valueToShow = fallbackEmptyValue(flexGapValue)
+          const valueToShow = fallbackEmptyValue(flexGap.value)
           return (
             <GapControlSegment
               key={path}
diff --git a/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx b/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx
index ed5037d454df..ea4b03eb8455 100644
--- a/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx
+++ b/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx
@@ -3,7 +3,7 @@ import { useColorTheme } from '../../../../uuiui'
 import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook'
 import { useBoundingBox } from '../bounding-box-hooks'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
-import type { PathWithBounds } from '../../gap-utils'
+import type { FlexGapData, PathWithBounds } from '../../gap-utils'
 import {
   gapControlBoundsFromMetadata,
   maybeFlexGapData,
@@ -11,6 +11,8 @@ import {
 } from '../../gap-utils'
 import type { ElementPath } from 'utopia-shared/src/types'
 import type { ElementInstanceMetadata } from '../../../../core/shared/element-template'
+import { getActivePlugin } from '../../plugins/style-plugins'
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 
 export interface SubduedFlexGapControlProps {
   hoveredOrFocused: 'hovered' | 'focused'
@@ -34,7 +36,21 @@ export const SubduedFlexGapControl = React.memo<SubduedFlexGapControlProps>((pro
     elementPathTrees.current,
     targets[0],
   )
-  const flexGap = maybeFlexGapData(metadata.current, selectedElement)
+
+  const flexGap = useEditorState(
+    Substores.fullStore,
+    (store) =>
+      maybeFlexGapData(
+        getActivePlugin(store.editor).styleInfoFactory({
+          projectContents: store.editor.projectContents,
+          metadata: store.editor.jsxMetadata,
+          elementPathTree: store.editor.elementPathTree,
+        })(selectedElement),
+        MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, selectedElement),
+      ),
+    'FlexGapControl flexGap',
+  )
+
   if (flexGap == null) {
     return null
   }
@@ -54,7 +70,7 @@ export const SubduedFlexGapControl = React.memo<SubduedFlexGapControlProps>((pro
       {controlBounds.map((controlBound, i) => (
         <FlexGapControl
           key={i}
-          targets={targets}
+          flexGap={flexGap}
           selectedElement={selectedElement}
           hoveredOrFocused={hoveredOrFocused}
           controlBound={controlBound}
@@ -66,26 +82,21 @@ export const SubduedFlexGapControl = React.memo<SubduedFlexGapControlProps>((pro
 })
 
 function FlexGapControl({
-  targets,
+  flexGap,
   selectedElement,
   hoveredOrFocused,
   controlBound,
   flexChildren,
 }: {
-  targets: Array<ElementPath>
   selectedElement: ElementPath
   hoveredOrFocused: 'hovered' | 'focused'
   controlBound: PathWithBounds
   flexChildren: Array<ElementInstanceMetadata>
+  flexGap: FlexGapData
 }) {
   const metadata = useRefEditorState((store) => store.editor.jsxMetadata)
 
   const sideRef = useBoundingBox([controlBound.path], (ref) => {
-    const flexGap = maybeFlexGapData(metadata.current, selectedElement)
-    if (flexGap == null) {
-      return
-    }
-
     const flexGapValue = flexGap.value
 
     const controlBounds = gapControlBoundsFromMetadata(
diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
index a8cbe955a64c..ff735048e77c 100644
--- a/editor/src/components/canvas/gap-utils.ts
+++ b/editor/src/components/canvas/gap-utils.ts
@@ -16,6 +16,7 @@ import type { CanvasRectangle, CanvasVector, Size } from '../../core/shared/math
 import { canvasRectangle, isInfinityRectangle } from '../../core/shared/math-utils'
 import type { ElementPath } from '../../core/shared/project-file-types'
 import { assertNever } from '../../core/shared/utils'
+import type { StyleInfo } from './canvas-types'
 import { CSSCursor } from './canvas-types'
 import type { CSSNumberWithRenderedValue } from './controls/select-mode/controls-common'
 import type { CSSNumber, FlexDirection } from '../inspector/common/css-utils'
@@ -329,15 +330,15 @@ export interface FlexGapData {
 }
 
 export function maybeFlexGapData(
-  metadata: ElementInstanceMetadataMap,
-  elementPath: ElementPath,
+  info: StyleInfo | null,
+  element: ElementInstanceMetadata | null,
 ): FlexGapData | null {
-  const element = MetadataUtils.findElementByElementPath(metadata, elementPath)
   if (
     element == null ||
     element.specialSizeMeasurements.display !== 'flex' ||
     isLeft(element.element) ||
-    !isJSXElement(element.element.value)
+    !isJSXElement(element.element.value) ||
+    info == null
   ) {
     return null
   }
@@ -347,18 +348,14 @@ export function maybeFlexGapData(
   }
 
   const gap = element.specialSizeMeasurements.gap ?? 0
-
-  const gapFromProps: CSSNumber | undefined = defaultEither(
-    undefined,
-    getLayoutProperty('gap', right(element.element.value.props), styleStringInArray),
-  )
+  const gapFromReader = info.gap?.value
 
   const flexDirection = element.specialSizeMeasurements.flexDirection ?? 'row'
 
   return {
     value: {
       renderedValuePx: gap,
-      value: gapFromProps ?? null,
+      value: gapFromReader ?? null,
     },
     direction: flexDirection,
   }
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.ts b/editor/src/components/canvas/plugins/inline-style-plugin.ts
new file mode 100644
index 000000000000..11bc7dfa873b
--- /dev/null
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.ts
@@ -0,0 +1,41 @@
+import { getLayoutProperty } from '../../../core/layout/getLayoutProperty'
+import type { StyleLayoutProp } from '../../../core/layout/layout-helpers-new'
+import { MetadataUtils } from '../../../core/model/element-metadata-utils'
+import { defaultEither, isLeft, mapEither, right } from '../../../core/shared/either'
+import type { JSXElement } from '../../../core/shared/element-template'
+import { isJSXElement } from '../../../core/shared/element-template'
+import { styleStringInArray } from '../../../utils/common-constants'
+import type { ParsedCSSProperties } from '../../inspector/common/css-utils'
+import { withPropertyTag, type WithPropertyTag } from '../canvas-types'
+import type { StylePlugin } from './style-plugins'
+
+function getPropertyFromInstance<P extends StyleLayoutProp, T = ParsedCSSProperties[P]>(
+  prop: P,
+  element: JSXElement,
+): WithPropertyTag<T> | null {
+  return defaultEither(
+    null,
+    mapEither(withPropertyTag, getLayoutProperty(prop, right(element.props), styleStringInArray)),
+  ) as WithPropertyTag<T> | null
+}
+
+export const InlineStylePlugin: StylePlugin = {
+  name: 'Inline Style',
+  styleInfoFactory:
+    ({ metadata }) =>
+    (elementPath) => {
+      const instance = MetadataUtils.findElementByElementPath(metadata, elementPath)
+      if (instance == null || isLeft(instance.element) || !isJSXElement(instance.element.value)) {
+        return null
+      }
+
+      const gap = getPropertyFromInstance('gap', instance.element.value)
+      const flexDirection = getPropertyFromInstance('flexDirection', instance.element.value)
+
+      return {
+        gap: gap,
+        flexDirection: flexDirection,
+      }
+    },
+  normalizeFromInlineStyle: (editor) => editor,
+}
diff --git a/editor/src/components/canvas/plugins/style-plugins.ts b/editor/src/components/canvas/plugins/style-plugins.ts
new file mode 100644
index 000000000000..edbf8ce5720c
--- /dev/null
+++ b/editor/src/components/canvas/plugins/style-plugins.ts
@@ -0,0 +1,30 @@
+import type { ElementPath } from 'utopia-shared/src/types'
+import type { EditorState } from '../../editor/store/editor-state'
+import type { StyleInfoFactory } from '../canvas-strategies/canvas-strategy-types'
+import { InlineStylePlugin } from './inline-style-plugin'
+import { TailwindPlugin } from './tailwind-style-plugin'
+import {
+  getTailwindConfigCached,
+  isTailwindEnabled,
+} from '../../../core/tailwind/tailwind-compilation'
+
+export interface StylePlugin {
+  name: string
+  styleInfoFactory: StyleInfoFactory
+  normalizeFromInlineStyle: (
+    editorState: EditorState,
+    elementsToNormalize: ElementPath[],
+  ) => EditorState
+}
+
+export const Plugins = {
+  InlineStyle: InlineStylePlugin,
+  Tailwind: TailwindPlugin,
+} as const
+
+export function getActivePlugin(editorState: EditorState): StylePlugin {
+  if (isTailwindEnabled()) {
+    return TailwindPlugin(getTailwindConfigCached(editorState))
+  }
+  return InlineStylePlugin
+}
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts
new file mode 100644
index 000000000000..c4490e97d2a0
--- /dev/null
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts
@@ -0,0 +1,121 @@
+import type { JSXAttributes } from 'utopia-shared/src/types'
+import * as EP from '../../../core/shared/element-path'
+import {
+  getJSXElementFromProjectContents,
+  StoryboardFilePath,
+} from '../../editor/store/editor-state'
+import { renderTestEditorWithModel } from '../ui-jsx.test-utils'
+import { TailwindPlugin } from './tailwind-style-plugin'
+import { createModifiedProject } from '../../../sample-projects/sample-project-utils.test-utils'
+import { TailwindConfigPath } from '../../../core/tailwind/tailwind-config'
+import { getTailwindConfigCached } from '../../../core/tailwind/tailwind-compilation'
+
+const Project = (style: Record<string, unknown>) =>
+  createModifiedProject({
+    [StoryboardFilePath]: `
+import React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='scene'
+      commentId='scene'
+      data-uid='scene'
+      style={{
+        width: 700,
+        height: 759,
+        position: 'absolute',
+        left: 212,
+        top: 128,
+      }}
+    >
+      <div
+        data-uid='div'
+        style={${JSON.stringify(style)}}
+      />
+    </Scene>
+  </Storyboard>
+)
+
+`,
+    [TailwindConfigPath]: `
+    const TailwindConfig = {
+        content: [],
+        theme: { extend: { gap: { enormous: '222px' } } }
+    }
+    export default TailwindConfig
+`,
+  })
+
+describe('tailwind style plugin', () => {
+  it('can normalize inline style', async () => {
+    const editor = await renderTestEditorWithModel(
+      Project({
+        top: 2,
+        left: 2,
+        width: 100,
+        height: 100,
+        backgroundColor: 'blue',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '12px',
+      }),
+      'await-first-dom-report',
+    )
+    const target = EP.fromString('sb/scene/div')
+    const normalizedEditor = TailwindPlugin(null).normalizeFromInlineStyle(
+      editor.getEditorState().editor,
+      [target],
+    )
+
+    const normalizedElement = getJSXElementFromProjectContents(
+      target,
+      normalizedEditor.projectContents,
+    )!
+
+    expect(formatJSXAttributes(normalizedElement.props)).toEqual({
+      className: 'flex-row gap-[12px]',
+      'data-uid': 'div',
+      style: { backgroundColor: 'blue', display: 'flex', height: 100, left: 2, top: 2, width: 100 },
+    })
+  })
+  it('can normalize inline style with custom Tailwind config', async () => {
+    const editor = await renderTestEditorWithModel(
+      Project({
+        top: 2,
+        left: 2,
+        width: 100,
+        height: 100,
+        backgroundColor: 'blue',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '222px',
+      }),
+      'await-first-dom-report',
+    )
+    const target = EP.fromString('sb/scene/div')
+    const normalizedEditor = TailwindPlugin(
+      getTailwindConfigCached(editor.getEditorState().editor),
+    ).normalizeFromInlineStyle(editor.getEditorState().editor, [target])
+
+    const normalizedElement = getJSXElementFromProjectContents(
+      target,
+      normalizedEditor.projectContents,
+    )!
+
+    expect(formatJSXAttributes(normalizedElement.props)).toEqual({
+      className: 'flex-row gap-enormous',
+      'data-uid': 'div',
+      style: { backgroundColor: 'blue', display: 'flex', height: 100, left: 2, top: 2, width: 100 },
+    })
+  })
+})
+
+function formatJSXAttributes(attributes: JSXAttributes) {
+  return attributes.reduce((acc: Record<string, unknown>, attribute) => {
+    if (attribute.type === 'JSX_ATTRIBUTES_SPREAD' || attribute.value.type !== 'ATTRIBUTE_VALUE') {
+      return acc
+    }
+    return { ...acc, [attribute.key]: attribute.value.value }
+  }, {})
+}
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
new file mode 100644
index 000000000000..23e2e7413a9c
--- /dev/null
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -0,0 +1,143 @@
+import * as TailwindClassParser from '@xengine/tailwindcss-class-parser'
+import type { JSXAttributesEntry } from 'utopia-shared/src/types'
+import { isLeft } from '../../../core/shared/either'
+import { getClassNameAttribute } from '../../../core/tailwind/tailwind-options'
+import {
+  getElementFromProjectContents,
+  getJSXElementFromProjectContents,
+} from '../../editor/store/editor-state'
+import type { Parser } from '../../inspector/common/css-utils'
+import { cssParsers } from '../../inspector/common/css-utils'
+import { foldAndApplyCommandsSimple } from './../commands/commands'
+import { mapDropNulls } from '../../../core/shared/array-utils'
+import { deleteProperties } from './../commands/delete-properties-command'
+import * as PP from '../../../core/shared/property-path'
+import { updateClassListCommand } from './../commands/update-class-list-command'
+import * as UCL from './../commands/update-class-list-command'
+import type { StylePlugin } from './style-plugins'
+import type { WithPropertyTag } from '../canvas-types'
+import { withPropertyTag } from '../canvas-types'
+import type { Config } from 'tailwindcss/types/config'
+
+function parseTailwindProperty<T>(value: unknown, parse: Parser<T>): WithPropertyTag<T> | null {
+  const parsed = parse(value, null)
+  if (isLeft(parsed)) {
+    return null
+  }
+  return withPropertyTag(parsed.value)
+}
+
+const TailwindPropertyMapping = {
+  gap: 'gap',
+  flexDirection: 'flexDirection',
+} as const
+
+function isSupportedTailwindProperty(prop: unknown): prop is keyof typeof TailwindPropertyMapping {
+  return typeof prop === 'string' && prop in TailwindPropertyMapping
+}
+
+function stringifiedStylePropValue(value: unknown): string | null {
+  if (typeof value === 'string') {
+    return value
+  }
+  if (typeof value === 'number') {
+    return `${value}px`
+  }
+
+  return null
+}
+
+function getTailwindClassMapping(classes: string[], config: Config | null) {
+  const mapping: Record<string, string> = {}
+  classes.forEach((className) => {
+    const parsed = TailwindClassParser.parse(className, config ?? undefined)
+    if (parsed.kind === 'error' || !isSupportedTailwindProperty(parsed.property)) {
+      return
+    }
+    mapping[parsed.property] = parsed.value
+  })
+  return mapping
+}
+
+export const TailwindPlugin = (config: Config | null): StylePlugin => ({
+  name: 'Tailwind',
+  styleInfoFactory:
+    ({ projectContents }) =>
+    (elementPath) => {
+      const classList = getClassNameAttribute(
+        getElementFromProjectContents(elementPath, projectContents),
+      )?.value
+
+      if (classList == null || typeof classList !== 'string') {
+        return null
+      }
+
+      const mapping = getTailwindClassMapping(classList.split(' '), config)
+
+      return {
+        gap: parseTailwindProperty(mapping[TailwindPropertyMapping.gap], cssParsers.gap),
+        flexDirection: parseTailwindProperty(
+          mapping[TailwindPropertyMapping.flexDirection],
+          cssParsers.flexDirection,
+        ),
+      }
+    },
+  normalizeFromInlineStyle: (editorState, elementsToNormalize) => {
+    const commands = elementsToNormalize.flatMap((elementPath) => {
+      const element = getJSXElementFromProjectContents(elementPath, editorState.projectContents)
+      if (element == null) {
+        return []
+      }
+
+      const styleAttribute = element.props.find(
+        (prop): prop is JSXAttributesEntry =>
+          prop.type === 'JSX_ATTRIBUTES_ENTRY' && prop.key === 'style',
+      )
+      if (styleAttribute == null) {
+        return []
+      }
+
+      const styleValue = styleAttribute.value
+      if (styleValue.type !== 'ATTRIBUTE_NESTED_OBJECT') {
+        return []
+      }
+
+      const styleProps = mapDropNulls(
+        (c): { key: keyof typeof TailwindPropertyMapping; value: unknown } | null =>
+          c.type === 'PROPERTY_ASSIGNMENT' &&
+          c.value.type === 'ATTRIBUTE_VALUE' &&
+          isSupportedTailwindProperty(c.key)
+            ? { key: c.key, value: c.value.value }
+            : null,
+        styleValue.content,
+      )
+
+      const stylePropConversions = mapDropNulls(({ key, value }) => {
+        const valueString = stringifiedStylePropValue(value)
+        if (valueString == null) {
+          return null
+        }
+
+        return { property: TailwindPropertyMapping[key], value: valueString }
+      }, styleProps)
+
+      return [
+        deleteProperties(
+          'always',
+          elementPath,
+          Object.keys(TailwindPropertyMapping).map((prop) => PP.create('style', prop)),
+        ),
+        updateClassListCommand(
+          'always',
+          elementPath,
+          stylePropConversions.map(({ property, value }) => UCL.add({ property, value })),
+        ),
+      ]
+    })
+    if (commands.length === 0) {
+      return editorState
+    }
+
+    return foldAndApplyCommandsSimple(editorState, commands)
+  },
+})
diff --git a/editor/src/components/editor/store/dispatch-strategies.tsx b/editor/src/components/editor/store/dispatch-strategies.tsx
index 8d2c0f818fdb..0180914754a7 100644
--- a/editor/src/components/editor/store/dispatch-strategies.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.tsx
@@ -57,6 +57,7 @@ import { isInsertMode } from '../editor-modes'
 import { patchedCreateRemixDerivedDataMemo } from './remix-derived-data'
 import { allowedToEditProject } from './collaborative-editing'
 import { canMeasurePerformance } from '../../../core/performance/performance-utils'
+import { getActivePlugin } from '../../canvas/plugins/style-plugins'
 
 interface HandleStrategiesResult {
   unpatchedEditorState: EditorState
@@ -103,7 +104,8 @@ export function interactionFinished(
             'end-interaction',
           )
         : strategyApplicationResult([], [])
-    const commandResult = foldAndApplyCommands(
+
+    const { editorState } = foldAndApplyCommands(
       newEditorState,
       storedState.patchedEditor,
       [],
@@ -111,9 +113,14 @@ export function interactionFinished(
       'end-interaction',
     )
 
+    const normalizedEditor = getActivePlugin(editorState).normalizeFromInlineStyle(
+      editorState,
+      strategyResult.elementsToRerender,
+    )
+
     const finalEditor: EditorState = applyElementsToRerenderFromStrategyResult(
       {
-        ...commandResult.editorState,
+        ...normalizedEditor,
         // TODO instead of clearing the metadata, we should save the latest valid metadata here to save a dom-walker run
         jsxMetadata: {},
         domMetadata: {},
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index b2c28db037f9..2f5ebadc2f04 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -5445,7 +5445,10 @@ export const computedStyleKeys: Array<string> = Object.keys({
   ...layoutEmptyValuesNew,
 })
 
-type Parser<T> = (simpleValue: unknown, rawValue: ModifiableAttribute | null) => Either<string, T>
+export type Parser<T> = (
+  simpleValue: unknown,
+  rawValue: ModifiableAttribute | null,
+) => Either<string, T>
 
 type ParseFunction<T, K extends keyof T> = (
   prop: K,
diff --git a/editor/src/core/tailwind/tailwind-class-list-utils.ts b/editor/src/core/tailwind/tailwind-class-list-utils.ts
index e2b0bd63b825..fd6152c79f32 100644
--- a/editor/src/core/tailwind/tailwind-class-list-utils.ts
+++ b/editor/src/core/tailwind/tailwind-class-list-utils.ts
@@ -40,6 +40,7 @@ export function getClassListFromParsedClassList(
         config ?? undefined,
       )
     })
+    .filter((part) => part != null && part.length > 0)
     .join(' ')
 }
 

From 6ec725ca173291d7daf8b9a8cecc97da891dc77a Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 11 Oct 2024 12:41:59 +0200
Subject: [PATCH 128/272] Insert better default grids (#6512)

**Problem:**

1. When creating a grid layout from the inspector the default grid
should be 2x2 with a 10px gap
2. There should be an insert menu entry in the canvas toolbar for a 3x3
grid with a 10px gap
3. There should be an entry for a grid in the floating component picker
too

**Fix:**

Implement all of the above:



https://github.com/user-attachments/assets/6214c47d-ae77-4735-b9ec-ab00198e4b90

Note: the icon for the grid is the one used for the navigator, there
should be a dedicated one with the right size (16x16) for the canvas
toolbar as well.

Fixes #6511
---
 .../convert-to-grid-strategy.ts               | 28 +++++++--
 .../editor/canvas-toolbar-states.tsx          | 27 +++++++++
 .../src/components/editor/canvas-toolbar.tsx  | 12 ++++
 editor/src/components/editor/defaults.ts      | 14 ++++-
 .../src/components/editor/insert-callbacks.ts |  5 ++
 .../editor/insertmenu.spec.browser2.tsx       |  2 +-
 .../project-components.spec.ts.snap           | 23 +++++++
 .../components/shared/project-components.ts   | 60 +++++++++++++++++++
 8 files changed, 164 insertions(+), 7 deletions(-)

diff --git a/editor/src/components/common/shared-strategies/convert-to-grid-strategy.ts b/editor/src/components/common/shared-strategies/convert-to-grid-strategy.ts
index 9c99dddfe74c..8299cbd6cb21 100644
--- a/editor/src/components/common/shared-strategies/convert-to-grid-strategy.ts
+++ b/editor/src/components/common/shared-strategies/convert-to-grid-strategy.ts
@@ -47,7 +47,10 @@ function guessLayoutInfoAlongAxis(
   }
 }
 
-function guessMatchingGridSetup(children: Array<CanvasFrameAndTarget>): {
+function guessMatchingGridSetup(
+  children: Array<CanvasFrameAndTarget>,
+  isFlexContainer: boolean,
+): {
   gap: number
   numberOfColumns: number
   numberOfRows: number
@@ -65,10 +68,12 @@ function guessMatchingGridSetup(children: Array<CanvasFrameAndTarget>): {
     (a, b) => b.frame.y - (a.frame.y + a.frame.height),
   )
 
+  const minRowsOrCols = isFlexContainer ? 1 : 2
+
   return {
     gap: (horizontalData.averageGap + verticalData.averageGap) / 2,
-    numberOfColumns: Math.max(1, horizontalData.nChildren),
-    numberOfRows: Math.max(1, verticalData.nChildren),
+    numberOfColumns: Math.max(minRowsOrCols, horizontalData.nChildren),
+    numberOfRows: Math.max(minRowsOrCols, verticalData.nChildren),
   }
 }
 
@@ -90,9 +95,16 @@ export function convertLayoutToGridCommands(
       frame: MetadataUtils.getFrameOrZeroRectInCanvasCoords(child, metadata),
     }))
 
-    const { gap, numberOfColumns, numberOfRows } = guessMatchingGridSetup(childFrames)
+    const isFlexContainer = MetadataUtils.isFlexLayoutedContainer(
+      MetadataUtils.findElementByElementPath(metadata, elementPath),
+    )
+
+    const { gap, numberOfColumns, numberOfRows } = guessMatchingGridSetup(
+      childFrames,
+      isFlexContainer,
+    )
 
-    return [
+    let commands = [
       ...prunePropsCommands(flexContainerProps, elementPath),
       ...prunePropsCommands(gridContainerProps, elementPath),
       ...childrenPaths.flatMap((child) => [
@@ -114,5 +126,11 @@ export function convertLayoutToGridCommands(
         Array(numberOfRows).fill('1fr').join(' '),
       ),
     ]
+
+    if (!isFlexContainer) {
+      commands.push(setProperty('always', elementPath, PP.create('style', 'gap'), 10))
+    }
+
+    return commands
   })
 }
diff --git a/editor/src/components/editor/canvas-toolbar-states.tsx b/editor/src/components/editor/canvas-toolbar-states.tsx
index 091326327fbe..ed410bd250f9 100644
--- a/editor/src/components/editor/canvas-toolbar-states.tsx
+++ b/editor/src/components/editor/canvas-toolbar-states.tsx
@@ -8,6 +8,9 @@ import type { Optic } from '../../core/shared/optics/optics'
 import { fromField, fromTypeGuard } from '../../core/shared/optics/optic-creators'
 import { anyBy, set } from '../../core/shared/optics/optic-utilities'
 import type { EditorAction } from './action-types'
+import { MetadataUtils } from '../../core/model/element-metadata-utils'
+import { getJSXAttributesAtPath } from '../../core/shared/jsx-attribute-utils'
+import { create } from '../../core/shared/property-path'
 
 // This is the data structure that governs the Canvas Toolbar's submenus and active buttons
 type ToolbarMode =
@@ -21,6 +24,7 @@ type ToolbarMode =
         imageInsertionActive: boolean
         buttonInsertionActive: boolean
         conditionalInsertionActive: boolean
+        gridInsertionActive: boolean
         insertSidebarOpen: boolean
       }
     }
@@ -110,6 +114,28 @@ export function useToolbarMode(): ToolbarMode {
     const insertionTargetConditional =
       editorMode.type === 'insert' &&
       editorMode.subjects.some((subject) => subject.insertionSubjectWrapper === 'conditional')
+    const insertionTargetGrid =
+      editorMode.type === 'insert' &&
+      editorMode.subjects.some((subject) => {
+        if (subject.element.name.baseVariable !== 'div') {
+          return false
+        }
+
+        const style = subject.element.props.find(
+          (p) => p.type === 'JSX_ATTRIBUTES_ENTRY' && p.key === 'style',
+        )
+        if (style == null) {
+          return false
+        }
+
+        const display = getJSXAttributesAtPath(subject.element.props, create('style', 'display'))
+        return (
+          style.type === 'JSX_ATTRIBUTES_ENTRY' &&
+          style.value.type === 'ATTRIBUTE_VALUE' &&
+          display.attribute.type === 'PART_OF_ATTRIBUTE_VALUE' &&
+          display.attribute.value === 'grid'
+        )
+      })
 
     return {
       primary: 'insert',
@@ -119,6 +145,7 @@ export function useToolbarMode(): ToolbarMode {
         imageInsertionActive: insertionTargetImage,
         buttonInsertionActive: insertionTargetButton,
         conditionalInsertionActive: insertionTargetConditional,
+        gridInsertionActive: insertionTargetGrid,
         insertSidebarOpen: rightMenuTab === RightMenuTab.Insert,
       },
     }
diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
index 9ebb819f7aa5..0455691f97f2 100644
--- a/editor/src/components/editor/canvas-toolbar.tsx
+++ b/editor/src/components/editor/canvas-toolbar.tsx
@@ -28,6 +28,7 @@ import {
   useEnterDrawToInsertForButton,
   useEnterDrawToInsertForConditional,
   useEnterDrawToInsertForDiv,
+  useEnterDrawToInsertForGrid,
   useEnterDrawToInsertForImage,
   useEnterTextEditMode,
 } from './insert-callbacks'
@@ -79,6 +80,7 @@ export const InsertOrEditTextButtonTestId = 'insert-or-edit-text-button'
 export const PlayModeButtonTestId = 'canvas-toolbar-play-mode'
 export const CommentModeButtonTestId = (status: string) => `canvas-toolbar-comment-mode-${status}`
 export const InsertConditionalButtonTestId = 'insert-mode-conditional'
+export const InsertGridButtonTestId = 'insert-mode-grid'
 export const CanvasToolbarId = 'canvas-toolbar'
 
 export const CanvasToolbarSearchPortalId = 'canvas-toolbar-search-portal'
@@ -220,6 +222,7 @@ export const CanvasToolbar = React.memo(() => {
   const insertTextCallback = useEnterTextEditMode()
   const insertButtonCallback = useEnterDrawToInsertForButton()
   const insertConditionalCallback = useEnterDrawToInsertForConditional()
+  const insertGridCallback = useEnterDrawToInsertForGrid()
 
   // Back to select mode, close the "floating" menu and turn off the forced insert mode.
   const dispatchSwitchToSelectModeCloseMenus = React.useCallback(() => {
@@ -548,6 +551,15 @@ export const CanvasToolbar = React.memo(() => {
                     onClick={insertDivCallback}
                   />
                 </Tooltip>
+                <Tooltip title='Insert grid' placement='bottom'>
+                  <ToolbarButton
+                    testid={InsertGridButtonTestId}
+                    iconCategory='navigator-element'
+                    iconType='grid'
+                    onClick={insertGridCallback}
+                    size={12}
+                  />
+                </Tooltip>
                 <Tooltip title='Insert image' placement='bottom'>
                   <ToolbarButton
                     iconType='image'
diff --git a/editor/src/components/editor/defaults.ts b/editor/src/components/editor/defaults.ts
index 222c4723733d..1652011c6c3e 100644
--- a/editor/src/components/editor/defaults.ts
+++ b/editor/src/components/editor/defaults.ts
@@ -12,7 +12,7 @@ import {
   simpleAttribute,
 } from '../../core/shared/element-template'
 import type { NormalisedFrame } from 'utopia-api/core'
-import { defaultImageAttributes } from '../shared/project-components'
+import { defaultImageAttributes, insertableGridStyle } from '../shared/project-components'
 
 export function defaultSceneElement(
   uid: string,
@@ -171,6 +171,18 @@ export function defaultButtonElement(uid: string): JSXElement {
   )
 }
 
+export function defaultGridElement(uid: string): JSXElement {
+  return jsxElement(
+    jsxElementName('div', []),
+    uid,
+    jsxAttributesFromMap({
+      'data-uid': jsExpressionValue(uid, emptyComments),
+      style: jsExpressionValue(insertableGridStyle(), emptyComments),
+    }),
+    [],
+  )
+}
+
 export function defaultFlexRowOrColStyle(): JSExpression {
   return jsExpressionValue(
     {
diff --git a/editor/src/components/editor/insert-callbacks.ts b/editor/src/components/editor/insert-callbacks.ts
index bed02ea43072..1aefc7255cd0 100644
--- a/editor/src/components/editor/insert-callbacks.ts
+++ b/editor/src/components/editor/insert-callbacks.ts
@@ -23,6 +23,7 @@ import { enableInsertModeForJSXElement, showToast } from './actions/action-creat
 import {
   defaultButtonElement,
   defaultDivElement,
+  defaultGridElement,
   defaultImgElement,
   defaultSpanElement,
 } from './defaults'
@@ -106,6 +107,10 @@ export function useEnterDrawToInsertForButton(): (event: React.MouseEvent<Elemen
   return useEnterDrawToInsertForElement(defaultButtonElement)
 }
 
+export function useEnterDrawToInsertForGrid(): (event: React.MouseEvent<Element>) => void {
+  return useEnterDrawToInsertForElement(defaultGridElement)
+}
+
 export function useEnterDrawToInsertForConditional(): (event: React.MouseEvent<Element>) => void {
   const conditionalInsertCallback = useEnterDrawToInsertForElement(defaultDivElement)
 
diff --git a/editor/src/components/editor/insertmenu.spec.browser2.tsx b/editor/src/components/editor/insertmenu.spec.browser2.tsx
index 3dc761f4d0c3..7e70223e118f 100644
--- a/editor/src/components/editor/insertmenu.spec.browser2.tsx
+++ b/editor/src/components/editor/insertmenu.spec.browser2.tsx
@@ -26,7 +26,7 @@ function getInsertItems() {
   return screen.queryAllByTestId(/^component-picker-item-/gi)
 }
 
-const allInsertItemsCount = 23
+const allInsertItemsCount = 24
 
 function openInsertMenu(renderResult: EditorRenderResult) {
   return renderResult.dispatch(
diff --git a/editor/src/components/shared/__snapshots__/project-components.spec.ts.snap b/editor/src/components/shared/__snapshots__/project-components.spec.ts.snap
index 8f4fcbee4592..35a569f48fc9 100644
--- a/editor/src/components/shared/__snapshots__/project-components.spec.ts.snap
+++ b/editor/src/components/shared/__snapshots__/project-components.spec.ts.snap
@@ -336,6 +336,29 @@ Array [
       "type": "SAMPLES_GROUP",
     },
   },
+  Object {
+    "insertableComponents": Array [
+      Object {
+        "defaultSize": Object {
+          "height": 150,
+          "width": 150,
+        },
+        "element": [Function],
+        "icon": "component",
+        "importsToAdd": Object {},
+        "insertionCeiling": Object {
+          "type": "file-root",
+        },
+        "name": "Grid",
+        "stylePropOptions": Array [
+          "do-not-add",
+        ],
+      },
+    ],
+    "source": Object {
+      "type": "HTML_GRID",
+    },
+  },
   Object {
     "insertableComponents": Array [],
     "source": Object {
diff --git a/editor/src/components/shared/project-components.ts b/editor/src/components/shared/project-components.ts
index aabba62f4631..1fc9ef491136 100644
--- a/editor/src/components/shared/project-components.ts
+++ b/editor/src/components/shared/project-components.ts
@@ -63,6 +63,7 @@ import { intrinsicHTMLElementNamesThatSupportChildren } from '../../core/shared/
 import { getTopLevelElementByExportsDetail } from '../../core/model/project-file-utils'
 import { type Icon } from 'utopia-api'
 import type { FileRootPath } from '../canvas/ui-jsx-canvas'
+import type { CSSProperties } from 'react'
 
 export type StylePropOption = 'do-not-add' | 'add-size'
 
@@ -126,6 +127,14 @@ export function insertableComponentGroupDiv(): InsertableComponentGroupDiv {
   return { type: 'HTML_DIV' }
 }
 
+export interface InsertableComponentGroupGrid {
+  type: 'HTML_GRID'
+}
+
+export function insertableComponentGroupGrid(): InsertableComponentGroupGrid {
+  return { type: 'HTML_GRID' }
+}
+
 export function insertableComponentGroupHTML(): InsertableComponentGroupHTML {
   return {
     type: 'HTML_GROUP',
@@ -207,6 +216,7 @@ export type InsertableComponentGroupType =
   | InsertableComponentGroupSamples
   | InsertableComponentGroupGroups
   | InsertableComponentGroupMap
+  | InsertableComponentGroupGrid
 
 export interface InsertableComponentGroup {
   source: InsertableComponentGroupType
@@ -254,6 +264,8 @@ export function getInsertableGroupLabel(insertableType: InsertableComponentGroup
       return 'Div'
     case 'MAP_GROUP':
       return 'List'
+    case 'HTML_GRID':
+      return 'Grid'
     default:
       assertNever(insertableType)
   }
@@ -271,6 +283,7 @@ export function getInsertableGroupPackageStatus(
     case 'GROUPS_GROUP':
     case 'HTML_DIV':
     case 'MAP_GROUP':
+    case 'HTML_GRID':
       return 'loaded'
     case 'PROJECT_DEPENDENCY_GROUP':
       return insertableType.dependencyStatus
@@ -462,6 +475,47 @@ const divComponentGroup = {
   ),
 }
 
+export function insertableGridStyle(): CSSProperties {
+  return {
+    position: 'absolute',
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr 1fr',
+    gridTemplateRows: '1fr 1fr 1fr',
+    gap: 10,
+  }
+}
+
+const gridComponentGroup: ComponentDescriptorsForFile = {
+  grid: {
+    properties: {},
+    supportsChildren: true,
+    preferredChildComponents: [],
+    source: defaultComponentDescriptor(),
+    variants: [
+      {
+        insertMenuLabel: 'Grid',
+        elementToInsert: () =>
+          jsxElementWithoutUID(
+            'div',
+            jsxAttributesFromMap({
+              style: jsExpressionValue(
+                {
+                  ...insertableGridStyle(),
+                  width: 150,
+                  height: 150,
+                },
+                emptyComments,
+              ),
+            }),
+            [],
+          ),
+        importsToAdd: {},
+      },
+    ],
+    ...ComponentDescriptorDefaults,
+  },
+}
+
 const conditionalElementsDescriptors: ComponentDescriptorsForFile = {
   conditional: {
     properties: {},
@@ -832,6 +886,11 @@ export function getComponentGroups(
   // Add groups group.
   addDependencyDescriptor(insertableComponentGroupGroups(), groupElementsDescriptors) // TODO instead of this, use createWrapInGroupActions!
 
+  addDependencyDescriptor(insertableComponentGroupGrid(), gridComponentGroup, {
+    width: 150,
+    height: 150,
+  })
+
   // Add entries for dependencies of the project.
   for (const dependency of dependencies) {
     if (isResolvedNpmDependency(dependency)) {
@@ -909,6 +968,7 @@ export function insertMenuModesForInsertableComponentGroupType(
     case 'SAMPLES_GROUP':
     case 'HTML_DIV':
     case 'MAP_GROUP':
+    case 'HTML_GRID':
       return insertMenuModes.all
     case 'GROUPS_GROUP':
       return insertMenuModes.onlyWrap

From da6bf80b0b51fa75d9c2e92a60144a37467685a6 Mon Sep 17 00:00:00 2001
From: RheeseyB <1044774+Rheeseyb@users.noreply.github.com>
Date: Fri, 11 Oct 2024 11:48:53 +0100
Subject: [PATCH 129/272] Use node module resolution (#6425)

**Problem**
Utopia's module resolution logic is based on the [2019 node module
resolution](https://web.archive.org/web/20190213102857/https://nodejs.org/api/modules.html#modules_all_together),
but that logic has significantly evolved since then. This means that
there are plenty of cases where the module resolution whilst running a
project in Utopia would not match that whilst running elsewhere, causing
certain projects to break in unexpected ways.

**Fix:**
I've implemented the latest node.js module resolution logic from
https://nodejs.org/api/modules.html#all-together. Since this is of
course running in the browser, this also still needs to take into
account the [`browser` field of the
`package.json`](https://github.com/defunctzombie/package-browser-field-spec),
which was already implemented but I wanted to call it out as that is one
area where this differs from the node.js spec.

There is still a remaining `FIXME` in here about partial path matching
when checking the `imports` and `exports` fields. I'll tackle that in a
followup PR.

Fixes #6187
---
 .../components/custom-code/code-file.spec.ts  |  90 ++-
 .../src/components/custom-code/code-file.ts   |   3 +
 .../core/es-modules/evaluator/evaluator.ts    |   1 +
 .../package-manager/module-resolution-esm.ts  | 228 ++++++
 .../module-resolution-utils.ts                | 216 ++++++
 .../package-manager/module-resolution.spec.ts | 130 +++-
 .../package-manager/module-resolution.ts      | 665 ++++++++----------
 .../package-manager/package-manager.ts        |  14 +-
 .../module-resolution-examples.json           |  53 +-
 .../core/frameworks/framework-hooks-vite.ts   |   5 +-
 editor/src/utils/path-utils.ts                |  13 +-
 11 files changed, 1006 insertions(+), 412 deletions(-)
 create mode 100644 editor/src/core/es-modules/package-manager/module-resolution-esm.ts
 create mode 100644 editor/src/core/es-modules/package-manager/module-resolution-utils.ts

diff --git a/editor/src/components/custom-code/code-file.spec.ts b/editor/src/components/custom-code/code-file.spec.ts
index 4562aa933e10..7cb6d28929d9 100644
--- a/editor/src/components/custom-code/code-file.spec.ts
+++ b/editor/src/components/custom-code/code-file.spec.ts
@@ -26,7 +26,12 @@ import {
   textFileContents,
   unparsed,
 } from '../../core/shared/project-file-types'
-import { addFileToProjectContents, getTextFileByPath } from '../assets'
+import {
+  addFileToProjectContents,
+  contentsToTree,
+  getTextFileByPath,
+  type ProjectContentTreeRoot,
+} from '../assets'
 import type { ExportsInfo, MultiFileBuildResult } from '../../core/workers/common/worker-types'
 import { createBuiltInDependenciesList } from '../../core/es-modules/package-manager/built-in-dependencies-list'
 
@@ -53,6 +58,15 @@ function transpileCode(
 const appJSCode =
   "\nimport * as React from 'react'\nimport {\n  Ellipse,\n  HelperFunctions,\n  Image,\n  NodeImplementations,\n  Rectangle,\n  Text,\n  View,\n} from 'utopia-api'\nimport {\n  colorTheme,\n  Button,\n  Dialog,\n  Icn,\n  Icons,\n  LargerIcons,\n  FunctionIcons,\n  MenuIcons,\n  Isolator,\n  TabComponent,\n  Tooltip,\n  ActionSheet,\n  Avatar,\n  ControlledTextArea,\n  Title,\n  H1,\n  H2,\n  H3,\n  Subdued,\n  InspectorSectionHeader,\n  InspectorSubsectionHeader,\n  FlexColumn,\n  FlexRow,\n  ResizableFlexColumn,\n  PopupList,\n  Section,\n  SectionTitleRow,\n  SectionBodyArea,\n  UtopiaListSelect,\n  UtopiaListItem,\n  CheckboxInput,\n  NumberInput,\n  StringInput,\n  OnClickOutsideHOC,\n} from 'uuiui'\n\nexport var canvasMetadata = {\n  specialNodes: [],\n  nodeMetadata: {},\n  scenes: [\n    {\n      component: 'App',\n      frame: { height: 812, left: 0, width: 375, top: 0 },\n      props: { layout: { top: 0, left: 0, bottom: 0, right: 0 } },\n      container: { layoutSystem: 'pinSystem' },\n    },\n  ],\n  elementMetadata: {},\n}\n\nexport var App = (props) => {\n  return (\n    <View\n      style={{ ...props.style, backgroundColor: colorTheme.white.value }}\n      layout={{ layoutSystem: 'pinSystem' }}\n      data-uid={'aaa'}\n    ></View>\n  )\n}\n\n"
 
+const SampleSingleFileProjectContents: ProjectContentTreeRoot = contentsToTree({
+  '/app.js': textFile(
+    textFileContents(appJSCode, unparsed, RevisionsState.CodeAhead),
+    null,
+    null,
+    0,
+  ),
+})
+
 const SampleSingleFileBuildResult = transpileCode(['/app.js'], {
   '/app.js': appJSCode,
 })
@@ -84,15 +98,40 @@ const SampleSingleFileExportsInfo = [
   },
 ]
 
+const multiFileAppJSCode =
+  "\nimport * as React from 'react'\nimport {\n  Ellipse,\n  HelperFunctions,\n  Image,\n  NodeImplementations,\n  Rectangle,\n  Text,\n  View,\n} from 'utopia-api'\nimport {\n  colorTheme,\n  Button,\n  Dialog,\n  Icn,\n  Icons,\n  LargerIcons,\n  FunctionIcons,\n  MenuIcons,\n  Isolator,\n  TabComponent,\n  Tooltip,\n  ActionSheet,\n  Avatar,\n  ControlledTextArea,\n  Title,\n  H1,\n  H2,\n  H3,\n  Subdued,\n  InspectorSectionHeader,\n  InspectorSubsectionHeader,\n  FlexColumn,\n  FlexRow,\n  ResizableFlexColumn,\n  PopupList,\n  Section,\n  SectionTitleRow,\n  SectionBodyArea,\n  UtopiaListSelect,\n  UtopiaListItem,\n  CheckboxInput,\n  NumberInput,\n  StringInput,\n  OnClickOutsideHOC,\n} from 'uuiui'\n\nexport var canvasMetadata = {\n  specialNodes: [],\n  nodeMetadata: {},\n  scenes: [\n    {\n      component: 'App',\n      frame: { height: 812, left: 0, width: 375, top: 0 },\n      props: { layout: { top: 0, left: 0, bottom: 0, right: 0 } },\n      container: { layoutSystem: 'pinSystem' },\n    },\n  ],\n  elementMetadata: {},\n}\n\n\nexport var App = (props) => {\n  return (\n    <View\n      style={{ ...props.style, backgroundColor: colorTheme.white.value }}\n      layout={{ layoutSystem: 'pinSystem' }}\n      data-uid={'aaa'}\n    ></View>\n  )\n}\n\n"
+const multiFileComponentsJSCode =
+  "// component library\nimport * as React from 'react'\nimport { Text, View } from 'utopia-api'\n\nexport default (props) => (\n  <View layout={props.layout} style={props.style} onMouseDown={props.onMouseDown}>\n    <Text\n      style={{ fontSize: 16, textAlign: 'center' }}\n      text={props.text}\n      layout={{\n        left: 0,\n        top: 10,\n        width: '100%',\n        height: '100%',\n      }}\n      textSizing={'fixed'}\n    />\n  </View>\n)\n\nexport const LABEL = 'press me! 😉'\n\nexport const ComponentWithProps = (props) => {\n  return (\n    <div\n      style={{\n        ...props.style,\n        backgroundColor: props.pink ? 'hotpink' : 'transparent',\n        whiteSpace: 'normal',\n      }}\n    >\n      {(props.text + ' ').repeat(props.num)}\n    </div>\n  )\n}\n\nComponentWithProps.propertyControls = {\n  text: {\n    type: 'string',\n    title: 'Title',\n    defaultValue: 'Change me',\n  },\n  num: {\n    type: 'number',\n    title: 'amount',\n    defaultValue: 2,\n  },\n  pink: {\n    type: 'boolean',\n    title: 'Enabled',\n    defaultValue: true,\n  },\n}\n\n"
+const multiFilePreviewJSXCode =
+  'import * as React from "react";\nimport * as ReactDOM from "react-dom";\nimport { App } from "../app";\n\nconst root = document.getElementById("root");\nif (root != null) {\nReactDOM.render(<App />, root);\n}'
+
+const SampleMultiFileProjectContents: ProjectContentTreeRoot = contentsToTree({
+  '/app.js': textFile(
+    textFileContents(multiFileAppJSCode, unparsed, RevisionsState.CodeAhead),
+    null,
+    null,
+    0,
+  ),
+  '/src/components.js': textFile(
+    textFileContents(multiFileComponentsJSCode, unparsed, RevisionsState.CodeAhead),
+    null,
+    null,
+    0,
+  ),
+  '/public/preview.jsx': textFile(
+    textFileContents(multiFilePreviewJSXCode, unparsed, RevisionsState.CodeAhead),
+    null,
+    null,
+    0,
+  ),
+})
+
 const SampleMultiFileBuildResult = transpileCode(
   ['/app.js', '/src/components.js', '/public/preview.jsx'],
   {
-    '/app.js':
-      "\nimport * as React from 'react'\nimport {\n  Ellipse,\n  HelperFunctions,\n  Image,\n  NodeImplementations,\n  Rectangle,\n  Text,\n  View,\n} from 'utopia-api'\nimport {\n  colorTheme,\n  Button,\n  Dialog,\n  Icn,\n  Icons,\n  LargerIcons,\n  FunctionIcons,\n  MenuIcons,\n  Isolator,\n  TabComponent,\n  Tooltip,\n  ActionSheet,\n  Avatar,\n  ControlledTextArea,\n  Title,\n  H1,\n  H2,\n  H3,\n  Subdued,\n  InspectorSectionHeader,\n  InspectorSubsectionHeader,\n  FlexColumn,\n  FlexRow,\n  ResizableFlexColumn,\n  PopupList,\n  Section,\n  SectionTitleRow,\n  SectionBodyArea,\n  UtopiaListSelect,\n  UtopiaListItem,\n  CheckboxInput,\n  NumberInput,\n  StringInput,\n  OnClickOutsideHOC,\n} from 'uuiui'\n\nexport var canvasMetadata = {\n  specialNodes: [],\n  nodeMetadata: {},\n  scenes: [\n    {\n      component: 'App',\n      frame: { height: 812, left: 0, width: 375, top: 0 },\n      props: { layout: { top: 0, left: 0, bottom: 0, right: 0 } },\n      container: { layoutSystem: 'pinSystem' },\n    },\n  ],\n  elementMetadata: {},\n}\n\n\nexport var App = (props) => {\n  return (\n    <View\n      style={{ ...props.style, backgroundColor: colorTheme.white.value }}\n      layout={{ layoutSystem: 'pinSystem' }}\n      data-uid={'aaa'}\n    ></View>\n  )\n}\n\n",
-    '/src/components.js':
-      "// component library\nimport * as React from 'react'\nimport { Text, View } from 'utopia-api'\n\nexport default (props) => (\n  <View layout={props.layout} style={props.style} onMouseDown={props.onMouseDown}>\n    <Text\n      style={{ fontSize: 16, textAlign: 'center' }}\n      text={props.text}\n      layout={{\n        left: 0,\n        top: 10,\n        width: '100%',\n        height: '100%',\n      }}\n      textSizing={'fixed'}\n    />\n  </View>\n)\n\nexport const LABEL = 'press me! 😉'\n\nexport const ComponentWithProps = (props) => {\n  return (\n    <div\n      style={{\n        ...props.style,\n        backgroundColor: props.pink ? 'hotpink' : 'transparent',\n        whiteSpace: 'normal',\n      }}\n    >\n      {(props.text + ' ').repeat(props.num)}\n    </div>\n  )\n}\n\nComponentWithProps.propertyControls = {\n  text: {\n    type: 'string',\n    title: 'Title',\n    defaultValue: 'Change me',\n  },\n  num: {\n    type: 'number',\n    title: 'amount',\n    defaultValue: 2,\n  },\n  pink: {\n    type: 'boolean',\n    title: 'Enabled',\n    defaultValue: true,\n  },\n}\n\n",
-    '/public/preview.jsx':
-      'import * as React from "react";\nimport * as ReactDOM from "react-dom";\nimport { App } from "../app";\n\nconst root = document.getElementById("root");\nif (root != null) {\nReactDOM.render(<App />, root);\n}',
+    '/app.js': multiFileAppJSCode,
+    '/src/components.js': multiFileComponentsJSCode,
+    '/public/preview.jsx': multiFilePreviewJSXCode,
   },
 )
 
@@ -216,14 +255,25 @@ const SampleExportsInfoWithError = [
   },
 ]
 
+const exceptionThrowingCodeJSFile = "export const boom = (() => {\n  throw Error('booom')\n})()\n"
+
+const SampleExceptionThrowingProjectContents: ProjectContentTreeRoot = contentsToTree({
+  '/src/code.js': textFile(
+    textFileContents(exceptionThrowingCodeJSFile, unparsed, RevisionsState.CodeAhead),
+    null,
+    null,
+    0,
+  ),
+})
+
 const SampleBuildResultWithException = transpileCode(['/src/code.js'], {
-  '/src/code.js': "export const boom = (() => {\n  throw Error('booom')\n})()\n",
+  '/src/code.js': exceptionThrowingCodeJSFile,
 })
 
 const SampleExportsInfoWithException = [
   {
     filename: '/src/code.js',
-    code: "export const boom = (() => {\n  throw Error('booom')\n})()\n",
+    code: exceptionThrowingCodeJSFile,
     exportTypes: {
       boom: {
         type: 'never',
@@ -390,7 +440,9 @@ describe('Creating require function', () => {
       createBuiltInDependenciesList(null),
     )
 
-    expect(codeResultCache.curriedRequireFn({})('/', './app', false)).toMatchSnapshot()
+    expect(
+      codeResultCache.curriedRequireFn(SampleSingleFileProjectContents)('/', './app', false),
+    ).toMatchSnapshot()
   })
   it('Creates require function for multi file build result', () => {
     const codeResultCache = generateCodeResultCache(
@@ -403,8 +455,16 @@ describe('Creating require function', () => {
       createBuiltInDependenciesList(null),
     )
 
-    expect(codeResultCache.curriedRequireFn({})('/', './app', false)).toMatchSnapshot()
-    expect(codeResultCache.curriedRequireFn({})('/', './src/components', false)).toMatchSnapshot()
+    expect(
+      codeResultCache.curriedRequireFn(SampleMultiFileProjectContents)('/', './app', false),
+    ).toMatchSnapshot()
+    expect(
+      codeResultCache.curriedRequireFn(SampleMultiFileProjectContents)(
+        '/',
+        './src/components',
+        false,
+      ),
+    ).toMatchSnapshot()
   })
   it('Require throws exception for module code', () => {
     const codeResultCache = generateCodeResultCache(
@@ -418,7 +478,11 @@ describe('Creating require function', () => {
     )
 
     expect(() =>
-      codeResultCache.curriedRequireFn({})('/', './src/code', false),
+      codeResultCache.curriedRequireFn(SampleExceptionThrowingProjectContents)(
+        '/',
+        './src/code',
+        false,
+      ),
     ).toThrowErrorMatchingSnapshot()
   })
   it('Require throws exception for import from non-existing module', () => {
diff --git a/editor/src/components/custom-code/code-file.ts b/editor/src/components/custom-code/code-file.ts
index db71fa3fa70c..373b778925d3 100644
--- a/editor/src/components/custom-code/code-file.ts
+++ b/editor/src/components/custom-code/code-file.ts
@@ -355,6 +355,9 @@ export function generateCodeResultCache(
     delete evaluationCache[fileToDelete]
   }
 
+  // FIXME This actually isn't doing anything ever, because it appears that `updatedModules` above is always empty,
+  // however the require and resolve functions are still used, so we need to figure out which part of this code is
+  // still alive and which is dead
   // MUTATION ALERT! This function is mutating editorState.nodeModules.files by inserting the project files into it.
   incorporateBuildResult(nodeModules, projectContents, projectModules)
 
diff --git a/editor/src/core/es-modules/evaluator/evaluator.ts b/editor/src/core/es-modules/evaluator/evaluator.ts
index 089651ed16a7..2c1ff0134993 100644
--- a/editor/src/core/es-modules/evaluator/evaluator.ts
+++ b/editor/src/core/es-modules/evaluator/evaluator.ts
@@ -92,6 +92,7 @@ function evaluateJs(
 
   function firstErrorHandler(error: Error): void {
     if (isEsModuleError(error)) {
+      // This is effectively implementing `MAYBE_DETECT_AND_LOAD` from https://nodejs.org/api/modules.html#all-together
       const { transpiledCode, sourceMap } = transformToCommonJS(filePath, moduleCode)
       evaluateWithHandler(transpiledCode, sourceMap, secondErrorHandler)
     } else {
diff --git a/editor/src/core/es-modules/package-manager/module-resolution-esm.ts b/editor/src/core/es-modules/package-manager/module-resolution-esm.ts
new file mode 100644
index 000000000000..4483cf4bedca
--- /dev/null
+++ b/editor/src/core/es-modules/package-manager/module-resolution-esm.ts
@@ -0,0 +1,228 @@
+import { getPartsFromPath, makePathFromParts, normalizePath } from '../../../utils/path-utils'
+import type { ParseResult } from '../../../utils/value-parser-utils'
+import { foldEither } from '../../shared/either'
+import { isEsCodeFile } from '../../shared/project-file-types'
+import type {
+  ExportsField,
+  FileForPathParts,
+  FileLookupFn,
+  FileLookupResult,
+  PartialPackageJsonDefinition,
+} from './module-resolution-utils'
+import {
+  findClosestPackageScopeToPath,
+  getPartialPackageJson,
+  isResolveSuccess,
+  resolveNotPresent,
+} from './module-resolution-utils'
+
+// Using the logic from https://nodejs.org/api/modules.html#all-together
+// This is separated to emphasize that these functions act an ESM compatibility
+// layer in CommonJS
+
+// LOAD_PACKAGE_IMPORTS(X, DIR)
+export function loadPackageImports(
+  path: string,
+  originPath: string,
+  packageJsonLookupFn: FileForPathParts,
+  lookupFn: FileLookupFn,
+): FileLookupResult {
+  // Loading a module from the imports field mapping https://nodejs.org/api/packages.html#imports
+  // Find the closest package scope SCOPE to DIR.
+  const { packageJsonFileResult, packageJsonDir } = findClosestPackageScopeToPath(
+    originPath,
+    packageJsonLookupFn,
+  )
+
+  // If no scope was found, return
+  if (
+    !(isResolveSuccess(packageJsonFileResult) && isEsCodeFile(packageJsonFileResult.success.file))
+  ) {
+    return resolveNotPresent
+  }
+
+  let possiblePackageJson: ParseResult<PartialPackageJsonDefinition>
+  try {
+    possiblePackageJson = getPartialPackageJson(packageJsonFileResult.success.file.fileContents)
+  } catch {
+    return resolveNotPresent
+  }
+
+  return foldEither(
+    (_) => resolveNotPresent,
+    (packageJson) => {
+      // If the SCOPE/package.json "imports" is null or undefined, return
+      const importsEntry = packageJson['imports']
+      if (importsEntry == null) {
+        return resolveNotPresent
+      }
+
+      return packageImportsExportsResolve(path, importsEntry, packageJsonDir, lookupFn)
+    },
+    possiblePackageJson,
+  )
+}
+
+// LOAD_PACKAGE_EXPORTS(X, DIR)
+export function loadPackageExports(
+  path: string,
+  originPath: string,
+  packageJsonLookupFn: FileForPathParts,
+  lookupFn: FileLookupFn,
+): FileLookupResult {
+  // Try to interpret X as a combination of NAME and SUBPATH where the name
+  // may have a @scope/ prefix and the subpath begins with a slash (`/`)
+  const regex = /((?:@[\w|\-|\.]+\/)*[\w|\-|\.]+)(\/[\w|\-|\.]*)*/
+  const matches = path.match(regex)
+  if (matches == null) {
+    // If X does not match this pattern, return
+    return resolveNotPresent
+  }
+
+  const [_combined, name, subpath] = matches
+
+  // If DIR/NAME/package.json is not a file, return
+  const pathToModule = normalizePath([...getPartsFromPath(originPath), name])
+  const packageJsonPathParts = pathToModule.concat('package.json')
+  const packageJsonFileResult = packageJsonLookupFn(packageJsonPathParts)
+  if (
+    !(isResolveSuccess(packageJsonFileResult) && isEsCodeFile(packageJsonFileResult.success.file))
+  ) {
+    return resolveNotPresent
+  }
+
+  // Parse DIR/NAME/package.json, and look for "exports" field
+  let possiblePackageJson: ParseResult<PartialPackageJsonDefinition>
+  try {
+    possiblePackageJson = getPartialPackageJson(packageJsonFileResult.success.file.fileContents)
+  } catch {
+    return resolveNotPresent
+  }
+
+  return foldEither(
+    (_) => resolveNotPresent,
+    (packageJson) => {
+      // If "exports" is null or undefined, return.
+      const exportsEntry = packageJson['exports']
+      if (exportsEntry == null) {
+        return resolveNotPresent
+      }
+
+      return packageImportsExportsResolve(
+        `.${subpath}`,
+        exportsEntry,
+        makePathFromParts(pathToModule),
+        lookupFn,
+      )
+    },
+    possiblePackageJson,
+  )
+}
+
+// LOAD_PACKAGE_SELF(X, DIR)
+export function loadPackageSelf(
+  path: string,
+  originPath: string,
+  packageJsonLookupFn: FileForPathParts,
+  lookupFn: FileLookupFn,
+): FileLookupResult {
+  // Find the closest package scope SCOPE to DIR.
+  const { packageJsonFileResult, packageJsonDir } = findClosestPackageScopeToPath(
+    originPath,
+    packageJsonLookupFn,
+  )
+
+  // If no scope was found, return.
+  if (
+    !(isResolveSuccess(packageJsonFileResult) && isEsCodeFile(packageJsonFileResult.success.file))
+  ) {
+    return resolveNotPresent
+  }
+
+  let possiblePackageJson: ParseResult<PartialPackageJsonDefinition>
+  try {
+    possiblePackageJson = getPartialPackageJson(packageJsonFileResult.success.file.fileContents)
+  } catch {
+    return resolveNotPresent
+  }
+  return foldEither(
+    (_) => resolveNotPresent,
+    (packageJson) => {
+      // If "exports" is null or undefined, return.
+      const exportsEntry = packageJson['exports']
+      if (exportsEntry == null) {
+        return resolveNotPresent
+      }
+
+      // If "name" is not the first segment of X, return
+      const nameEntry = packageJson.name
+      if (nameEntry == null || !path.startsWith(nameEntry)) {
+        return resolveNotPresent
+      }
+
+      return packageImportsExportsResolve(
+        `.${path.slice(nameEntry.length)}`,
+        exportsEntry,
+        packageJsonDir,
+        lookupFn,
+      )
+    },
+    possiblePackageJson,
+  )
+}
+
+// PACKAGE_IMPORTS_EXPORTS_RESOLVE
+export function packageImportsExportsResolve(
+  path: string,
+  importsOrExportsEntry: ExportsField,
+  packageJsonDir: string,
+  lookupFn: FileLookupFn,
+): FileLookupResult {
+  // FIXME partial path lookup because the exports field could be along the lines of `{ '@thing': { stuff: { ... }} }`
+  // in which case we would want to match that against the import `@thing/stuff`
+  const importsOrExportsResult =
+    typeof importsOrExportsEntry === 'string' ? importsOrExportsEntry : importsOrExportsEntry[path]
+  if (importsOrExportsResult == null) {
+    return resolveNotPresent
+  }
+
+  if (typeof importsOrExportsResult === 'string') {
+    // Lookup the import relative to the package.json we have found
+    return lookupFn(importsOrExportsResult, packageJsonDir)
+  }
+
+  // Otherwise importsOrExportsResult is an object, so now we need to check for the specific keys we're interested in
+  const defaultImportsOrExportsEntry = importsOrExportsResult['default']
+  const browserImportsOrExportsEntry = importsOrExportsResult['browser'] // The nodejs algorithm uses `node` here
+  const requireImportsOrExportsEntry = importsOrExportsResult['require']
+
+  if (defaultImportsOrExportsEntry != null) {
+    const fileToLookup =
+      typeof defaultImportsOrExportsEntry === 'string'
+        ? defaultImportsOrExportsEntry
+        : defaultImportsOrExportsEntry['default']
+    if (fileToLookup != null) {
+      return lookupFn(fileToLookup, packageJsonDir)
+    }
+  }
+  if (browserImportsOrExportsEntry != null) {
+    const fileToLookup =
+      typeof browserImportsOrExportsEntry === 'string'
+        ? browserImportsOrExportsEntry
+        : browserImportsOrExportsEntry['default']
+    if (fileToLookup != null) {
+      return lookupFn(fileToLookup, packageJsonDir)
+    }
+  }
+  if (requireImportsOrExportsEntry != null) {
+    const fileToLookup =
+      typeof requireImportsOrExportsEntry === 'string'
+        ? requireImportsOrExportsEntry
+        : requireImportsOrExportsEntry['default']
+    if (fileToLookup != null) {
+      return lookupFn(fileToLookup, packageJsonDir)
+    }
+  }
+
+  return resolveNotPresent
+}
diff --git a/editor/src/core/es-modules/package-manager/module-resolution-utils.ts b/editor/src/core/es-modules/package-manager/module-resolution-utils.ts
new file mode 100644
index 000000000000..0a2bc939216b
--- /dev/null
+++ b/editor/src/core/es-modules/package-manager/module-resolution-utils.ts
@@ -0,0 +1,216 @@
+import type { MapLike } from 'typescript'
+import { getPartsFromPath, makePathFromParts, normalizePath } from '../../../utils/path-utils'
+import type { ParseResult } from '../../../utils/value-parser-utils'
+import {
+  optionalObjectKeyParser,
+  parseAlternative,
+  parseFalse,
+  parseNull,
+  parseObject,
+  parseString,
+} from '../../../utils/value-parser-utils'
+import { applicative6Either } from '../../shared/either'
+import { setOptionalProp } from '../../shared/object-utils'
+import type { ESCodeFile, ESRemoteDependencyPlaceholder } from '../../shared/project-file-types'
+
+import LRU from 'lru-cache'
+
+export type ImportsExportsObjectField = MapLike<
+  string | MapLike<string | null | MapLike<string | null>>
+>
+export type ExportsField = string | ImportsExportsObjectField
+
+export interface PartialPackageJsonDefinition {
+  name?: string
+  main?: string
+  module?: string
+  browser?: string | MapLike<string | false>
+  imports?: ImportsExportsObjectField
+  exports?: ExportsField
+}
+
+const partialPackageJsonCache: LRU<string, ParseResult<PartialPackageJsonDefinition>> = new LRU({
+  max: 20,
+})
+export function getPartialPackageJson(contents: string): ParseResult<PartialPackageJsonDefinition> {
+  const fromCache = partialPackageJsonCache.get(contents)
+  if (fromCache == null) {
+    const jsonParsed = JSON.parse(contents)
+    const result = parsePartialPackageJsonDefinition(jsonParsed)
+    partialPackageJsonCache.set(contents, result)
+    return result
+  } else {
+    return fromCache
+  }
+}
+
+export interface ResolveSuccess<T> {
+  type: 'RESOLVE_SUCCESS'
+  success: T
+}
+
+export function resolveSuccess<T>(success: T): ResolveSuccess<T> {
+  return {
+    type: 'RESOLVE_SUCCESS',
+    success: success,
+  }
+}
+
+export interface ResolveNotPresent {
+  type: 'RESOLVE_NOT_PRESENT'
+}
+
+export const resolveNotPresent: ResolveNotPresent = {
+  type: 'RESOLVE_NOT_PRESENT',
+}
+
+export interface ResolveSuccessIgnoreModule {
+  type: 'RESOLVE_SUCCESS_IGNORE_MODULE'
+}
+
+export function isResolveSuccessIgnoreModule<T>(
+  resolveResult: ResolveResult<T>,
+): resolveResult is ResolveSuccessIgnoreModule {
+  return resolveResult.type === 'RESOLVE_SUCCESS_IGNORE_MODULE'
+}
+
+export const resolveSuccessIgnoreModule: ResolveSuccessIgnoreModule = {
+  type: 'RESOLVE_SUCCESS_IGNORE_MODULE',
+}
+
+export type ResolveResult<T> = ResolveNotPresent | ResolveSuccessIgnoreModule | ResolveSuccess<T>
+
+export function isResolveSuccess<T>(
+  resolveResult: ResolveResult<T>,
+): resolveResult is ResolveSuccess<T> {
+  return resolveResult.type === 'RESOLVE_SUCCESS'
+}
+
+export function isResolveNotPresent<T>(
+  resolveResult: ResolveResult<T>,
+): resolveResult is ResolveNotPresent {
+  return resolveResult.type === 'RESOLVE_NOT_PRESENT'
+}
+
+export interface FoundFile {
+  path: string
+  file: ESCodeFile | ESRemoteDependencyPlaceholder
+}
+
+export type FileLookupResult = ResolveResult<FoundFile>
+
+export function fileLookupResult(
+  path: string,
+  file: ESCodeFile | ESRemoteDependencyPlaceholder | null,
+): FileLookupResult {
+  if (file == null) {
+    return resolveNotPresent
+  } else {
+    return resolveSuccess({
+      path: path,
+      file: file,
+    })
+  }
+}
+
+export type FileLookupFn = (path: string, importOrigin: string) => FileLookupResult
+export type FileForPathParts = (pathParts: string[]) => FileLookupResult
+
+const importsExportsObjectParser = parseObject(
+  parseAlternative<string | MapLike<string | null | MapLike<string | null>>>(
+    [
+      parseString,
+      parseObject(
+        parseAlternative<string | null | MapLike<string | null>>(
+          [
+            parseString,
+            parseNull,
+            parseObject(
+              parseAlternative<string | null>(
+                [parseString, parseNull],
+                `package.imports and package.exports replacement entries must be either string or null`,
+              ),
+            ),
+          ],
+          `package.imports and package.exports replacement entries must be either string or null`,
+        ),
+      ),
+    ],
+    'package.imports and package.exports object must be an object with type {[key: string]: string | null}',
+  ),
+)
+
+export const exportsParser = parseAlternative<string | ImportsExportsObjectField>(
+  [parseString, importsExportsObjectParser],
+  'package.imports and package.exports field must either be a string or an object with type {[key: string]: string | null}',
+)
+
+export function parsePartialPackageJsonDefinition(
+  value: unknown,
+): ParseResult<PartialPackageJsonDefinition> {
+  return applicative6Either(
+    (name, main, module, browser, imports, exports) => {
+      let result: PartialPackageJsonDefinition = {}
+      setOptionalProp(result, 'name', name)
+      setOptionalProp(result, 'main', main)
+      setOptionalProp(result, 'module', module)
+      setOptionalProp(result, 'browser', browser)
+      setOptionalProp(result, 'imports', imports)
+      setOptionalProp(result, 'exports', exports)
+      return result
+    },
+    optionalObjectKeyParser(parseString, 'name')(value),
+    optionalObjectKeyParser(parseString, 'main')(value),
+    optionalObjectKeyParser(parseString, 'module')(value),
+    optionalObjectKeyParser(
+      parseAlternative<string | MapLike<string | false>>(
+        [
+          parseString,
+          parseObject(
+            parseAlternative<string | false>(
+              [parseString, parseFalse],
+              `package.browser replacement entries must be either string or 'false' for ignoring a package`,
+            ),
+          ),
+        ],
+        'package.browser field must either be a string or an object with type {[key: string]: string | false}',
+      ),
+      'browser',
+    )(value),
+    optionalObjectKeyParser(importsExportsObjectParser, 'imports')(value),
+    optionalObjectKeyParser(exportsParser, 'exports')(value),
+  )
+}
+
+export type PackageLookupResult = {
+  packageJsonFileResult: FileLookupResult
+  packageJsonDir: string
+}
+export function findClosestPackageScopeToPath(
+  path: string,
+  localFileLookup: FileForPathParts,
+): PackageLookupResult {
+  const originPathPartsToTest = normalizePath(getPartsFromPath(path))
+  const allPossiblePackageJsonPaths = [['package.json']]
+    .concat(
+      originPathPartsToTest.map((_part, index) =>
+        originPathPartsToTest.slice(0, index + 1).concat('package.json'),
+      ),
+    )
+    .reverse()
+
+  for (const possiblePath of allPossiblePackageJsonPaths) {
+    const packageJsonFileResult = localFileLookup(possiblePath)
+    if (isResolveSuccess(packageJsonFileResult)) {
+      return {
+        packageJsonFileResult: packageJsonFileResult,
+        packageJsonDir: makePathFromParts(possiblePath.slice(0, -1)),
+      }
+    }
+  }
+
+  return {
+    packageJsonFileResult: resolveNotPresent,
+    packageJsonDir: '',
+  }
+}
diff --git a/editor/src/core/es-modules/package-manager/module-resolution.spec.ts b/editor/src/core/es-modules/package-manager/module-resolution.spec.ts
index aa22947b72e7..eb394f94f2c2 100644
--- a/editor/src/core/es-modules/package-manager/module-resolution.spec.ts
+++ b/editor/src/core/es-modules/package-manager/module-resolution.spec.ts
@@ -7,7 +7,8 @@ import {
   unparsed,
 } from '../../shared/project-file-types'
 import * as moduleResolutionExamples from '../test-cases/module-resolution-examples.json'
-import { isResolveSuccess, resolveModule } from './module-resolution'
+import { resolveModule } from './module-resolution'
+import { isResolveSuccess } from './module-resolution-utils'
 import { createNodeModules } from './test-utils'
 
 const sampleProjectContents: ProjectContentTreeRoot = contentsToTree({
@@ -33,6 +34,34 @@ const sampleProjectContents: ProjectContentTreeRoot = contentsToTree({
     null,
     0,
   ),
+  '/package.json': textFile(
+    textFileContents(
+      `
+    {
+      "name": "sample-project",
+      "exports": {
+        "./exported-module": "./exported-module-main.js"
+      },
+      "imports": {
+        "#dep-object": {
+          "default": "./src/dep-object.js"
+        },
+        "#dep-simple": "./src/dep-simple.js"
+      }
+    }`,
+      unparsed,
+      RevisionsState.CodeAhead,
+    ),
+    null,
+    null,
+    0,
+  ),
+  '/exported-module-main.js': textFile(
+    textFileContents('export const ExportedModuleMain = 1', unparsed, RevisionsState.CodeAhead),
+    null,
+    null,
+    0,
+  ),
   '/a/some/nested/file.js': textFile(
     textFileContents('export const Cake = "tasty"', unparsed, RevisionsState.CodeAhead),
     null,
@@ -51,6 +80,18 @@ const sampleProjectContents: ProjectContentTreeRoot = contentsToTree({
     null,
     0,
   ),
+  '/src/dep-object.js': textFile(
+    textFileContents('export const DepObject = 1', unparsed, RevisionsState.CodeAhead),
+    null,
+    null,
+    0,
+  ),
+  '/src/dep-simple.js': textFile(
+    textFileContents('export const DepSimple = 1', unparsed, RevisionsState.CodeAhead),
+    null,
+    null,
+    0,
+  ),
   '/src/icon.png': {
     type: 'ASSET_FILE',
   },
@@ -60,6 +101,12 @@ const sampleProjectContents: ProjectContentTreeRoot = contentsToTree({
     null,
     0,
   ),
+  '/utopia/layout.utopia.js': textFile(
+    textFileContents('export const Layout = 1', unparsed, RevisionsState.CodeAhead),
+    null,
+    null,
+    0,
+  ),
 })
 
 describe('ES Package Manager Module Resolution', () => {
@@ -244,20 +291,69 @@ describe('ES Package Manager Module Resolution', () => {
     expect(resolveResult.type).toEqual('RESOLVE_SUCCESS_IGNORE_MODULE')
   })
 
-  // it('loads self references', () => {
-  //   expect(
-  //     resolveModule(
-  //       createNodeModules(moduleResolutionExamples.contents),
-  //       'my-package-with-package-root/src/deep-folder/moduleA.js',
-  //       'my-package-with-package-root',
-  //     ),
-  //   ).toEqual('my-package-with-package-root/index.js')
-  //   expect(
-  //     resolveModule(
-  //       createNodeModules(moduleResolutionExamples.contents),
-  //       'my-package-with-package-root/src/deep-folder/moduleA.js',
-  //       'my-package-with-package-root/src/other-folder/moduleB',
-  //     ),
-  //   ).toEqual('my-package-with-package-root/src/other-folder/moduleB.js')
-  // })
+  it('resolves package exports for local package', () => {
+    expect(resolve('/src/app.js', 'sample-project/exported-module')).toEqual(
+      '/exported-module-main.js',
+    )
+  })
+
+  it('resolves package imports simple for local package', () => {
+    expect(resolve('/src/app.js', '#dep-simple')).toEqual('/src/dep-simple.js')
+  })
+  it('resolves package imports object for local package', () => {
+    expect(resolve('/src/app.js', '#dep-object')).toEqual('/src/dep-object.js')
+  })
+
+  it('resolves package main entry for node module with exports with no subpath', () => {
+    expect(resolve('/src/app.js', 'module-with-exports-and-imports')).toEqual(
+      '/node_modules/module-with-exports-and-imports/index.main.js',
+    )
+  })
+
+  it('resolves package exports object main entry for node module', () => {
+    expect(resolve('/src/app.js', 'module-with-exports-and-imports-objects')).toEqual(
+      '/node_modules/module-with-exports-and-imports-objects/index.main.js',
+    )
+  })
+  it('resolves package exports object submodule export for node module', () => {
+    expect(resolve('/src/app.js', 'module-with-exports-and-imports-objects/submodule')).toEqual(
+      '/node_modules/module-with-exports-and-imports-objects/src/submodule.js',
+    )
+  })
+
+  it('resolves package imports for node module', () => {
+    expect(
+      resolve('/node_modules/module-with-exports-and-imports/src/something.js', '#dep'),
+    ).toEqual('/node_modules/module-with-exports-and-imports/dep.js')
+  })
+  it('resolves package imports object for node module', () => {
+    expect(
+      resolve('/node_modules/module-with-exports-and-imports-objects/src/something.js', '#dep'),
+    ).toEqual('/node_modules/module-with-exports-and-imports-objects/dep.js')
+  })
+
+  it('loads self references', () => {
+    expect(
+      resolve(
+        '/node_modules/my-package-with-package-root/src/deep-folder/moduleA.js',
+        'my-package-with-package-root',
+      ),
+    ).toEqual('/node_modules/my-package-with-package-root/index.js')
+    expect(
+      resolve(
+        '/node_modules/my-package-with-package-root/src/deep-folder/moduleA.js',
+        'my-package-with-package-root/src/other-folder/moduleB',
+      ),
+    ).toEqual('/node_modules/my-package-with-package-root/src/other-folder/moduleB.js')
+  })
+
+  it('resolves clsx', () => {
+    expect(resolve('/app/components/hydrogen/Button.jsx', 'clsx')).toEqual(
+      '/node_modules/clsx/dist/clsx.js',
+    )
+  })
+
+  it('resolves /utopia/layout.utopia', () => {
+    expect(resolve('/utopia/text.utopia.js', './layout.utopia')).toEqual('/utopia/layout.utopia.js')
+  })
 })
diff --git a/editor/src/core/es-modules/package-manager/module-resolution.ts b/editor/src/core/es-modules/package-manager/module-resolution.ts
index 8904005017ff..b570990de635 100644
--- a/editor/src/core/es-modules/package-manager/module-resolution.ts
+++ b/editor/src/core/es-modules/package-manager/module-resolution.ts
@@ -1,180 +1,261 @@
-import type {
-  ProjectFile,
-  NodeModules,
-  ESCodeFile,
-  ESRemoteDependencyPlaceholder,
-} from '../../shared/project-file-types'
-import { isEsCodeFile, esCodeFile } from '../../shared/project-file-types'
-import type { ParseResult } from '../../../utils/value-parser-utils'
-import {
-  optionalObjectKeyParser,
-  parseString,
-  parseAlternative,
-  parseObject,
-  parseFalse,
-} from '../../../utils/value-parser-utils'
-import type { Either } from '../../shared/either'
-import {
-  applicative3Either,
-  applicative4Either,
-  foldEither,
-  isLeft,
-  isRight,
-  left,
-  right,
-} from '../../shared/either'
-import { setOptionalProp } from '../../shared/object-utils'
+import type { MapLike } from 'typescript'
 import type { ProjectContentTreeRoot } from '../../../components/assets'
 import { getContentsTreeFileFromElements } from '../../../components/assets'
+import { applyFilePathMappingsToFilePath } from '../../../core/workers/common/project-file-utils'
+import {
+  getParentDirectory,
+  getPartsFromPath,
+  makePathFromParts,
+  normalizePath,
+  stripTrailingSlash,
+} from '../../../utils/path-utils'
+import type { ParseResult } from '../../../utils/value-parser-utils'
+import { getFilePathMappings } from '../../model/project-file-utils'
 import { dropLast, last } from '../../shared/array-utils'
-import { getPartsFromPath, makePathFromParts, normalizePath } from '../../../utils/path-utils'
-import type { MapLike } from 'typescript'
-
-import LRU from 'lru-cache'
+import type { Either } from '../../shared/either'
+import { foldEither, isLeft, isRight, left, right } from '../../shared/either'
+import type { NodeModules, ProjectFile } from '../../shared/project-file-types'
+import { esCodeFile, isEsCodeFile } from '../../shared/project-file-types'
 import type { BuiltInDependencies } from './built-in-dependencies-list'
-import { getFilePathMappings } from '../../model/project-file-utils'
-import { applyFilePathMappingsToFilePath } from '../../../core/workers/common/project-file-utils'
+import { loadPackageSelf, loadPackageImports, loadPackageExports } from './module-resolution-esm'
+import type {
+  FileForPathParts,
+  FileLookupFn,
+  FileLookupResult,
+  PartialPackageJsonDefinition,
+} from './module-resolution-utils'
+import {
+  fileLookupResult,
+  getPartialPackageJson,
+  isResolveSuccess,
+  resolveNotPresent,
+  resolveSuccessIgnoreModule,
+} from './module-resolution-utils'
 
-const partialPackageJsonCache: LRU<string, ParseResult<PartialPackageJsonDefinition>> = new LRU({
-  max: 20,
-})
-function getPartialPackageJson(contents: string): ParseResult<PartialPackageJsonDefinition> {
-  const fromCache = partialPackageJsonCache.get(contents)
-  if (fromCache == null) {
-    const jsonParsed = JSON.parse(contents)
-    const result = parsePartialPackageJsonDefinition(jsonParsed)
-    partialPackageJsonCache.set(contents, result)
-    return result
-  } else {
-    return fromCache
-  }
-}
+// Using the logic from https://nodejs.org/api/modules.html#all-together
 
-interface ResolveSuccess<T> {
-  type: 'RESOLVE_SUCCESS'
-  success: T
+function loadAsFile(
+  projectContents: ProjectContentTreeRoot,
+  pathParts: string[],
+): FileLookupResult {
+  return abstractLoadAsFile(projectContentsFileForPathParts(projectContents), pathParts)
 }
 
-function resolveSuccess<T>(success: T): ResolveSuccess<T> {
-  return {
-    type: 'RESOLVE_SUCCESS',
-    success: success,
+// LOAD_AS_FILE(X)
+function abstractLoadAsFile(
+  fileForPathParts: FileForPathParts,
+  pathParts: string[],
+): FileLookupResult {
+  const normalisedPathParts = normalizePath(pathParts)
+  const pathToFile = dropLast(normalisedPathParts)
+  const lastPart = last(normalisedPathParts)
+  if (lastPart == null) {
+    return resolveNotPresent
   }
-}
 
-interface ResolveNotPresent {
-  type: 'RESOLVE_NOT_PRESENT'
-}
+  // If X is a file, load X as its file extension format
+  const asFileResult = fileForPathParts(normalisedPathParts)
+  if (isResolveSuccess(asFileResult)) {
+    return asFileResult
+  }
 
-const resolveNotPresent: ResolveNotPresent = {
-  type: 'RESOLVE_NOT_PRESENT',
-}
+  // If X.js(x) is a file
+  const withJs = lastPart + '.js'
+  const withJsResult = fileForPathParts(pathToFile.concat(withJs))
+  if (isResolveSuccess(withJsResult)) {
+    return withJsResult
+  }
 
-interface ResolveSuccessIgnoreModule {
-  type: 'RESOLVE_SUCCESS_IGNORE_MODULE'
-}
+  const withJsx = lastPart + '.jsx'
+  const withJsxResult = fileForPathParts(pathToFile.concat(withJsx))
+  if (isResolveSuccess(withJsxResult)) {
+    return withJsxResult
+  }
 
-export function isResolveSuccessIgnoreModule<T>(
-  resolveResult: ResolveResult<T>,
-): resolveResult is ResolveSuccessIgnoreModule {
-  return resolveResult.type === 'RESOLVE_SUCCESS_IGNORE_MODULE'
-}
+  // If X.json is a file, load X.json to a JavaScript Object
+  const withJson = lastPart + '.json'
+  const withJsonResult = fileForPathParts(pathToFile.concat(withJson))
+  if (isResolveSuccess(withJsonResult)) {
+    return withJsonResult
+  }
 
-const resolveSuccessIgnoreModule: ResolveSuccessIgnoreModule = {
-  type: 'RESOLVE_SUCCESS_IGNORE_MODULE',
+  return resolveNotPresent
 }
 
-type ResolveResult<T> = ResolveNotPresent | ResolveSuccessIgnoreModule | ResolveSuccess<T>
+function processPackageJson(potentiallyJsonCode: string): string | null {
+  let possiblePackageJson: ParseResult<PartialPackageJsonDefinition>
+  try {
+    possiblePackageJson = getPartialPackageJson(potentiallyJsonCode)
+  } catch {
+    return null
+  }
+  return foldEither(
+    (_) => null,
+    (packageJson) => {
+      // const moduleName: string | null = packageJson.name ?? null
+      const browserEntry: string | MapLike<string | false> | null = packageJson.browser ?? null
+      const mainEntry: string | null = packageJson.main ?? null
+      // const moduleEntry: string | null = packageJson.module ?? null
 
-export function isResolveSuccess<T>(
-  resolveResult: ResolveResult<T>,
-): resolveResult is ResolveSuccess<T> {
-  return resolveResult.type === 'RESOLVE_SUCCESS'
-}
+      if (browserEntry != null && typeof browserEntry === 'string') {
+        return browserEntry
+      } else if (mainEntry != null) {
+        return mainEntry
+        // } else if (moduleEntry != null) {
+        //   return moduleEntry
+        // } else if (moduleName != null) {
+        //   return moduleName
+      }
 
-export function isResolveNotPresent<T>(
-  resolveResult: ResolveResult<T>,
-): resolveResult is ResolveNotPresent {
-  return resolveResult.type === 'RESOLVE_NOT_PRESENT'
+      return null
+    },
+    possiblePackageJson,
+  )
 }
 
-interface FoundFile {
-  path: string
-  file: ESCodeFile | ESRemoteDependencyPlaceholder
+function loadAsDirectory(
+  projectContents: ProjectContentTreeRoot,
+  pathParts: string[],
+): FileLookupResult {
+  return abstractLoadAsDirectory(projectContentsFileForPathParts(projectContents), pathParts)
 }
 
-export type FileLookupResult = ResolveResult<FoundFile>
-
-function fileLookupResult(
-  path: string,
-  file: ESCodeFile | ESRemoteDependencyPlaceholder | null,
+// LOAD_AS_DIRECTORY(X)
+function abstractLoadAsDirectory(
+  fileForPathParts: FileForPathParts,
+  pathParts: string[],
 ): FileLookupResult {
-  if (file == null) {
-    return resolveNotPresent
-  } else {
-    return resolveSuccess({
-      path: path,
-      file: file,
-    })
-  }
-}
+  const normalisedPathParts = normalizePath(pathParts) // X
 
-type FileLookupFn = (path: string[], direct: boolean) => FileLookupResult
+  // If X/package.json is a file
+  const jsonFileResult = fileForPathParts(normalisedPathParts.concat('package.json'))
+  if (isResolveSuccess(jsonFileResult) && isEsCodeFile(jsonFileResult.success.file)) {
+    // Parse X/package.json, and look for "browser" or "main" field
+    const mainEntryPath = processPackageJson(jsonFileResult.success.file.fileContents)
 
-function fallbackLookup(
-  lookupFn: FileLookupFn,
-  path: Array<string>,
-  direct: boolean,
-): FileLookupResult {
-  const asIsPath = normalizePath(path)
-  const pathToFile = dropLast(asIsPath)
-  const lastPart = last(asIsPath)
-  if (lastPart == null) {
-    return resolveNotPresent
-  } else {
-    const asIsResult = lookupFn(asIsPath, direct)
-    if (isResolveSuccess(asIsResult)) {
-      return asIsResult
-    }
+    if (mainEntryPath != null) {
+      // let M = X + (json main field)
+      const mainEntryPathParts = [...normalisedPathParts, ...getPartsFromPath(mainEntryPath)]
 
-    if (!direct) {
-      const withJs = lastPart + '.js'
-      const withJsResult = lookupFn(pathToFile.concat(withJs), direct)
-      if (isResolveSuccess(withJsResult)) {
-        return withJsResult
+      // LOAD_AS_FILE(M)
+      const mainEntryResult = abstractLoadAsFile(fileForPathParts, mainEntryPathParts)
+      if (isResolveSuccess(mainEntryResult)) {
+        return mainEntryResult
       }
 
-      const withJsx = lastPart + '.jsx'
-      const withJsxResult = lookupFn(pathToFile.concat(withJsx), direct)
-      if (isResolveSuccess(withJsxResult)) {
-        return withJsxResult
+      // LOAD_INDEX(M)
+      const loadIndexMResult = loadIndex(fileForPathParts, mainEntryPathParts)
+      if (isResolveSuccess(loadIndexMResult)) {
+        return loadIndexMResult
       }
 
-      // TODO this also needs JSON parsing
-      const withJson = lastPart + '.json'
-      const withJsonResult = lookupFn(pathToFile.concat(withJson), direct)
-      if (isResolveSuccess(withJsonResult)) {
-        return withJsonResult
-      }
+      // LOAD_INDEX(X) DEPRECATED - note that this is only deprecated in the case where "main" is truthy
+      return loadIndex(fileForPathParts, normalisedPathParts)
     }
+  }
 
-    return resolveNotPresent
+  // If "main" is a falsy value
+  // LOAD_INDEX(X)
+  return loadIndex(fileForPathParts, normalisedPathParts)
+}
+
+// LOAD_INDEX(X)
+function loadIndex(fileForPathParts: FileForPathParts, pathParts: string[]): FileLookupResult {
+  // 1. If X/index.js is a file
+  //   a. Find the closest package scope SCOPE to X.
+  //   b. If no scope was found, load X/index.js as a CommonJS module. STOP.
+  //   c. If the SCOPE/package.json contains "type" field,
+  //     1. If the "type" field is "module", load X/index.js as an ECMAScript module. STOP.
+  //     2. Else, load X/index.js as an CommonJS module. STOP.
+  // Note: We don't attempt to load as an ECMAScript, as we can't - instead we'll try to load whatever
+  // it is as CommonJS, and if it turns out to be an esm we'll attempt to transpile it to CommonJS
+
+  const indexJSResult = abstractLoadAsFile(fileForPathParts, pathParts.concat('index.js'))
+  if (isResolveSuccess(indexJSResult)) {
+    return indexJSResult
   }
+
+  // If X/index.json is a file, parse X/index.json to a JavaScript object
+  return abstractLoadAsFile(fileForPathParts, pathParts.concat('index.json'))
+
+  // If X/index.node is a file, load X/index.node as binary addon - not applicable
+}
+
+// NODE_MODULES_PATHS
+function nodeModulesPaths(path: string): Array<string> {
+  // let PARTS = path split(START)
+  const pathParts = getPartsFromPath(path)
+
+  // let DIRS = []
+  let dirs: Array<string> = []
+
+  // The algorithm builds dirs in descending order, but we'll do it in ascending and reverse
+  pathParts.forEach((part, index) => {
+    // if PARTS[I] = "node_modules" CONTINUE
+    if (part === 'node_modules') {
+      return
+    }
+
+    // DIR = path join(PARTS[0 .. I] + "node_modules")
+    const dir = makePathFromParts(pathParts.slice(0, index + 1).concat('node_modules'))
+
+    // DIRS = DIR + DIRS
+    dirs.push(dir)
+  })
+  dirs.reverse()
+
+  // return DIRS + GLOBAL_FOLDERS
+  return dirs.concat('/node_modules/')
 }
 
-function nodeModulesFileLookup(
+// LOAD_NODE_MODULES
+function loadNodeModules(
   nodeModules: NodeModules,
-  path: Array<string>,
-  direct: boolean,
+  path: string,
+  originPath: string,
+  lookupFn: FileLookupFn,
 ): FileLookupResult {
-  return fallbackLookup(
-    (innerPath: string[], innerDirect: boolean) => {
-      const filename = makePathFromParts(innerPath)
-      return fileLookupResult(filename, nodeModules[filename])
-    },
-    path,
-    direct,
-  )
+  const packageJsonLookupFn = nodeModulesFileForPathParts(nodeModules)
+
+  // let DIRS = NODE_MODULES_PATHS(START)
+  const dirs = nodeModulesPaths(originPath).reverse()
+  const targetOrigins = [originPath, ...dirs]
+
+  for (const targetOrigin of targetOrigins) {
+    // for each DIR in DIRS:
+
+    // LOAD_PACKAGE_EXPORTS(X, DIR)
+    const packageExportsResult = loadPackageExports(
+      path,
+      targetOrigin,
+      packageJsonLookupFn,
+      lookupFn,
+    )
+    if (isResolveSuccess(packageExportsResult)) {
+      return packageExportsResult
+    }
+
+    const pathForLookup = path.startsWith('/')
+      ? path
+      : `${stripTrailingSlash(targetOrigin)}/${path}`
+
+    const pathParts = getPartsFromPath(pathForLookup)
+    const normalisedPathParts = normalizePath(pathParts)
+
+    // LOAD_AS_FILE(DIR/X)
+    const asFileResult = abstractLoadAsFile(packageJsonLookupFn, normalisedPathParts)
+    if (isResolveSuccess(asFileResult)) {
+      return asFileResult
+    }
+
+    // LOAD_AS_DIRECTORY(DIR/X)
+    const asDirectoryResult = abstractLoadAsDirectory(packageJsonLookupFn, normalisedPathParts)
+    if (isResolveSuccess(asDirectoryResult)) {
+      return asDirectoryResult
+    }
+  }
+
+  return resolveNotPresent
 }
 
 function getProjectFileContentsAsString(file: ProjectFile): string | null {
@@ -193,240 +274,52 @@ function getProjectFileContentsAsString(file: ProjectFile): string | null {
   }
 }
 
-function projectContentsFileLookup(
+function projectContentsFileForPathParts(
   projectContents: ProjectContentTreeRoot,
-  path: Array<string>,
-  direct: boolean,
-): FileLookupResult {
-  return fallbackLookup(
-    (innerPath: string[]) => {
-      const projectFile = getContentsTreeFileFromElements(projectContents, innerPath)
-      if (projectFile == null) {
+): FileForPathParts {
+  return (pathParts: string[]) => {
+    const projectFile = getContentsTreeFileFromElements(projectContents, pathParts)
+    if (projectFile == null) {
+      return resolveNotPresent
+    } else {
+      const fileContents = getProjectFileContentsAsString(projectFile)
+      if (fileContents == null) {
         return resolveNotPresent
       } else {
-        const fileContents = getProjectFileContentsAsString(projectFile)
-        if (fileContents == null) {
-          return resolveNotPresent
-        } else {
-          const filename = makePathFromParts(innerPath)
-          return fileLookupResult(filename, esCodeFile(fileContents, 'PROJECT_CONTENTS', filename))
-        }
+        const filename = makePathFromParts(pathParts)
+        return fileLookupResult(filename, esCodeFile(fileContents, 'PROJECT_CONTENTS', filename))
       }
-    },
-    path,
-    direct,
-  )
-}
-
-interface PartialPackageJsonDefinition {
-  name?: string
-  main?: string
-  module?: string
-  browser?: string | MapLike<string | false>
-}
-
-export function parsePartialPackageJsonDefinition(
-  value: unknown,
-): ParseResult<PartialPackageJsonDefinition> {
-  return applicative4Either(
-    (name, main, module, browser) => {
-      let result: PartialPackageJsonDefinition = {}
-      setOptionalProp(result, 'name', name)
-      setOptionalProp(result, 'main', main)
-      setOptionalProp(result, 'module', module)
-      setOptionalProp(result, 'browser', browser)
-      return result
-    },
-    optionalObjectKeyParser(parseString, 'name')(value),
-    optionalObjectKeyParser(parseString, 'main')(value),
-    optionalObjectKeyParser(parseString, 'module')(value),
-    optionalObjectKeyParser(
-      parseAlternative<string | MapLike<string | false>>(
-        [
-          parseString,
-          parseObject(
-            parseAlternative<string | false>(
-              [parseString, parseFalse],
-              `package.browser replacement entries must be either string or 'false' for ignoring a package`,
-            ),
-          ),
-        ],
-        'package.browser field must either be a string or an object with type {[key: string]: string}',
-      ),
-      'browser',
-    )(value),
-  )
-}
-
-function processPackageJson(
-  potentiallyJsonCode: string,
-  containerFolder: string[],
-): ResolveResult<Array<string>> {
-  let possiblePackageJson: ParseResult<PartialPackageJsonDefinition>
-  try {
-    possiblePackageJson = getPartialPackageJson(potentiallyJsonCode)
-  } catch {
-    return resolveNotPresent
+    }
   }
-  return foldEither(
-    (_) => resolveNotPresent,
-    (packageJson) => {
-      const moduleName: string | null = packageJson.name ?? null
-      const browserEntry: string | MapLike<string | false> | null = packageJson.browser ?? null
-      const mainEntry: string | null = packageJson.main ?? null
-      const moduleEntry: string | null = packageJson.module ?? null
-
-      if (browserEntry != null && typeof browserEntry === 'string') {
-        return resolveSuccess(
-          normalizePath([...containerFolder, ...getPartsFromPath(browserEntry)]),
-        )
-      } else if (mainEntry != null) {
-        return resolveSuccess(normalizePath([...containerFolder, ...getPartsFromPath(mainEntry)]))
-      } else if (moduleEntry != null) {
-        return resolveSuccess(normalizePath([...containerFolder, ...getPartsFromPath(moduleEntry)]))
-      } else if (moduleName != null) {
-        return resolveSuccess(normalizePath([...containerFolder, ...getPartsFromPath(moduleName)]))
-      } else if (containerFolder.length > 0) {
-        return resolveSuccess(normalizePath(containerFolder))
-      }
-
-      return resolveNotPresent
-    },
-    possiblePackageJson,
-  )
 }
 
-function resolvePackageJson(
-  fileLookupFn: FileLookupFn,
-  packageJsonFolder: string[],
-): FileLookupResult {
-  const normalizedFolderPath = normalizePath(packageJsonFolder)
-  const folderPackageJson = fileLookupFn([...normalizedFolderPath, 'package.json'], true)
-  if (isResolveSuccess(folderPackageJson) && isEsCodeFile(folderPackageJson.success.file)) {
-    const mainEntryPath = processPackageJson(
-      folderPackageJson.success.file.fileContents,
-      normalizedFolderPath,
-    )
-    if (isResolveSuccess(mainEntryPath)) {
-      // try loading the entry path as a file
-      const mainEntryResult = fileLookupFn(mainEntryPath.success, false)
-      if (isResolveSuccess(mainEntryResult)) {
-        return mainEntryResult
-      } else {
-        // fallback to loading it as a folder with an index.js
-        const indexJsPath = [...mainEntryPath.success, 'index']
-        return fileLookupFn(indexJsPath, false)
-      }
-    } else {
+function nodeModulesFileForPathParts(nodeModules: NodeModules): FileForPathParts {
+  return (pathParts: string[]) => {
+    const filename = makePathFromParts(pathParts)
+    const nodeModulesFile = nodeModules[filename]
+    if (nodeModulesFile == null) {
       return resolveNotPresent
+    } else {
+      return fileLookupResult(filename, nodeModulesFile)
     }
   }
-  return resolveNotPresent
 }
 
-function findPackageJsonForPath(fileLookupFn: FileLookupFn, origin: string[]): FileLookupResult {
+function findPackageJsonForPath(
+  fileLookupFn: FileLookupFn,
+  originPathParts: string[],
+): FileLookupResult {
   // 1. look for <origin>/package.json
-  const packageJsonResult = fileLookupFn([...origin, 'package.json'], true)
+  const packageJsonResult = fileLookupFn(`./package.json`, makePathFromParts(originPathParts))
   if (isResolveSuccess(packageJsonResult)) {
     return packageJsonResult
   } else {
     // 2. repeat in the parent folder
-    if (origin.length === 0) {
+    if (originPathParts.length === 0) {
       // we exhausted all folders without success
       return resolveNotPresent
     } else {
-      return findPackageJsonForPath(fileLookupFn, origin.slice(0, -1))
-    }
-  }
-}
-
-function resolveNonRelativeModule(
-  fileLookupFn: FileLookupFn,
-  importOrigin: string[],
-  toImport: string[],
-): FileLookupResult {
-  const pathElements = [...importOrigin, 'node_modules', ...toImport]
-  // 1. look for ./node_modules/<package_name>.js
-  const packageNameResult = fileLookupFn(pathElements, false)
-  if (isResolveSuccess(packageNameResult)) {
-    return packageNameResult
-  } else {
-    // 2. look for ./node_modules/<package_name>/package.json
-    const packageJsonResult = resolvePackageJson(fileLookupFn, pathElements)
-    if (isResolveSuccess(packageJsonResult)) {
-      return packageJsonResult
-    } else {
-      // 3. look for ./node_modules/<package_name>/index.js
-      const indexJsPath = [...pathElements, 'index']
-      const indexJSResult = fileLookupFn(indexJsPath, false)
-      if (isResolveSuccess(indexJSResult)) {
-        return indexJSResult
-      } else {
-        // 4. repeat in the parent folder
-        if (importOrigin.length === 0) {
-          // we exhausted all folders without success
-          return resolveNotPresent
-        } else {
-          return resolveNonRelativeModule(fileLookupFn, importOrigin.slice(0, -1), toImport)
-        }
-      }
-    }
-  }
-}
-
-function resolveRelativeModule(
-  fileLookupFn: FileLookupFn,
-  importOrigin: string[],
-  toImport: string[],
-): FileLookupResult {
-  const pathElements = [...importOrigin, ...toImport]
-  // 1. look for a file named <import_name>
-  const importNameResult = fileLookupFn(pathElements, false)
-  if (isResolveSuccess(importNameResult)) {
-    return importNameResult
-  } else {
-    // 2. look for <import_name>/package.json
-    const packageJsonResult = resolvePackageJson(fileLookupFn, pathElements)
-    if (isResolveSuccess(packageJsonResult)) {
-      return packageJsonResult
-    } else {
-      // 3. look for <import_name>/index.js
-      return fileLookupFn([...pathElements, 'index'], false)
-    }
-  }
-}
-
-// Module resolution logic based on what Node / Typescript does https://www.typescriptlang.org/docs/handbook/module-resolution.html#node
-
-// TODO there's way more module resolution rules here https://parceljs.org/module_resolution.html#module-resolution
-
-// TODO an even more comprehensive writeup https://nodejs.org/api/modules.html#modules_all_together
-
-function resolveModuleInternal(
-  fileLookupFn: FileLookupFn,
-  importOrigin: string,
-  toImport: string,
-): FileLookupResult {
-  if (toImport.startsWith('/')) {
-    // absolute import
-    return resolveRelativeModule(
-      fileLookupFn,
-      [], // this import is relative to the root
-      getPartsFromPath(toImport),
-    )
-  } else {
-    if (toImport.startsWith('.')) {
-      return resolveRelativeModule(
-        fileLookupFn,
-        getPartsFromPath(importOrigin).slice(0, -1),
-        getPartsFromPath(toImport),
-      )
-    } else {
-      return resolveNonRelativeModule(
-        fileLookupFn,
-        getPartsFromPath(importOrigin).slice(0, -1),
-        getPartsFromPath(toImport),
-      )
+      return findPackageJsonForPath(fileLookupFn, originPathParts.slice(0, -1))
     }
   }
 }
@@ -482,15 +375,64 @@ function resolveModuleAndApplySubstitutions(
   importOrigin: string,
   toImport: string,
 ): FileLookupResult {
-  function lookupFn(path: string[], direct: boolean): FileLookupResult {
-    const nodeModulesResult = nodeModulesFileLookup(nodeModules, path, direct)
-    if (isResolveSuccess(nodeModulesResult)) {
-      return nodeModulesResult
-    } else {
-      return projectContentsFileLookup(projectContents, path, direct)
+  // require(X) from module at path Y
+  function lookupFn(path: string, innerImportOrigin: string): FileLookupResult {
+    // 1 Check if it's a core module - this first step is irrelevant to us, since the browser has no core modules
+    if (path.startsWith('/') || path.startsWith('./') || path.startsWith('../')) {
+      // pathForLookup here is Y + X
+      const pathForLookup = path.startsWith('/') // If X begins with '/' set Y to be the file system root
+        ? path
+        : `${stripTrailingSlash(innerImportOrigin)}/${path}`
+      const pathParts = getPartsFromPath(pathForLookup)
+
+      // LOAD_AS_FILE(Y + X)
+      const projectContentsFileLookupResult = loadAsFile(projectContents, pathParts)
+
+      if (isResolveSuccess(projectContentsFileLookupResult)) {
+        return projectContentsFileLookupResult
+      }
+
+      // LOAD_AS_DIRECTORY(Y + X)
+      const projectContentsDirectoryLookupResult = loadAsDirectory(projectContents, pathParts)
+      if (isResolveSuccess(projectContentsDirectoryLookupResult)) {
+        return projectContentsDirectoryLookupResult
+      }
+    } else if (path.startsWith('#')) {
+      // If X begins with '#'
+      // LOAD_PACKAGE_IMPORTS(X, dirname(Y))
+      return loadPackageImports(
+        path,
+        innerImportOrigin,
+        innerImportOrigin.startsWith('/node_modules')
+          ? nodeModulesFileForPathParts(nodeModules)
+          : projectContentsFileForPathParts(projectContents),
+        lookupFn,
+      )
+    }
+
+    // LOAD_PACKAGE_SELF(X, dirname(Y))
+    const packageExportsResult = loadPackageSelf(
+      path,
+      innerImportOrigin,
+      projectContentsFileForPathParts(projectContents),
+      lookupFn,
+    )
+
+    if (isResolveSuccess(packageExportsResult)) {
+      return packageExportsResult
     }
+
+    // LOAD_NODE_MODULES(X, dirname(Y)), returning the result here either way in place of `throw 'not fount'`
+    return loadNodeModules(
+      nodeModules,
+      path,
+      innerImportOrigin.startsWith('/node_modules') ? innerImportOrigin : '/node_modules',
+      lookupFn,
+    )
   }
 
+  // We first need to check for the presence of a `browser` field in the current module's package.json, as that
+  // can suggest an alternative mapping to use for modules it is importing https://github.com/defunctzombie/package-browser-field-spec
   const substitutedImport: Either<boolean, string> = findSubstitutionsForImport(
     lookupFn,
     importOrigin,
@@ -505,7 +447,8 @@ function resolveModuleAndApplySubstitutions(
       substitutedImport.value,
       filePathMappings,
     )
-    return resolveModuleInternal(lookupFn, importOrigin, unAliasedImport)
+
+    return lookupFn(unAliasedImport, getParentDirectory(importOrigin))
   }
 }
 
diff --git a/editor/src/core/es-modules/package-manager/package-manager.ts b/editor/src/core/es-modules/package-manager/package-manager.ts
index 0e90fe32c94a..e7971183db65 100644
--- a/editor/src/core/es-modules/package-manager/package-manager.ts
+++ b/editor/src/core/es-modules/package-manager/package-manager.ts
@@ -1,12 +1,7 @@
 import type { NodeModules, ESCodeFile } from '../../shared/project-file-types'
 import { isEsCodeFile, isEsRemoteDependencyPlaceholder } from '../../shared/project-file-types'
 import type { RequireFn, TypeDefinitions } from '../../shared/npm-dependency-types'
-import {
-  isResolveNotPresent,
-  isResolveSuccess,
-  isResolveSuccessIgnoreModule,
-  resolveModule,
-} from './module-resolution'
+import { resolveModule } from './module-resolution'
 import { evaluator } from '../evaluator/evaluator'
 import { fetchMissingFileDependency } from './fetch-packages'
 import type { EditorDispatch } from '../../../components/editor/action-types'
@@ -17,10 +12,13 @@ import { utopiaApiTypings } from './utopia-api-typings'
 import { resolveBuiltInDependency } from './built-in-dependencies'
 import type { ProjectContentTreeRoot } from '../../../components/assets'
 import { applyLoaders } from '../../webpack-loaders/loaders'
-import { string } from 'prop-types'
-import { Either } from '../../shared/either'
 import type { CurriedUtopiaRequireFn } from '../../../components/custom-code/code-file'
 import type { BuiltInDependencies } from './built-in-dependencies-list'
+import {
+  isResolveNotPresent,
+  isResolveSuccess,
+  isResolveSuccessIgnoreModule,
+} from './module-resolution-utils'
 import type { FrameworkHooks } from '../../frameworks/framework-hooks'
 import { getFrameworkHooks } from '../../frameworks/framework-hooks'
 
diff --git a/editor/src/core/es-modules/test-cases/module-resolution-examples.json b/editor/src/core/es-modules/test-cases/module-resolution-examples.json
index a0bf7334fa06..f094135cf88f 100644
--- a/editor/src/core/es-modules/test-cases/module-resolution-examples.json
+++ b/editor/src/core/es-modules/test-cases/module-resolution-examples.json
@@ -230,25 +230,70 @@
       "isModule": false,
       "requires": []
     },
-    "my-package-with-package-root/src/deep-folder/moduleA.js": {
+    "/node_modules/module-with-exports-and-imports/package.json": {
+      "content": "{\"name\": \"module-with-exports-and-imports\", \"main\": \"index.main.js\", \"exports\": \"index.exports.js\", \"imports\": {\"#dep\": \"./dep.js\"}}",
+      "isModule": false,
+      "requires": []
+    },
+    "/node_modules/module-with-exports-and-imports/index.main.js": {
       "content": "exports.cica = 'kitten';",
       "isModule": false,
       "requires": []
     },
-    "my-package-with-package-root/src/other-folder/moduleB.js": {
+    "/node_modules/module-with-exports-and-imports/dep.js": {
       "content": "exports.cica = 'kitten';",
       "isModule": false,
       "requires": []
     },
-    "my-package-with-package-root/index.js": {
+    "/node_modules/module-with-exports-and-imports-objects/package.json": {
+      "content": "{\"name\": \"module-with-exports-and-imports-objects\", \"main\": \"index.main.js\", \"exports\": {\".\": \"index.exports.js\", \"./submodule\": \"./src/submodule.js\"}, \"imports\": {\"#dep\": {\"default\": \"./dep.js\"}}}",
+      "isModule": false,
+      "requires": []
+    },
+    "/node_modules/module-with-exports-and-imports-objects/index.main.js": {
       "content": "exports.cica = 'kitten';",
       "isModule": false,
       "requires": []
     },
-    "my-package-with-package-root/package.json": {
+    "/node_modules/module-with-exports-and-imports-objects/dep.js": {
+      "content": "exports.cica = 'kitten';",
+      "isModule": false,
+      "requires": []
+    },
+    "/node_modules/module-with-exports-and-imports-objects/src/submodule.js": {
+      "content": "exports.cica = 'kitten';",
+      "isModule": false,
+      "requires": []
+    },
+    "/node_modules/my-package-with-package-root/src/deep-folder/moduleA.js": {
+      "content": "exports.cica = 'kitten';",
+      "isModule": false,
+      "requires": []
+    },
+    "/node_modules/my-package-with-package-root/src/other-folder/moduleB.js": {
+      "content": "exports.cica = 'kitten';",
+      "isModule": false,
+      "requires": []
+    },
+    "/node_modules/my-package-with-package-root/index.js": {
+      "content": "exports.cica = 'kitten';",
+      "isModule": false,
+      "requires": []
+    },
+    "/node_modules/my-package-with-package-root/package.json": {
       "content": "{\"name\": \"my-package-with-package-root\", \"main\": \".index.js\"}",
       "isModule": false,
       "requires": []
+    },
+    "/node_modules/clsx/package.json": {
+      "content": "{\"name\": \"clsx\", \"main\": \"dist/clsx.js\", \"exports\": {\".\": {\"default\": { \"default\": \"./dist/clsx.js\"}}}}",
+      "isModule": false,
+      "requires": []
+    },
+    "/node_modules/clsx/dist/clsx.js": {
+      "content": "exports.cica = 'kitten';",
+      "isModule": false,
+      "requires": []
     }
   },
   "dependency": {
diff --git a/editor/src/core/frameworks/framework-hooks-vite.ts b/editor/src/core/frameworks/framework-hooks-vite.ts
index c5b67b7cfe2f..fd6fd2992af5 100644
--- a/editor/src/core/frameworks/framework-hooks-vite.ts
+++ b/editor/src/core/frameworks/framework-hooks-vite.ts
@@ -9,8 +9,9 @@ import type { ComponentToImport, CreationDataFromProject } from '../model/storyb
 import { namedComponentToImport, PossiblyMainComponentNames } from '../model/storyboard-utils'
 import { mergeImports } from '../workers/common/project-file-utils'
 import { absolutePathFromRelativePath } from '../../utils/path-utils'
-import type { FileLookupResult } from '../es-modules/package-manager/module-resolution'
-import { isResolveSuccess, resolveModule } from '../es-modules/package-manager/module-resolution'
+import type { FileLookupResult } from '../es-modules/package-manager/module-resolution-utils'
+import { isResolveSuccess } from '../es-modules/package-manager/module-resolution-utils'
+import { resolveModule } from '../es-modules/package-manager/module-resolution'
 import { getMainScriptElement, getRootElement, parseHtml } from '../shared/dom-utils'
 
 export class ViteFrameworkHooks implements FrameworkHooks {
diff --git a/editor/src/utils/path-utils.ts b/editor/src/utils/path-utils.ts
index 13dad8741a71..33fbc1fd77e9 100644
--- a/editor/src/utils/path-utils.ts
+++ b/editor/src/utils/path-utils.ts
@@ -33,7 +33,7 @@ export function getParentDirectory(filepath: string): string {
   return makePathFromParts(getPartsFromPath(filepath).slice(0, -1))
 }
 
-type SubPathCache = { [key: string]: PathCache }
+type SubPathCache = Map<string, PathCache>
 
 interface PathCache {
   cachedString: string
@@ -47,7 +47,7 @@ function pathCache(cachedString: string, subPathCache: SubPathCache): PathCache
   }
 }
 
-let rootPathCache: SubPathCache = {}
+let rootPathCache: SubPathCache = new Map()
 
 function getPathFromCache(parts: Array<string>): string {
   let workingSubCache: SubPathCache = rootPathCache
@@ -55,15 +55,14 @@ function getPathFromCache(parts: Array<string>): string {
   let partsSoFar: Array<string> = []
   for (const part of parts) {
     partsSoFar.push(part)
-    if (part in workingSubCache) {
-      // The `in` check above proves this does not return `undefined`.
-      workingPathCache = workingSubCache[part]!
+    if (workingSubCache.has(part)) {
+      workingPathCache = workingSubCache.get(part)!
       workingSubCache = workingPathCache.subPathCache
     } else {
       const cachedString = `/${partsSoFar.join('/')}`
-      const newPathCache = pathCache(cachedString, {})
+      const newPathCache = pathCache(cachedString, new Map())
       workingPathCache = newPathCache
-      workingSubCache[part] = newPathCache
+      workingSubCache.set(part, newPathCache)
       workingSubCache = newPathCache.subPathCache
     }
   }

From 3730db65a00b3bdffb3a0b6bc3c9b09f5f4c0f1a Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 11 Oct 2024 13:10:07 +0200
Subject: [PATCH 130/272] Paste grid cell as sibling (#6516)

**Problem:**

Copy-pasting a grid cell ends up pasting it inside the selected element
instead of next to it.

**Fix:**

If the copied element is a grid cell and the target is another grid
cell, paste next to it.


| Before | After |
|------------|-------------|
| ![Kapture 2024-10-10 at 16 18
06](https://github.com/user-attachments/assets/ff77dac5-c62b-4a60-b4a2-2e98d2fde8b4)
| ![Kapture 2024-10-10 at 16 16
49](https://github.com/user-attachments/assets/326e63f1-3796-4592-b7de-e9b8a5a4a471)
|

Fixes #6515
---
 .../strategies/reparent-utils.ts              | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reparent-utils.ts b/editor/src/components/canvas/canvas-strategies/strategies/reparent-utils.ts
index 0b148574d5e8..c45d9855d732 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reparent-utils.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reparent-utils.ts
@@ -538,6 +538,36 @@ function pasteNextToSameSizedElement(
   return null
 }
 
+function pasteIntoNextGridCell(
+  copyData: ParsedCopyData,
+  selectedViews: NonEmptyArray<ElementPath>,
+  metadata: ElementInstanceMetadataMap,
+): ReparentTargetForPaste | null {
+  if (selectedViews.length === 0) {
+    return null
+  }
+  const selectedView = lastOfNonEmptyArray(selectedViews)
+
+  // if the copied elements are grid cells and the target is a grid cell, paste next to it
+
+  const copyDataElementsAreGridCells = copyData.elementPaste.every(({ originalElementPath }) =>
+    MetadataUtils.isGridCell(copyData.originalContextMetadata, originalElementPath),
+  )
+  if (!copyDataElementsAreGridCells) {
+    return null
+  }
+
+  const targetIsGridChild = MetadataUtils.isGridCell(metadata, selectedView)
+  if (!targetIsGridChild) {
+    return null
+  }
+
+  return {
+    type: 'parent',
+    parentPath: childInsertionPath(EP.parentPath(selectedView)),
+  }
+}
+
 function canInsertIntoTarget(
   projectContents: ProjectContentTreeRoot,
   metadata: ElementInstanceMetadataMap,
@@ -762,6 +792,11 @@ export function getTargetParentForPaste(
     return right(pasteNextToSameSizedElementResult)
   }
 
+  const paseIntoNextGridCellResult = pasteIntoNextGridCell(copyData, selectedViews, metadata)
+  if (paseIntoNextGridCellResult != null) {
+    return right(paseIntoNextGridCellResult)
+  }
+
   const pasteIntoParentOrGrandparentResult = pasteIntoParentOrGrandparent(
     copyData.elementPaste.map((e) => e.element),
     projectContents,

From 5eb72f00a43fff9eaca955b0a0f71faa06c59cb6 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Fri, 11 Oct 2024 14:34:23 +0200
Subject: [PATCH 131/272] Revert "Use node module resolution (#6425)" (#6524)

This reverts commit da6bf80b0b51fa75d9c2e92a60144a37467685a6.

**Problem:**
When loading the Hydrogen demo store, an infinite recursion happens:

![image](https://github.com/user-attachments/assets/ee1a761d-c950-43c3-a633-f62ec580d722)
---
 .../components/custom-code/code-file.spec.ts  |  90 +--
 .../src/components/custom-code/code-file.ts   |   3 -
 .../core/es-modules/evaluator/evaluator.ts    |   1 -
 .../package-manager/module-resolution-esm.ts  | 228 ------
 .../module-resolution-utils.ts                | 216 ------
 .../package-manager/module-resolution.spec.ts | 130 +---
 .../package-manager/module-resolution.ts      | 665 ++++++++++--------
 .../package-manager/package-manager.ts        |  14 +-
 .../module-resolution-examples.json           |  53 +-
 .../core/frameworks/framework-hooks-vite.ts   |   5 +-
 editor/src/utils/path-utils.ts                |  13 +-
 11 files changed, 412 insertions(+), 1006 deletions(-)
 delete mode 100644 editor/src/core/es-modules/package-manager/module-resolution-esm.ts
 delete mode 100644 editor/src/core/es-modules/package-manager/module-resolution-utils.ts

diff --git a/editor/src/components/custom-code/code-file.spec.ts b/editor/src/components/custom-code/code-file.spec.ts
index 7cb6d28929d9..4562aa933e10 100644
--- a/editor/src/components/custom-code/code-file.spec.ts
+++ b/editor/src/components/custom-code/code-file.spec.ts
@@ -26,12 +26,7 @@ import {
   textFileContents,
   unparsed,
 } from '../../core/shared/project-file-types'
-import {
-  addFileToProjectContents,
-  contentsToTree,
-  getTextFileByPath,
-  type ProjectContentTreeRoot,
-} from '../assets'
+import { addFileToProjectContents, getTextFileByPath } from '../assets'
 import type { ExportsInfo, MultiFileBuildResult } from '../../core/workers/common/worker-types'
 import { createBuiltInDependenciesList } from '../../core/es-modules/package-manager/built-in-dependencies-list'
 
@@ -58,15 +53,6 @@ function transpileCode(
 const appJSCode =
   "\nimport * as React from 'react'\nimport {\n  Ellipse,\n  HelperFunctions,\n  Image,\n  NodeImplementations,\n  Rectangle,\n  Text,\n  View,\n} from 'utopia-api'\nimport {\n  colorTheme,\n  Button,\n  Dialog,\n  Icn,\n  Icons,\n  LargerIcons,\n  FunctionIcons,\n  MenuIcons,\n  Isolator,\n  TabComponent,\n  Tooltip,\n  ActionSheet,\n  Avatar,\n  ControlledTextArea,\n  Title,\n  H1,\n  H2,\n  H3,\n  Subdued,\n  InspectorSectionHeader,\n  InspectorSubsectionHeader,\n  FlexColumn,\n  FlexRow,\n  ResizableFlexColumn,\n  PopupList,\n  Section,\n  SectionTitleRow,\n  SectionBodyArea,\n  UtopiaListSelect,\n  UtopiaListItem,\n  CheckboxInput,\n  NumberInput,\n  StringInput,\n  OnClickOutsideHOC,\n} from 'uuiui'\n\nexport var canvasMetadata = {\n  specialNodes: [],\n  nodeMetadata: {},\n  scenes: [\n    {\n      component: 'App',\n      frame: { height: 812, left: 0, width: 375, top: 0 },\n      props: { layout: { top: 0, left: 0, bottom: 0, right: 0 } },\n      container: { layoutSystem: 'pinSystem' },\n    },\n  ],\n  elementMetadata: {},\n}\n\nexport var App = (props) => {\n  return (\n    <View\n      style={{ ...props.style, backgroundColor: colorTheme.white.value }}\n      layout={{ layoutSystem: 'pinSystem' }}\n      data-uid={'aaa'}\n    ></View>\n  )\n}\n\n"
 
-const SampleSingleFileProjectContents: ProjectContentTreeRoot = contentsToTree({
-  '/app.js': textFile(
-    textFileContents(appJSCode, unparsed, RevisionsState.CodeAhead),
-    null,
-    null,
-    0,
-  ),
-})
-
 const SampleSingleFileBuildResult = transpileCode(['/app.js'], {
   '/app.js': appJSCode,
 })
@@ -98,40 +84,15 @@ const SampleSingleFileExportsInfo = [
   },
 ]
 
-const multiFileAppJSCode =
-  "\nimport * as React from 'react'\nimport {\n  Ellipse,\n  HelperFunctions,\n  Image,\n  NodeImplementations,\n  Rectangle,\n  Text,\n  View,\n} from 'utopia-api'\nimport {\n  colorTheme,\n  Button,\n  Dialog,\n  Icn,\n  Icons,\n  LargerIcons,\n  FunctionIcons,\n  MenuIcons,\n  Isolator,\n  TabComponent,\n  Tooltip,\n  ActionSheet,\n  Avatar,\n  ControlledTextArea,\n  Title,\n  H1,\n  H2,\n  H3,\n  Subdued,\n  InspectorSectionHeader,\n  InspectorSubsectionHeader,\n  FlexColumn,\n  FlexRow,\n  ResizableFlexColumn,\n  PopupList,\n  Section,\n  SectionTitleRow,\n  SectionBodyArea,\n  UtopiaListSelect,\n  UtopiaListItem,\n  CheckboxInput,\n  NumberInput,\n  StringInput,\n  OnClickOutsideHOC,\n} from 'uuiui'\n\nexport var canvasMetadata = {\n  specialNodes: [],\n  nodeMetadata: {},\n  scenes: [\n    {\n      component: 'App',\n      frame: { height: 812, left: 0, width: 375, top: 0 },\n      props: { layout: { top: 0, left: 0, bottom: 0, right: 0 } },\n      container: { layoutSystem: 'pinSystem' },\n    },\n  ],\n  elementMetadata: {},\n}\n\n\nexport var App = (props) => {\n  return (\n    <View\n      style={{ ...props.style, backgroundColor: colorTheme.white.value }}\n      layout={{ layoutSystem: 'pinSystem' }}\n      data-uid={'aaa'}\n    ></View>\n  )\n}\n\n"
-const multiFileComponentsJSCode =
-  "// component library\nimport * as React from 'react'\nimport { Text, View } from 'utopia-api'\n\nexport default (props) => (\n  <View layout={props.layout} style={props.style} onMouseDown={props.onMouseDown}>\n    <Text\n      style={{ fontSize: 16, textAlign: 'center' }}\n      text={props.text}\n      layout={{\n        left: 0,\n        top: 10,\n        width: '100%',\n        height: '100%',\n      }}\n      textSizing={'fixed'}\n    />\n  </View>\n)\n\nexport const LABEL = 'press me! 😉'\n\nexport const ComponentWithProps = (props) => {\n  return (\n    <div\n      style={{\n        ...props.style,\n        backgroundColor: props.pink ? 'hotpink' : 'transparent',\n        whiteSpace: 'normal',\n      }}\n    >\n      {(props.text + ' ').repeat(props.num)}\n    </div>\n  )\n}\n\nComponentWithProps.propertyControls = {\n  text: {\n    type: 'string',\n    title: 'Title',\n    defaultValue: 'Change me',\n  },\n  num: {\n    type: 'number',\n    title: 'amount',\n    defaultValue: 2,\n  },\n  pink: {\n    type: 'boolean',\n    title: 'Enabled',\n    defaultValue: true,\n  },\n}\n\n"
-const multiFilePreviewJSXCode =
-  'import * as React from "react";\nimport * as ReactDOM from "react-dom";\nimport { App } from "../app";\n\nconst root = document.getElementById("root");\nif (root != null) {\nReactDOM.render(<App />, root);\n}'
-
-const SampleMultiFileProjectContents: ProjectContentTreeRoot = contentsToTree({
-  '/app.js': textFile(
-    textFileContents(multiFileAppJSCode, unparsed, RevisionsState.CodeAhead),
-    null,
-    null,
-    0,
-  ),
-  '/src/components.js': textFile(
-    textFileContents(multiFileComponentsJSCode, unparsed, RevisionsState.CodeAhead),
-    null,
-    null,
-    0,
-  ),
-  '/public/preview.jsx': textFile(
-    textFileContents(multiFilePreviewJSXCode, unparsed, RevisionsState.CodeAhead),
-    null,
-    null,
-    0,
-  ),
-})
-
 const SampleMultiFileBuildResult = transpileCode(
   ['/app.js', '/src/components.js', '/public/preview.jsx'],
   {
-    '/app.js': multiFileAppJSCode,
-    '/src/components.js': multiFileComponentsJSCode,
-    '/public/preview.jsx': multiFilePreviewJSXCode,
+    '/app.js':
+      "\nimport * as React from 'react'\nimport {\n  Ellipse,\n  HelperFunctions,\n  Image,\n  NodeImplementations,\n  Rectangle,\n  Text,\n  View,\n} from 'utopia-api'\nimport {\n  colorTheme,\n  Button,\n  Dialog,\n  Icn,\n  Icons,\n  LargerIcons,\n  FunctionIcons,\n  MenuIcons,\n  Isolator,\n  TabComponent,\n  Tooltip,\n  ActionSheet,\n  Avatar,\n  ControlledTextArea,\n  Title,\n  H1,\n  H2,\n  H3,\n  Subdued,\n  InspectorSectionHeader,\n  InspectorSubsectionHeader,\n  FlexColumn,\n  FlexRow,\n  ResizableFlexColumn,\n  PopupList,\n  Section,\n  SectionTitleRow,\n  SectionBodyArea,\n  UtopiaListSelect,\n  UtopiaListItem,\n  CheckboxInput,\n  NumberInput,\n  StringInput,\n  OnClickOutsideHOC,\n} from 'uuiui'\n\nexport var canvasMetadata = {\n  specialNodes: [],\n  nodeMetadata: {},\n  scenes: [\n    {\n      component: 'App',\n      frame: { height: 812, left: 0, width: 375, top: 0 },\n      props: { layout: { top: 0, left: 0, bottom: 0, right: 0 } },\n      container: { layoutSystem: 'pinSystem' },\n    },\n  ],\n  elementMetadata: {},\n}\n\n\nexport var App = (props) => {\n  return (\n    <View\n      style={{ ...props.style, backgroundColor: colorTheme.white.value }}\n      layout={{ layoutSystem: 'pinSystem' }}\n      data-uid={'aaa'}\n    ></View>\n  )\n}\n\n",
+    '/src/components.js':
+      "// component library\nimport * as React from 'react'\nimport { Text, View } from 'utopia-api'\n\nexport default (props) => (\n  <View layout={props.layout} style={props.style} onMouseDown={props.onMouseDown}>\n    <Text\n      style={{ fontSize: 16, textAlign: 'center' }}\n      text={props.text}\n      layout={{\n        left: 0,\n        top: 10,\n        width: '100%',\n        height: '100%',\n      }}\n      textSizing={'fixed'}\n    />\n  </View>\n)\n\nexport const LABEL = 'press me! 😉'\n\nexport const ComponentWithProps = (props) => {\n  return (\n    <div\n      style={{\n        ...props.style,\n        backgroundColor: props.pink ? 'hotpink' : 'transparent',\n        whiteSpace: 'normal',\n      }}\n    >\n      {(props.text + ' ').repeat(props.num)}\n    </div>\n  )\n}\n\nComponentWithProps.propertyControls = {\n  text: {\n    type: 'string',\n    title: 'Title',\n    defaultValue: 'Change me',\n  },\n  num: {\n    type: 'number',\n    title: 'amount',\n    defaultValue: 2,\n  },\n  pink: {\n    type: 'boolean',\n    title: 'Enabled',\n    defaultValue: true,\n  },\n}\n\n",
+    '/public/preview.jsx':
+      'import * as React from "react";\nimport * as ReactDOM from "react-dom";\nimport { App } from "../app";\n\nconst root = document.getElementById("root");\nif (root != null) {\nReactDOM.render(<App />, root);\n}',
   },
 )
 
@@ -255,25 +216,14 @@ const SampleExportsInfoWithError = [
   },
 ]
 
-const exceptionThrowingCodeJSFile = "export const boom = (() => {\n  throw Error('booom')\n})()\n"
-
-const SampleExceptionThrowingProjectContents: ProjectContentTreeRoot = contentsToTree({
-  '/src/code.js': textFile(
-    textFileContents(exceptionThrowingCodeJSFile, unparsed, RevisionsState.CodeAhead),
-    null,
-    null,
-    0,
-  ),
-})
-
 const SampleBuildResultWithException = transpileCode(['/src/code.js'], {
-  '/src/code.js': exceptionThrowingCodeJSFile,
+  '/src/code.js': "export const boom = (() => {\n  throw Error('booom')\n})()\n",
 })
 
 const SampleExportsInfoWithException = [
   {
     filename: '/src/code.js',
-    code: exceptionThrowingCodeJSFile,
+    code: "export const boom = (() => {\n  throw Error('booom')\n})()\n",
     exportTypes: {
       boom: {
         type: 'never',
@@ -440,9 +390,7 @@ describe('Creating require function', () => {
       createBuiltInDependenciesList(null),
     )
 
-    expect(
-      codeResultCache.curriedRequireFn(SampleSingleFileProjectContents)('/', './app', false),
-    ).toMatchSnapshot()
+    expect(codeResultCache.curriedRequireFn({})('/', './app', false)).toMatchSnapshot()
   })
   it('Creates require function for multi file build result', () => {
     const codeResultCache = generateCodeResultCache(
@@ -455,16 +403,8 @@ describe('Creating require function', () => {
       createBuiltInDependenciesList(null),
     )
 
-    expect(
-      codeResultCache.curriedRequireFn(SampleMultiFileProjectContents)('/', './app', false),
-    ).toMatchSnapshot()
-    expect(
-      codeResultCache.curriedRequireFn(SampleMultiFileProjectContents)(
-        '/',
-        './src/components',
-        false,
-      ),
-    ).toMatchSnapshot()
+    expect(codeResultCache.curriedRequireFn({})('/', './app', false)).toMatchSnapshot()
+    expect(codeResultCache.curriedRequireFn({})('/', './src/components', false)).toMatchSnapshot()
   })
   it('Require throws exception for module code', () => {
     const codeResultCache = generateCodeResultCache(
@@ -478,11 +418,7 @@ describe('Creating require function', () => {
     )
 
     expect(() =>
-      codeResultCache.curriedRequireFn(SampleExceptionThrowingProjectContents)(
-        '/',
-        './src/code',
-        false,
-      ),
+      codeResultCache.curriedRequireFn({})('/', './src/code', false),
     ).toThrowErrorMatchingSnapshot()
   })
   it('Require throws exception for import from non-existing module', () => {
diff --git a/editor/src/components/custom-code/code-file.ts b/editor/src/components/custom-code/code-file.ts
index 373b778925d3..db71fa3fa70c 100644
--- a/editor/src/components/custom-code/code-file.ts
+++ b/editor/src/components/custom-code/code-file.ts
@@ -355,9 +355,6 @@ export function generateCodeResultCache(
     delete evaluationCache[fileToDelete]
   }
 
-  // FIXME This actually isn't doing anything ever, because it appears that `updatedModules` above is always empty,
-  // however the require and resolve functions are still used, so we need to figure out which part of this code is
-  // still alive and which is dead
   // MUTATION ALERT! This function is mutating editorState.nodeModules.files by inserting the project files into it.
   incorporateBuildResult(nodeModules, projectContents, projectModules)
 
diff --git a/editor/src/core/es-modules/evaluator/evaluator.ts b/editor/src/core/es-modules/evaluator/evaluator.ts
index 2c1ff0134993..089651ed16a7 100644
--- a/editor/src/core/es-modules/evaluator/evaluator.ts
+++ b/editor/src/core/es-modules/evaluator/evaluator.ts
@@ -92,7 +92,6 @@ function evaluateJs(
 
   function firstErrorHandler(error: Error): void {
     if (isEsModuleError(error)) {
-      // This is effectively implementing `MAYBE_DETECT_AND_LOAD` from https://nodejs.org/api/modules.html#all-together
       const { transpiledCode, sourceMap } = transformToCommonJS(filePath, moduleCode)
       evaluateWithHandler(transpiledCode, sourceMap, secondErrorHandler)
     } else {
diff --git a/editor/src/core/es-modules/package-manager/module-resolution-esm.ts b/editor/src/core/es-modules/package-manager/module-resolution-esm.ts
deleted file mode 100644
index 4483cf4bedca..000000000000
--- a/editor/src/core/es-modules/package-manager/module-resolution-esm.ts
+++ /dev/null
@@ -1,228 +0,0 @@
-import { getPartsFromPath, makePathFromParts, normalizePath } from '../../../utils/path-utils'
-import type { ParseResult } from '../../../utils/value-parser-utils'
-import { foldEither } from '../../shared/either'
-import { isEsCodeFile } from '../../shared/project-file-types'
-import type {
-  ExportsField,
-  FileForPathParts,
-  FileLookupFn,
-  FileLookupResult,
-  PartialPackageJsonDefinition,
-} from './module-resolution-utils'
-import {
-  findClosestPackageScopeToPath,
-  getPartialPackageJson,
-  isResolveSuccess,
-  resolveNotPresent,
-} from './module-resolution-utils'
-
-// Using the logic from https://nodejs.org/api/modules.html#all-together
-// This is separated to emphasize that these functions act an ESM compatibility
-// layer in CommonJS
-
-// LOAD_PACKAGE_IMPORTS(X, DIR)
-export function loadPackageImports(
-  path: string,
-  originPath: string,
-  packageJsonLookupFn: FileForPathParts,
-  lookupFn: FileLookupFn,
-): FileLookupResult {
-  // Loading a module from the imports field mapping https://nodejs.org/api/packages.html#imports
-  // Find the closest package scope SCOPE to DIR.
-  const { packageJsonFileResult, packageJsonDir } = findClosestPackageScopeToPath(
-    originPath,
-    packageJsonLookupFn,
-  )
-
-  // If no scope was found, return
-  if (
-    !(isResolveSuccess(packageJsonFileResult) && isEsCodeFile(packageJsonFileResult.success.file))
-  ) {
-    return resolveNotPresent
-  }
-
-  let possiblePackageJson: ParseResult<PartialPackageJsonDefinition>
-  try {
-    possiblePackageJson = getPartialPackageJson(packageJsonFileResult.success.file.fileContents)
-  } catch {
-    return resolveNotPresent
-  }
-
-  return foldEither(
-    (_) => resolveNotPresent,
-    (packageJson) => {
-      // If the SCOPE/package.json "imports" is null or undefined, return
-      const importsEntry = packageJson['imports']
-      if (importsEntry == null) {
-        return resolveNotPresent
-      }
-
-      return packageImportsExportsResolve(path, importsEntry, packageJsonDir, lookupFn)
-    },
-    possiblePackageJson,
-  )
-}
-
-// LOAD_PACKAGE_EXPORTS(X, DIR)
-export function loadPackageExports(
-  path: string,
-  originPath: string,
-  packageJsonLookupFn: FileForPathParts,
-  lookupFn: FileLookupFn,
-): FileLookupResult {
-  // Try to interpret X as a combination of NAME and SUBPATH where the name
-  // may have a @scope/ prefix and the subpath begins with a slash (`/`)
-  const regex = /((?:@[\w|\-|\.]+\/)*[\w|\-|\.]+)(\/[\w|\-|\.]*)*/
-  const matches = path.match(regex)
-  if (matches == null) {
-    // If X does not match this pattern, return
-    return resolveNotPresent
-  }
-
-  const [_combined, name, subpath] = matches
-
-  // If DIR/NAME/package.json is not a file, return
-  const pathToModule = normalizePath([...getPartsFromPath(originPath), name])
-  const packageJsonPathParts = pathToModule.concat('package.json')
-  const packageJsonFileResult = packageJsonLookupFn(packageJsonPathParts)
-  if (
-    !(isResolveSuccess(packageJsonFileResult) && isEsCodeFile(packageJsonFileResult.success.file))
-  ) {
-    return resolveNotPresent
-  }
-
-  // Parse DIR/NAME/package.json, and look for "exports" field
-  let possiblePackageJson: ParseResult<PartialPackageJsonDefinition>
-  try {
-    possiblePackageJson = getPartialPackageJson(packageJsonFileResult.success.file.fileContents)
-  } catch {
-    return resolveNotPresent
-  }
-
-  return foldEither(
-    (_) => resolveNotPresent,
-    (packageJson) => {
-      // If "exports" is null or undefined, return.
-      const exportsEntry = packageJson['exports']
-      if (exportsEntry == null) {
-        return resolveNotPresent
-      }
-
-      return packageImportsExportsResolve(
-        `.${subpath}`,
-        exportsEntry,
-        makePathFromParts(pathToModule),
-        lookupFn,
-      )
-    },
-    possiblePackageJson,
-  )
-}
-
-// LOAD_PACKAGE_SELF(X, DIR)
-export function loadPackageSelf(
-  path: string,
-  originPath: string,
-  packageJsonLookupFn: FileForPathParts,
-  lookupFn: FileLookupFn,
-): FileLookupResult {
-  // Find the closest package scope SCOPE to DIR.
-  const { packageJsonFileResult, packageJsonDir } = findClosestPackageScopeToPath(
-    originPath,
-    packageJsonLookupFn,
-  )
-
-  // If no scope was found, return.
-  if (
-    !(isResolveSuccess(packageJsonFileResult) && isEsCodeFile(packageJsonFileResult.success.file))
-  ) {
-    return resolveNotPresent
-  }
-
-  let possiblePackageJson: ParseResult<PartialPackageJsonDefinition>
-  try {
-    possiblePackageJson = getPartialPackageJson(packageJsonFileResult.success.file.fileContents)
-  } catch {
-    return resolveNotPresent
-  }
-  return foldEither(
-    (_) => resolveNotPresent,
-    (packageJson) => {
-      // If "exports" is null or undefined, return.
-      const exportsEntry = packageJson['exports']
-      if (exportsEntry == null) {
-        return resolveNotPresent
-      }
-
-      // If "name" is not the first segment of X, return
-      const nameEntry = packageJson.name
-      if (nameEntry == null || !path.startsWith(nameEntry)) {
-        return resolveNotPresent
-      }
-
-      return packageImportsExportsResolve(
-        `.${path.slice(nameEntry.length)}`,
-        exportsEntry,
-        packageJsonDir,
-        lookupFn,
-      )
-    },
-    possiblePackageJson,
-  )
-}
-
-// PACKAGE_IMPORTS_EXPORTS_RESOLVE
-export function packageImportsExportsResolve(
-  path: string,
-  importsOrExportsEntry: ExportsField,
-  packageJsonDir: string,
-  lookupFn: FileLookupFn,
-): FileLookupResult {
-  // FIXME partial path lookup because the exports field could be along the lines of `{ '@thing': { stuff: { ... }} }`
-  // in which case we would want to match that against the import `@thing/stuff`
-  const importsOrExportsResult =
-    typeof importsOrExportsEntry === 'string' ? importsOrExportsEntry : importsOrExportsEntry[path]
-  if (importsOrExportsResult == null) {
-    return resolveNotPresent
-  }
-
-  if (typeof importsOrExportsResult === 'string') {
-    // Lookup the import relative to the package.json we have found
-    return lookupFn(importsOrExportsResult, packageJsonDir)
-  }
-
-  // Otherwise importsOrExportsResult is an object, so now we need to check for the specific keys we're interested in
-  const defaultImportsOrExportsEntry = importsOrExportsResult['default']
-  const browserImportsOrExportsEntry = importsOrExportsResult['browser'] // The nodejs algorithm uses `node` here
-  const requireImportsOrExportsEntry = importsOrExportsResult['require']
-
-  if (defaultImportsOrExportsEntry != null) {
-    const fileToLookup =
-      typeof defaultImportsOrExportsEntry === 'string'
-        ? defaultImportsOrExportsEntry
-        : defaultImportsOrExportsEntry['default']
-    if (fileToLookup != null) {
-      return lookupFn(fileToLookup, packageJsonDir)
-    }
-  }
-  if (browserImportsOrExportsEntry != null) {
-    const fileToLookup =
-      typeof browserImportsOrExportsEntry === 'string'
-        ? browserImportsOrExportsEntry
-        : browserImportsOrExportsEntry['default']
-    if (fileToLookup != null) {
-      return lookupFn(fileToLookup, packageJsonDir)
-    }
-  }
-  if (requireImportsOrExportsEntry != null) {
-    const fileToLookup =
-      typeof requireImportsOrExportsEntry === 'string'
-        ? requireImportsOrExportsEntry
-        : requireImportsOrExportsEntry['default']
-    if (fileToLookup != null) {
-      return lookupFn(fileToLookup, packageJsonDir)
-    }
-  }
-
-  return resolveNotPresent
-}
diff --git a/editor/src/core/es-modules/package-manager/module-resolution-utils.ts b/editor/src/core/es-modules/package-manager/module-resolution-utils.ts
deleted file mode 100644
index 0a2bc939216b..000000000000
--- a/editor/src/core/es-modules/package-manager/module-resolution-utils.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-import type { MapLike } from 'typescript'
-import { getPartsFromPath, makePathFromParts, normalizePath } from '../../../utils/path-utils'
-import type { ParseResult } from '../../../utils/value-parser-utils'
-import {
-  optionalObjectKeyParser,
-  parseAlternative,
-  parseFalse,
-  parseNull,
-  parseObject,
-  parseString,
-} from '../../../utils/value-parser-utils'
-import { applicative6Either } from '../../shared/either'
-import { setOptionalProp } from '../../shared/object-utils'
-import type { ESCodeFile, ESRemoteDependencyPlaceholder } from '../../shared/project-file-types'
-
-import LRU from 'lru-cache'
-
-export type ImportsExportsObjectField = MapLike<
-  string | MapLike<string | null | MapLike<string | null>>
->
-export type ExportsField = string | ImportsExportsObjectField
-
-export interface PartialPackageJsonDefinition {
-  name?: string
-  main?: string
-  module?: string
-  browser?: string | MapLike<string | false>
-  imports?: ImportsExportsObjectField
-  exports?: ExportsField
-}
-
-const partialPackageJsonCache: LRU<string, ParseResult<PartialPackageJsonDefinition>> = new LRU({
-  max: 20,
-})
-export function getPartialPackageJson(contents: string): ParseResult<PartialPackageJsonDefinition> {
-  const fromCache = partialPackageJsonCache.get(contents)
-  if (fromCache == null) {
-    const jsonParsed = JSON.parse(contents)
-    const result = parsePartialPackageJsonDefinition(jsonParsed)
-    partialPackageJsonCache.set(contents, result)
-    return result
-  } else {
-    return fromCache
-  }
-}
-
-export interface ResolveSuccess<T> {
-  type: 'RESOLVE_SUCCESS'
-  success: T
-}
-
-export function resolveSuccess<T>(success: T): ResolveSuccess<T> {
-  return {
-    type: 'RESOLVE_SUCCESS',
-    success: success,
-  }
-}
-
-export interface ResolveNotPresent {
-  type: 'RESOLVE_NOT_PRESENT'
-}
-
-export const resolveNotPresent: ResolveNotPresent = {
-  type: 'RESOLVE_NOT_PRESENT',
-}
-
-export interface ResolveSuccessIgnoreModule {
-  type: 'RESOLVE_SUCCESS_IGNORE_MODULE'
-}
-
-export function isResolveSuccessIgnoreModule<T>(
-  resolveResult: ResolveResult<T>,
-): resolveResult is ResolveSuccessIgnoreModule {
-  return resolveResult.type === 'RESOLVE_SUCCESS_IGNORE_MODULE'
-}
-
-export const resolveSuccessIgnoreModule: ResolveSuccessIgnoreModule = {
-  type: 'RESOLVE_SUCCESS_IGNORE_MODULE',
-}
-
-export type ResolveResult<T> = ResolveNotPresent | ResolveSuccessIgnoreModule | ResolveSuccess<T>
-
-export function isResolveSuccess<T>(
-  resolveResult: ResolveResult<T>,
-): resolveResult is ResolveSuccess<T> {
-  return resolveResult.type === 'RESOLVE_SUCCESS'
-}
-
-export function isResolveNotPresent<T>(
-  resolveResult: ResolveResult<T>,
-): resolveResult is ResolveNotPresent {
-  return resolveResult.type === 'RESOLVE_NOT_PRESENT'
-}
-
-export interface FoundFile {
-  path: string
-  file: ESCodeFile | ESRemoteDependencyPlaceholder
-}
-
-export type FileLookupResult = ResolveResult<FoundFile>
-
-export function fileLookupResult(
-  path: string,
-  file: ESCodeFile | ESRemoteDependencyPlaceholder | null,
-): FileLookupResult {
-  if (file == null) {
-    return resolveNotPresent
-  } else {
-    return resolveSuccess({
-      path: path,
-      file: file,
-    })
-  }
-}
-
-export type FileLookupFn = (path: string, importOrigin: string) => FileLookupResult
-export type FileForPathParts = (pathParts: string[]) => FileLookupResult
-
-const importsExportsObjectParser = parseObject(
-  parseAlternative<string | MapLike<string | null | MapLike<string | null>>>(
-    [
-      parseString,
-      parseObject(
-        parseAlternative<string | null | MapLike<string | null>>(
-          [
-            parseString,
-            parseNull,
-            parseObject(
-              parseAlternative<string | null>(
-                [parseString, parseNull],
-                `package.imports and package.exports replacement entries must be either string or null`,
-              ),
-            ),
-          ],
-          `package.imports and package.exports replacement entries must be either string or null`,
-        ),
-      ),
-    ],
-    'package.imports and package.exports object must be an object with type {[key: string]: string | null}',
-  ),
-)
-
-export const exportsParser = parseAlternative<string | ImportsExportsObjectField>(
-  [parseString, importsExportsObjectParser],
-  'package.imports and package.exports field must either be a string or an object with type {[key: string]: string | null}',
-)
-
-export function parsePartialPackageJsonDefinition(
-  value: unknown,
-): ParseResult<PartialPackageJsonDefinition> {
-  return applicative6Either(
-    (name, main, module, browser, imports, exports) => {
-      let result: PartialPackageJsonDefinition = {}
-      setOptionalProp(result, 'name', name)
-      setOptionalProp(result, 'main', main)
-      setOptionalProp(result, 'module', module)
-      setOptionalProp(result, 'browser', browser)
-      setOptionalProp(result, 'imports', imports)
-      setOptionalProp(result, 'exports', exports)
-      return result
-    },
-    optionalObjectKeyParser(parseString, 'name')(value),
-    optionalObjectKeyParser(parseString, 'main')(value),
-    optionalObjectKeyParser(parseString, 'module')(value),
-    optionalObjectKeyParser(
-      parseAlternative<string | MapLike<string | false>>(
-        [
-          parseString,
-          parseObject(
-            parseAlternative<string | false>(
-              [parseString, parseFalse],
-              `package.browser replacement entries must be either string or 'false' for ignoring a package`,
-            ),
-          ),
-        ],
-        'package.browser field must either be a string or an object with type {[key: string]: string | false}',
-      ),
-      'browser',
-    )(value),
-    optionalObjectKeyParser(importsExportsObjectParser, 'imports')(value),
-    optionalObjectKeyParser(exportsParser, 'exports')(value),
-  )
-}
-
-export type PackageLookupResult = {
-  packageJsonFileResult: FileLookupResult
-  packageJsonDir: string
-}
-export function findClosestPackageScopeToPath(
-  path: string,
-  localFileLookup: FileForPathParts,
-): PackageLookupResult {
-  const originPathPartsToTest = normalizePath(getPartsFromPath(path))
-  const allPossiblePackageJsonPaths = [['package.json']]
-    .concat(
-      originPathPartsToTest.map((_part, index) =>
-        originPathPartsToTest.slice(0, index + 1).concat('package.json'),
-      ),
-    )
-    .reverse()
-
-  for (const possiblePath of allPossiblePackageJsonPaths) {
-    const packageJsonFileResult = localFileLookup(possiblePath)
-    if (isResolveSuccess(packageJsonFileResult)) {
-      return {
-        packageJsonFileResult: packageJsonFileResult,
-        packageJsonDir: makePathFromParts(possiblePath.slice(0, -1)),
-      }
-    }
-  }
-
-  return {
-    packageJsonFileResult: resolveNotPresent,
-    packageJsonDir: '',
-  }
-}
diff --git a/editor/src/core/es-modules/package-manager/module-resolution.spec.ts b/editor/src/core/es-modules/package-manager/module-resolution.spec.ts
index eb394f94f2c2..aa22947b72e7 100644
--- a/editor/src/core/es-modules/package-manager/module-resolution.spec.ts
+++ b/editor/src/core/es-modules/package-manager/module-resolution.spec.ts
@@ -7,8 +7,7 @@ import {
   unparsed,
 } from '../../shared/project-file-types'
 import * as moduleResolutionExamples from '../test-cases/module-resolution-examples.json'
-import { resolveModule } from './module-resolution'
-import { isResolveSuccess } from './module-resolution-utils'
+import { isResolveSuccess, resolveModule } from './module-resolution'
 import { createNodeModules } from './test-utils'
 
 const sampleProjectContents: ProjectContentTreeRoot = contentsToTree({
@@ -34,34 +33,6 @@ const sampleProjectContents: ProjectContentTreeRoot = contentsToTree({
     null,
     0,
   ),
-  '/package.json': textFile(
-    textFileContents(
-      `
-    {
-      "name": "sample-project",
-      "exports": {
-        "./exported-module": "./exported-module-main.js"
-      },
-      "imports": {
-        "#dep-object": {
-          "default": "./src/dep-object.js"
-        },
-        "#dep-simple": "./src/dep-simple.js"
-      }
-    }`,
-      unparsed,
-      RevisionsState.CodeAhead,
-    ),
-    null,
-    null,
-    0,
-  ),
-  '/exported-module-main.js': textFile(
-    textFileContents('export const ExportedModuleMain = 1', unparsed, RevisionsState.CodeAhead),
-    null,
-    null,
-    0,
-  ),
   '/a/some/nested/file.js': textFile(
     textFileContents('export const Cake = "tasty"', unparsed, RevisionsState.CodeAhead),
     null,
@@ -80,18 +51,6 @@ const sampleProjectContents: ProjectContentTreeRoot = contentsToTree({
     null,
     0,
   ),
-  '/src/dep-object.js': textFile(
-    textFileContents('export const DepObject = 1', unparsed, RevisionsState.CodeAhead),
-    null,
-    null,
-    0,
-  ),
-  '/src/dep-simple.js': textFile(
-    textFileContents('export const DepSimple = 1', unparsed, RevisionsState.CodeAhead),
-    null,
-    null,
-    0,
-  ),
   '/src/icon.png': {
     type: 'ASSET_FILE',
   },
@@ -101,12 +60,6 @@ const sampleProjectContents: ProjectContentTreeRoot = contentsToTree({
     null,
     0,
   ),
-  '/utopia/layout.utopia.js': textFile(
-    textFileContents('export const Layout = 1', unparsed, RevisionsState.CodeAhead),
-    null,
-    null,
-    0,
-  ),
 })
 
 describe('ES Package Manager Module Resolution', () => {
@@ -291,69 +244,20 @@ describe('ES Package Manager Module Resolution', () => {
     expect(resolveResult.type).toEqual('RESOLVE_SUCCESS_IGNORE_MODULE')
   })
 
-  it('resolves package exports for local package', () => {
-    expect(resolve('/src/app.js', 'sample-project/exported-module')).toEqual(
-      '/exported-module-main.js',
-    )
-  })
-
-  it('resolves package imports simple for local package', () => {
-    expect(resolve('/src/app.js', '#dep-simple')).toEqual('/src/dep-simple.js')
-  })
-  it('resolves package imports object for local package', () => {
-    expect(resolve('/src/app.js', '#dep-object')).toEqual('/src/dep-object.js')
-  })
-
-  it('resolves package main entry for node module with exports with no subpath', () => {
-    expect(resolve('/src/app.js', 'module-with-exports-and-imports')).toEqual(
-      '/node_modules/module-with-exports-and-imports/index.main.js',
-    )
-  })
-
-  it('resolves package exports object main entry for node module', () => {
-    expect(resolve('/src/app.js', 'module-with-exports-and-imports-objects')).toEqual(
-      '/node_modules/module-with-exports-and-imports-objects/index.main.js',
-    )
-  })
-  it('resolves package exports object submodule export for node module', () => {
-    expect(resolve('/src/app.js', 'module-with-exports-and-imports-objects/submodule')).toEqual(
-      '/node_modules/module-with-exports-and-imports-objects/src/submodule.js',
-    )
-  })
-
-  it('resolves package imports for node module', () => {
-    expect(
-      resolve('/node_modules/module-with-exports-and-imports/src/something.js', '#dep'),
-    ).toEqual('/node_modules/module-with-exports-and-imports/dep.js')
-  })
-  it('resolves package imports object for node module', () => {
-    expect(
-      resolve('/node_modules/module-with-exports-and-imports-objects/src/something.js', '#dep'),
-    ).toEqual('/node_modules/module-with-exports-and-imports-objects/dep.js')
-  })
-
-  it('loads self references', () => {
-    expect(
-      resolve(
-        '/node_modules/my-package-with-package-root/src/deep-folder/moduleA.js',
-        'my-package-with-package-root',
-      ),
-    ).toEqual('/node_modules/my-package-with-package-root/index.js')
-    expect(
-      resolve(
-        '/node_modules/my-package-with-package-root/src/deep-folder/moduleA.js',
-        'my-package-with-package-root/src/other-folder/moduleB',
-      ),
-    ).toEqual('/node_modules/my-package-with-package-root/src/other-folder/moduleB.js')
-  })
-
-  it('resolves clsx', () => {
-    expect(resolve('/app/components/hydrogen/Button.jsx', 'clsx')).toEqual(
-      '/node_modules/clsx/dist/clsx.js',
-    )
-  })
-
-  it('resolves /utopia/layout.utopia', () => {
-    expect(resolve('/utopia/text.utopia.js', './layout.utopia')).toEqual('/utopia/layout.utopia.js')
-  })
+  // it('loads self references', () => {
+  //   expect(
+  //     resolveModule(
+  //       createNodeModules(moduleResolutionExamples.contents),
+  //       'my-package-with-package-root/src/deep-folder/moduleA.js',
+  //       'my-package-with-package-root',
+  //     ),
+  //   ).toEqual('my-package-with-package-root/index.js')
+  //   expect(
+  //     resolveModule(
+  //       createNodeModules(moduleResolutionExamples.contents),
+  //       'my-package-with-package-root/src/deep-folder/moduleA.js',
+  //       'my-package-with-package-root/src/other-folder/moduleB',
+  //     ),
+  //   ).toEqual('my-package-with-package-root/src/other-folder/moduleB.js')
+  // })
 })
diff --git a/editor/src/core/es-modules/package-manager/module-resolution.ts b/editor/src/core/es-modules/package-manager/module-resolution.ts
index b570990de635..8904005017ff 100644
--- a/editor/src/core/es-modules/package-manager/module-resolution.ts
+++ b/editor/src/core/es-modules/package-manager/module-resolution.ts
@@ -1,261 +1,180 @@
-import type { MapLike } from 'typescript'
-import type { ProjectContentTreeRoot } from '../../../components/assets'
-import { getContentsTreeFileFromElements } from '../../../components/assets'
-import { applyFilePathMappingsToFilePath } from '../../../core/workers/common/project-file-utils'
-import {
-  getParentDirectory,
-  getPartsFromPath,
-  makePathFromParts,
-  normalizePath,
-  stripTrailingSlash,
-} from '../../../utils/path-utils'
+import type {
+  ProjectFile,
+  NodeModules,
+  ESCodeFile,
+  ESRemoteDependencyPlaceholder,
+} from '../../shared/project-file-types'
+import { isEsCodeFile, esCodeFile } from '../../shared/project-file-types'
 import type { ParseResult } from '../../../utils/value-parser-utils'
-import { getFilePathMappings } from '../../model/project-file-utils'
-import { dropLast, last } from '../../shared/array-utils'
+import {
+  optionalObjectKeyParser,
+  parseString,
+  parseAlternative,
+  parseObject,
+  parseFalse,
+} from '../../../utils/value-parser-utils'
 import type { Either } from '../../shared/either'
-import { foldEither, isLeft, isRight, left, right } from '../../shared/either'
-import type { NodeModules, ProjectFile } from '../../shared/project-file-types'
-import { esCodeFile, isEsCodeFile } from '../../shared/project-file-types'
-import type { BuiltInDependencies } from './built-in-dependencies-list'
-import { loadPackageSelf, loadPackageImports, loadPackageExports } from './module-resolution-esm'
-import type {
-  FileForPathParts,
-  FileLookupFn,
-  FileLookupResult,
-  PartialPackageJsonDefinition,
-} from './module-resolution-utils'
 import {
-  fileLookupResult,
-  getPartialPackageJson,
-  isResolveSuccess,
-  resolveNotPresent,
-  resolveSuccessIgnoreModule,
-} from './module-resolution-utils'
-
-// Using the logic from https://nodejs.org/api/modules.html#all-together
-
-function loadAsFile(
-  projectContents: ProjectContentTreeRoot,
-  pathParts: string[],
-): FileLookupResult {
-  return abstractLoadAsFile(projectContentsFileForPathParts(projectContents), pathParts)
-}
-
-// LOAD_AS_FILE(X)
-function abstractLoadAsFile(
-  fileForPathParts: FileForPathParts,
-  pathParts: string[],
-): FileLookupResult {
-  const normalisedPathParts = normalizePath(pathParts)
-  const pathToFile = dropLast(normalisedPathParts)
-  const lastPart = last(normalisedPathParts)
-  if (lastPart == null) {
-    return resolveNotPresent
-  }
-
-  // If X is a file, load X as its file extension format
-  const asFileResult = fileForPathParts(normalisedPathParts)
-  if (isResolveSuccess(asFileResult)) {
-    return asFileResult
-  }
-
-  // If X.js(x) is a file
-  const withJs = lastPart + '.js'
-  const withJsResult = fileForPathParts(pathToFile.concat(withJs))
-  if (isResolveSuccess(withJsResult)) {
-    return withJsResult
-  }
+  applicative3Either,
+  applicative4Either,
+  foldEither,
+  isLeft,
+  isRight,
+  left,
+  right,
+} from '../../shared/either'
+import { setOptionalProp } from '../../shared/object-utils'
+import type { ProjectContentTreeRoot } from '../../../components/assets'
+import { getContentsTreeFileFromElements } from '../../../components/assets'
+import { dropLast, last } from '../../shared/array-utils'
+import { getPartsFromPath, makePathFromParts, normalizePath } from '../../../utils/path-utils'
+import type { MapLike } from 'typescript'
 
-  const withJsx = lastPart + '.jsx'
-  const withJsxResult = fileForPathParts(pathToFile.concat(withJsx))
-  if (isResolveSuccess(withJsxResult)) {
-    return withJsxResult
-  }
+import LRU from 'lru-cache'
+import type { BuiltInDependencies } from './built-in-dependencies-list'
+import { getFilePathMappings } from '../../model/project-file-utils'
+import { applyFilePathMappingsToFilePath } from '../../../core/workers/common/project-file-utils'
 
-  // If X.json is a file, load X.json to a JavaScript Object
-  const withJson = lastPart + '.json'
-  const withJsonResult = fileForPathParts(pathToFile.concat(withJson))
-  if (isResolveSuccess(withJsonResult)) {
-    return withJsonResult
+const partialPackageJsonCache: LRU<string, ParseResult<PartialPackageJsonDefinition>> = new LRU({
+  max: 20,
+})
+function getPartialPackageJson(contents: string): ParseResult<PartialPackageJsonDefinition> {
+  const fromCache = partialPackageJsonCache.get(contents)
+  if (fromCache == null) {
+    const jsonParsed = JSON.parse(contents)
+    const result = parsePartialPackageJsonDefinition(jsonParsed)
+    partialPackageJsonCache.set(contents, result)
+    return result
+  } else {
+    return fromCache
   }
+}
 
-  return resolveNotPresent
+interface ResolveSuccess<T> {
+  type: 'RESOLVE_SUCCESS'
+  success: T
 }
 
-function processPackageJson(potentiallyJsonCode: string): string | null {
-  let possiblePackageJson: ParseResult<PartialPackageJsonDefinition>
-  try {
-    possiblePackageJson = getPartialPackageJson(potentiallyJsonCode)
-  } catch {
-    return null
+function resolveSuccess<T>(success: T): ResolveSuccess<T> {
+  return {
+    type: 'RESOLVE_SUCCESS',
+    success: success,
   }
-  return foldEither(
-    (_) => null,
-    (packageJson) => {
-      // const moduleName: string | null = packageJson.name ?? null
-      const browserEntry: string | MapLike<string | false> | null = packageJson.browser ?? null
-      const mainEntry: string | null = packageJson.main ?? null
-      // const moduleEntry: string | null = packageJson.module ?? null
-
-      if (browserEntry != null && typeof browserEntry === 'string') {
-        return browserEntry
-      } else if (mainEntry != null) {
-        return mainEntry
-        // } else if (moduleEntry != null) {
-        //   return moduleEntry
-        // } else if (moduleName != null) {
-        //   return moduleName
-      }
-
-      return null
-    },
-    possiblePackageJson,
-  )
 }
 
-function loadAsDirectory(
-  projectContents: ProjectContentTreeRoot,
-  pathParts: string[],
-): FileLookupResult {
-  return abstractLoadAsDirectory(projectContentsFileForPathParts(projectContents), pathParts)
+interface ResolveNotPresent {
+  type: 'RESOLVE_NOT_PRESENT'
 }
 
-// LOAD_AS_DIRECTORY(X)
-function abstractLoadAsDirectory(
-  fileForPathParts: FileForPathParts,
-  pathParts: string[],
-): FileLookupResult {
-  const normalisedPathParts = normalizePath(pathParts) // X
-
-  // If X/package.json is a file
-  const jsonFileResult = fileForPathParts(normalisedPathParts.concat('package.json'))
-  if (isResolveSuccess(jsonFileResult) && isEsCodeFile(jsonFileResult.success.file)) {
-    // Parse X/package.json, and look for "browser" or "main" field
-    const mainEntryPath = processPackageJson(jsonFileResult.success.file.fileContents)
-
-    if (mainEntryPath != null) {
-      // let M = X + (json main field)
-      const mainEntryPathParts = [...normalisedPathParts, ...getPartsFromPath(mainEntryPath)]
-
-      // LOAD_AS_FILE(M)
-      const mainEntryResult = abstractLoadAsFile(fileForPathParts, mainEntryPathParts)
-      if (isResolveSuccess(mainEntryResult)) {
-        return mainEntryResult
-      }
-
-      // LOAD_INDEX(M)
-      const loadIndexMResult = loadIndex(fileForPathParts, mainEntryPathParts)
-      if (isResolveSuccess(loadIndexMResult)) {
-        return loadIndexMResult
-      }
-
-      // LOAD_INDEX(X) DEPRECATED - note that this is only deprecated in the case where "main" is truthy
-      return loadIndex(fileForPathParts, normalisedPathParts)
-    }
-  }
-
-  // If "main" is a falsy value
-  // LOAD_INDEX(X)
-  return loadIndex(fileForPathParts, normalisedPathParts)
+const resolveNotPresent: ResolveNotPresent = {
+  type: 'RESOLVE_NOT_PRESENT',
 }
 
-// LOAD_INDEX(X)
-function loadIndex(fileForPathParts: FileForPathParts, pathParts: string[]): FileLookupResult {
-  // 1. If X/index.js is a file
-  //   a. Find the closest package scope SCOPE to X.
-  //   b. If no scope was found, load X/index.js as a CommonJS module. STOP.
-  //   c. If the SCOPE/package.json contains "type" field,
-  //     1. If the "type" field is "module", load X/index.js as an ECMAScript module. STOP.
-  //     2. Else, load X/index.js as an CommonJS module. STOP.
-  // Note: We don't attempt to load as an ECMAScript, as we can't - instead we'll try to load whatever
-  // it is as CommonJS, and if it turns out to be an esm we'll attempt to transpile it to CommonJS
-
-  const indexJSResult = abstractLoadAsFile(fileForPathParts, pathParts.concat('index.js'))
-  if (isResolveSuccess(indexJSResult)) {
-    return indexJSResult
-  }
-
-  // If X/index.json is a file, parse X/index.json to a JavaScript object
-  return abstractLoadAsFile(fileForPathParts, pathParts.concat('index.json'))
-
-  // If X/index.node is a file, load X/index.node as binary addon - not applicable
+interface ResolveSuccessIgnoreModule {
+  type: 'RESOLVE_SUCCESS_IGNORE_MODULE'
 }
 
-// NODE_MODULES_PATHS
-function nodeModulesPaths(path: string): Array<string> {
-  // let PARTS = path split(START)
-  const pathParts = getPartsFromPath(path)
+export function isResolveSuccessIgnoreModule<T>(
+  resolveResult: ResolveResult<T>,
+): resolveResult is ResolveSuccessIgnoreModule {
+  return resolveResult.type === 'RESOLVE_SUCCESS_IGNORE_MODULE'
+}
 
-  // let DIRS = []
-  let dirs: Array<string> = []
+const resolveSuccessIgnoreModule: ResolveSuccessIgnoreModule = {
+  type: 'RESOLVE_SUCCESS_IGNORE_MODULE',
+}
 
-  // The algorithm builds dirs in descending order, but we'll do it in ascending and reverse
-  pathParts.forEach((part, index) => {
-    // if PARTS[I] = "node_modules" CONTINUE
-    if (part === 'node_modules') {
-      return
-    }
+type ResolveResult<T> = ResolveNotPresent | ResolveSuccessIgnoreModule | ResolveSuccess<T>
 
-    // DIR = path join(PARTS[0 .. I] + "node_modules")
-    const dir = makePathFromParts(pathParts.slice(0, index + 1).concat('node_modules'))
+export function isResolveSuccess<T>(
+  resolveResult: ResolveResult<T>,
+): resolveResult is ResolveSuccess<T> {
+  return resolveResult.type === 'RESOLVE_SUCCESS'
+}
 
-    // DIRS = DIR + DIRS
-    dirs.push(dir)
-  })
-  dirs.reverse()
+export function isResolveNotPresent<T>(
+  resolveResult: ResolveResult<T>,
+): resolveResult is ResolveNotPresent {
+  return resolveResult.type === 'RESOLVE_NOT_PRESENT'
+}
 
-  // return DIRS + GLOBAL_FOLDERS
-  return dirs.concat('/node_modules/')
+interface FoundFile {
+  path: string
+  file: ESCodeFile | ESRemoteDependencyPlaceholder
 }
 
-// LOAD_NODE_MODULES
-function loadNodeModules(
-  nodeModules: NodeModules,
+export type FileLookupResult = ResolveResult<FoundFile>
+
+function fileLookupResult(
   path: string,
-  originPath: string,
-  lookupFn: FileLookupFn,
+  file: ESCodeFile | ESRemoteDependencyPlaceholder | null,
 ): FileLookupResult {
-  const packageJsonLookupFn = nodeModulesFileForPathParts(nodeModules)
-
-  // let DIRS = NODE_MODULES_PATHS(START)
-  const dirs = nodeModulesPaths(originPath).reverse()
-  const targetOrigins = [originPath, ...dirs]
+  if (file == null) {
+    return resolveNotPresent
+  } else {
+    return resolveSuccess({
+      path: path,
+      file: file,
+    })
+  }
+}
 
-  for (const targetOrigin of targetOrigins) {
-    // for each DIR in DIRS:
+type FileLookupFn = (path: string[], direct: boolean) => FileLookupResult
 
-    // LOAD_PACKAGE_EXPORTS(X, DIR)
-    const packageExportsResult = loadPackageExports(
-      path,
-      targetOrigin,
-      packageJsonLookupFn,
-      lookupFn,
-    )
-    if (isResolveSuccess(packageExportsResult)) {
-      return packageExportsResult
+function fallbackLookup(
+  lookupFn: FileLookupFn,
+  path: Array<string>,
+  direct: boolean,
+): FileLookupResult {
+  const asIsPath = normalizePath(path)
+  const pathToFile = dropLast(asIsPath)
+  const lastPart = last(asIsPath)
+  if (lastPart == null) {
+    return resolveNotPresent
+  } else {
+    const asIsResult = lookupFn(asIsPath, direct)
+    if (isResolveSuccess(asIsResult)) {
+      return asIsResult
     }
 
-    const pathForLookup = path.startsWith('/')
-      ? path
-      : `${stripTrailingSlash(targetOrigin)}/${path}`
+    if (!direct) {
+      const withJs = lastPart + '.js'
+      const withJsResult = lookupFn(pathToFile.concat(withJs), direct)
+      if (isResolveSuccess(withJsResult)) {
+        return withJsResult
+      }
 
-    const pathParts = getPartsFromPath(pathForLookup)
-    const normalisedPathParts = normalizePath(pathParts)
+      const withJsx = lastPart + '.jsx'
+      const withJsxResult = lookupFn(pathToFile.concat(withJsx), direct)
+      if (isResolveSuccess(withJsxResult)) {
+        return withJsxResult
+      }
 
-    // LOAD_AS_FILE(DIR/X)
-    const asFileResult = abstractLoadAsFile(packageJsonLookupFn, normalisedPathParts)
-    if (isResolveSuccess(asFileResult)) {
-      return asFileResult
+      // TODO this also needs JSON parsing
+      const withJson = lastPart + '.json'
+      const withJsonResult = lookupFn(pathToFile.concat(withJson), direct)
+      if (isResolveSuccess(withJsonResult)) {
+        return withJsonResult
+      }
     }
 
-    // LOAD_AS_DIRECTORY(DIR/X)
-    const asDirectoryResult = abstractLoadAsDirectory(packageJsonLookupFn, normalisedPathParts)
-    if (isResolveSuccess(asDirectoryResult)) {
-      return asDirectoryResult
-    }
+    return resolveNotPresent
   }
+}
 
-  return resolveNotPresent
+function nodeModulesFileLookup(
+  nodeModules: NodeModules,
+  path: Array<string>,
+  direct: boolean,
+): FileLookupResult {
+  return fallbackLookup(
+    (innerPath: string[], innerDirect: boolean) => {
+      const filename = makePathFromParts(innerPath)
+      return fileLookupResult(filename, nodeModules[filename])
+    },
+    path,
+    direct,
+  )
 }
 
 function getProjectFileContentsAsString(file: ProjectFile): string | null {
@@ -274,52 +193,240 @@ function getProjectFileContentsAsString(file: ProjectFile): string | null {
   }
 }
 
-function projectContentsFileForPathParts(
+function projectContentsFileLookup(
   projectContents: ProjectContentTreeRoot,
-): FileForPathParts {
-  return (pathParts: string[]) => {
-    const projectFile = getContentsTreeFileFromElements(projectContents, pathParts)
-    if (projectFile == null) {
-      return resolveNotPresent
-    } else {
-      const fileContents = getProjectFileContentsAsString(projectFile)
-      if (fileContents == null) {
+  path: Array<string>,
+  direct: boolean,
+): FileLookupResult {
+  return fallbackLookup(
+    (innerPath: string[]) => {
+      const projectFile = getContentsTreeFileFromElements(projectContents, innerPath)
+      if (projectFile == null) {
         return resolveNotPresent
       } else {
-        const filename = makePathFromParts(pathParts)
-        return fileLookupResult(filename, esCodeFile(fileContents, 'PROJECT_CONTENTS', filename))
+        const fileContents = getProjectFileContentsAsString(projectFile)
+        if (fileContents == null) {
+          return resolveNotPresent
+        } else {
+          const filename = makePathFromParts(innerPath)
+          return fileLookupResult(filename, esCodeFile(fileContents, 'PROJECT_CONTENTS', filename))
+        }
       }
-    }
-  }
+    },
+    path,
+    direct,
+  )
 }
 
-function nodeModulesFileForPathParts(nodeModules: NodeModules): FileForPathParts {
-  return (pathParts: string[]) => {
-    const filename = makePathFromParts(pathParts)
-    const nodeModulesFile = nodeModules[filename]
-    if (nodeModulesFile == null) {
+interface PartialPackageJsonDefinition {
+  name?: string
+  main?: string
+  module?: string
+  browser?: string | MapLike<string | false>
+}
+
+export function parsePartialPackageJsonDefinition(
+  value: unknown,
+): ParseResult<PartialPackageJsonDefinition> {
+  return applicative4Either(
+    (name, main, module, browser) => {
+      let result: PartialPackageJsonDefinition = {}
+      setOptionalProp(result, 'name', name)
+      setOptionalProp(result, 'main', main)
+      setOptionalProp(result, 'module', module)
+      setOptionalProp(result, 'browser', browser)
+      return result
+    },
+    optionalObjectKeyParser(parseString, 'name')(value),
+    optionalObjectKeyParser(parseString, 'main')(value),
+    optionalObjectKeyParser(parseString, 'module')(value),
+    optionalObjectKeyParser(
+      parseAlternative<string | MapLike<string | false>>(
+        [
+          parseString,
+          parseObject(
+            parseAlternative<string | false>(
+              [parseString, parseFalse],
+              `package.browser replacement entries must be either string or 'false' for ignoring a package`,
+            ),
+          ),
+        ],
+        'package.browser field must either be a string or an object with type {[key: string]: string}',
+      ),
+      'browser',
+    )(value),
+  )
+}
+
+function processPackageJson(
+  potentiallyJsonCode: string,
+  containerFolder: string[],
+): ResolveResult<Array<string>> {
+  let possiblePackageJson: ParseResult<PartialPackageJsonDefinition>
+  try {
+    possiblePackageJson = getPartialPackageJson(potentiallyJsonCode)
+  } catch {
+    return resolveNotPresent
+  }
+  return foldEither(
+    (_) => resolveNotPresent,
+    (packageJson) => {
+      const moduleName: string | null = packageJson.name ?? null
+      const browserEntry: string | MapLike<string | false> | null = packageJson.browser ?? null
+      const mainEntry: string | null = packageJson.main ?? null
+      const moduleEntry: string | null = packageJson.module ?? null
+
+      if (browserEntry != null && typeof browserEntry === 'string') {
+        return resolveSuccess(
+          normalizePath([...containerFolder, ...getPartsFromPath(browserEntry)]),
+        )
+      } else if (mainEntry != null) {
+        return resolveSuccess(normalizePath([...containerFolder, ...getPartsFromPath(mainEntry)]))
+      } else if (moduleEntry != null) {
+        return resolveSuccess(normalizePath([...containerFolder, ...getPartsFromPath(moduleEntry)]))
+      } else if (moduleName != null) {
+        return resolveSuccess(normalizePath([...containerFolder, ...getPartsFromPath(moduleName)]))
+      } else if (containerFolder.length > 0) {
+        return resolveSuccess(normalizePath(containerFolder))
+      }
+
       return resolveNotPresent
+    },
+    possiblePackageJson,
+  )
+}
+
+function resolvePackageJson(
+  fileLookupFn: FileLookupFn,
+  packageJsonFolder: string[],
+): FileLookupResult {
+  const normalizedFolderPath = normalizePath(packageJsonFolder)
+  const folderPackageJson = fileLookupFn([...normalizedFolderPath, 'package.json'], true)
+  if (isResolveSuccess(folderPackageJson) && isEsCodeFile(folderPackageJson.success.file)) {
+    const mainEntryPath = processPackageJson(
+      folderPackageJson.success.file.fileContents,
+      normalizedFolderPath,
+    )
+    if (isResolveSuccess(mainEntryPath)) {
+      // try loading the entry path as a file
+      const mainEntryResult = fileLookupFn(mainEntryPath.success, false)
+      if (isResolveSuccess(mainEntryResult)) {
+        return mainEntryResult
+      } else {
+        // fallback to loading it as a folder with an index.js
+        const indexJsPath = [...mainEntryPath.success, 'index']
+        return fileLookupFn(indexJsPath, false)
+      }
     } else {
-      return fileLookupResult(filename, nodeModulesFile)
+      return resolveNotPresent
     }
   }
+  return resolveNotPresent
 }
 
-function findPackageJsonForPath(
-  fileLookupFn: FileLookupFn,
-  originPathParts: string[],
-): FileLookupResult {
+function findPackageJsonForPath(fileLookupFn: FileLookupFn, origin: string[]): FileLookupResult {
   // 1. look for <origin>/package.json
-  const packageJsonResult = fileLookupFn(`./package.json`, makePathFromParts(originPathParts))
+  const packageJsonResult = fileLookupFn([...origin, 'package.json'], true)
   if (isResolveSuccess(packageJsonResult)) {
     return packageJsonResult
   } else {
     // 2. repeat in the parent folder
-    if (originPathParts.length === 0) {
+    if (origin.length === 0) {
       // we exhausted all folders without success
       return resolveNotPresent
     } else {
-      return findPackageJsonForPath(fileLookupFn, originPathParts.slice(0, -1))
+      return findPackageJsonForPath(fileLookupFn, origin.slice(0, -1))
+    }
+  }
+}
+
+function resolveNonRelativeModule(
+  fileLookupFn: FileLookupFn,
+  importOrigin: string[],
+  toImport: string[],
+): FileLookupResult {
+  const pathElements = [...importOrigin, 'node_modules', ...toImport]
+  // 1. look for ./node_modules/<package_name>.js
+  const packageNameResult = fileLookupFn(pathElements, false)
+  if (isResolveSuccess(packageNameResult)) {
+    return packageNameResult
+  } else {
+    // 2. look for ./node_modules/<package_name>/package.json
+    const packageJsonResult = resolvePackageJson(fileLookupFn, pathElements)
+    if (isResolveSuccess(packageJsonResult)) {
+      return packageJsonResult
+    } else {
+      // 3. look for ./node_modules/<package_name>/index.js
+      const indexJsPath = [...pathElements, 'index']
+      const indexJSResult = fileLookupFn(indexJsPath, false)
+      if (isResolveSuccess(indexJSResult)) {
+        return indexJSResult
+      } else {
+        // 4. repeat in the parent folder
+        if (importOrigin.length === 0) {
+          // we exhausted all folders without success
+          return resolveNotPresent
+        } else {
+          return resolveNonRelativeModule(fileLookupFn, importOrigin.slice(0, -1), toImport)
+        }
+      }
+    }
+  }
+}
+
+function resolveRelativeModule(
+  fileLookupFn: FileLookupFn,
+  importOrigin: string[],
+  toImport: string[],
+): FileLookupResult {
+  const pathElements = [...importOrigin, ...toImport]
+  // 1. look for a file named <import_name>
+  const importNameResult = fileLookupFn(pathElements, false)
+  if (isResolveSuccess(importNameResult)) {
+    return importNameResult
+  } else {
+    // 2. look for <import_name>/package.json
+    const packageJsonResult = resolvePackageJson(fileLookupFn, pathElements)
+    if (isResolveSuccess(packageJsonResult)) {
+      return packageJsonResult
+    } else {
+      // 3. look for <import_name>/index.js
+      return fileLookupFn([...pathElements, 'index'], false)
+    }
+  }
+}
+
+// Module resolution logic based on what Node / Typescript does https://www.typescriptlang.org/docs/handbook/module-resolution.html#node
+
+// TODO there's way more module resolution rules here https://parceljs.org/module_resolution.html#module-resolution
+
+// TODO an even more comprehensive writeup https://nodejs.org/api/modules.html#modules_all_together
+
+function resolveModuleInternal(
+  fileLookupFn: FileLookupFn,
+  importOrigin: string,
+  toImport: string,
+): FileLookupResult {
+  if (toImport.startsWith('/')) {
+    // absolute import
+    return resolveRelativeModule(
+      fileLookupFn,
+      [], // this import is relative to the root
+      getPartsFromPath(toImport),
+    )
+  } else {
+    if (toImport.startsWith('.')) {
+      return resolveRelativeModule(
+        fileLookupFn,
+        getPartsFromPath(importOrigin).slice(0, -1),
+        getPartsFromPath(toImport),
+      )
+    } else {
+      return resolveNonRelativeModule(
+        fileLookupFn,
+        getPartsFromPath(importOrigin).slice(0, -1),
+        getPartsFromPath(toImport),
+      )
     }
   }
 }
@@ -375,64 +482,15 @@ function resolveModuleAndApplySubstitutions(
   importOrigin: string,
   toImport: string,
 ): FileLookupResult {
-  // require(X) from module at path Y
-  function lookupFn(path: string, innerImportOrigin: string): FileLookupResult {
-    // 1 Check if it's a core module - this first step is irrelevant to us, since the browser has no core modules
-    if (path.startsWith('/') || path.startsWith('./') || path.startsWith('../')) {
-      // pathForLookup here is Y + X
-      const pathForLookup = path.startsWith('/') // If X begins with '/' set Y to be the file system root
-        ? path
-        : `${stripTrailingSlash(innerImportOrigin)}/${path}`
-      const pathParts = getPartsFromPath(pathForLookup)
-
-      // LOAD_AS_FILE(Y + X)
-      const projectContentsFileLookupResult = loadAsFile(projectContents, pathParts)
-
-      if (isResolveSuccess(projectContentsFileLookupResult)) {
-        return projectContentsFileLookupResult
-      }
-
-      // LOAD_AS_DIRECTORY(Y + X)
-      const projectContentsDirectoryLookupResult = loadAsDirectory(projectContents, pathParts)
-      if (isResolveSuccess(projectContentsDirectoryLookupResult)) {
-        return projectContentsDirectoryLookupResult
-      }
-    } else if (path.startsWith('#')) {
-      // If X begins with '#'
-      // LOAD_PACKAGE_IMPORTS(X, dirname(Y))
-      return loadPackageImports(
-        path,
-        innerImportOrigin,
-        innerImportOrigin.startsWith('/node_modules')
-          ? nodeModulesFileForPathParts(nodeModules)
-          : projectContentsFileForPathParts(projectContents),
-        lookupFn,
-      )
-    }
-
-    // LOAD_PACKAGE_SELF(X, dirname(Y))
-    const packageExportsResult = loadPackageSelf(
-      path,
-      innerImportOrigin,
-      projectContentsFileForPathParts(projectContents),
-      lookupFn,
-    )
-
-    if (isResolveSuccess(packageExportsResult)) {
-      return packageExportsResult
+  function lookupFn(path: string[], direct: boolean): FileLookupResult {
+    const nodeModulesResult = nodeModulesFileLookup(nodeModules, path, direct)
+    if (isResolveSuccess(nodeModulesResult)) {
+      return nodeModulesResult
+    } else {
+      return projectContentsFileLookup(projectContents, path, direct)
     }
-
-    // LOAD_NODE_MODULES(X, dirname(Y)), returning the result here either way in place of `throw 'not fount'`
-    return loadNodeModules(
-      nodeModules,
-      path,
-      innerImportOrigin.startsWith('/node_modules') ? innerImportOrigin : '/node_modules',
-      lookupFn,
-    )
   }
 
-  // We first need to check for the presence of a `browser` field in the current module's package.json, as that
-  // can suggest an alternative mapping to use for modules it is importing https://github.com/defunctzombie/package-browser-field-spec
   const substitutedImport: Either<boolean, string> = findSubstitutionsForImport(
     lookupFn,
     importOrigin,
@@ -447,8 +505,7 @@ function resolveModuleAndApplySubstitutions(
       substitutedImport.value,
       filePathMappings,
     )
-
-    return lookupFn(unAliasedImport, getParentDirectory(importOrigin))
+    return resolveModuleInternal(lookupFn, importOrigin, unAliasedImport)
   }
 }
 
diff --git a/editor/src/core/es-modules/package-manager/package-manager.ts b/editor/src/core/es-modules/package-manager/package-manager.ts
index e7971183db65..0e90fe32c94a 100644
--- a/editor/src/core/es-modules/package-manager/package-manager.ts
+++ b/editor/src/core/es-modules/package-manager/package-manager.ts
@@ -1,7 +1,12 @@
 import type { NodeModules, ESCodeFile } from '../../shared/project-file-types'
 import { isEsCodeFile, isEsRemoteDependencyPlaceholder } from '../../shared/project-file-types'
 import type { RequireFn, TypeDefinitions } from '../../shared/npm-dependency-types'
-import { resolveModule } from './module-resolution'
+import {
+  isResolveNotPresent,
+  isResolveSuccess,
+  isResolveSuccessIgnoreModule,
+  resolveModule,
+} from './module-resolution'
 import { evaluator } from '../evaluator/evaluator'
 import { fetchMissingFileDependency } from './fetch-packages'
 import type { EditorDispatch } from '../../../components/editor/action-types'
@@ -12,13 +17,10 @@ import { utopiaApiTypings } from './utopia-api-typings'
 import { resolveBuiltInDependency } from './built-in-dependencies'
 import type { ProjectContentTreeRoot } from '../../../components/assets'
 import { applyLoaders } from '../../webpack-loaders/loaders'
+import { string } from 'prop-types'
+import { Either } from '../../shared/either'
 import type { CurriedUtopiaRequireFn } from '../../../components/custom-code/code-file'
 import type { BuiltInDependencies } from './built-in-dependencies-list'
-import {
-  isResolveNotPresent,
-  isResolveSuccess,
-  isResolveSuccessIgnoreModule,
-} from './module-resolution-utils'
 import type { FrameworkHooks } from '../../frameworks/framework-hooks'
 import { getFrameworkHooks } from '../../frameworks/framework-hooks'
 
diff --git a/editor/src/core/es-modules/test-cases/module-resolution-examples.json b/editor/src/core/es-modules/test-cases/module-resolution-examples.json
index f094135cf88f..a0bf7334fa06 100644
--- a/editor/src/core/es-modules/test-cases/module-resolution-examples.json
+++ b/editor/src/core/es-modules/test-cases/module-resolution-examples.json
@@ -230,70 +230,25 @@
       "isModule": false,
       "requires": []
     },
-    "/node_modules/module-with-exports-and-imports/package.json": {
-      "content": "{\"name\": \"module-with-exports-and-imports\", \"main\": \"index.main.js\", \"exports\": \"index.exports.js\", \"imports\": {\"#dep\": \"./dep.js\"}}",
-      "isModule": false,
-      "requires": []
-    },
-    "/node_modules/module-with-exports-and-imports/index.main.js": {
+    "my-package-with-package-root/src/deep-folder/moduleA.js": {
       "content": "exports.cica = 'kitten';",
       "isModule": false,
       "requires": []
     },
-    "/node_modules/module-with-exports-and-imports/dep.js": {
+    "my-package-with-package-root/src/other-folder/moduleB.js": {
       "content": "exports.cica = 'kitten';",
       "isModule": false,
       "requires": []
     },
-    "/node_modules/module-with-exports-and-imports-objects/package.json": {
-      "content": "{\"name\": \"module-with-exports-and-imports-objects\", \"main\": \"index.main.js\", \"exports\": {\".\": \"index.exports.js\", \"./submodule\": \"./src/submodule.js\"}, \"imports\": {\"#dep\": {\"default\": \"./dep.js\"}}}",
-      "isModule": false,
-      "requires": []
-    },
-    "/node_modules/module-with-exports-and-imports-objects/index.main.js": {
+    "my-package-with-package-root/index.js": {
       "content": "exports.cica = 'kitten';",
       "isModule": false,
       "requires": []
     },
-    "/node_modules/module-with-exports-and-imports-objects/dep.js": {
-      "content": "exports.cica = 'kitten';",
-      "isModule": false,
-      "requires": []
-    },
-    "/node_modules/module-with-exports-and-imports-objects/src/submodule.js": {
-      "content": "exports.cica = 'kitten';",
-      "isModule": false,
-      "requires": []
-    },
-    "/node_modules/my-package-with-package-root/src/deep-folder/moduleA.js": {
-      "content": "exports.cica = 'kitten';",
-      "isModule": false,
-      "requires": []
-    },
-    "/node_modules/my-package-with-package-root/src/other-folder/moduleB.js": {
-      "content": "exports.cica = 'kitten';",
-      "isModule": false,
-      "requires": []
-    },
-    "/node_modules/my-package-with-package-root/index.js": {
-      "content": "exports.cica = 'kitten';",
-      "isModule": false,
-      "requires": []
-    },
-    "/node_modules/my-package-with-package-root/package.json": {
+    "my-package-with-package-root/package.json": {
       "content": "{\"name\": \"my-package-with-package-root\", \"main\": \".index.js\"}",
       "isModule": false,
       "requires": []
-    },
-    "/node_modules/clsx/package.json": {
-      "content": "{\"name\": \"clsx\", \"main\": \"dist/clsx.js\", \"exports\": {\".\": {\"default\": { \"default\": \"./dist/clsx.js\"}}}}",
-      "isModule": false,
-      "requires": []
-    },
-    "/node_modules/clsx/dist/clsx.js": {
-      "content": "exports.cica = 'kitten';",
-      "isModule": false,
-      "requires": []
     }
   },
   "dependency": {
diff --git a/editor/src/core/frameworks/framework-hooks-vite.ts b/editor/src/core/frameworks/framework-hooks-vite.ts
index fd6fd2992af5..c5b67b7cfe2f 100644
--- a/editor/src/core/frameworks/framework-hooks-vite.ts
+++ b/editor/src/core/frameworks/framework-hooks-vite.ts
@@ -9,9 +9,8 @@ import type { ComponentToImport, CreationDataFromProject } from '../model/storyb
 import { namedComponentToImport, PossiblyMainComponentNames } from '../model/storyboard-utils'
 import { mergeImports } from '../workers/common/project-file-utils'
 import { absolutePathFromRelativePath } from '../../utils/path-utils'
-import type { FileLookupResult } from '../es-modules/package-manager/module-resolution-utils'
-import { isResolveSuccess } from '../es-modules/package-manager/module-resolution-utils'
-import { resolveModule } from '../es-modules/package-manager/module-resolution'
+import type { FileLookupResult } from '../es-modules/package-manager/module-resolution'
+import { isResolveSuccess, resolveModule } from '../es-modules/package-manager/module-resolution'
 import { getMainScriptElement, getRootElement, parseHtml } from '../shared/dom-utils'
 
 export class ViteFrameworkHooks implements FrameworkHooks {
diff --git a/editor/src/utils/path-utils.ts b/editor/src/utils/path-utils.ts
index 33fbc1fd77e9..13dad8741a71 100644
--- a/editor/src/utils/path-utils.ts
+++ b/editor/src/utils/path-utils.ts
@@ -33,7 +33,7 @@ export function getParentDirectory(filepath: string): string {
   return makePathFromParts(getPartsFromPath(filepath).slice(0, -1))
 }
 
-type SubPathCache = Map<string, PathCache>
+type SubPathCache = { [key: string]: PathCache }
 
 interface PathCache {
   cachedString: string
@@ -47,7 +47,7 @@ function pathCache(cachedString: string, subPathCache: SubPathCache): PathCache
   }
 }
 
-let rootPathCache: SubPathCache = new Map()
+let rootPathCache: SubPathCache = {}
 
 function getPathFromCache(parts: Array<string>): string {
   let workingSubCache: SubPathCache = rootPathCache
@@ -55,14 +55,15 @@ function getPathFromCache(parts: Array<string>): string {
   let partsSoFar: Array<string> = []
   for (const part of parts) {
     partsSoFar.push(part)
-    if (workingSubCache.has(part)) {
-      workingPathCache = workingSubCache.get(part)!
+    if (part in workingSubCache) {
+      // The `in` check above proves this does not return `undefined`.
+      workingPathCache = workingSubCache[part]!
       workingSubCache = workingPathCache.subPathCache
     } else {
       const cachedString = `/${partsSoFar.join('/')}`
-      const newPathCache = pathCache(cachedString, new Map())
+      const newPathCache = pathCache(cachedString, {})
       workingPathCache = newPathCache
-      workingSubCache.set(part, newPathCache)
+      workingSubCache[part] = newPathCache
       workingSubCache = newPathCache.subPathCache
     }
   }

From d366ed5f083a708fa68a46539c4d731c226fc92b Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Fri, 11 Oct 2024 15:26:39 +0200
Subject: [PATCH 132/272] Fix Grid Controls HMR (#6521)

**Problem:**
The strategy controls were wrapped in `controlForStrategyMemoized` which
[defeats Vite's
HMR.](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports)

**Fix:**
Move all the component internals into a dedicated file which doesn't
export other functions to prevent breaking the rules of hmr.

**Commit Details:**

- Moved all grid control components and their helper code into
`grid-controls-components`
- `grid-controls` now imports these components
- No code was changed, only moved

I verified that with this change, HMR started working!

## Bonus

At @liady 's suggestion, I added `eslint-plugin-react-refresh` to the
list of our ESLint rules. It is not rock solid, but definitely helps in
remembering that there _are_ rules for HMR / Fast Refresh to work
correctly.
---
 editor/package.json                           |   1 +
 editor/pnpm-lock.yaml                         |  10 +
 .../strategies/basic-resize-strategy.tsx      |   2 +-
 .../grid-draw-to-insert-strategy.tsx          |   2 +-
 .../grid-rearrange-keyboard-strategy.ts       |   2 +-
 .../grid-rearrange-move-duplicate-strategy.ts |   2 +-
 ...-rearrange-move-strategy.spec.browser2.tsx |   2 +-
 .../grid-rearrange-move-strategy.ts           |   2 +-
 ...grid-reparent-strategies.spec.browser2.tsx |   2 +-
 .../strategies/grid-reparent-strategy.tsx     |   2 +-
 ...-resize-element-strategy.spec.browser2.tsx |   2 +-
 .../grid-resize-element-strategy.ts           |   2 +-
 ...range-grid-swap-strategy.spec.browser2.tsx |   2 +-
 .../rearrange-grid-swap-strategy.ts           |   2 +-
 .../strategies/resize-grid-strategy.ts        |   2 +-
 .../strategies/set-grid-gap-strategy.tsx      |   4 +-
 .../controls/grid-controls-for-strategies.tsx | 206 +++++
 .../canvas/controls/grid-controls.tsx         | 713 +++++++-----------
 .../controls/select-mode/grid-gap-control.tsx |   2 +-
 .../select-mode/subdued-grid-gap-controls.tsx |   2 +-
 editor/src/components/canvas/gap-utils.ts     |   4 +-
 eslint-config-utopia/index.js                 |   9 +-
 eslint-config-utopia/package.json             |  15 +-
 eslint-config-utopia/pnpm-lock.yaml           | 294 ++++++++
 24 files changed, 820 insertions(+), 466 deletions(-)
 create mode 100644 editor/src/components/canvas/controls/grid-controls-for-strategies.tsx

diff --git a/editor/package.json b/editor/package.json
index 6e1b3110a7bd..7a033b0527d7 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -190,6 +190,7 @@
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-react": "7.23.2",
     "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-react-refresh": "0.4.12",
     "eslint4b": "6.6.0",
     "fast-deep-equal": "2.0.1",
     "fontfaceobserver": "2.1.0",
diff --git a/editor/pnpm-lock.yaml b/editor/pnpm-lock.yaml
index 7117af5eb442..875ccee8c72d 100644
--- a/editor/pnpm-lock.yaml
+++ b/editor/pnpm-lock.yaml
@@ -187,6 +187,7 @@ specifiers:
   eslint-plugin-prettier: 3.1.2
   eslint-plugin-react: 7.23.2
   eslint-plugin-react-hooks: 4.2.0
+  eslint-plugin-react-refresh: 0.4.12
   eslint4b: 6.6.0
   expect: 26.1.0
   fast-check: 1.15.0
@@ -408,6 +409,7 @@ dependencies:
   eslint-plugin-jsx-a11y: 6.5.1_5wlsrnjcorawie777qour2ptie_eslint@7.32.0
   eslint-plugin-react: 7.23.2_eslint@7.32.0
   eslint-plugin-react-hooks: 4.2.0_eslint@7.32.0
+  eslint-plugin-react-refresh: 0.4.12_eslint@7.32.0
   eslint4b: 6.6.0
   fast-deep-equal: 2.0.1
   fontfaceobserver: 2.1.0
@@ -9837,6 +9839,14 @@ packages:
       eslint: 7.32.0
     dev: false
 
+  /eslint-plugin-react-refresh/0.4.12_eslint@7.32.0:
+    resolution: {integrity: sha512-9neVjoGv20FwYtCP6CB1dzR1vr57ZDNOXst21wd2xJ/cTlM2xLq0GWVlSNTdMn/4BtP6cHYBMCSp1wFBJ9jBsg==}
+    peerDependencies:
+      eslint: '>=7'
+    dependencies:
+      eslint: 7.32.0
+    dev: false
+
   /eslint-plugin-react/7.23.2_eslint@7.32.0:
     resolution: {integrity: sha512-AfjgFQB+nYszudkxRkTFu0UR1zEQig0ArVMPloKhxwlwkzaw/fBiH0QWcBBhZONlXqQC51+nfqFrkn4EzHcGBw==}
     engines: {node: '>=4'}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
index 53f768b6e61d..9c38e0755315 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -36,7 +36,7 @@ import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
 import { ImmediateParentBounds } from '../../controls/parent-bounds'
 import { ImmediateParentOutlines } from '../../controls/parent-outlines'
 import { AbsoluteResizeControl } from '../../controls/select-mode/absolute-resize-control'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index 894570a5266e..7dae405f06a4 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -20,7 +20,7 @@ import { insertElementInsertionSubject } from '../../commands/insert-element-ins
 import { showGridControls } from '../../commands/show-grid-controls-command'
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { wildcardPatch } from '../../commands/wildcard-patch-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
 import { canvasPointToWindowPoint } from '../../dom-lookup'
 import {
   getWrapperWithGeneratedUid,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
index 61c2e7b107ce..e6e33673de48 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
@@ -2,7 +2,7 @@ import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
 import type { GridPositionValue } from '../../../../core/shared/element-template'
 import { gridPositionValue } from '../../../../core/shared/element-template'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
 import type {
   CanvasStrategy,
   CustomStrategyState,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
index 18e54ec97035..255426c99f09 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
@@ -7,7 +7,7 @@ import { setCursorCommand } from '../../commands/set-cursor-command'
 
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { CustomStrategyState, InteractionCanvasState } from '../canvas-strategy-types'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
index baf321a316f4..62683a10f419 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
@@ -10,7 +10,7 @@ import {
 } from '../../../../core/shared/math-utils'
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 import CanvasActions from '../../canvas-actions'
-import { GridCellTestId } from '../../controls/grid-controls'
+import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
 import { mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
 import type { EditorRenderResult } from '../../ui-jsx.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index 01692a94abed..f83c5a87519f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -1,7 +1,7 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
 import type {
   ElementInstanceMetadataMap,
   GridAutoOrTemplateBase,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
index ad60b02414c2..15cebb6d6195 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
@@ -5,7 +5,7 @@ import { offsetPoint, windowPoint } from '../../../../core/shared/math-utils'
 import type { Modifiers } from '../../../../utils/modifiers'
 import { cmdModifier } from '../../../../utils/modifiers'
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
-import { GridCellTestId } from '../../controls/grid-controls'
+import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
 import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
 import type { Point } from '../../event-helpers.test-utils'
 import {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 419b1633ca7a..9546b40916f7 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -19,7 +19,7 @@ import { setCursorCommand } from '../../commands/set-cursor-command'
 import { propertyToSet, updateBulkProperties } from '../../commands/set-property-command'
 import { showGridControls } from '../../commands/show-grid-controls-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
 import { ParentBounds } from '../../controls/parent-bounds'
 import { ParentOutlines } from '../../controls/parent-outlines'
 import { ZeroSizedElementControls } from '../../controls/zero-sized-element-controls'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 65adf3de537c..a5c28b4d6af5 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -15,7 +15,7 @@ import {
   offsetPoint,
 } from '../../../../core/shared/math-utils'
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
-import { GridResizeEdgeTestId } from '../../controls/grid-controls'
+import { GridResizeEdgeTestId } from '../../controls/grid-controls-for-strategies'
 import { mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
 import type { EditorRenderResult } from '../../ui-jsx.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 91ff1f35c18e..29b20a5ab66e 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -12,7 +12,7 @@ import {
   controlsForGridPlaceholders,
   gridEdgeToEdgePosition,
   GridResizeControls,
-} from '../../controls/grid-controls'
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { InteractionCanvasState } from '../canvas-strategy-types'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.spec.browser2.tsx
index 087d8deea658..42293637b623 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.spec.browser2.tsx
@@ -9,7 +9,7 @@ import {
   pressKey,
 } from '../../event-helpers.test-utils'
 import { canvasPoint } from '../../../../core/shared/math-utils'
-import { GridCellTestId } from '../../controls/grid-controls'
+import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
 
 const testProject = `
 import * as React from 'react'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
index c11d53c4b6d1..9ff15bde58c9 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
@@ -14,7 +14,7 @@ import { create } from '../../../../core/shared/property-path'
 import type { CanvasCommand } from '../../commands/commands'
 import { deleteProperties } from '../../commands/delete-properties-command'
 import { rearrangeChildren } from '../../commands/rearrange-children-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
 import { recurseIntoChildrenOfMapOrFragment } from '../../gap-utils'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index ae80e5b24252..03c9d34d3976 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -11,7 +11,7 @@ import { setProperty } from '../../commands/set-property-command'
 import {
   controlsForGridPlaceholders,
   GridRowColumnResizingControls,
-} from '../../controls/grid-controls'
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { InteractionCanvasState } from '../canvas-strategy-types'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
index 484d19455ef5..f7f1fb13ad98 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
@@ -42,8 +42,8 @@ import { colorTheme } from '../../../../uuiui'
 import { activeFrameTargetPath, setActiveFrames } from '../../commands/set-active-frames-command'
 import type { GridGapControlProps } from '../../controls/select-mode/grid-gap-control'
 import { GridGapControl } from '../../controls/select-mode/grid-gap-control'
-import type { GridControlsProps } from '../../controls/grid-controls'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls'
+import type { GridControlsProps } from '../../controls/grid-controls-for-strategies'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
 
 const SetGridGapStrategyId = 'SET_GRID_GAP_STRATEGY'
 
diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
new file mode 100644
index 000000000000..41e56da794a5
--- /dev/null
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -0,0 +1,206 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import type { Sides } from 'utopia-api/core'
+import type { ElementPath } from 'utopia-shared/src/types'
+import { isStaticGridRepeat, printGridAutoOrTemplateBase } from '../../inspector/common/css-utils'
+import { MetadataUtils } from '../../../core/model/element-metadata-utils'
+import { mapDropNulls } from '../../../core/shared/array-utils'
+import * as EP from '../../../core/shared/element-path'
+import type { ElementInstanceMetadata } from '../../../core/shared/element-template'
+import { type GridAutoOrTemplateBase } from '../../../core/shared/element-template'
+import type { CanvasRectangle } from '../../../core/shared/math-utils'
+import { isFiniteRectangle } from '../../../core/shared/math-utils'
+import { assertNever } from '../../../core/shared/utils'
+import { Substores, useEditorState } from '../../editor/store/store-hook'
+import type {
+  ControlWithProps,
+  WhenToShowControl,
+} from '../canvas-strategies/canvas-strategy-types'
+import { controlForStrategyMemoized } from '../canvas-strategies/canvas-strategy-types'
+import type { GridResizeEdge } from '../canvas-strategies/interaction-state'
+import type { EdgePosition } from '../canvas-types'
+import {
+  CSSCursor,
+  EdgePositionBottom,
+  EdgePositionLeft,
+  EdgePositionRight,
+  EdgePositionTop,
+} from '../canvas-types'
+import {
+  GridControlsComponent,
+  GridResizeControlsComponent,
+  GridRowColumnResizingControlsComponent,
+} from './grid-controls'
+
+export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`
+
+function getCellsCount(template: GridAutoOrTemplateBase | null): number {
+  if (template == null) {
+    return 0
+  }
+
+  switch (template.type) {
+    case 'DIMENSIONS':
+      return template.dimensions.reduce((acc, cur) => {
+        return acc + (isStaticGridRepeat(cur) ? cur.times : 1)
+      }, 0)
+    case 'FALLBACK':
+      return 0
+    default:
+      assertNever(template)
+  }
+}
+
+export function getNullableAutoOrTemplateBaseString(
+  template: GridAutoOrTemplateBase | null,
+): string | undefined {
+  if (template == null) {
+    return undefined
+  } else {
+    return printGridAutoOrTemplateBase(template)
+  }
+}
+
+export type GridData = {
+  elementPath: ElementPath
+  frame: CanvasRectangle
+  gridTemplateColumns: GridAutoOrTemplateBase | null
+  gridTemplateRows: GridAutoOrTemplateBase | null
+  gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null
+  gridTemplateRowsFromProps: GridAutoOrTemplateBase | null
+  gap: number | null
+  justifyContent: string | null
+  alignContent: string | null
+  rowGap: number | null
+  columnGap: number | null
+  padding: Sides
+  rows: number
+  columns: number
+  cells: number
+  metadata: ElementInstanceMetadata
+}
+
+export function useGridData(elementPaths: ElementPath[]): GridData[] {
+  const grids = useEditorState(
+    Substores.metadata,
+    (store) => {
+      return mapDropNulls((view) => {
+        const element = MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, view)
+
+        const targetGridContainer = MetadataUtils.isGridLayoutedContainer(element) ? element : null
+
+        if (
+          targetGridContainer == null ||
+          targetGridContainer.globalFrame == null ||
+          !isFiniteRectangle(targetGridContainer.globalFrame)
+        ) {
+          return null
+        }
+
+        const gap = targetGridContainer.specialSizeMeasurements.gap
+        const rowGap = targetGridContainer.specialSizeMeasurements.rowGap
+        const columnGap = targetGridContainer.specialSizeMeasurements.columnGap
+        const padding = targetGridContainer.specialSizeMeasurements.padding
+
+        const gridTemplateColumns =
+          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns
+        const gridTemplateRows =
+          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows
+        const gridTemplateColumnsFromProps =
+          targetGridContainer.specialSizeMeasurements.containerGridPropertiesFromProps
+            .gridTemplateColumns
+        const gridTemplateRowsFromProps =
+          targetGridContainer.specialSizeMeasurements.containerGridPropertiesFromProps
+            .gridTemplateRows
+
+        const columns = getCellsCount(
+          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns,
+        )
+        const rows = getCellsCount(
+          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows,
+        )
+
+        return {
+          elementPath: targetGridContainer.elementPath,
+          metadata: targetGridContainer,
+          frame: targetGridContainer.globalFrame,
+          gridTemplateColumns: gridTemplateColumns,
+          gridTemplateRows: gridTemplateRows,
+          gridTemplateColumnsFromProps: gridTemplateColumnsFromProps,
+          gridTemplateRowsFromProps: gridTemplateRowsFromProps,
+          gap: gap,
+          rowGap: rowGap,
+          columnGap: columnGap,
+          justifyContent: targetGridContainer.specialSizeMeasurements.justifyContent,
+          alignContent: targetGridContainer.specialSizeMeasurements.alignContent,
+          padding: padding,
+          rows: rows,
+          columns: columns,
+          cells: rows * columns,
+        }
+      }, elementPaths)
+    },
+    'useGridData',
+  )
+
+  return grids
+}
+
+interface GridRowColumnResizingControlsProps {
+  target: ElementPath
+}
+
+export const GridRowColumnResizingControls =
+  controlForStrategyMemoized<GridRowColumnResizingControlsProps>(
+    GridRowColumnResizingControlsComponent,
+  )
+
+export const GridControlsKey = (gridPath: ElementPath) => `grid-controls-${EP.toString(gridPath)}`
+
+export interface GridControlProps {
+  grid: GridData
+}
+
+export interface GridControlsProps {
+  targets: ElementPath[]
+}
+
+export const GridControls = controlForStrategyMemoized<GridControlsProps>(GridControlsComponent)
+
+export const GridResizeEdgeTestId = (edge: GridResizeEdge) => `grid-resize-edge-${edge}`
+
+interface GridResizeControlProps {
+  target: ElementPath
+}
+
+export const GridResizeControls = controlForStrategyMemoized<GridResizeControlProps>(
+  GridResizeControlsComponent,
+)
+
+export function gridEdgeToEdgePosition(edge: GridResizeEdge): EdgePosition {
+  switch (edge) {
+    case 'column-end':
+      return EdgePositionRight
+    case 'column-start':
+      return EdgePositionLeft
+    case 'row-end':
+      return EdgePositionBottom
+    case 'row-start':
+      return EdgePositionTop
+    default:
+      assertNever(edge)
+  }
+}
+
+export function controlsForGridPlaceholders(
+  gridPath: ElementPath,
+  whenToShow: WhenToShowControl = 'always-visible',
+): ControlWithProps<any> {
+  return {
+    control: GridControls,
+    props: { targets: [gridPath] },
+    key: GridControlsKey(gridPath),
+    show: whenToShow,
+    priority: 'bottom',
+  }
+}
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 0ab0b0c43535..4b90488f41e4 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -7,26 +7,11 @@ import type { CSSProperties } from 'react'
 import React from 'react'
 import type { Sides } from 'utopia-api/core'
 import type { ElementPath } from 'utopia-shared/src/types'
-import type {
-  GridDimension,
-  GridDiscreteDimension,
-} from '../../../components/inspector/common/css-utils'
-import {
-  isCSSKeyword,
-  isDynamicGridRepeat,
-  isGridCSSRepeat,
-  isStaticGridRepeat,
-  printGridAutoOrTemplateBase,
-  printGridCSSNumber,
-} from '../../../components/inspector/common/css-utils'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { mapDropNulls, range, stripNulls, uniqBy } from '../../../core/shared/array-utils'
 import { defaultEither } from '../../../core/shared/either'
 import * as EP from '../../../core/shared/element-path'
-import type {
-  ElementInstanceMetadata,
-  GridAutoOrTemplateDimensions,
-} from '../../../core/shared/element-template'
+import type { GridAutoOrTemplateDimensions } from '../../../core/shared/element-template'
 import {
   isGridAutoOrTemplateDimensions,
   type GridAutoOrTemplateBase,
@@ -40,7 +25,6 @@ import {
   pointsEqual,
   scaleRect,
   windowPoint,
-  zeroRectangle,
   zeroRectIfNullOrInfinity,
 } from '../../../core/shared/math-utils'
 import {
@@ -58,12 +42,14 @@ import { when } from '../../../utils/react-conditionals'
 import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
+import type { GridDimension, GridDiscreteDimension } from '../../inspector/common/css-utils'
+import {
+  isCSSKeyword,
+  isDynamicGridRepeat,
+  isGridCSSRepeat,
+  printGridCSSNumber,
+} from '../../inspector/common/css-utils'
 import CanvasActions from '../canvas-actions'
-import type {
-  ControlWithProps,
-  WhenToShowControl,
-} from '../canvas-strategies/canvas-strategy-types'
-import { controlForStrategyMemoized } from '../canvas-strategies/canvas-strategy-types'
 import type {
   GridResizeEdge,
   GridResizeEdgeProperties,
@@ -76,21 +62,6 @@ import {
   GridResizeEdges,
   gridResizeHandle,
 } from '../canvas-strategies/interaction-state'
-import { resizeBoundingBoxFromSide } from '../canvas-strategies/strategies/resize-helpers'
-import type { EdgePosition } from '../canvas-types'
-import {
-  CSSCursor,
-  EdgePositionBottom,
-  EdgePositionLeft,
-  EdgePositionRight,
-  EdgePositionTop,
-} from '../canvas-types'
-import { windowToCanvasCoordinates } from '../dom-lookup'
-import type { Axis } from '../gap-utils'
-import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
-import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
-import { CanvasLabel } from './select-mode/controls-common'
-import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
 import { gridCellTargetId } from '../canvas-strategies/strategies/grid-cell-bounds'
 import {
@@ -98,38 +69,24 @@ import {
   getGridRelatedIndexes,
 } from '../canvas-strategies/strategies/grid-helpers'
 import { canResizeGridTemplate } from '../canvas-strategies/strategies/resize-grid-strategy'
+import { resizeBoundingBoxFromSide } from '../canvas-strategies/strategies/resize-helpers'
+import { CSSCursor } from '../canvas-types'
+import { windowToCanvasCoordinates } from '../dom-lookup'
+import type { Axis } from '../gap-utils'
+import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
+import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
+import type { GridControlsProps, GridData } from './grid-controls-for-strategies'
+import {
+  getNullableAutoOrTemplateBaseString,
+  GridCellTestId,
+  gridEdgeToEdgePosition,
+  GridResizeEdgeTestId,
+  useGridData,
+} from './grid-controls-for-strategies'
+import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
-export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`
-
-function getCellsCount(template: GridAutoOrTemplateBase | null): number {
-  if (template == null) {
-    return 0
-  }
-
-  switch (template.type) {
-    case 'DIMENSIONS':
-      return template.dimensions.reduce((acc, cur) => {
-        return acc + (isStaticGridRepeat(cur) ? cur.times : 1)
-      }, 0)
-    case 'FALLBACK':
-      return 0
-    default:
-      assertNever(template)
-  }
-}
-
-export function getNullableAutoOrTemplateBaseString(
-  template: GridAutoOrTemplateBase | null,
-): string | undefined {
-  if (template == null) {
-    return undefined
-  } else {
-    return printGridAutoOrTemplateBase(template)
-  }
-}
-
 function getFromPropsOptic(index: number): Optic<GridAutoOrTemplateBase | null, GridDimension> {
   return notNull<GridAutoOrTemplateBase>()
     .compose(fromTypeGuard(isGridAutoOrTemplateDimensions))
@@ -153,7 +110,7 @@ function getLabelForAxis(
 const GRID_RESIZE_HANDLE_CONTAINER_SIZE = 30 // px
 const GRID_RESIZE_HANDLE_SIZE = 15 // px
 
-export interface GridResizingControlProps {
+interface GridResizingControlProps {
   dimension: GridDimension
   dimensionIndex: number
   axis: Axis
@@ -166,7 +123,7 @@ export interface GridResizingControlProps {
   stripedAreaLength: number | null
 }
 
-export const GridResizingControl = React.memo((props: GridResizingControlProps) => {
+const GridResizingControl = React.memo((props: GridResizingControlProps) => {
   const { setResizingIndex } = props
 
   const canvasOffset = useEditorState(
@@ -328,7 +285,7 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
 })
 GridResizingControl.displayName = 'GridResizingControl'
 
-export interface GridResizingProps {
+interface GridResizingProps {
   axisValues: GridAutoOrTemplateBase | null
   fromPropsAxisValues: GridAutoOrTemplateBase | null
   stripedAreaLength: number | null
@@ -340,7 +297,7 @@ export interface GridResizingProps {
   alignContent: string | null
 }
 
-export const GridResizing = React.memo((props: GridResizingProps) => {
+const GridResizing = React.memo((props: GridResizingProps) => {
   const canvasScale = useEditorState(
     Substores.canvasOffset,
     (store) => store.editor.canvas.scale,
@@ -477,194 +434,108 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
 })
 GridResizing.displayName = 'GridResizing'
 
-export type GridData = {
-  elementPath: ElementPath
-  frame: CanvasRectangle
-  gridTemplateColumns: GridAutoOrTemplateBase | null
-  gridTemplateRows: GridAutoOrTemplateBase | null
-  gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null
-  gridTemplateRowsFromProps: GridAutoOrTemplateBase | null
-  gap: number | null
-  justifyContent: string | null
-  alignContent: string | null
-  rowGap: number | null
-  columnGap: number | null
-  padding: Sides
-  rows: number
-  columns: number
-  cells: number
-  metadata: ElementInstanceMetadata
-}
-
-export function useGridData(elementPaths: ElementPath[]): GridData[] {
-  const grids = useEditorState(
-    Substores.metadata,
-    (store) => {
-      return mapDropNulls((view) => {
-        const element = MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, view)
-
-        const targetGridContainer = MetadataUtils.isGridLayoutedContainer(element) ? element : null
-
-        if (
-          targetGridContainer == null ||
-          targetGridContainer.globalFrame == null ||
-          !isFiniteRectangle(targetGridContainer.globalFrame)
-        ) {
-          return null
-        }
-
-        const gap = targetGridContainer.specialSizeMeasurements.gap
-        const rowGap = targetGridContainer.specialSizeMeasurements.rowGap
-        const columnGap = targetGridContainer.specialSizeMeasurements.columnGap
-        const padding = targetGridContainer.specialSizeMeasurements.padding
-
-        const gridTemplateColumns =
-          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns
-        const gridTemplateRows =
-          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows
-        const gridTemplateColumnsFromProps =
-          targetGridContainer.specialSizeMeasurements.containerGridPropertiesFromProps
-            .gridTemplateColumns
-        const gridTemplateRowsFromProps =
-          targetGridContainer.specialSizeMeasurements.containerGridPropertiesFromProps
-            .gridTemplateRows
-
-        const columns = getCellsCount(
-          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns,
-        )
-        const rows = getCellsCount(
-          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows,
-        )
-
-        return {
-          elementPath: targetGridContainer.elementPath,
-          metadata: targetGridContainer,
-          frame: targetGridContainer.globalFrame,
-          gridTemplateColumns: gridTemplateColumns,
-          gridTemplateRows: gridTemplateRows,
-          gridTemplateColumnsFromProps: gridTemplateColumnsFromProps,
-          gridTemplateRowsFromProps: gridTemplateRowsFromProps,
-          gap: gap,
-          rowGap: rowGap,
-          columnGap: columnGap,
-          justifyContent: targetGridContainer.specialSizeMeasurements.justifyContent,
-          alignContent: targetGridContainer.specialSizeMeasurements.alignContent,
-          padding: padding,
-          rows: rows,
-          columns: columns,
-          cells: rows * columns,
-        }
-      }, elementPaths)
-    },
-    'useGridData',
-  )
-
-  return grids
-}
-
 interface GridRowColumnResizingControlsProps {
   target: ElementPath
 }
 
-export const GridRowColumnResizingControls =
-  controlForStrategyMemoized<GridRowColumnResizingControlsProps>(({ target }) => {
-    const grids = useGridData([target])
+export const GridRowColumnResizingControlsComponent = ({
+  target,
+}: GridRowColumnResizingControlsProps) => {
+  const grids = useGridData([target])
 
-    function getStripedAreaLength(template: GridAutoOrTemplateBase | null, gap: number) {
-      if (template?.type !== 'DIMENSIONS') {
-        return null
-      }
-      return template.dimensions.reduce((acc, curr, index) => {
-        if (curr.type === 'NUMBER') {
-          return acc + curr.value.value + (index > 0 ? gap : 0)
-        }
-        return acc
-      }, 0)
+  function getStripedAreaLength(template: GridAutoOrTemplateBase | null, gap: number) {
+    if (template?.type !== 'DIMENSIONS') {
+      return null
     }
+    return template.dimensions.reduce((acc, curr, index) => {
+      if (curr.type === 'NUMBER') {
+        return acc + curr.value.value + (index > 0 ? gap : 0)
+      }
+      return acc
+    }, 0)
+  }
 
-    const scale = useEditorState(
-      Substores.canvas,
-      (store) => store.editor.canvas.scale,
-      'GridRowColumnResizingControls scale',
-    )
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'GridRowColumnResizingControls scale',
+  )
 
-    const gridsWithVisibleResizeControls = React.useMemo(() => {
-      return grids.filter((grid) => {
-        if (
-          grid.gridTemplateColumns?.type !== 'DIMENSIONS' ||
-          grid.gridTemplateRows?.type !== 'DIMENSIONS'
-        ) {
-          return false
-        }
+  const gridsWithVisibleResizeControls = React.useMemo(() => {
+    return grids.filter((grid) => {
+      if (
+        grid.gridTemplateColumns?.type !== 'DIMENSIONS' ||
+        grid.gridTemplateRows?.type !== 'DIMENSIONS'
+      ) {
+        return false
+      }
 
-        // returns whether the rendered dimensions are too crowded, as in there are two cols/rows that are closer than the handle sizes
-        function tooCrowded(dimensions: GridDimension[]): boolean {
-          const visualSizes = dimensions.map(
-            (dim) => (dim.type === 'NUMBER' ? dim.value.value : 0) * scale,
-          )
-          return visualSizes.some((dim, index) => {
-            if (index < visualSizes.length - 1) {
-              const next = visualSizes[index + 1]
-              if (dim + next < GRID_RESIZE_HANDLE_SIZE * 2) {
-                return true
-              }
+      // returns whether the rendered dimensions are too crowded, as in there are two cols/rows that are closer than the handle sizes
+      function tooCrowded(dimensions: GridDimension[]): boolean {
+        const visualSizes = dimensions.map(
+          (dim) => (dim.type === 'NUMBER' ? dim.value.value : 0) * scale,
+        )
+        return visualSizes.some((dim, index) => {
+          if (index < visualSizes.length - 1) {
+            const next = visualSizes[index + 1]
+            if (dim + next < GRID_RESIZE_HANDLE_SIZE * 2) {
+              return true
             }
-            return false
-          })
-        }
+          }
+          return false
+        })
+      }
 
+      return (
+        !tooCrowded(grid.gridTemplateColumns.dimensions) &&
+        !tooCrowded(grid.gridTemplateRows.dimensions)
+      )
+    })
+  }, [scale, grids])
+
+  return (
+    <CanvasOffsetWrapper>
+      {gridsWithVisibleResizeControls.flatMap((grid) => {
+        return (
+          <GridResizing
+            key={`grid-resizing-column-${EP.toString(grid.elementPath)}`}
+            axisValues={grid.gridTemplateColumns}
+            fromPropsAxisValues={grid.gridTemplateColumnsFromProps}
+            containingFrame={grid.frame}
+            axis={'column'}
+            gap={grid.columnGap ?? grid.gap}
+            padding={grid.padding}
+            stripedAreaLength={getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0)}
+            alignContent={grid.justifyContent}
+            justifyContent={grid.alignContent}
+          />
+        )
+      })}
+      {gridsWithVisibleResizeControls.flatMap((grid) => {
         return (
-          !tooCrowded(grid.gridTemplateColumns.dimensions) &&
-          !tooCrowded(grid.gridTemplateRows.dimensions)
+          <GridResizing
+            key={`grid-resizing-row-${EP.toString(grid.elementPath)}`}
+            axisValues={grid.gridTemplateRows}
+            fromPropsAxisValues={grid.gridTemplateRowsFromProps}
+            containingFrame={grid.frame}
+            axis={'row'}
+            gap={grid.rowGap ?? grid.gap}
+            padding={grid.padding}
+            stripedAreaLength={getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0)}
+            alignContent={grid.alignContent}
+            justifyContent={grid.justifyContent}
+          />
         )
-      })
-    }, [scale, grids])
-
-    return (
-      <CanvasOffsetWrapper>
-        {gridsWithVisibleResizeControls.flatMap((grid) => {
-          return (
-            <GridResizing
-              key={`grid-resizing-column-${EP.toString(grid.elementPath)}`}
-              axisValues={grid.gridTemplateColumns}
-              fromPropsAxisValues={grid.gridTemplateColumnsFromProps}
-              containingFrame={grid.frame}
-              axis={'column'}
-              gap={grid.columnGap ?? grid.gap}
-              padding={grid.padding}
-              stripedAreaLength={getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0)}
-              alignContent={grid.justifyContent}
-              justifyContent={grid.alignContent}
-            />
-          )
-        })}
-        {gridsWithVisibleResizeControls.flatMap((grid) => {
-          return (
-            <GridResizing
-              key={`grid-resizing-row-${EP.toString(grid.elementPath)}`}
-              axisValues={grid.gridTemplateRows}
-              fromPropsAxisValues={grid.gridTemplateRowsFromProps}
-              containingFrame={grid.frame}
-              axis={'row'}
-              gap={grid.rowGap ?? grid.gap}
-              padding={grid.padding}
-              stripedAreaLength={getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0)}
-              alignContent={grid.alignContent}
-              justifyContent={grid.justifyContent}
-            />
-          )
-        })}
-      </CanvasOffsetWrapper>
-    )
-  })
-
-export const GridControlsKey = (gridPath: ElementPath) => `grid-controls-${EP.toString(gridPath)}`
+      })}
+    </CanvasOffsetWrapper>
+  )
+}
 
-export interface GridControlProps {
+interface GridControlProps {
   grid: GridData
 }
 
-export const GridControl = React.memo<GridControlProps>(({ grid }) => {
+const GridControl = React.memo<GridControlProps>(({ grid }) => {
   const dispatch = useDispatch()
   const controls = useAnimationControls()
   const colorTheme = useColorTheme()
@@ -1124,11 +995,7 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
 })
 GridControl.displayName = 'GridControl'
 
-export interface GridControlsProps {
-  targets: ElementPath[]
-}
-
-export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ targets }) => {
+export const GridControlsComponent = ({ targets }: GridControlsProps) => {
   const targetRootCell = useEditorState(
     Substores.canvas,
     (store) => store.editor.canvas.controls.gridControlData?.rootCell ?? null,
@@ -1157,7 +1024,7 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
       </CanvasOffsetWrapper>
     </div>
   )
-})
+}
 
 const MIN_INDICATORS_DISTANCE = 32 // px
 
@@ -1588,218 +1455,199 @@ function useMouseMove(activelyDraggingOrResizingCell: string | null) {
   return { hoveringStart, mouseCanvasPosition }
 }
 
-export const GridResizeEdgeTestId = (edge: GridResizeEdge) => `grid-resize-edge-${edge}`
-
 interface GridResizeControlProps {
   target: ElementPath
 }
 
-export const GridResizeControls = controlForStrategyMemoized<GridResizeControlProps>(
-  ({ target }) => {
-    const colorTheme = useColorTheme()
+export const GridResizeControlsComponent = ({ target }: GridResizeControlProps) => {
+  const colorTheme = useColorTheme()
 
-    const element = useEditorState(
-      Substores.metadata,
-      (store) => MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, target),
-      'GridResizeControls element',
-    )
+  const element = useEditorState(
+    Substores.metadata,
+    (store) => MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, target),
+    'GridResizeControls element',
+  )
 
-    const dispatch = useDispatch()
-    const canvasOffsetRef = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
-    const scale = useEditorState(
-      Substores.canvas,
-      (store) => store.editor.canvas.scale,
-      'GridResizeControls scale',
-    )
+  const dispatch = useDispatch()
+  const canvasOffsetRef = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'GridResizeControls scale',
+  )
 
-    const resizeControlRef = useRefEditorState((store) =>
-      store.editor.canvas.interactionSession?.activeControl.type !== 'GRID_RESIZE_HANDLE'
-        ? null
-        : store.editor.canvas.interactionSession.activeControl,
-    )
+  const resizeControlRef = useRefEditorState((store) =>
+    store.editor.canvas.interactionSession?.activeControl.type !== 'GRID_RESIZE_HANDLE'
+      ? null
+      : store.editor.canvas.interactionSession.activeControl,
+  )
 
-    const dragRef = useRefEditorState((store) =>
-      store.editor.canvas.interactionSession?.interactionData.type !== 'DRAG'
-        ? null
-        : store.editor.canvas.interactionSession?.interactionData.drag,
-    )
+  const dragRef = useRefEditorState((store) =>
+    store.editor.canvas.interactionSession?.interactionData.type !== 'DRAG'
+      ? null
+      : store.editor.canvas.interactionSession?.interactionData.drag,
+  )
 
-    const [startingBounds, setStartingBounds] = React.useState<CanvasRectangle | null>(null)
-    const [bounds, setBounds] = React.useState<CanvasRectangle | null>(null)
-    const onMouseMove = React.useCallback(() => {
-      if (resizeControlRef.current == null || dragRef.current == null) {
-        return
-      }
+  const [startingBounds, setStartingBounds] = React.useState<CanvasRectangle | null>(null)
+  const [bounds, setBounds] = React.useState<CanvasRectangle | null>(null)
+  const onMouseMove = React.useCallback(() => {
+    if (resizeControlRef.current == null || dragRef.current == null) {
+      return
+    }
 
-      if (startingBounds == null) {
-        return
-      }
-      setBounds(
-        resizeBoundingBoxFromSide(
-          startingBounds,
-          dragRef.current,
-          gridEdgeToEdgePosition(resizeControlRef.current.edge),
-          'non-center-based',
-          null,
-        ),
-      )
-    }, [dragRef, resizeControlRef, startingBounds])
+    if (startingBounds == null) {
+      return
+    }
+    setBounds(
+      resizeBoundingBoxFromSide(
+        startingBounds,
+        dragRef.current,
+        gridEdgeToEdgePosition(resizeControlRef.current.edge),
+        'non-center-based',
+        null,
+      ),
+    )
+  }, [dragRef, resizeControlRef, startingBounds])
 
-    const isResizing = bounds != null
+  const isResizing = bounds != null
 
-    const [resizingEdge, setResizingEdge] = React.useState<GridResizeEdge | null>(null)
+  const [resizingEdge, setResizingEdge] = React.useState<GridResizeEdge | null>(null)
 
-    const onMouseUp = React.useCallback(() => {
-      setBounds(null)
-      setStartingBounds(null)
-      setResizingEdge(null)
-    }, [])
+  const onMouseUp = React.useCallback(() => {
+    setBounds(null)
+    setStartingBounds(null)
+    setResizingEdge(null)
+  }, [])
 
-    React.useEffect(() => {
-      window.addEventListener('mousemove', onMouseMove)
-      window.addEventListener('mouseup', onMouseUp)
-      return () => {
-        window.removeEventListener('mousemove', onMouseMove)
-        window.removeEventListener('mouseup', onMouseUp)
-      }
-    }, [onMouseMove, onMouseUp])
-
-    const startResizeInteraction = React.useCallback(
-      (uid: string, edge: GridResizeEdge) => (event: React.MouseEvent) => {
-        event.stopPropagation()
-        const frame = zeroRectIfNullOrInfinity(element?.globalFrame ?? null)
-        setResizingEdge(edge)
-        setBounds(frame)
-        setStartingBounds(frame)
-        const start = windowToCanvasCoordinates(
-          scale,
-          canvasOffsetRef.current,
-          windowPoint({ x: event.nativeEvent.x, y: event.nativeEvent.y }),
-        )
-        dispatch([
-          CanvasActions.createInteractionSession(
-            createInteractionViaMouse(
-              start.canvasPositionRounded,
-              Modifier.modifiersForEvent(event),
-              gridResizeHandle(uid, edge),
-              'zero-drag-not-permitted',
-            ),
-          ),
-        ])
-      },
-      [canvasOffsetRef, dispatch, element?.globalFrame, scale],
-    )
+  React.useEffect(() => {
+    window.addEventListener('mousemove', onMouseMove)
+    window.addEventListener('mouseup', onMouseUp)
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove)
+      window.removeEventListener('mouseup', onMouseUp)
+    }
+  }, [onMouseMove, onMouseUp])
 
-    const canShowHandles = React.useMemo(() => {
-      if (isResizing) {
-        return true
-      }
-      if (element?.globalFrame == null || isInfinityRectangle(element.globalFrame)) {
-        return false
-      }
-      const scaledFrame = scaleRect(element.globalFrame, scale)
-      return scaledFrame.width * scale > 30 && scaledFrame.height > 30
-    }, [element, scale, isResizing])
+  const startResizeInteraction = React.useCallback(
+    (uid: string, edge: GridResizeEdge) => (event: React.MouseEvent) => {
+      event.stopPropagation()
+      const frame = zeroRectIfNullOrInfinity(element?.globalFrame ?? null)
+      setResizingEdge(edge)
+      setBounds(frame)
+      setStartingBounds(frame)
+      const start = windowToCanvasCoordinates(
+        scale,
+        canvasOffsetRef.current,
+        windowPoint({ x: event.nativeEvent.x, y: event.nativeEvent.y }),
+      )
+      dispatch([
+        CanvasActions.createInteractionSession(
+          createInteractionViaMouse(
+            start.canvasPositionRounded,
+            Modifier.modifiersForEvent(event),
+            gridResizeHandle(uid, edge),
+            'zero-drag-not-permitted',
+          ),
+        ),
+      ])
+    },
+    [canvasOffsetRef, dispatch, element?.globalFrame, scale],
+  )
 
-    if (
-      element == null ||
-      element.globalFrame == null ||
-      isInfinityRectangle(element.globalFrame) ||
-      !canShowHandles
-    ) {
-      return null
+  const canShowHandles = React.useMemo(() => {
+    if (isResizing) {
+      return true
     }
+    if (element?.globalFrame == null || isInfinityRectangle(element.globalFrame)) {
+      return false
+    }
+    const scaledFrame = scaleRect(element.globalFrame, scale)
+    return scaledFrame.width * scale > 30 && scaledFrame.height > 30
+  }, [element, scale, isResizing])
+
+  if (
+    element == null ||
+    element.globalFrame == null ||
+    isInfinityRectangle(element.globalFrame) ||
+    !canShowHandles
+  ) {
+    return null
+  }
 
-    return (
-      <CanvasOffsetWrapper>
+  return (
+    <CanvasOffsetWrapper>
+      <div
+        data-testid={`grid-resize-container-${EP.toString(element.elementPath)}`}
+        key={`grid-resize-container-${EP.toString(element.elementPath)}`}
+        style={{
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: bounds?.y ?? element.globalFrame.y,
+          left: bounds?.x ?? element.globalFrame.x,
+          width: bounds?.width ?? element.globalFrame.width,
+          height: bounds?.height ?? element.globalFrame.height,
+          backgroundColor: isResizing ? colorTheme.primary25.value : 'transparent',
+        }}
+      >
         <div
-          data-testid={`grid-resize-container-${EP.toString(element.elementPath)}`}
-          key={`grid-resize-container-${EP.toString(element.elementPath)}`}
           style={{
+            position: 'relative',
+            width: '100%',
+            height: '100%',
             pointerEvents: 'none',
-            position: 'absolute',
-            top: bounds?.y ?? element.globalFrame.y,
-            left: bounds?.x ?? element.globalFrame.x,
-            width: bounds?.width ?? element.globalFrame.width,
-            height: bounds?.height ?? element.globalFrame.height,
-            backgroundColor: isResizing ? colorTheme.primary25.value : 'transparent',
           }}
         >
-          <div
-            style={{
-              position: 'relative',
-              width: '100%',
-              height: '100%',
-              pointerEvents: 'none',
-            }}
-          >
-            {GridResizeEdges.map((edge) => {
-              const properties = gridResizeEdgeProperties(edge)
-              const visible = !isResizing || resizingEdge === edge
-              return (
+          {GridResizeEdges.map((edge) => {
+            const properties = gridResizeEdgeProperties(edge)
+            const visible = !isResizing || resizingEdge === edge
+            return (
+              <div
+                key={edge}
+                style={{
+                  visibility: visible ? 'visible' : 'hidden',
+                  position: 'absolute',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  pointerEvents: 'none',
+                  ...gridEdgeToWidthHeight(properties, scale),
+                }}
+              >
                 <div
-                  key={edge}
+                  data-testid={GridResizeEdgeTestId(edge)}
+                  onMouseDown={startResizeInteraction(EP.toUid(element.elementPath), edge)}
                   style={{
-                    visibility: visible ? 'visible' : 'hidden',
-                    position: 'absolute',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    pointerEvents: 'none',
-                    ...gridEdgeToWidthHeight(properties, scale),
+                    width: properties.isRow
+                      ? GRID_RESIZE_HANDLE_SIZES.long
+                      : GRID_RESIZE_HANDLE_SIZES.short,
+                    height: properties.isColumn
+                      ? GRID_RESIZE_HANDLE_SIZES.long
+                      : GRID_RESIZE_HANDLE_SIZES.short,
+                    borderRadius: 4,
+                    cursor: gridEdgeToCSSCursor(edge),
+                    pointerEvents: 'initial',
+                    backgroundColor: colorTheme.white.value,
+                    boxShadow: `${colorTheme.canvasControlsSizeBoxShadowColor50.value} 0px 0px
+                      ${1 / scale}px, ${colorTheme.canvasControlsSizeBoxShadowColor20.value} 0px ${
+                      1 / scale
+                    }px ${2 / scale}px ${1 / scale}px`,
+                    zoom: 1 / scale,
                   }}
-                >
-                  <div
-                    data-testid={GridResizeEdgeTestId(edge)}
-                    onMouseDown={startResizeInteraction(EP.toUid(element.elementPath), edge)}
-                    style={{
-                      width: properties.isRow
-                        ? GRID_RESIZE_HANDLE_SIZES.long
-                        : GRID_RESIZE_HANDLE_SIZES.short,
-                      height: properties.isColumn
-                        ? GRID_RESIZE_HANDLE_SIZES.long
-                        : GRID_RESIZE_HANDLE_SIZES.short,
-                      borderRadius: 4,
-                      cursor: gridEdgeToCSSCursor(edge),
-                      pointerEvents: 'initial',
-                      backgroundColor: colorTheme.white.value,
-                      boxShadow: `${colorTheme.canvasControlsSizeBoxShadowColor50.value} 0px 0px
-                        ${1 / scale}px, ${
-                        colorTheme.canvasControlsSizeBoxShadowColor20.value
-                      } 0px ${1 / scale}px ${2 / scale}px ${1 / scale}px`,
-                      zoom: 1 / scale,
-                    }}
-                  />
-                </div>
-              )
-            })}
-          </div>
+                />
+              </div>
+            )
+          })}
         </div>
-      </CanvasOffsetWrapper>
-    )
-  },
-)
+      </div>
+    </CanvasOffsetWrapper>
+  )
+}
 
 const GRID_RESIZE_HANDLE_SIZES = {
   long: 24,
   short: 4,
 }
 
-export function gridEdgeToEdgePosition(edge: GridResizeEdge): EdgePosition {
-  switch (edge) {
-    case 'column-end':
-      return EdgePositionRight
-    case 'column-start':
-      return EdgePositionLeft
-    case 'row-end':
-      return EdgePositionBottom
-    case 'row-start':
-      return EdgePositionTop
-    default:
-      assertNever(edge)
-  }
-}
-
 function gridEdgeToCSSCursor(edge: GridResizeEdge): CSSCursor {
   switch (edge) {
     case 'column-end':
@@ -1841,16 +1689,3 @@ function gridPlaceholderTopOrLeftPosition(scale: number): string {
 function gridPlaceholderWidthOrHeight(scale: number): string {
   return `calc(100% + ${(placeholderBorderBaseWidth * 2) / scale}px)`
 }
-
-export function controlsForGridPlaceholders(
-  gridPath: ElementPath,
-  whenToShow: WhenToShowControl = 'always-visible',
-): ControlWithProps<any> {
-  return {
-    control: GridControls,
-    props: { targets: [gridPath] },
-    key: GridControlsKey(gridPath),
-    show: whenToShow,
-    priority: 'bottom',
-  }
-}
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
index adca71944cc3..b25565d931dd 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
@@ -24,7 +24,7 @@ import { CSSCursor } from '../../../../uuiui-deps'
 import { useBoundingBox } from '../bounding-box-hooks'
 import { isZeroSizedElement } from '../outline-utils'
 import { createArrayWithLength } from '../../../../core/shared/array-utils'
-import { useGridData } from '../grid-controls'
+import { useGridData } from '../grid-controls-for-strategies'
 
 export interface GridGapControlProps {
   selectedElement: ElementPath
diff --git a/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx b/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
index 3ea911a32c89..ffb35aae3811 100644
--- a/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
+++ b/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
@@ -6,7 +6,7 @@ import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
 import type { Axis } from '../../gap-utils'
 import { gridGapControlBoundsFromMetadata, maybeGridGapData } from '../../gap-utils'
 import type { ElementPath } from 'utopia-shared/src/types'
-import { useGridData } from '../grid-controls'
+import { useGridData } from '../grid-controls-for-strategies'
 import { fallbackEmptyValue } from './controls-common'
 import type { CanvasRectangle } from '../../../../core/shared/math-utils'
 import type { CSSNumber } from '../../../../components/inspector/common/css-utils'
diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
index ff735048e77c..b882f88a0264 100644
--- a/editor/src/components/canvas/gap-utils.ts
+++ b/editor/src/components/canvas/gap-utils.ts
@@ -32,8 +32,8 @@ import { isReversedFlexDirection } from '../../core/model/flex-utils'
 import * as EP from '../../core/shared/element-path'
 import { treatElementAsFragmentLike } from './canvas-strategies/strategies/fragment-like-helpers'
 import type { AllElementProps } from '../editor/store/editor-state'
-import type { GridData } from './controls/grid-controls'
-import { getNullableAutoOrTemplateBaseString } from './controls/grid-controls'
+import type { GridData } from './controls/grid-controls-for-strategies'
+import { getNullableAutoOrTemplateBaseString } from './controls/grid-controls-for-strategies'
 
 export interface PathWithBounds {
   bounds: CanvasRectangle
diff --git a/eslint-config-utopia/index.js b/eslint-config-utopia/index.js
index a4ba72d0e9ed..00cb8095ae50 100644
--- a/eslint-config-utopia/index.js
+++ b/eslint-config-utopia/index.js
@@ -8,7 +8,7 @@ module.exports = {
     },
   },
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'prettier', 'react', 'react-hooks', 'jest'],
+  plugins: ['@typescript-eslint', 'prettier', 'react', 'react-hooks', 'jest', 'react-refresh'],
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
@@ -168,6 +168,13 @@ module.exports = {
     'jest/no-conditional-expect': 'off',
     'jest/no-done-callback': 'off',
     'jest/no-test-prefixes': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      {
+        allowConstantExport: true,
+        allowExportNames: ['meta', 'links', 'headers', 'loader', 'action'], // For Remix compatibility
+      },
+    ],
   },
   overrides: [
     {
diff --git a/eslint-config-utopia/package.json b/eslint-config-utopia/package.json
index dcb094adb570..e81b0a9ef473 100644
--- a/eslint-config-utopia/package.json
+++ b/eslint-config-utopia/package.json
@@ -4,21 +4,22 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
+    "@types/eslint": "7.2.2",
+    "@typescript-eslint/eslint-plugin": "6.7.2",
+    "@typescript-eslint/parser": "6.7.2",
+    "babel-eslint": "10.0.1",
     "eslint": "7.32.0",
-    "typescript": "5.2.2",
-    "prettier": "2.8.8",
     "eslint-config-prettier": "6.9.0",
     "eslint-import-resolver-typescript": "3.6.1",
-    "eslint-plugin-prettier": "3.1.2",
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jest": "25.3.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-prettier": "3.1.2",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.4.12",
     "jest": "27.2.2",
-    "babel-eslint": "10.0.1",
-    "@types/eslint": "7.2.2",
-    "@typescript-eslint/parser": "6.7.2",
-    "@typescript-eslint/eslint-plugin": "6.7.2"
+    "prettier": "2.8.8",
+    "typescript": "5.2.2"
   }
 }
diff --git a/eslint-config-utopia/pnpm-lock.yaml b/eslint-config-utopia/pnpm-lock.yaml
index 4dd5d46f4851..52a7bc9126b9 100644
--- a/eslint-config-utopia/pnpm-lock.yaml
+++ b/eslint-config-utopia/pnpm-lock.yaml
@@ -14,6 +14,7 @@ specifiers:
   eslint-plugin-prettier: 3.1.2
   eslint-plugin-react: 7.33.2
   eslint-plugin-react-hooks: 4.6.0
+  eslint-plugin-react-refresh: 0.4.12
   jest: 27.2.2
   prettier: 2.8.8
   typescript: 5.2.2
@@ -32,6 +33,7 @@ dependencies:
   eslint-plugin-prettier: 3.1.2_5tpslmch32lidtsjs5w6ze4pka
   eslint-plugin-react: 7.33.2_eslint@7.32.0
   eslint-plugin-react-hooks: 4.6.0_eslint@7.32.0
+  eslint-plugin-react-refresh: 0.4.12_eslint@7.32.0
   jest: 27.2.2
   prettier: 2.8.8
   typescript: 5.2.2
@@ -41,6 +43,7 @@ packages:
   /@aashutoshrathi/word-wrap/1.2.6:
     resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /@ampproject/remapping/2.3.0:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
@@ -67,6 +70,7 @@ packages:
   /@babel/compat-data/7.23.5:
     resolution: {integrity: sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==}
     engines: {node: '>=6.9.0'}
+    dev: false
 
   /@babel/core/7.24.0:
     resolution: {integrity: sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==}
@@ -175,6 +179,7 @@ packages:
   /@babel/helper-string-parser/7.23.4:
     resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
     engines: {node: '>=6.9.0'}
+    dev: false
 
   /@babel/helper-validator-identifier/7.22.20:
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
@@ -184,6 +189,7 @@ packages:
   /@babel/helper-validator-option/7.23.5:
     resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
     engines: {node: '>=6.9.0'}
+    dev: false
 
   /@babel/helpers/7.24.0:
     resolution: {integrity: sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==}
@@ -203,6 +209,7 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
       chalk: 2.4.2
       js-tokens: 4.0.0
+    dev: false
 
   /@babel/parser/7.24.0:
     resolution: {integrity: sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==}
@@ -639,23 +646,28 @@ packages:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.25
+    dev: false
 
   /@jridgewell/resolve-uri/3.1.2:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
+    dev: false
 
   /@jridgewell/set-array/1.2.1:
     resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
+    dev: false
 
   /@jridgewell/sourcemap-codec/1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: false
 
   /@jridgewell/trace-mapping/0.3.25:
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
+    dev: false
 
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -663,10 +675,12 @@ packages:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       run-parallel: 1.2.0
+    dev: false
 
   /@nodelib/fs.stat/2.0.5:
     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
     engines: {node: '>= 8'}
+    dev: false
 
   /@nodelib/fs.walk/1.2.8:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
@@ -674,16 +688,19 @@ packages:
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
+    dev: false
 
   /@sinonjs/commons/1.8.6:
     resolution: {integrity: sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==}
     dependencies:
       type-detect: 4.0.8
+    dev: false
 
   /@sinonjs/fake-timers/8.1.0:
     resolution: {integrity: sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==}
     dependencies:
       '@sinonjs/commons': 1.8.6
+    dev: false
 
   /@tootallnate/once/1.1.2:
     resolution: {integrity: sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==}
@@ -704,12 +721,14 @@ packages:
     resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
     dependencies:
       '@babel/types': 7.24.0
+    dev: false
 
   /@types/babel__template/7.4.4:
     resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
     dependencies:
       '@babel/parser': 7.24.0
       '@babel/types': 7.24.0
+    dev: false
 
   /@types/babel__traverse/7.20.5:
     resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==}
@@ -726,24 +745,29 @@ packages:
 
   /@types/estree/1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+    dev: false
 
   /@types/graceful-fs/4.1.9:
     resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
     dependencies:
       '@types/node': 20.11.28
+    dev: false
 
   /@types/istanbul-lib-coverage/2.0.6:
     resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
+    dev: false
 
   /@types/istanbul-lib-report/3.0.3:
     resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==}
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.6
+    dev: false
 
   /@types/istanbul-reports/3.0.4:
     resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
     dependencies:
       '@types/istanbul-lib-report': 3.0.3
+    dev: false
 
   /@types/json-schema/7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@@ -751,6 +775,7 @@ packages:
 
   /@types/json5/0.0.29:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+    dev: false
 
   /@types/node/20.11.28:
     resolution: {integrity: sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==}
@@ -768,14 +793,17 @@ packages:
 
   /@types/stack-utils/2.0.3:
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
+    dev: false
 
   /@types/yargs-parser/21.0.3:
     resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
+    dev: false
 
   /@types/yargs/16.0.9:
     resolution: {integrity: sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==}
     dependencies:
       '@types/yargs-parser': 21.0.3
+    dev: false
 
   /@typescript-eslint/eslint-plugin/6.7.2_vsdm6ojneopp5detnqlussxyaq:
     resolution: {integrity: sha512-ooaHxlmSgZTM6CHYAFRlifqh1OAr3PAQEwi7lhYhaegbnXrnh7CDcHmc3+ihhbQC7H0i4JF0psI5ehzkF6Yl6Q==}
@@ -1006,6 +1034,7 @@ packages:
   /acorn-walk/7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
     engines: {node: '>=0.4.0'}
+    dev: false
 
   /acorn/7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
@@ -1044,10 +1073,12 @@ packages:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
       uri-js: 4.4.1
+    dev: false
 
   /ansi-colors/4.1.3:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
+    dev: false
 
   /ansi-escapes/4.3.2:
     resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
@@ -1059,22 +1090,26 @@ packages:
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
+    dev: false
 
   /ansi-styles/3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
     dependencies:
       color-convert: 1.9.3
+    dev: false
 
   /ansi-styles/4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
+    dev: false
 
   /ansi-styles/5.2.0:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
     engines: {node: '>=10'}
+    dev: false
 
   /anymatch/3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -1082,11 +1117,13 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
+    dev: false
 
   /argparse/1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
     dependencies:
       sprintf-js: 1.0.3
+    dev: false
 
   /aria-query/5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
@@ -1100,6 +1137,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       is-array-buffer: 3.0.4
+    dev: false
 
   /array-includes/3.1.7:
     resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
@@ -1115,6 +1153,7 @@ packages:
   /array-union/2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
+    dev: false
 
   /array.prototype.filter/1.0.3:
     resolution: {integrity: sha512-VizNcj/RGJiUyQBgzwxzE5oHdeuXY5hSbbmKMlphj1cy1Vl7Pn2asCGbSrru6hSQjmCzqTBPVWAF/whmEOVHbw==}
@@ -1125,6 +1164,7 @@ packages:
       es-abstract: 1.22.5
       es-array-method-boxes-properly: 1.0.0
       is-string: 1.0.7
+    dev: false
 
   /array.prototype.findlastindex/1.2.4:
     resolution: {integrity: sha512-hzvSHUshSpCflDR1QMUBLHGHP1VIEBegT4pix9H/Z92Xw3ySoy6c2qh7lJWTJnRJ8JCZ9bJNCgTyYaJGcJu6xQ==}
@@ -1179,6 +1219,7 @@ packages:
       get-intrinsic: 1.2.4
       is-array-buffer: 3.0.4
       is-shared-array-buffer: 1.0.3
+    dev: false
 
   /ast-types-flow/0.0.7:
     resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==}
@@ -1187,15 +1228,18 @@ packages:
   /astral-regex/2.0.0:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
+    dev: false
 
   /asynckit/0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: false
 
   /available-typed-arrays/1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
     dependencies:
       possible-typed-array-names: 1.0.0
+    dev: false
 
   /axe-core/4.8.4:
     resolution: {integrity: sha512-CZLSKisu/bhJ2awW4kJndluz2HLZYIHh5Uy1+ZwDRkJi69811xgIXXfdU9HSLX0Th+ILrHj8qfL/5wzamsFtQg==}
@@ -1301,21 +1345,25 @@ packages:
 
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: false
 
   /brace-expansion/1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
       balanced-match: 1.0.2
       concat-map: 0.0.1
+    dev: false
 
   /braces/3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
     engines: {node: '>=8'}
     dependencies:
       fill-range: 7.0.1
+    dev: false
 
   /browser-process-hrtime/1.0.0:
     resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
+    dev: false
 
   /browserslist/4.23.0:
     resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
@@ -1326,14 +1374,17 @@ packages:
       electron-to-chromium: 1.4.708
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13_browserslist@4.23.0
+    dev: false
 
   /bser/2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
     dependencies:
       node-int64: 0.4.0
+    dev: false
 
   /buffer-from/1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+    dev: false
 
   /call-bind/1.0.7:
     resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
@@ -1344,21 +1395,26 @@ packages:
       function-bind: 1.1.2
       get-intrinsic: 1.2.4
       set-function-length: 1.2.2
+    dev: false
 
   /callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
+    dev: false
 
   /camelcase/5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
+    dev: false
 
   /camelcase/6.3.0:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
+    dev: false
 
   /caniuse-lite/1.0.30001597:
     resolution: {integrity: sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==}
+    dev: false
 
   /chalk/2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
@@ -1367,6 +1423,7 @@ packages:
       ansi-styles: 3.2.1
       escape-string-regexp: 1.0.5
       supports-color: 5.5.0
+    dev: false
 
   /chalk/4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
@@ -1379,6 +1436,7 @@ packages:
   /char-regex/1.0.2:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
     engines: {node: '>=10'}
+    dev: false
 
   /ci-info/3.9.0:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
@@ -1395,6 +1453,7 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
+    dev: false
 
   /co/4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
@@ -1409,27 +1468,33 @@ packages:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
       color-name: 1.1.3
+    dev: false
 
   /color-convert/2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
+    dev: false
 
   /color-name/1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    dev: false
 
   /color-name/1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    dev: false
 
   /combined-stream/1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
     dependencies:
       delayed-stream: 1.0.0
+    dev: false
 
   /concat-map/0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    dev: false
 
   /convert-source-map/1.9.0:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
@@ -1450,6 +1515,7 @@ packages:
 
   /cssom/0.3.8:
     resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
+    dev: false
 
   /cssom/0.4.4:
     resolution: {integrity: sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==}
@@ -1482,6 +1548,7 @@ packages:
       call-bind: 1.0.7
       es-errors: 1.3.0
       is-data-view: 1.0.1
+    dev: false
 
   /data-view-byte-length/1.0.1:
     resolution: {integrity: sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==}
@@ -1490,6 +1557,7 @@ packages:
       call-bind: 1.0.7
       es-errors: 1.3.0
       is-data-view: 1.0.1
+    dev: false
 
   /data-view-byte-offset/1.0.0:
     resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==}
@@ -1498,6 +1566,7 @@ packages:
       call-bind: 1.0.7
       es-errors: 1.3.0
       is-data-view: 1.0.1
+    dev: false
 
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
@@ -1532,6 +1601,7 @@ packages:
 
   /deep-is/0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    dev: false
 
   /deepmerge/4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
@@ -1545,6 +1615,7 @@ packages:
       es-define-property: 1.0.0
       es-errors: 1.3.0
       gopd: 1.0.1
+    dev: false
 
   /define-properties/1.2.1:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
@@ -1553,28 +1624,34 @@ packages:
       define-data-property: 1.1.4
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
+    dev: false
 
   /delayed-stream/1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
+    dev: false
 
   /dequal/2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
+    dev: false
 
   /detect-newline/3.1.0:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
+    dev: false
 
   /diff-sequences/27.5.1:
     resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dev: false
 
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
     dependencies:
       path-type: 4.0.0
+    dev: false
 
   /doctrine/2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@@ -1600,6 +1677,7 @@ packages:
 
   /electron-to-chromium/1.4.708:
     resolution: {integrity: sha512-iWgEEvREL4GTXXHKohhh33+6Y8XkPI5eHihDmm8zUk5Zo7HICEW+wI/j5kJ2tbuNUCXJ/sNXa03ajW635DiJXA==}
+    dev: false
 
   /emittery/0.8.1:
     resolution: {integrity: sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==}
@@ -1608,6 +1686,7 @@ packages:
 
   /emoji-regex/8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+    dev: false
 
   /emoji-regex/9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
@@ -1633,6 +1712,7 @@ packages:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
       is-arrayish: 0.2.1
+    dev: false
 
   /es-abstract/1.22.5:
     resolution: {integrity: sha512-oW69R+4q2wG+Hc3KZePPZxOiisRIqfKBVo/HLx94QcJeWGU/8sZhCvc829rd1kS366vlJbzBfXf9yWwf0+Ko7w==}
@@ -1679,6 +1759,7 @@ packages:
       typed-array-length: 1.0.5
       unbox-primitive: 1.0.2
       which-typed-array: 1.1.15
+    dev: false
 
   /es-abstract/1.23.0:
     resolution: {integrity: sha512-vmuE7Uoevk2xkwu5Gwa7RfJk/ebVV6xRv7KuZNbUglmJHhWPMbLL20ztreVpBbdxBZijETx3Aml3NssX4SFMvQ==}
@@ -1729,19 +1810,23 @@ packages:
       typed-array-length: 1.0.5
       unbox-primitive: 1.0.2
       which-typed-array: 1.1.15
+    dev: false
 
   /es-array-method-boxes-properly/1.0.0:
     resolution: {integrity: sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==}
+    dev: false
 
   /es-define-property/1.0.0:
     resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
     engines: {node: '>= 0.4'}
     dependencies:
       get-intrinsic: 1.2.4
+    dev: false
 
   /es-errors/1.3.0:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
+    dev: false
 
   /es-iterator-helpers/1.0.18:
     resolution: {integrity: sha512-scxAJaewsahbqTYrGKJihhViaM6DDZDDoucfvzNbK0pOren1g/daDQ3IAhzn+1G14rBG7w+i5N+qul60++zlKA==}
@@ -1770,11 +1855,13 @@ packages:
       get-intrinsic: 1.2.4
       has-tostringtag: 1.0.2
       hasown: 2.0.2
+    dev: false
 
   /es-shim-unscopables/1.0.2:
     resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
     dependencies:
       hasown: 2.0.2
+    dev: false
 
   /es-to-primitive/1.2.1:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
@@ -1783,18 +1870,22 @@ packages:
       is-callable: 1.2.7
       is-date-object: 1.0.5
       is-symbol: 1.0.4
+    dev: false
 
   /escalade/3.1.2:
     resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
     engines: {node: '>=6'}
+    dev: false
 
   /escape-string-regexp/1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
+    dev: false
 
   /escape-string-regexp/2.0.0:
     resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
     engines: {node: '>=8'}
+    dev: false
 
   /escape-string-regexp/4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
@@ -2018,6 +2109,14 @@ packages:
       eslint: 7.32.0
     dev: false
 
+  /eslint-plugin-react-refresh/0.4.12_eslint@7.32.0:
+    resolution: {integrity: sha512-9neVjoGv20FwYtCP6CB1dzR1vr57ZDNOXst21wd2xJ/cTlM2xLq0GWVlSNTdMn/4BtP6cHYBMCSp1wFBJ9jBsg==}
+    peerDependencies:
+      eslint: '>=7'
+    dependencies:
+      eslint: 7.32.0
+    dev: false
+
   /eslint-plugin-react/7.33.2_eslint@7.32.0:
     resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
     engines: {node: '>=4'}
@@ -2143,6 +2242,7 @@ packages:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
+    dev: false
 
   /esquery/1.5.0:
     resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
@@ -2156,10 +2256,12 @@ packages:
     engines: {node: '>=4.0'}
     dependencies:
       estraverse: 5.3.0
+    dev: false
 
   /estraverse/4.3.0:
     resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
     engines: {node: '>=4.0'}
+    dev: false
 
   /estraverse/5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
@@ -2207,6 +2309,7 @@ packages:
 
   /fast-diff/1.3.0:
     resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+    dev: false
 
   /fast-glob/3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
@@ -2225,16 +2328,19 @@ packages:
 
   /fast-levenshtein/2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    dev: false
 
   /fastq/1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
     dependencies:
       reusify: 1.0.4
+    dev: false
 
   /fb-watchman/2.0.2:
     resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
     dependencies:
       bser: 2.1.1
+    dev: false
 
   /file-entry-cache/6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
@@ -2248,6 +2354,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       to-regex-range: 5.0.1
+    dev: false
 
   /find-up/4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
@@ -2255,6 +2362,7 @@ packages:
     dependencies:
       locate-path: 5.0.0
       path-exists: 4.0.0
+    dev: false
 
   /flat-cache/3.2.0:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
@@ -2263,14 +2371,17 @@ packages:
       flatted: 3.3.1
       keyv: 4.5.4
       rimraf: 3.0.2
+    dev: false
 
   /flatted/3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
+    dev: false
 
   /for-each/0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
       is-callable: 1.2.7
+    dev: false
 
   /form-data/3.0.1:
     resolution: {integrity: sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==}
@@ -2283,16 +2394,19 @@ packages:
 
   /fs.realpath/1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: false
 
   /fsevents/2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
+    dev: false
     optional: true
 
   /function-bind/1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+    dev: false
 
   /function.prototype.name/1.1.6:
     resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
@@ -2302,6 +2416,7 @@ packages:
       define-properties: 1.2.1
       es-abstract: 1.22.5
       functions-have-names: 1.2.3
+    dev: false
 
   /functional-red-black-tree/1.0.1:
     resolution: {integrity: sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==}
@@ -2309,6 +2424,7 @@ packages:
 
   /functions-have-names/1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+    dev: false
 
   /gensync/1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
@@ -2318,6 +2434,7 @@ packages:
   /get-caller-file/2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
+    dev: false
 
   /get-intrinsic/1.2.4:
     resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
@@ -2328,10 +2445,12 @@ packages:
       has-proto: 1.0.3
       has-symbols: 1.0.3
       hasown: 2.0.2
+    dev: false
 
   /get-package-type/0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
+    dev: false
 
   /get-stdin/6.0.0:
     resolution: {integrity: sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==}
@@ -2341,6 +2460,7 @@ packages:
   /get-stream/6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
+    dev: false
 
   /get-symbol-description/1.0.2:
     resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
@@ -2349,6 +2469,7 @@ packages:
       call-bind: 1.0.7
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
+    dev: false
 
   /get-tsconfig/4.7.3:
     resolution: {integrity: sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==}
@@ -2391,6 +2512,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       define-properties: 1.2.1
+    dev: false
 
   /globby/11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
@@ -2408,6 +2530,7 @@ packages:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
       get-intrinsic: 1.2.4
+    dev: false
 
   /graceful-fs/4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
@@ -2419,33 +2542,40 @@ packages:
 
   /has-bigints/1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+    dev: false
 
   /has-flag/3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
+    dev: false
 
   /has-flag/4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
+    dev: false
 
   /has-property-descriptors/1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
     dependencies:
       es-define-property: 1.0.0
+    dev: false
 
   /has-proto/1.0.3:
     resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
     engines: {node: '>= 0.4'}
+    dev: false
 
   /has-symbols/1.0.3:
     resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
     engines: {node: '>= 0.4'}
+    dev: false
 
   /has-tostringtag/1.0.2:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-symbols: 1.0.3
+    dev: false
 
   /has/1.0.4:
     resolution: {integrity: sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==}
@@ -2457,6 +2587,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       function-bind: 1.1.2
+    dev: false
 
   /html-encoding-sniffer/2.0.1:
     resolution: {integrity: sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==}
@@ -2467,6 +2598,7 @@ packages:
 
   /html-escaper/2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+    dev: false
 
   /http-proxy-agent/4.0.1:
     resolution: {integrity: sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==}
@@ -2492,12 +2624,14 @@ packages:
   /human-signals/2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
+    dev: false
 
   /iconv-lite/0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
     dependencies:
       safer-buffer: 2.1.2
+    dev: false
 
   /ignore/4.0.6:
     resolution: {integrity: sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==}
@@ -2536,9 +2670,11 @@ packages:
     dependencies:
       once: 1.4.0
       wrappy: 1.0.2
+    dev: false
 
   /inherits/2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: false
 
   /internal-slot/1.0.7:
     resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
@@ -2547,6 +2683,7 @@ packages:
       es-errors: 1.3.0
       hasown: 2.0.2
       side-channel: 1.0.6
+    dev: false
 
   /is-array-buffer/3.0.4:
     resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
@@ -2554,20 +2691,24 @@ packages:
     dependencies:
       call-bind: 1.0.7
       get-intrinsic: 1.2.4
+    dev: false
 
   /is-arrayish/0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+    dev: false
 
   /is-async-function/2.0.0:
     resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.2
+    dev: false
 
   /is-bigint/1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
     dependencies:
       has-bigints: 1.0.2
+    dev: false
 
   /is-boolean-object/1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -2575,10 +2716,12 @@ packages:
     dependencies:
       call-bind: 1.0.7
       has-tostringtag: 1.0.2
+    dev: false
 
   /is-callable/1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
+    dev: false
 
   /is-core-module/2.13.1:
     resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
@@ -2591,25 +2734,30 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       is-typed-array: 1.1.13
+    dev: false
 
   /is-date-object/1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.2
+    dev: false
 
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /is-finalizationregistry/1.0.2:
     resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
     dependencies:
       call-bind: 1.0.7
+    dev: false
 
   /is-fullwidth-code-point/3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
+    dev: false
 
   /is-generator-fn/2.1.0:
     resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
@@ -2621,6 +2769,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.2
+    dev: false
 
   /is-glob/4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
@@ -2632,20 +2781,24 @@ packages:
   /is-map/2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
+    dev: false
 
   /is-negative-zero/2.0.3:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
+    dev: false
 
   /is-number-object/1.0.7:
     resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.2
+    dev: false
 
   /is-number/7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
+    dev: false
 
   /is-potential-custom-element-name/1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
@@ -2657,50 +2810,60 @@ packages:
     dependencies:
       call-bind: 1.0.7
       has-tostringtag: 1.0.2
+    dev: false
 
   /is-set/2.0.3:
     resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
     engines: {node: '>= 0.4'}
+    dev: false
 
   /is-shared-array-buffer/1.0.3:
     resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==}
     engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.7
+    dev: false
 
   /is-stream/2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
     engines: {node: '>=8'}
+    dev: false
 
   /is-string/1.0.7:
     resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.2
+    dev: false
 
   /is-symbol/1.0.4:
     resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-symbols: 1.0.3
+    dev: false
 
   /is-typed-array/1.1.13:
     resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
     engines: {node: '>= 0.4'}
     dependencies:
       which-typed-array: 1.1.15
+    dev: false
 
   /is-typedarray/1.0.0:
     resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
+    dev: false
 
   /is-weakmap/2.0.2:
     resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
     engines: {node: '>= 0.4'}
+    dev: false
 
   /is-weakref/1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
     dependencies:
       call-bind: 1.0.7
+    dev: false
 
   /is-weakset/2.0.3:
     resolution: {integrity: sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==}
@@ -2708,12 +2871,15 @@ packages:
     dependencies:
       call-bind: 1.0.7
       get-intrinsic: 1.2.4
+    dev: false
 
   /isarray/2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+    dev: false
 
   /isexe/2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: false
 
   /istanbul-lib-coverage/3.2.2:
     resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
@@ -2769,6 +2935,7 @@ packages:
       has-symbols: 1.0.3
       reflect.getprototypeof: 1.0.5
       set-function-name: 2.0.2
+    dev: false
 
   /jest-changed-files/27.5.1:
     resolution: {integrity: sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==}
@@ -3137,6 +3304,7 @@ packages:
     dependencies:
       '@types/node': 20.11.28
       graceful-fs: 4.2.11
+    dev: false
 
   /jest-snapshot/27.5.1:
     resolution: {integrity: sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==}
@@ -3237,6 +3405,7 @@ packages:
 
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: false
 
   /js-yaml/3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
@@ -3292,18 +3461,23 @@ packages:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}
     hasBin: true
+    dev: false
 
   /json-buffer/3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    dev: false
 
   /json-parse-even-better-errors/2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+    dev: false
 
   /json-schema-traverse/0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    dev: false
 
   /json-schema-traverse/1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+    dev: false
 
   /json-stable-stringify-without-jsonify/1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
@@ -3314,6 +3488,7 @@ packages:
     hasBin: true
     dependencies:
       minimist: 1.2.8
+    dev: false
 
   /json5/2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
@@ -3335,13 +3510,16 @@ packages:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
     dependencies:
       json-buffer: 3.0.1
+    dev: false
 
   /kleur/3.0.3:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
+    dev: false
 
   /language-subtag-registry/0.3.22:
     resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
+    dev: false
 
   /language-tags/1.0.5:
     resolution: {integrity: sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==}
@@ -3352,6 +3530,7 @@ packages:
   /leven/3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
+    dev: false
 
   /levn/0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
@@ -3363,12 +3542,14 @@ packages:
 
   /lines-and-columns/1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+    dev: false
 
   /locate-path/5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
     dependencies:
       p-locate: 4.1.0
+    dev: false
 
   /lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
@@ -3376,44 +3557,53 @@ packages:
 
   /lodash.truncate/4.4.2:
     resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+    dev: false
 
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: false
 
   /loose-envify/1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
     dependencies:
       js-tokens: 4.0.0
+    dev: false
 
   /lru-cache/5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
     dependencies:
       yallist: 3.1.1
+    dev: false
 
   /lru-cache/6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
     dependencies:
       yallist: 4.0.0
+    dev: false
 
   /make-dir/4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
     dependencies:
       semver: 7.6.0
+    dev: false
 
   /makeerror/1.0.12:
     resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
     dependencies:
       tmpl: 1.0.5
+    dev: false
 
   /merge-stream/2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+    dev: false
 
   /merge2/1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
+    dev: false
 
   /micromatch/4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
@@ -3426,16 +3616,19 @@ packages:
   /mime-db/1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
+    dev: false
 
   /mime-types/2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
     dependencies:
       mime-db: 1.52.0
+    dev: false
 
   /mimic-fn/2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
+    dev: false
 
   /minimatch/3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
@@ -3445,6 +3638,7 @@ packages:
 
   /minimist/1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+    dev: false
 
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
@@ -3460,19 +3654,23 @@ packages:
 
   /node-int64/0.4.0:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
+    dev: false
 
   /node-releases/2.0.14:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
+    dev: false
 
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /npm-run-path/4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
     dependencies:
       path-key: 3.1.1
+    dev: false
 
   /nwsapi/2.2.7:
     resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
@@ -3481,13 +3679,16 @@ packages:
   /object-assign/4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /object-inspect/1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
+    dev: false
 
   /object-keys/1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
+    dev: false
 
   /object.assign/4.1.5:
     resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
@@ -3497,6 +3698,7 @@ packages:
       define-properties: 1.2.1
       has-symbols: 1.0.3
       object-keys: 1.1.1
+    dev: false
 
   /object.entries/1.1.7:
     resolution: {integrity: sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==}
@@ -3546,12 +3748,14 @@ packages:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
       wrappy: 1.0.2
+    dev: false
 
   /onetime/5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
     dependencies:
       mimic-fn: 2.1.0
+    dev: false
 
   /optionator/0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
@@ -3570,22 +3774,26 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       p-try: 2.2.0
+    dev: false
 
   /p-locate/4.1.0:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
     engines: {node: '>=8'}
     dependencies:
       p-limit: 2.3.0
+    dev: false
 
   /p-try/2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
+    dev: false
 
   /parent-module/1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
     dependencies:
       callsites: 3.1.0
+    dev: false
 
   /parse-json/5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
@@ -3604,28 +3812,35 @@ packages:
   /path-exists/4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
+    dev: false
 
   /path-is-absolute/1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /path-key/3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
+    dev: false
 
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: false
 
   /path-type/4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
+    dev: false
 
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+    dev: false
 
   /picomatch/2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
+    dev: false
 
   /pirates/4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
@@ -3637,14 +3852,17 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       find-up: 4.1.0
+    dev: false
 
   /possible-typed-array-names/1.0.0:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
+    dev: false
 
   /prelude-ls/1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
+    dev: false
 
   /prettier-linter-helpers/1.0.0:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
@@ -3691,22 +3909,28 @@ packages:
 
   /psl/1.9.0:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
+    dev: false
 
   /punycode/2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
+    dev: false
 
   /querystringify/2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+    dev: false
 
   /queue-microtask/1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+    dev: false
 
   /react-is/16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+    dev: false
 
   /react-is/17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+    dev: false
 
   /reflect.getprototypeof/1.0.5:
     resolution: {integrity: sha512-62wgfC8dJWrmxv44CA36pLDnP6KKl3Vhxb7PL+8+qrrFMMoJij4vgiMP8zV4O8+CBMXY1mHxI5fITGHXFHVmQQ==}
@@ -3719,9 +3943,11 @@ packages:
       get-intrinsic: 1.2.4
       globalthis: 1.0.3
       which-builtin-type: 1.1.3
+    dev: false
 
   /regenerator-runtime/0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+    dev: false
 
   /regexp.prototype.flags/1.5.2:
     resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
@@ -3731,6 +3957,7 @@ packages:
       define-properties: 1.2.1
       es-errors: 1.3.0
       set-function-name: 2.0.2
+    dev: false
 
   /regexpp/3.2.0:
     resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
@@ -3740,30 +3967,37 @@ packages:
   /require-directory/2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /require-from-string/2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /requires-port/1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+    dev: false
 
   /resolve-cwd/3.0.0:
     resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
     engines: {node: '>=8'}
     dependencies:
       resolve-from: 5.0.0
+    dev: false
 
   /resolve-from/4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
+    dev: false
 
   /resolve-from/5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
+    dev: false
 
   /resolve-pkg-maps/1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+    dev: false
 
   /resolve.exports/1.1.1:
     resolution: {integrity: sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==}
@@ -3791,6 +4025,7 @@ packages:
   /reusify/1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+    dev: false
 
   /rimraf/3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
@@ -3803,6 +4038,7 @@ packages:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
+    dev: false
 
   /safe-array-concat/1.1.2:
     resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==}
@@ -3812,6 +4048,7 @@ packages:
       get-intrinsic: 1.2.4
       has-symbols: 1.0.3
       isarray: 2.0.5
+    dev: false
 
   /safe-regex-test/1.0.3:
     resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
@@ -3820,9 +4057,11 @@ packages:
       call-bind: 1.0.7
       es-errors: 1.3.0
       is-regex: 1.1.4
+    dev: false
 
   /safer-buffer/2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    dev: false
 
   /saxes/5.0.1:
     resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
@@ -3854,6 +4093,7 @@ packages:
       get-intrinsic: 1.2.4
       gopd: 1.0.1
       has-property-descriptors: 1.0.2
+    dev: false
 
   /set-function-name/2.0.2:
     resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
@@ -3863,16 +4103,19 @@ packages:
       es-errors: 1.3.0
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.2
+    dev: false
 
   /shebang-command/2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
     dependencies:
       shebang-regex: 3.0.0
+    dev: false
 
   /shebang-regex/3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
+    dev: false
 
   /side-channel/1.0.6:
     resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
@@ -3882,12 +4125,15 @@ packages:
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
       object-inspect: 1.13.1
+    dev: false
 
   /signal-exit/3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+    dev: false
 
   /sisteransi/1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+    dev: false
 
   /slash/3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
@@ -3901,6 +4147,7 @@ packages:
       ansi-styles: 4.3.0
       astral-regex: 2.0.0
       is-fullwidth-code-point: 3.0.0
+    dev: false
 
   /source-map-support/0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
@@ -3917,9 +4164,11 @@ packages:
   /source-map/0.7.4:
     resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
     engines: {node: '>= 8'}
+    dev: false
 
   /sprintf-js/1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+    dev: false
 
   /stack-utils/2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
@@ -3943,6 +4192,7 @@ packages:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
+    dev: false
 
   /string.prototype.matchall/4.0.10:
     resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
@@ -3965,6 +4215,7 @@ packages:
       call-bind: 1.0.7
       define-properties: 1.2.1
       es-abstract: 1.22.5
+    dev: false
 
   /string.prototype.trimend/1.0.7:
     resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==}
@@ -3972,6 +4223,7 @@ packages:
       call-bind: 1.0.7
       define-properties: 1.2.1
       es-abstract: 1.22.5
+    dev: false
 
   /string.prototype.trimstart/1.0.7:
     resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==}
@@ -3979,6 +4231,7 @@ packages:
       call-bind: 1.0.7
       define-properties: 1.2.1
       es-abstract: 1.22.5
+    dev: false
 
   /strip-ansi/6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
@@ -3990,6 +4243,7 @@ packages:
   /strip-bom/3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
+    dev: false
 
   /strip-bom/4.0.0:
     resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
@@ -3999,6 +4253,7 @@ packages:
   /strip-final-newline/2.0.0:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
     engines: {node: '>=6'}
+    dev: false
 
   /strip-json-comments/3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
@@ -4010,18 +4265,21 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       has-flag: 3.0.0
+    dev: false
 
   /supports-color/7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
     dependencies:
       has-flag: 4.0.0
+    dev: false
 
   /supports-color/8.1.1:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
     dependencies:
       has-flag: 4.0.0
+    dev: false
 
   /supports-hyperlinks/2.3.0:
     resolution: {integrity: sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==}
@@ -4029,10 +4287,12 @@ packages:
     dependencies:
       has-flag: 4.0.0
       supports-color: 7.2.0
+    dev: false
 
   /supports-preserve-symlinks-flag/1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
+    dev: false
 
   /symbol-tree/3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
@@ -4052,6 +4312,7 @@ packages:
   /tapable/2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
+    dev: false
 
   /terminal-link/2.1.1:
     resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==}
@@ -4080,16 +4341,19 @@ packages:
 
   /tmpl/1.0.5:
     resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
+    dev: false
 
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
+    dev: false
 
   /to-regex-range/5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
+    dev: false
 
   /tough-cookie/4.1.3:
     resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
@@ -4106,6 +4370,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       punycode: 2.3.1
+    dev: false
 
   /ts-api-utils/1.3.0_typescript@5.2.2:
     resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
@@ -4144,18 +4409,22 @@ packages:
     engines: {node: '>= 0.8.0'}
     dependencies:
       prelude-ls: 1.2.1
+    dev: false
 
   /type-detect/4.0.8:
     resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
     engines: {node: '>=4'}
+    dev: false
 
   /type-fest/0.20.2:
     resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
     engines: {node: '>=10'}
+    dev: false
 
   /type-fest/0.21.3:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
     engines: {node: '>=10'}
+    dev: false
 
   /typed-array-buffer/1.0.2:
     resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==}
@@ -4164,6 +4433,7 @@ packages:
       call-bind: 1.0.7
       es-errors: 1.3.0
       is-typed-array: 1.1.13
+    dev: false
 
   /typed-array-byte-length/1.0.1:
     resolution: {integrity: sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==}
@@ -4174,6 +4444,7 @@ packages:
       gopd: 1.0.1
       has-proto: 1.0.3
       is-typed-array: 1.1.13
+    dev: false
 
   /typed-array-byte-offset/1.0.2:
     resolution: {integrity: sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==}
@@ -4185,6 +4456,7 @@ packages:
       gopd: 1.0.1
       has-proto: 1.0.3
       is-typed-array: 1.1.13
+    dev: false
 
   /typed-array-length/1.0.5:
     resolution: {integrity: sha512-yMi0PlwuznKHxKmcpoOdeLwxBoVPkqZxd7q2FgMkmD3bNwvF5VW0+UlUQ1k1vmktTu4Yu13Q0RIxEP8+B+wloA==}
@@ -4196,11 +4468,13 @@ packages:
       has-proto: 1.0.3
       is-typed-array: 1.1.13
       possible-typed-array-names: 1.0.0
+    dev: false
 
   /typedarray-to-buffer/3.1.5:
     resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
     dependencies:
       is-typedarray: 1.0.0
+    dev: false
 
   /typescript/5.2.2:
     resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
@@ -4215,13 +4489,16 @@ packages:
       has-bigints: 1.0.2
       has-symbols: 1.0.3
       which-boxed-primitive: 1.0.2
+    dev: false
 
   /undici-types/5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+    dev: false
 
   /universalify/0.2.0:
     resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
     engines: {node: '>= 4.0.0'}
+    dev: false
 
   /update-browserslist-db/1.0.13_browserslist@4.23.0:
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
@@ -4232,17 +4509,20 @@ packages:
       browserslist: 4.23.0
       escalade: 3.1.2
       picocolors: 1.0.0
+    dev: false
 
   /uri-js/4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
       punycode: 2.3.1
+    dev: false
 
   /url-parse/1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
     dependencies:
       querystringify: 2.2.0
       requires-port: 1.0.0
+    dev: false
 
   /v8-compile-cache/2.4.0:
     resolution: {integrity: sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==}
@@ -4275,10 +4555,12 @@ packages:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
     dependencies:
       makeerror: 1.0.12
+    dev: false
 
   /webidl-conversions/5.0.0:
     resolution: {integrity: sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==}
     engines: {node: '>=8'}
+    dev: false
 
   /webidl-conversions/6.1.0:
     resolution: {integrity: sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==}
@@ -4312,6 +4594,7 @@ packages:
       is-number-object: 1.0.7
       is-string: 1.0.7
       is-symbol: 1.0.4
+    dev: false
 
   /which-builtin-type/1.1.3:
     resolution: {integrity: sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==}
@@ -4329,6 +4612,7 @@ packages:
       which-boxed-primitive: 1.0.2
       which-collection: 1.0.2
       which-typed-array: 1.1.15
+    dev: false
 
   /which-collection/1.0.2:
     resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
@@ -4338,6 +4622,7 @@ packages:
       is-set: 2.0.3
       is-weakmap: 2.0.2
       is-weakset: 2.0.3
+    dev: false
 
   /which-typed-array/1.1.15:
     resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==}
@@ -4348,6 +4633,7 @@ packages:
       for-each: 0.3.3
       gopd: 1.0.1
       has-tostringtag: 1.0.2
+    dev: false
 
   /which/2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
@@ -4355,6 +4641,7 @@ packages:
     hasBin: true
     dependencies:
       isexe: 2.0.0
+    dev: false
 
   /wrap-ansi/7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
@@ -4363,9 +4650,11 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
+    dev: false
 
   /wrappy/1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: false
 
   /write-file-atomic/3.0.3:
     resolution: {integrity: sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==}
@@ -4395,20 +4684,25 @@ packages:
 
   /xmlchars/2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+    dev: false
 
   /y18n/5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
+    dev: false
 
   /yallist/3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+    dev: false
 
   /yallist/4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+    dev: false
 
   /yargs-parser/20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
     engines: {node: '>=10'}
+    dev: false
 
   /yargs/16.2.0:
     resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}

From aebb64fa9b6ae321c8218f37cf822bf777fca683 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 11 Oct 2024 15:55:46 +0200
Subject: [PATCH 133/272] Slower .1 resize for grid rows/cols with fractional
 units (#6523)

**Problem:**

Resizing a grid's col/row with fractional unit is very fast (too fast).

**Fix:**

Adjust the calculation of the new drag value so it slows down to
effectively more discernible .1 steps.

| Before | After |
|-------|----------|
| ![Kapture 2024-10-11 at 13 48
38](https://github.com/user-attachments/assets/171befd9-03aa-4070-b88d-08b42e9e6d63)
| ![Kapture 2024-10-11 at 13 48
09](https://github.com/user-attachments/assets/5683c313-c830-4a69-8497-95a442c6557d)
|

Fixes #6522
---
 .../resize-grid-strategy.spec.browser2.tsx    |  8 ++---
 .../strategies/resize-grid-strategy.ts        | 29 ++++++++++---------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
index c829dc823ae4..35a0c8c4dfa6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
@@ -112,7 +112,7 @@ describe('resize a grid', () => {
       y: resizeControlRect.y + resizeControlRect.height / 2,
     })
     const endPoint = canvasPoint({
-      x: startPoint.x + 20,
+      x: startPoint.x + 100,
       y: startPoint.y,
     })
     await mouseMoveToPoint(resizeControl, startPoint)
@@ -138,7 +138,7 @@ export var storyboard = (
         gap: 10,
         width: 600,
         height: 600,
-        gridTemplateColumns: '2.4fr 2.5fr 1fr',
+        gridTemplateColumns: '2.4fr 1.8fr 1fr',
         gridTemplateRows: '99px 109px 90px',
         height: 'max-content',
       }}
@@ -344,7 +344,7 @@ export var storyboard = (
       y: resizeControlRect.y + resizeControlRect.height / 2,
     })
     const endPoint = canvasPoint({
-      x: startPoint.x + 20,
+      x: startPoint.x + 100,
       y: startPoint.y,
     })
     await mouseMoveToPoint(resizeControl, startPoint)
@@ -370,7 +370,7 @@ export var storyboard = (
         gap: 10,
         width: 600,
         height: 600,
-        gridTemplateColumns: 'repeat(3, 2fr)',
+        gridTemplateColumns: 'repeat(3, 1.5fr)',
         gridTemplateRows: '99px 109px 90px',
         height: 'max-content',
       }}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index 03c9d34d3976..c3ba580f450c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -32,7 +32,7 @@ import {
 import { toFirst } from '../../../../core/shared/optics/optic-utilities'
 import type { Either } from '../../../../core/shared/either'
 import { foldEither, isLeft, isRight } from '../../../../core/shared/either'
-import { roundToNearestWhole } from '../../../../core/shared/math-utils'
+import { roundTo, roundToNearestWhole } from '../../../../core/shared/math-utils'
 import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
 import { expandGridDimensions, replaceGridTemplateDimensionAtIndex } from './grid-helpers'
 import { setCursorCommand } from '../../commands/set-cursor-command'
@@ -143,6 +143,9 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         .compose(fromField('value'))
 
       const calculatedValue = toFirst(valueOptic, calculatedValues.dimensions)
+      if (isLeft(calculatedValue)) {
+        return emptyStrategyApplicationResult
+      }
       const mergedValue = toFirst(valueOptic, mergedValues.dimensions)
       if (isLeft(mergedValue)) {
         return emptyStrategyApplicationResult
@@ -160,7 +163,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         0,
         newResizedValue(
           mergedValue.value,
-          getNewDragValue(dragAmount, isFractional, calculatedValue, mergedValue),
+          getNewDragValue(dragAmount, isFractional, calculatedValue.value, mergedValue.value),
           precision,
           isFractional,
         ),
@@ -195,26 +198,24 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
 function getNewDragValue(
   dragAmount: number,
   isFractional: boolean,
-  possibleCalculatedValue: Either<string, number>,
-  mergedValue: Either<string, number>,
+  calculatedValue: number,
+  mergedValue: number,
 ): number {
   if (!isFractional) {
     return dragAmount
   }
 
-  if (!isRight(possibleCalculatedValue)) {
+  if (calculatedValue === 0) {
     return 0
   }
 
-  const mergedFractionalValue = foldEither(
-    () => 0,
-    (r) => r,
-    mergedValue,
-  )
-  const calculatedValue = possibleCalculatedValue.value
-  const perPointOne =
-    mergedFractionalValue == 0 ? 10 : (calculatedValue / mergedFractionalValue) * 0.1
-  return roundToNearestWhole((dragAmount / perPointOne) * 10) / 10
+  // for fr units, adjust the value to proportionally to .1
+  let proportionalResize = calculatedValue * 0.1
+  if (mergedValue !== 0) {
+    proportionalResize /= mergedValue
+  }
+
+  return roundToNearestWhole(dragAmount / proportionalResize) * 0.1
 }
 
 function newResizedValue(

From ddd55e0a0c869c61892c5ec22d3b2d65ced72a07 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Mon, 14 Oct 2024 11:53:57 +0200
Subject: [PATCH 134/272] Thinner grid cell borders (#6525)

**Details:**
- Removing the "insertion dots"
- Aligning the outer edge of the grid cells with the selection outline
- Making the grid cell borders thinner

**Before**
<img width="697" alt="image"
src="https://github.com/user-attachments/assets/f1f85fa5-ab84-4c71-84d8-3a5fa0c183dd">

**Now**
<img width="675" alt="image"
src="https://github.com/user-attachments/assets/5aa74828-8336-4c48-8ab0-bdf79139e92b">
---
 .../canvas/controls/grid-controls.tsx         | 66 ++-----------------
 1 file changed, 5 insertions(+), 61 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 4b90488f41e4..1fee7f42f12e 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -870,62 +870,6 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
                         : undefined,
                   }}
                 />
-                <React.Fragment>
-                  <div
-                    style={{
-                      position: 'absolute',
-                      top: -1,
-                      bottom: -1,
-                      left: -1,
-                      right: -1,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }}
-                  >
-                    <div style={{ width: 2, height: 2, backgroundColor: dotgridColor }} />
-                  </div>
-                  <div
-                    style={{
-                      width: 2,
-                      height: 2,
-                      backgroundColor: dotgridColor,
-                      position: 'absolute',
-                      top: -1,
-                      left: -1,
-                    }}
-                  />
-                  <div
-                    style={{
-                      width: 2,
-                      height: 2,
-                      backgroundColor: dotgridColor,
-                      position: 'absolute',
-                      bottom: -1,
-                      left: -1,
-                    }}
-                  />
-                  <div
-                    style={{
-                      width: 2,
-                      height: 2,
-                      backgroundColor: dotgridColor,
-                      position: 'absolute',
-                      top: -1,
-                      right: -1,
-                    }}
-                  />
-                  <div
-                    style={{
-                      width: 2,
-                      height: 2,
-                      backgroundColor: dotgridColor,
-                      position: 'absolute',
-                      bottom: -1,
-                      right: -1,
-                    }}
-                  />
-                </React.Fragment>
               </React.Fragment>
             </div>
           )
@@ -1676,16 +1620,16 @@ function gridKeyFromPath(path: ElementPath): string {
   return `grid-${EP.toString(path)}`
 }
 
-const placeholderBorderBaseWidth = 2
-
+const borderWidth = 1
 function gridPlaceholderBorder(color: string, scale: number): string {
-  return `${placeholderBorderBaseWidth / scale}px solid ${color}`
+  return `${borderWidth / scale}px solid ${color}`
 }
 
+const borderExtension = 0.5
 function gridPlaceholderTopOrLeftPosition(scale: number): string {
-  return `${-placeholderBorderBaseWidth / scale}px`
+  return `${-borderExtension / scale}px`
 }
 
 function gridPlaceholderWidthOrHeight(scale: number): string {
-  return `calc(100% + ${(placeholderBorderBaseWidth * 2) / scale}px)`
+  return `calc(100% + ${(borderExtension * 2) / scale}px)`
 }

From ad390875dc166296e4f8f3f6da29d4672d35d578 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 14 Oct 2024 15:42:29 +0200
Subject: [PATCH 135/272] Grid cell resize from the edges (#6529)

**Problem:**

Instead of having dedicated control handles for resizing a grid cell
(when the child is filling/stretching the parent), we should use instead
the same edge controls used for absolute move.

**Fix:**

1. Factor out the edge components from the absolute resize controls into
a hook `useResizeEdges`, and make it so it accepts custom event
callbacks for the mouse interactions and which cursors to display while
hovering
2. Replace the old grid edge handles in the grid controls with the new
edges, hooking them up with the existing resize logic
3. Show the `ResizeCol`/`ResizeRow` cursors


https://github.com/user-attachments/assets/8ae7eec6-ea33-4b4a-8445-f60390605302

Fixes #6528
---
 .../strategies/basic-resize-strategy.tsx      |   7 +-
 ...-resize-element-strategy.spec.browser2.tsx |  20 +-
 .../grid-resize-element-strategy.ts           |   7 +-
 .../controls/grid-controls-for-strategies.tsx |  20 +-
 .../canvas/controls/grid-controls.tsx         | 107 ++++-----
 .../select-mode/absolute-resize-control.tsx   | 208 +++++-------------
 .../controls/select-mode/resize-edge.tsx      |  33 +++
 .../controls/select-mode/use-resize-edges.tsx | 133 +++++++++++
 .../components/inspector/inspector-common.ts  |  10 +
 ...performance-regression-tests.spec.tsx.snap |  32 +--
 10 files changed, 314 insertions(+), 263 deletions(-)
 create mode 100644 editor/src/components/canvas/controls/select-mode/resize-edge.tsx
 create mode 100644 editor/src/components/canvas/controls/select-mode/use-resize-edges.tsx

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
index 9c38e0755315..5135bee92379 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -15,7 +15,7 @@ import * as PP from '../../../../core/shared/property-path'
 import { styleStringInArray } from '../../../../utils/common-constants'
 import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
-import { isFixedHugFillModeApplied } from '../../../inspector/inspector-common'
+import { isFillOrStretchModeApplied } from '../../../inspector/inspector-common'
 import type { EdgePosition } from '../../canvas-types'
 import { oppositeEdgePosition } from '../../canvas-types'
 import {
@@ -84,10 +84,7 @@ export function basicResizeStrategy(
   const elementParentBounds = metadata?.specialSizeMeasurements.immediateParentBounds ?? null
 
   const isGridCell = MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)
-  if (
-    isGridCell &&
-    isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'fill')
-  ) {
+  if (isGridCell && isFillOrStretchModeApplied(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index a5c28b4d6af5..94ec2157177d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -15,12 +15,13 @@ import {
   offsetPoint,
 } from '../../../../core/shared/math-utils'
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
-import { GridResizeEdgeTestId } from '../../controls/grid-controls-for-strategies'
 import { mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
 import type { EditorRenderResult } from '../../ui-jsx.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
 import type { GridResizeEdge } from '../interaction-state'
 import { gridCellTargetId } from './grid-cell-bounds'
+import { ResizePointTestId } from '../../controls/select-mode/absolute-resize-control'
+import { gridEdgeToEdgePosition } from '../../controls/grid-controls-for-strategies'
 
 async function runCellResizeTest(
   editor: EditorRenderResult,
@@ -30,7 +31,9 @@ async function runCellResizeTest(
 ) {
   await selectComponentsForTest(editor, [elementPathToDrag])
 
-  const resizeControl = editor.renderedDOM.getByTestId(GridResizeEdgeTestId(edge))
+  const resizeControl = editor.renderedDOM.getByTestId(
+    ResizePointTestId(gridEdgeToEdgePosition(edge)),
+  )
   const targetGridCell = editor.renderedDOM.getByTestId(dragToCellTestId)
 
   await mouseDragFromPointToPoint(
@@ -61,7 +64,9 @@ async function runCellResizeTestWithDragVector(
 ) {
   await selectComponentsForTest(editor, [elementPathToDrag])
 
-  const resizeControl = editor.renderedDOM.getByTestId(GridResizeEdgeTestId(edge))
+  const resizeControl = editor.renderedDOM.getByTestId(
+    ResizePointTestId(gridEdgeToEdgePosition(edge)),
+  )
 
   const resizeControlCenter = getRectCenter(
     localRectangle({
@@ -82,15 +87,6 @@ async function runCellResizeTestWithDragVector(
 }
 
 describe('grid resize element strategy', () => {
-  it('cannot resize non-filling cells', async () => {
-    const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
-
-    await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/grid-child-not-filling')])
-
-    const resizeControl = editor.renderedDOM.queryByTestId(GridResizeEdgeTestId('column-end'))
-    expect(resizeControl).toBeNull()
-  })
-
   describe('column-end', () => {
     it('can enlarge element', async () => {
       const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 29b20a5ab66e..fbd27c0778ba 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -7,7 +7,7 @@ import {
   rectangleIntersection,
 } from '../../../../core/shared/math-utils'
 import { isCSSKeyword } from '../../../inspector/common/css-utils'
-import { isFixedHugFillModeApplied } from '../../../inspector/inspector-common'
+import { isFillOrStretchModeApplied } from '../../../inspector/inspector-common'
 import {
   controlsForGridPlaceholders,
   gridEdgeToEdgePosition,
@@ -52,10 +52,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const isFillOrStretchContainer =
-    isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'fill') ||
-    isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'stretch')
-  if (!isFillOrStretchContainer) {
+  if (!isFillOrStretchModeApplied(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 
diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index 41e56da794a5..c1e6beda11d3 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -20,7 +20,6 @@ import { controlForStrategyMemoized } from '../canvas-strategies/canvas-strategy
 import type { GridResizeEdge } from '../canvas-strategies/interaction-state'
 import type { EdgePosition } from '../canvas-types'
 import {
-  CSSCursor,
   EdgePositionBottom,
   EdgePositionLeft,
   EdgePositionRight,
@@ -31,6 +30,7 @@ import {
   GridResizeControlsComponent,
   GridRowColumnResizingControlsComponent,
 } from './grid-controls'
+import { isEdgePositionOnSide } from '../canvas-utils'
 
 export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`
 
@@ -167,8 +167,6 @@ export interface GridControlsProps {
 
 export const GridControls = controlForStrategyMemoized<GridControlsProps>(GridControlsComponent)
 
-export const GridResizeEdgeTestId = (edge: GridResizeEdge) => `grid-resize-edge-${edge}`
-
 interface GridResizeControlProps {
   target: ElementPath
 }
@@ -192,6 +190,22 @@ export function gridEdgeToEdgePosition(edge: GridResizeEdge): EdgePosition {
   }
 }
 
+export function edgePositionToGridResizeEdge(position: EdgePosition): GridResizeEdge | null {
+  if (!isEdgePositionOnSide(position)) {
+    return null
+  } else if (position.x === 0) {
+    return 'column-start'
+  } else if (position.x === 1) {
+    return 'column-end'
+  } else if (position.y === 0) {
+    return 'row-start'
+  } else if (position.y === 1) {
+    return 'row-end'
+  } else {
+    return null
+  }
+}
+
 export function controlsForGridPlaceholders(
   gridPath: ElementPath,
   whenToShow: WhenToShowControl = 'always-visible',
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 1fee7f42f12e..c3f9486c031a 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -36,7 +36,7 @@ import {
 import { toFirst } from '../../../core/shared/optics/optic-utilities'
 import type { Optic } from '../../../core/shared/optics/optics'
 import { optionalMap } from '../../../core/shared/optional-utils'
-import { assertNever } from '../../../core/shared/utils'
+import { assertNever, NO_OP } from '../../../core/shared/utils'
 import { Modifier } from '../../../utils/modifiers'
 import { when } from '../../../utils/react-conditionals'
 import { useColorTheme, UtopiaStyles } from '../../../uuiui'
@@ -50,16 +50,11 @@ import {
   printGridCSSNumber,
 } from '../../inspector/common/css-utils'
 import CanvasActions from '../canvas-actions'
-import type {
-  GridResizeEdge,
-  GridResizeEdgeProperties,
-} from '../canvas-strategies/interaction-state'
+import type { GridResizeEdge } from '../canvas-strategies/interaction-state'
 import {
   createInteractionViaMouse,
   gridAxisHandle,
   gridCellHandle,
-  gridResizeEdgeProperties,
-  GridResizeEdges,
   gridResizeHandle,
 } from '../canvas-strategies/interaction-state'
 import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
@@ -70,6 +65,7 @@ import {
 } from '../canvas-strategies/strategies/grid-helpers'
 import { canResizeGridTemplate } from '../canvas-strategies/strategies/resize-grid-strategy'
 import { resizeBoundingBoxFromSide } from '../canvas-strategies/strategies/resize-helpers'
+import type { EdgePosition } from '../canvas-types'
 import { CSSCursor } from '../canvas-types'
 import { windowToCanvasCoordinates } from '../dom-lookup'
 import type { Axis } from '../gap-utils'
@@ -77,13 +73,14 @@ import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
 import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
 import type { GridControlsProps, GridData } from './grid-controls-for-strategies'
 import {
+  edgePositionToGridResizeEdge,
   getNullableAutoOrTemplateBaseString,
   GridCellTestId,
   gridEdgeToEdgePosition,
-  GridResizeEdgeTestId,
   useGridData,
 } from './grid-controls-for-strategies'
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
+import { useResizeEdges } from './select-mode/use-resize-edges'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -820,8 +817,6 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
           const countedColumn = Math.floor(cell % grid.columns) + 1
           const id = gridCellTargetId(grid.elementPath, countedRow, countedColumn)
           const borderID = `${id}-border`
-          const dotgridColor =
-            activelyDraggingOrResizingCell != null ? colorTheme.blackOpacity35.value : 'transparent'
 
           const isActiveCell =
             countedColumn === currentHoveredCell?.column && countedRow === currentHoveredCell?.row
@@ -1455,12 +1450,9 @@ export const GridResizeControlsComponent = ({ target }: GridResizeControlProps)
 
   const isResizing = bounds != null
 
-  const [resizingEdge, setResizingEdge] = React.useState<GridResizeEdge | null>(null)
-
   const onMouseUp = React.useCallback(() => {
     setBounds(null)
     setStartingBounds(null)
-    setResizingEdge(null)
   }, [])
 
   React.useEffect(() => {
@@ -1476,7 +1468,6 @@ export const GridResizeControlsComponent = ({ target }: GridResizeControlProps)
     (uid: string, edge: GridResizeEdge) => (event: React.MouseEvent) => {
       event.stopPropagation()
       const frame = zeroRectIfNullOrInfinity(element?.globalFrame ?? null)
-      setResizingEdge(edge)
       setBounds(frame)
       setStartingBounds(frame)
       const start = windowToCanvasCoordinates(
@@ -1509,6 +1500,34 @@ export const GridResizeControlsComponent = ({ target }: GridResizeControlProps)
     return scaledFrame.width * scale > 30 && scaledFrame.height > 30
   }, [element, scale, isResizing])
 
+  const onEdgeMouseDown = React.useCallback(
+    (position: EdgePosition) => (e: React.MouseEvent<HTMLDivElement>) => {
+      if (element == null) {
+        return
+      }
+
+      const edge = edgePositionToGridResizeEdge(position)
+      if (edge == null) {
+        return
+      }
+
+      startResizeInteraction(EP.toUid(element.elementPath), edge)(e)
+    },
+    [element, startResizeInteraction],
+  )
+
+  const resizeEdges = useResizeEdges([target], {
+    onEdgeDoubleClick: () => NO_OP,
+    onEdgeMouseMove: NO_OP,
+    onEdgeMouseDown: onEdgeMouseDown,
+    cursors: {
+      top: CSSCursor.RowResize,
+      bottom: CSSCursor.RowResize,
+      left: CSSCursor.ColResize,
+      right: CSSCursor.ColResize,
+    },
+  })
+
   if (
     element == null ||
     element.globalFrame == null ||
@@ -1541,57 +1560,16 @@ export const GridResizeControlsComponent = ({ target }: GridResizeControlProps)
             pointerEvents: 'none',
           }}
         >
-          {GridResizeEdges.map((edge) => {
-            const properties = gridResizeEdgeProperties(edge)
-            const visible = !isResizing || resizingEdge === edge
-            return (
-              <div
-                key={edge}
-                style={{
-                  visibility: visible ? 'visible' : 'hidden',
-                  position: 'absolute',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  pointerEvents: 'none',
-                  ...gridEdgeToWidthHeight(properties, scale),
-                }}
-              >
-                <div
-                  data-testid={GridResizeEdgeTestId(edge)}
-                  onMouseDown={startResizeInteraction(EP.toUid(element.elementPath), edge)}
-                  style={{
-                    width: properties.isRow
-                      ? GRID_RESIZE_HANDLE_SIZES.long
-                      : GRID_RESIZE_HANDLE_SIZES.short,
-                    height: properties.isColumn
-                      ? GRID_RESIZE_HANDLE_SIZES.long
-                      : GRID_RESIZE_HANDLE_SIZES.short,
-                    borderRadius: 4,
-                    cursor: gridEdgeToCSSCursor(edge),
-                    pointerEvents: 'initial',
-                    backgroundColor: colorTheme.white.value,
-                    boxShadow: `${colorTheme.canvasControlsSizeBoxShadowColor50.value} 0px 0px
-                      ${1 / scale}px, ${colorTheme.canvasControlsSizeBoxShadowColor20.value} 0px ${
-                      1 / scale
-                    }px ${2 / scale}px ${1 / scale}px`,
-                    zoom: 1 / scale,
-                  }}
-                />
-              </div>
-            )
-          })}
+          {resizeEdges.top}
+          {resizeEdges.left}
+          {resizeEdges.bottom}
+          {resizeEdges.right}
         </div>
       </div>
     </CanvasOffsetWrapper>
   )
 }
 
-const GRID_RESIZE_HANDLE_SIZES = {
-  long: 24,
-  short: 4,
-}
-
 function gridEdgeToCSSCursor(edge: GridResizeEdge): CSSCursor {
   switch (edge) {
     case 'column-end':
@@ -1605,17 +1583,6 @@ function gridEdgeToCSSCursor(edge: GridResizeEdge): CSSCursor {
   }
 }
 
-function gridEdgeToWidthHeight(props: GridResizeEdgeProperties, scale: number): CSSProperties {
-  return {
-    width: props.isColumn ? (GRID_RESIZE_HANDLE_SIZES.short * 4) / scale : '100%',
-    height: props.isRow ? (GRID_RESIZE_HANDLE_SIZES.short * 4) / scale : '100%',
-    top: props.isStart ? 0 : undefined,
-    left: props.isStart ? 0 : undefined,
-    right: props.isEnd ? 0 : undefined,
-    bottom: props.isEnd ? 0 : undefined,
-  }
-}
-
 function gridKeyFromPath(path: ElementPath): string {
   return `grid-${EP.toString(path)}`
 }
diff --git a/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx b/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
index c8db573bd4af..366453bbf8ad 100644
--- a/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
@@ -18,7 +18,7 @@ import { useColorTheme } from '../../../../uuiui'
 import type { EditorDispatch } from '../../../editor/action-types'
 import { applyCommandsAction } from '../../../editor/actions/action-creators'
 import { useDispatch } from '../../../editor/store/dispatch-context'
-import { AllElementProps, getMetadata } from '../../../editor/store/editor-state'
+import { getMetadata } from '../../../editor/store/editor-state'
 import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook'
 import type { FixedHugFill } from '../../../inspector/inspector-common'
 import {
@@ -34,14 +34,13 @@ import { createInteractionViaMouse } from '../../canvas-strategies/interaction-s
 import type { EdgePosition } from '../../canvas-types'
 import { CSSCursor } from '../../canvas-types'
 import { getAllTargetsUnderAreaAABB, windowToCanvasCoordinates } from '../../dom-lookup'
-import { SmallElementSize, useBoundingBox } from '../bounding-box-hooks'
+import { useBoundingBox } from '../bounding-box-hooks'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
 import { isZeroSizedElement } from '../outline-utils'
 import { useMaybeHighlightElement } from './select-mode-hooks'
 import { isEdgePositionEqualTo } from '../../canvas-utils'
 import { treatElementAsGroupLike } from '../../canvas-strategies/strategies/group-helpers'
-import { treatElementAsFragmentLike } from '../../canvas-strategies/strategies/fragment-like-helpers'
-import { ElementPathTrees } from '../../../../core/shared/element-path-tree'
+import { useResizeEdges } from './use-resize-edges'
 
 export const AbsoluteResizeControlTestId = (targets: Array<ElementPath>): string =>
   `${targets.map(EP.toString).sort()}-absolute-resize-control`
@@ -54,17 +53,16 @@ interface AbsoluteResizeControlProps {
 export const SizeLabelID = 'SizeLabel'
 export const SizeLabelTestId = 'SizeLabelTestId'
 
-function shouldUseSmallElementResizeControl(size: number, scale: number): boolean {
-  return size <= SmallElementSize / scale
-}
-
 export const AbsoluteResizeControl = controlForStrategyMemoized(
   ({ targets, pathsWereReplaced }: AbsoluteResizeControlProps) => {
-    const scale = useEditorState(
-      Substores.canvasOffset,
-      (store) => store.editor.canvas.scale,
-      'AbsoluteResizeControl scale',
-    )
+    const dispatch = useDispatch()
+
+    const canvasOffsetRef = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
+    const metadataRef = useRefEditorState((store) => store.editor.jsxMetadata)
+    const selectedElementsRef = useRefEditorState((store) => store.editor.selectedViews)
+    const elementPathTreeRef = useRefEditorState((store) => store.editor.elementPathTree)
+
+    const { maybeClearHighlightsOnHoverEnd } = useMaybeHighlightElement()
 
     const controlRef = useBoundingBox(targets, (ref, safeGappedBoundingBox, realBoundingBox) => {
       if (isZeroSizedElement(realBoundingBox)) {
@@ -78,54 +76,6 @@ export const AbsoluteResizeControl = controlForStrategyMemoized(
       }
     })
 
-    const leftRef = useBoundingBox(targets, (ref, boundingBox) => {
-      const isSmallElement = shouldUseSmallElementResizeControl(boundingBox.width, scale)
-      const lineSize = ResizeMouseAreaSize / scale
-      const width = isSmallElement ? lineSize / 2 : lineSize
-      const offsetLeft = `${-lineSize / 2}px`
-      const offsetTop = `0px`
-
-      ref.current.style.width = `${width}px`
-      ref.current.style.transform = `translate(${offsetLeft}, ${offsetTop})`
-      ref.current.style.height = boundingBox.height + 'px'
-    })
-    const topRef = useBoundingBox(targets, (ref, boundingBox) => {
-      const isSmallElement = shouldUseSmallElementResizeControl(boundingBox.height, scale)
-      const lineSize = ResizeMouseAreaSize / scale
-      const height = isSmallElement ? lineSize / 2 : lineSize
-      const offsetLeft = `0px`
-      const offsetTop = `${-lineSize / 2}px`
-
-      ref.current.style.width = boundingBox.width + 'px'
-      ref.current.style.height = height + 'px'
-      ref.current.style.transform = `translate(${offsetLeft}, ${offsetTop})`
-    })
-    const rightRef = useBoundingBox(targets, (ref, boundingBox) => {
-      const isSmallElement = shouldUseSmallElementResizeControl(boundingBox.width, scale)
-      const lineSize = ResizeMouseAreaSize / scale
-      const width = isSmallElement ? lineSize / 2 : lineSize
-      const offsetLeft = isSmallElement ? `0px` : `${-lineSize / 2}px`
-      const offsetTop = `0px`
-
-      ref.current.style.transform = `translate(${offsetLeft}, ${offsetTop})`
-      ref.current.style.left = boundingBox.width + 'px'
-      ref.current.style.width = width + 'px'
-      ref.current.style.height = boundingBox.height + 'px'
-    })
-
-    const bottomRef = useBoundingBox(targets, (ref, boundingBox) => {
-      const isSmallElement = shouldUseSmallElementResizeControl(boundingBox.height, scale)
-      const lineSize = ResizeMouseAreaSize / scale
-      const height = isSmallElement ? lineSize / 2 : lineSize
-      const offsetLeft = `0px`
-      const offsetTop = isSmallElement ? `0px` : `${-lineSize / 2}px`
-
-      ref.current.style.transform = `translate(${offsetLeft}, ${offsetTop})`
-      ref.current.style.top = boundingBox.height + 'px'
-      ref.current.style.width = boundingBox.width + 'px'
-      ref.current.style.height = height + 'px'
-    })
-
     const topLeftRef = useBoundingBox(targets, NO_OP)
     const topRightRef = useBoundingBox(targets, (ref, boundingBox) => {
       ref.current.style.left = boundingBox.width + 'px'
@@ -144,6 +94,47 @@ export const AbsoluteResizeControl = controlForStrategyMemoized(
       ref.current.style.width = boundingBox.width + 'px'
     })
 
+    const scale = useEditorState(
+      Substores.canvasOffset,
+      (store) => store.editor.canvas.scale,
+      'AbsoluteResizeControl scale',
+    )
+    const onEdgeMouseDown = React.useCallback(
+      (position: EdgePosition) => (event: React.MouseEvent<HTMLDivElement>) => {
+        startResizeInteraction(event, dispatch, position, canvasOffsetRef.current, scale)
+      },
+      [dispatch, canvasOffsetRef, scale],
+    )
+
+    const onEdgeMouseMove = React.useCallback(
+      (event: React.MouseEvent<HTMLDivElement>) => {
+        maybeClearHighlightsOnHoverEnd()
+        event.stopPropagation()
+      },
+      [maybeClearHighlightsOnHoverEnd],
+    )
+
+    const onEdgeDoubleClick = React.useCallback(
+      (direction: 'horizontal' | 'vertical') => () => {
+        executeFirstApplicableStrategy(
+          dispatch,
+          setPropHugStrategies(
+            metadataRef.current,
+            selectedElementsRef.current,
+            elementPathTreeRef.current,
+            invert(direction),
+          ),
+        )
+      },
+      [dispatch, metadataRef, elementPathTreeRef, selectedElementsRef],
+    )
+
+    const resizeEdges = useResizeEdges(targets, {
+      onEdgeMouseDown,
+      onEdgeMouseMove,
+      onEdgeDoubleClick,
+    })
+
     return (
       <CanvasOffsetWrapper>
         <div
@@ -154,30 +145,10 @@ export const AbsoluteResizeControl = controlForStrategyMemoized(
             pointerEvents: 'none',
           }}
         >
-          <ResizeEdge
-            ref={rightRef}
-            position={{ x: 1, y: 0.5 }}
-            cursor={CSSCursor.ResizeEW}
-            direction='vertical'
-          />
-          <ResizeEdge
-            ref={bottomRef}
-            position={{ x: 0.5, y: 1 }}
-            cursor={CSSCursor.ResizeNS}
-            direction='horizontal'
-          />
-          <ResizeEdge
-            ref={leftRef}
-            position={{ x: 0, y: 0.5 }}
-            cursor={CSSCursor.ResizeEW}
-            direction='vertical'
-          />
-          <ResizeEdge
-            ref={topRef}
-            position={{ x: 0.5, y: 0 }}
-            cursor={CSSCursor.ResizeNS}
-            direction='horizontal'
-          />
+          {resizeEdges.top}
+          {resizeEdges.left}
+          {resizeEdges.bottom}
+          {resizeEdges.right}
           <ResizePoint ref={topLeftRef} position={{ x: 0, y: 0 }} cursor={CSSCursor.ResizeNWSE} />
           <ResizePoint ref={topRightRef} position={{ x: 1, y: 0 }} cursor={CSSCursor.ResizeNESW} />
           <ResizePoint
@@ -315,73 +286,6 @@ const ResizePoint = React.memo(
 )
 ResizePoint.displayName = 'ResizePoint'
 
-interface ResizeEdgeProps {
-  cursor: CSSCursor
-  direction: 'horizontal' | 'vertical'
-  position: EdgePosition
-}
-
-const ResizeMouseAreaSize = 10
-const ResizeEdge = React.memo(
-  React.forwardRef<HTMLDivElement, ResizeEdgeProps>((props, ref) => {
-    const scale = useEditorState(
-      Substores.canvasOffset,
-      (store) => store.editor.canvas.scale,
-      'ResizeEdge scale',
-    )
-    const dispatch = useDispatch()
-    const canvasOffsetRef = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
-    const metadataRef = useRefEditorState((store) => store.editor.jsxMetadata)
-    const selectedElementsRef = useRefEditorState((store) => store.editor.selectedViews)
-    const elementPathTreeRef = useRefEditorState((store) => store.editor.elementPathTree)
-
-    const { maybeClearHighlightsOnHoverEnd } = useMaybeHighlightElement()
-
-    const onEdgeMouseDown = React.useCallback(
-      (event: React.MouseEvent<HTMLDivElement>) => {
-        startResizeInteraction(event, dispatch, props.position, canvasOffsetRef.current, scale)
-      },
-      [dispatch, props.position, canvasOffsetRef, scale],
-    )
-
-    const onMouseMove = React.useCallback(
-      (event: React.MouseEvent<HTMLDivElement>) => {
-        maybeClearHighlightsOnHoverEnd()
-        event.stopPropagation()
-      },
-      [maybeClearHighlightsOnHoverEnd],
-    )
-
-    const onEdgeDblClick = React.useCallback(() => {
-      executeFirstApplicableStrategy(
-        dispatch,
-        setPropHugStrategies(
-          metadataRef.current,
-          selectedElementsRef.current,
-          elementPathTreeRef.current,
-          invert(props.direction),
-        ),
-      )
-    }, [dispatch, metadataRef, props.direction, elementPathTreeRef, selectedElementsRef])
-
-    return (
-      <div
-        onDoubleClick={onEdgeDblClick}
-        ref={ref}
-        style={{
-          position: 'absolute',
-          backgroundColor: 'transparent',
-          cursor: props.cursor,
-          pointerEvents: 'initial',
-        }}
-        onMouseDown={onEdgeMouseDown}
-        onMouseMove={onMouseMove}
-        data-testid={ResizePointTestId(props.position)}
-      />
-    )
-  }),
-)
-
 const sizeLabel = (state: FixedHugFill['type'], actualSize: number): string => {
   switch (state) {
     case 'fill':
diff --git a/editor/src/components/canvas/controls/select-mode/resize-edge.tsx b/editor/src/components/canvas/controls/select-mode/resize-edge.tsx
new file mode 100644
index 000000000000..6e913ffe61f2
--- /dev/null
+++ b/editor/src/components/canvas/controls/select-mode/resize-edge.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import type { CSSCursor, EdgePosition } from '../../canvas-types'
+import { ResizePointTestId } from './absolute-resize-control'
+
+interface ResizeEdgeProps {
+  cursor: CSSCursor
+  direction: 'horizontal' | 'vertical'
+  position: EdgePosition
+  onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void
+  onMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void
+  onDoubleClick: (e: React.MouseEvent<HTMLDivElement>) => void
+}
+
+export const ResizeEdge = React.memo(
+  React.forwardRef<HTMLDivElement, ResizeEdgeProps>((props, ref) => {
+    return (
+      <div
+        ref={ref}
+        style={{
+          position: 'absolute',
+          backgroundColor: 'transparent',
+          cursor: props.cursor,
+          pointerEvents: 'initial',
+        }}
+        onMouseDown={props.onMouseDown}
+        onMouseMove={props.onMouseMove}
+        onDoubleClick={props.onDoubleClick}
+        data-testid={ResizePointTestId(props.position)}
+      />
+    )
+  }),
+)
+ResizeEdge.displayName = 'ResizeEdge'
diff --git a/editor/src/components/canvas/controls/select-mode/use-resize-edges.tsx b/editor/src/components/canvas/controls/select-mode/use-resize-edges.tsx
new file mode 100644
index 000000000000..34831303a362
--- /dev/null
+++ b/editor/src/components/canvas/controls/select-mode/use-resize-edges.tsx
@@ -0,0 +1,133 @@
+import React from 'react'
+import type { ElementPath } from '../../../../core/shared/project-file-types'
+import { Substores, useEditorState } from '../../../editor/store/store-hook'
+import type { EdgePosition } from '../../canvas-types'
+import { CSSCursor } from '../../canvas-types'
+import { SmallElementSize, useBoundingBox } from '../bounding-box-hooks'
+import { ResizeEdge } from './resize-edge'
+
+const RESIZE_MOUSE_AREA_SIZE = 10
+
+export function useResizeEdges(
+  targets: ElementPath[],
+  params: {
+    onEdgeMouseDown: (position: EdgePosition) => (e: React.MouseEvent<HTMLDivElement>) => void
+    onEdgeMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void
+    onEdgeDoubleClick: (
+      direction: 'horizontal' | 'vertical',
+    ) => (e: React.MouseEvent<HTMLDivElement>) => void
+    cursors?: {
+      top?: CSSCursor
+      left?: CSSCursor
+      bottom?: CSSCursor
+      right?: CSSCursor
+    }
+  },
+) {
+  const scale = useEditorState(
+    Substores.canvasOffset,
+    (store) => store.editor.canvas.scale,
+    'useResizeEdges scale',
+  )
+
+  const topRef = useBoundingBox(targets, (ref, boundingBox) => {
+    const isSmallElement = shouldUseSmallElementResizeControl(boundingBox.height, scale)
+    const lineSize = RESIZE_MOUSE_AREA_SIZE / scale
+    const height = isSmallElement ? lineSize / 2 : lineSize
+    const offsetLeft = `0px`
+    const offsetTop = `${-lineSize / 2}px`
+
+    ref.current.style.width = boundingBox.width + 'px'
+    ref.current.style.height = height + 'px'
+    ref.current.style.transform = `translate(${offsetLeft}, ${offsetTop})`
+  })
+
+  const leftRef = useBoundingBox(targets, (ref, boundingBox) => {
+    const isSmallElement = shouldUseSmallElementResizeControl(boundingBox.width, scale)
+    const lineSize = RESIZE_MOUSE_AREA_SIZE / scale
+    const width = isSmallElement ? lineSize / 2 : lineSize
+    const offsetLeft = `${-lineSize / 2}px`
+    const offsetTop = `0px`
+
+    ref.current.style.width = `${width}px`
+    ref.current.style.transform = `translate(${offsetLeft}, ${offsetTop})`
+    ref.current.style.height = boundingBox.height + 'px'
+  })
+
+  const bottomRef = useBoundingBox(targets, (ref, boundingBox) => {
+    const isSmallElement = shouldUseSmallElementResizeControl(boundingBox.height, scale)
+    const lineSize = RESIZE_MOUSE_AREA_SIZE / scale
+    const height = isSmallElement ? lineSize / 2 : lineSize
+    const offsetLeft = `0px`
+    const offsetTop = isSmallElement ? `0px` : `${-lineSize / 2}px`
+
+    ref.current.style.transform = `translate(${offsetLeft}, ${offsetTop})`
+    ref.current.style.top = boundingBox.height + 'px'
+    ref.current.style.width = boundingBox.width + 'px'
+    ref.current.style.height = height + 'px'
+  })
+
+  const rightRef = useBoundingBox(targets, (ref, boundingBox) => {
+    const isSmallElement = shouldUseSmallElementResizeControl(boundingBox.width, scale)
+    const lineSize = RESIZE_MOUSE_AREA_SIZE / scale
+    const width = isSmallElement ? lineSize / 2 : lineSize
+    const offsetLeft = isSmallElement ? `0px` : `${-lineSize / 2}px`
+    const offsetTop = `0px`
+
+    ref.current.style.transform = `translate(${offsetLeft}, ${offsetTop})`
+    ref.current.style.left = boundingBox.width + 'px'
+    ref.current.style.width = width + 'px'
+    ref.current.style.height = boundingBox.height + 'px'
+  })
+
+  return {
+    top: (
+      <ResizeEdge
+        ref={topRef}
+        position={{ x: 0.5, y: 0 }}
+        cursor={params.cursors?.top ?? CSSCursor.ResizeNS}
+        direction='horizontal'
+        onMouseDown={params.onEdgeMouseDown({ x: 0.5, y: 0 })}
+        onMouseMove={params.onEdgeMouseMove}
+        onDoubleClick={params.onEdgeDoubleClick('horizontal')}
+      />
+    ),
+    left: (
+      <ResizeEdge
+        ref={leftRef}
+        position={{ x: 0, y: 0.5 }}
+        cursor={params.cursors?.left ?? CSSCursor.ResizeEW}
+        direction='vertical'
+        onMouseDown={params.onEdgeMouseDown({ x: 0, y: 0.5 })}
+        onMouseMove={params.onEdgeMouseMove}
+        onDoubleClick={params.onEdgeDoubleClick('vertical')}
+      />
+    ),
+    bottom: (
+      <ResizeEdge
+        ref={bottomRef}
+        position={{ x: 0.5, y: 1 }}
+        cursor={params.cursors?.bottom ?? CSSCursor.ResizeNS}
+        direction='horizontal'
+        onMouseDown={params.onEdgeMouseDown({ x: 0.5, y: 1 })}
+        onMouseMove={params.onEdgeMouseMove}
+        onDoubleClick={params.onEdgeDoubleClick('horizontal')}
+      />
+    ),
+    right: (
+      <ResizeEdge
+        ref={rightRef}
+        position={{ x: 1, y: 0.5 }}
+        cursor={params.cursors?.right ?? CSSCursor.ResizeEW}
+        direction='vertical'
+        onMouseDown={params.onEdgeMouseDown({ x: 1, y: 0.5 })}
+        onMouseMove={params.onEdgeMouseMove}
+        onDoubleClick={params.onEdgeDoubleClick('vertical')}
+      />
+    ),
+  }
+}
+
+function shouldUseSmallElementResizeControl(size: number, scale: number): boolean {
+  return size <= SmallElementSize / scale
+}
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index 32eeadabddf6..2d6cadf9f718 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -911,6 +911,16 @@ export function isFixedHugFillModeApplied(
   )
 }
 
+export function isFillOrStretchModeApplied(
+  metadata: ElementInstanceMetadataMap,
+  element: ElementPath,
+): boolean {
+  return (
+    isFixedHugFillModeApplied(metadata, element, 'fill') ||
+    isFixedHugFillModeApplied(metadata, element, 'stretch')
+  )
+}
+
 export function isFixedHugFillModeAppliedOnAnySide(
   metadata: ElementInstanceMetadataMap,
   element: ElementPath,
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 4635c7a78aab..18108e135a96 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -54,10 +54,10 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()",
-  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
+  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
+  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
+  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
+  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
@@ -66,10 +66,10 @@ Array [
   "/Symbol(react.memo)()///div:data-testid='utopia-storyboard-uid/scene-aaa/app-entity:parent/ccc-absolute-resize-control'",
   "/Symbol(react.memo)()///Symbol(react.memo)()",
   "////div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/div:data-testid='resize-control-1-0.5'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/div:data-testid='resize-control-0.5-1'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/div:data-testid='resize-control-0-0.5'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/div:data-testid='resize-control-0.5-0'",
+  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0.5-0'",
+  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0-0.5'",
+  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0.5-1'",
+  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-1-0.5'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-0-0'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
@@ -834,10 +834,10 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()",
-  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
-  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)())",
+  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
+  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
+  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
+  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
@@ -846,10 +846,10 @@ Array [
   "/Symbol(react.memo)()///div:data-testid='utopia-storyboard-uid/scene-aaa/app-entity:parent/ccc-absolute-resize-control'",
   "/Symbol(react.memo)()///Symbol(react.memo)()",
   "////div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/div:data-testid='resize-control-1-0.5'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/div:data-testid='resize-control-0.5-1'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/div:data-testid='resize-control-0-0.5'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/div:data-testid='resize-control-0.5-0'",
+  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0.5-0'",
+  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0-0.5'",
+  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0.5-1'",
+  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-1-0.5'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-0-0'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",

From 942fc7d9806ead6b354ffe1ead262ee4fd82954c Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Mon, 14 Oct 2024 16:25:58 +0200
Subject: [PATCH 136/272] grid rearrange's pink outline no longer partially
 overlapped (#6530)

**Problem:**

![image](https://github.com/user-attachments/assets/268bb1ae-28f9-4384-a4ea-d1bc93a50c1c)

The active grid cell's pink outline would sometimes appear under the
grey outline drawn for non-hovered cells.

**Fix:**

![image](https://github.com/user-attachments/assets/e51e0198-5bba-447a-9816-40ba30e4202a)

- The cell that has the pink outline is now drawn with a z-index: 1
- The outline no longer uses opacity which causes errors in color when
they overlap
- This means the cell outlines no longer need to predict overlap and
avoid drawing right and bottom borders
---
 .../canvas/controls/grid-controls.tsx         | 24 +++++++------------
 editor/src/uuiui/styles/theme/dark.ts         |  1 +
 editor/src/uuiui/styles/theme/light.ts        |  1 +
 3 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index c3f9486c031a..7904bc99196b 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -821,10 +821,11 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
           const isActiveCell =
             countedColumn === currentHoveredCell?.column && countedRow === currentHoveredCell?.row
 
-          const borderColor =
-            isActiveCell && targetsAreCellsWithPositioning
-              ? colorTheme.brandNeonPink.value
-              : colorTheme.blackOpacity35.value
+          const activePositioningTarget = isActiveCell && targetsAreCellsWithPositioning
+
+          const borderColor = activePositioningTarget
+            ? colorTheme.brandNeonPink.value
+            : colorTheme.grey65.value
           return (
             <div
               key={id}
@@ -834,6 +835,7 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
               style={{
                 position: 'relative',
                 pointerEvents: 'initial',
+                zIndex: activePositioningTarget ? 1 : undefined,
               }}
               data-grid-row={countedRow}
               data-grid-column={countedColumn}
@@ -851,18 +853,8 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
                     height: gridPlaceholderWidthOrHeight(scale),
                     borderTop: gridPlaceholderBorder(borderColor, scale),
                     borderLeft: gridPlaceholderBorder(borderColor, scale),
-                    borderBottom:
-                      isActiveCell ||
-                      countedRow >= grid.rows ||
-                      (grid.rowGap != null && grid.rowGap > 0)
-                        ? gridPlaceholderBorder(borderColor, scale)
-                        : undefined,
-                    borderRight:
-                      isActiveCell ||
-                      countedColumn >= grid.columns ||
-                      (grid.columnGap != null && grid.columnGap > 0)
-                        ? gridPlaceholderBorder(borderColor, scale)
-                        : undefined,
+                    borderBottom: gridPlaceholderBorder(borderColor, scale),
+                    borderRight: gridPlaceholderBorder(borderColor, scale),
                   }}
                 />
               </React.Fragment>
diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
index 63c1564223f5..7e76faef77b3 100644
--- a/editor/src/uuiui/styles/theme/dark.ts
+++ b/editor/src/uuiui/styles/theme/dark.ts
@@ -134,6 +134,7 @@ const colorsWithOpacity = {
   whiteOpacity20: createUtopiColor('oklch(100% 0 0 /20%)'),
   whiteOpacity30: createUtopiColor('oklch(100% 0 0 /30%)'),
   whiteOpacity35: createUtopiColor('oklch(100% 0 0 /35%)'),
+  grey65: createUtopiColor('oklch(65% 0 0)'),
   blackOpacity35: createUtopiColor('oklch(0% 0 0 / 35%)'),
   canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(255,255,255,0.20)'),
   canvasControlsSizeBoxShadowColor50: createUtopiColor('rgba(255,255,255,0.5)'),
diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts
index 0063da12508d..ad00d11d5e84 100644
--- a/editor/src/uuiui/styles/theme/light.ts
+++ b/editor/src/uuiui/styles/theme/light.ts
@@ -136,6 +136,7 @@ const colorsWithOpacity = {
   whiteOpacity30: createUtopiColor('oklch(100% 0 0 /30%)'),
   whiteOpacity35: createUtopiColor('oklch(100% 0 0 /35%)'),
   blackOpacity35: createUtopiColor('oklch(0% 0 0 / 35%)'),
+  grey65: createUtopiColor('oklch(65% 0 0)'),
   canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(0,0,0,0.20)'),
   canvasControlsSizeBoxShadowColor50: createUtopiColor('rgba(0,0,0,0.5)'),
   neutralInvertedBackground10: createUtopiColor('hsla(0,0%,0%,0.1)'),

From 68773c1514f33cedae417d16656e45c615d2fab3 Mon Sep 17 00:00:00 2001
From: McKayla Lankau <lankaukk@yahoo.com>
Date: Mon, 14 Oct 2024 21:52:33 -0400
Subject: [PATCH 137/272] Unify toolbar insert icons (#6527)

---
 editor/src/components/editor/canvas-toolbar.tsx      | 12 ++++++++++--
 .../navigator/navigator-item/component-picker.tsx    |  1 +
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
index 0455691f97f2..c19eb1cbee9f 100644
--- a/editor/src/components/editor/canvas-toolbar.tsx
+++ b/editor/src/components/editor/canvas-toolbar.tsx
@@ -534,7 +534,7 @@ export const CanvasToolbar = React.memo(() => {
       {/* Insert Mode */}
       {canvasToolbarMode.primary === 'insert'
         ? wrapInSubmenu(
-            <FlexColumn style={{ padding: '3px 8px 0 8px', flexGrow: 1 }}>
+            <FlexColumn style={{ padding: '3px 8px 0 8px', flexGrow: 1, gap: 5 }}>
               <FlexRow>
                 <Tooltip title='Back' placement='bottom'>
                   <ToolbarButton
@@ -546,9 +546,11 @@ export const CanvasToolbar = React.memo(() => {
                 </Tooltip>
                 <Tooltip title='Insert div' placement='bottom'>
                   <ToolbarButton
-                    iconType='view'
+                    iconCategory='navigator-element'
+                    iconType='div'
                     secondary={canvasToolbarMode.secondary.divInsertionActive}
                     onClick={insertDivCallback}
+                    size={12}
                   />
                 </Tooltip>
                 <Tooltip title='Insert grid' placement='bottom'>
@@ -562,24 +564,30 @@ export const CanvasToolbar = React.memo(() => {
                 </Tooltip>
                 <Tooltip title='Insert image' placement='bottom'>
                   <ToolbarButton
+                    iconCategory='navigator-element'
                     iconType='image'
                     secondary={canvasToolbarMode.secondary.imageInsertionActive}
                     onClick={insertImgCallback}
+                    size={12}
                   />
                 </Tooltip>
                 <Tooltip title='Insert button' placement='bottom'>
                   <ToolbarButton
+                    iconCategory='navigator-element'
                     iconType='clickable'
                     secondary={canvasToolbarMode.secondary.buttonInsertionActive}
                     onClick={insertButtonCallback}
+                    size={12}
                   />
                 </Tooltip>
                 <Tooltip title='Insert conditional' placement='bottom'>
                   <ToolbarButton
                     testid={InsertConditionalButtonTestId}
+                    iconCategory='navigator-element'
                     iconType='conditional'
                     secondary={canvasToolbarMode.secondary.conditionalInsertionActive}
                     onClick={insertConditionalCallback}
+                    size={12}
                   />
                 </Tooltip>
               </FlexRow>
diff --git a/editor/src/components/navigator/navigator-item/component-picker.tsx b/editor/src/components/navigator/navigator-item/component-picker.tsx
index b050e167b14c..c6b73371b5a1 100644
--- a/editor/src/components/navigator/navigator-item/component-picker.tsx
+++ b/editor/src/components/navigator/navigator-item/component-picker.tsx
@@ -223,6 +223,7 @@ const ComponentPickerTopSection = React.memo((props: ComponentPickerTopSectionPr
         padding: shownInToolbar ? undefined : '0px 8px 8px 8px',
         display: 'flex',
         flexDirection: 'column',
+        marginBottom: 2,
       }}
       tabIndex={0}
     >

From fa5b82ad0a5f6279e3c6968954efd7cd2f9d82a7 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 15 Oct 2024 10:46:01 +0200
Subject: [PATCH 138/272] Grid auto cols/rows inspector control (#6533)

**Problem:**

The inspector should offer a way to control the `gridAutoRows` and
`gridAutoCols` props for a grid container.

**Fix:**

This PR adds a new control below the template cols and rows section in
the inspector for a selected grid, allowing to edit the related style
prop in the same way we edit other template values.



https://github.com/user-attachments/assets/93e5297d-6bfc-4b94-a6ac-276228bae4b1



Fixes #6532
---
 .../inspector/flex-section.spec.browser2.tsx  |  36 ++++++
 .../src/components/inspector/flex-section.tsx | 117 +++++++++++++++---
 2 files changed, 136 insertions(+), 17 deletions(-)

diff --git a/editor/src/components/inspector/flex-section.spec.browser2.tsx b/editor/src/components/inspector/flex-section.spec.browser2.tsx
index e624cd80e3ef..f191ed5c125a 100644
--- a/editor/src/components/inspector/flex-section.spec.browser2.tsx
+++ b/editor/src/components/inspector/flex-section.spec.browser2.tsx
@@ -2,6 +2,7 @@ import { selectComponentsForTest } from '../../utils/utils.test-utils'
 import { renderTestEditorWithCode } from '../canvas/ui-jsx.test-utils'
 import * as EP from '../../core/shared/element-path'
 import { act, fireEvent, screen } from '@testing-library/react'
+import { GridAutoColsOrRowsControlTestId } from './flex-section'
 
 describe('flex section', () => {
   describe('grid dimensions', () => {
@@ -75,6 +76,41 @@ describe('flex section', () => {
       expect(control.value).toBe('1fr')
     })
   })
+  describe('auto cols/rows', () => {
+    it('can set a number', async () => {
+      const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
+      await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
+      const control: HTMLInputElement = await screen.findByTestId(
+        GridAutoColsOrRowsControlTestId('column'),
+      )
+      await typeIntoField(control, '50px')
+      const grid = await renderResult.renderedDOM.findByTestId('grid')
+      expect(grid.style.gridAutoColumns).toEqual('50px')
+      expect(control.value).toBe('50px')
+    })
+    it('can set a keyword', async () => {
+      const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
+      await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
+      const control: HTMLInputElement = await screen.findByTestId(
+        GridAutoColsOrRowsControlTestId('column'),
+      )
+      await typeIntoField(control, 'min-content')
+      const grid = await renderResult.renderedDOM.findByTestId('grid')
+      expect(grid.style.gridAutoColumns).toEqual('min-content')
+      expect(control.value).toBe('min-content')
+    })
+    it('can set an expression', async () => {
+      const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
+      await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
+      const control: HTMLInputElement = await screen.findByTestId(
+        GridAutoColsOrRowsControlTestId('column'),
+      )
+      await typeIntoField(control, 'minmax(50px, 1fr)')
+      const grid = await renderResult.renderedDOM.findByTestId('grid')
+      expect(grid.style.gridAutoColumns).toEqual('minmax(50px, 1fr)')
+      expect(control.value).toBe('minmax(50px, 1fr)')
+    })
+  })
 })
 
 async function typeIntoField(target: HTMLElement, value: string | null) {
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 811c3bdd8b67..0e9fef71b0db 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -264,21 +264,7 @@ const TemplateDimensionControl = React.memo(
         (value: UnknownOrEmptyInput<CSSNumber | CSSKeyword<ValidGridDimensionKeyword>>) => {
           function getNewValue() {
             const gridValueAtIndex = values[index]
-            if (isCSSNumber(value)) {
-              const maybeUnit = isGridCSSNumber(gridValueAtIndex)
-                ? gridValueAtIndex.value.unit
-                : null
-              return gridCSSNumber(
-                cssNumber(value.value, value.unit ?? maybeUnit),
-                gridValueAtIndex.areaName,
-              )
-            } else if (isCSSKeyword(value)) {
-              return gridCSSKeyword(value, gridValueAtIndex.areaName)
-            } else if (isEmptyInputValue(value)) {
-              return gridCSSKeyword(cssKeyword('auto'), gridValueAtIndex.areaName)
-            } else {
-              return null
-            }
+            return parseGridDimensionInput(value, gridValueAtIndex ?? null)
           }
           const newValue = getNewValue()
           if (newValue == null) {
@@ -508,6 +494,7 @@ const TemplateDimensionControl = React.memo(
             opener={openDropdown}
           />
         ))}
+        <AutoColsOrRowsControl grid={grid} axis={axis} />
       </div>
     )
   },
@@ -588,10 +575,10 @@ function AxisDimensionControl({
           alignItems: 'center',
           gap: 6,
           gridTemplateColumns: gridExpressionInputFocused.focused
-            ? `40px auto`
+            ? '40px auto'
             : `40px auto ${UtopiaTheme.layout.inputHeight.default}px`,
           gridTemplateRows: '1fr',
-          width: `100%`,
+          width: '100%',
         }}
       >
         <Subdued
@@ -1112,3 +1099,99 @@ const useGridExpressionInputFocused = () => {
   const onBlur = React.useCallback(() => setFocused(false), [])
   return { focused, onFocus, onBlur }
 }
+
+function parseGridDimensionInput(
+  value: UnknownOrEmptyInput<CSSNumber | CSSKeyword<ValidGridDimensionKeyword>>,
+  currentValue: GridDimension | null,
+) {
+  if (isCSSNumber(value)) {
+    const maybeUnit =
+      currentValue != null && isGridCSSNumber(currentValue) ? currentValue.value.unit : null
+    return gridCSSNumber(
+      cssNumber(value.value, value.unit ?? maybeUnit),
+      currentValue?.areaName ?? null,
+    )
+  } else if (isCSSKeyword(value)) {
+    return gridCSSKeyword(value, currentValue?.areaName ?? null)
+  } else if (isEmptyInputValue(value)) {
+    return gridCSSKeyword(cssKeyword('auto'), currentValue?.areaName ?? null)
+  } else {
+    return null
+  }
+}
+
+const AutoColsOrRowsControl = React.memo(
+  (props: { axis: 'column' | 'row'; grid: ElementInstanceMetadata }) => {
+    const value = React.useMemo(() => {
+      const template = props.grid.specialSizeMeasurements.containerGridPropertiesFromProps
+      const data = props.axis === 'column' ? template.gridAutoColumns : template.gridAutoRows
+      if (data?.type !== 'DIMENSIONS') {
+        return null
+      }
+      return data.dimensions[0]
+    }, [props.grid, props.axis])
+
+    const dispatch = useDispatch()
+
+    const onUpdateDimension = React.useCallback(
+      (newDimension: GridDimension) => {
+        dispatch([
+          applyCommandsAction([
+            setProperty(
+              'always',
+              props.grid.elementPath,
+              PP.create('style', props.axis === 'column' ? 'gridAutoColumns' : 'gridAutoRows'),
+              printArrayGridDimensions([newDimension]),
+            ),
+          ]),
+        ])
+      },
+      [props.grid, props.axis, dispatch],
+    )
+
+    const onUpdateNumberOrKeyword = React.useCallback(
+      (newValue: UnknownOrEmptyInput<CSSNumber | CSSKeyword<ValidGridDimensionKeyword>>) => {
+        const parsed = parseGridDimensionInput(newValue, null)
+        if (parsed == null) {
+          return
+        }
+        onUpdateDimension(parsed)
+      },
+      [onUpdateDimension],
+    )
+
+    const autoColsOrRowsValueFocused = useGridExpressionInputFocused()
+
+    return (
+      <div
+        style={{
+          display: 'grid',
+          gridAutoFlow: 'column',
+          alignItems: 'center',
+          gap: 6,
+          gridTemplateColumns: autoColsOrRowsValueFocused.focused
+            ? '40px auto'
+            : `40px auto ${UtopiaTheme.layout.inputHeight.default}px`,
+          gridTemplateRows: '1fr',
+          width: '100%',
+        }}
+      >
+        <div>Default</div>
+        <GridExpressionInput
+          testId={GridAutoColsOrRowsControlTestId(props.axis)}
+          value={value ?? gridCSSKeyword(cssKeyword('auto'), null)}
+          onUpdateNumberOrKeyword={onUpdateNumberOrKeyword}
+          onUpdateDimension={onUpdateDimension}
+          onFocus={autoColsOrRowsValueFocused.onFocus}
+          onBlur={autoColsOrRowsValueFocused.onBlur}
+          keywords={gridDimensionDropdownKeywords}
+        />
+      </div>
+    )
+  },
+)
+AutoColsOrRowsControl.displayName = 'AutoColsOrRowsControl'
+
+export function GridAutoColsOrRowsControlTestId(axis: 'column' | 'row'): string {
+  return `grid-template-auto-${axis}`
+}

From 02e96210cec4cb7e141a87f88e32f4ec3688d3d7 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Tue, 15 Oct 2024 12:57:06 +0300
Subject: [PATCH 139/272] fix(server): upgrade Node version to 20 (#6531)

**Problem:**
Today our server Node version was 18, which was no longer LTS and even
broke some of the modern projects' dependencies.
<img width="1370" alt="image"
src="https://github.com/user-attachments/assets/c4f6ec9c-9345-491e-9169-28142e18c392">

**Fix:**
Upgrade the server Node version to 20.

![image](https://github.com/user-attachments/assets/649d7b4d-4e47-4bc6-a830-ff6578974511)


**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 server/default.nix | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/server/default.nix b/server/default.nix
index 7d6d520d8490..315bc308a9ca 100644
--- a/server/default.nix
+++ b/server/default.nix
@@ -1,13 +1,17 @@
 let
   release = (import ../release.nix {});
   pkgs = release.pkgs;
+  recentPkgs = release.recentPkgs;
+  # we set only the running Node to be 20.x, for project dependencies
+  node = recentPkgs.nodejs_20;
+  yarn = recentPkgs.yarn.override { nodejs = node; };
   compiler = "ghc902";
   utopia-server = pkgs.haskell.packages.${compiler}.callCabal2nix "utopia-server" ./. {};
   haskell = pkgs.haskell.lib;
   trivial = pkgs.lib.trivial;
   disableProfiling = pkg: haskell.disableLibraryProfiling (haskell.disableExecutableProfiling pkg);
   disableExternalTests = pkg: haskell.appendConfigureFlag pkg "--flags -enable-external-tests";
-  withNodeTooling = pkg: haskell.addBuildTools pkg [pkgs.nodejs pkgs.yarn];
+  withNodeTooling = pkg: haskell.addBuildTools pkg [node yarn];
   serverModifications = pkg: trivial.pipe pkg [disableProfiling disableExternalTests withNodeTooling];
   overriddenHaskellPackages = pkgs.haskell.packages.${compiler}.override {
     overrides = self: super: {

From b6a24012553c589214601b3f3efde63cefd1a657 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Tue, 15 Oct 2024 14:10:31 +0200
Subject: [PATCH 140/272] Remove unnecessary custom require function
 boilerplate (#6514)

## Problem
In multiple places there's unnecessary boilerplate code around creating
the custom `require` function.

## Fix
Remove the boilerplate code, since it's only necessary where we want to
inject `ComponentRendererComponent`s or or collect data in
`MutableUtopiaCtxRefData`

### Details
- updated snapshot tests in the property control descriptions tests,
which kept the file extension of the module key in a way that wasn't
consistent with the rest of the tests
- added a tests that makes sure that components in `RemixScene`s can be
focused (an earlier iteration of this PR broke component focusing in
`RemixScene`s)

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../remix/remix-rendering.spec.browser2.tsx   | 104 ++++++++++++++++++
 .../property-controls-local.spec.tsx          |   4 +-
 .../property-controls-local.ts                | 102 +++--------------
 .../src/core/tailwind/tailwind-compilation.ts |   6 +-
 4 files changed, 125 insertions(+), 91 deletions(-)

diff --git a/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx b/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx
index d31daf6c75b0..a514372eb581 100644
--- a/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx
+++ b/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx
@@ -31,6 +31,7 @@ import {
   MockClipboardHandlers,
   firePasteEvent,
   mouseClickAtPoint,
+  mouseDoubleClickAtPoint,
   mouseDownAtPoint,
   mouseDragFromPointWithDelta,
   pressKey,
@@ -812,6 +813,109 @@ describe('Remix content', () => {
       expectRemixSceneToBeRendered(renderResult),
     )
   })
+
+  it('Can focus component in remix', async () => {
+    const project = createModifiedProject({
+      [StoryboardFilePath]: `import * as React from 'react'
+      import { RemixScene, Storyboard } from 'utopia-api'
+      
+      export var storyboard = (
+        <Storyboard data-uid='storyboard'>
+          <RemixScene
+            data-uid='remix-scene'
+            style={{
+              width: 700,
+              height: 759,
+              position: 'absolute',
+              left: 212,
+              top: 128,
+            }}
+            data-label='Playground'
+          />
+        </Storyboard>
+      )
+      `,
+      ['/app/root.js']: `import React from 'react'
+      import { Outlet } from '@remix-run/react'
+      
+      export default function Root() {
+        return (
+          <div data-uid='rootdiv'>
+            ${RootTextContent}
+            <Outlet data-uid='outlet'/>
+          </div>
+        )
+      }
+      `,
+      '/app/routes/_index.js': `import React from 'react'
+      import { Hero } from './index/Hero.jsx'
+      import { Column } from './index/column.jsx'
+      
+      export default function Index() {
+        return (
+          <Column data-uid='index-column'>
+              <Hero data-uid='index-hero'>
+            </Hero>
+          </Column>
+        )
+      }
+      `,
+      '/app/routes/index/Hero.jsx': `import React from 'react'
+
+      export function Hero() {
+        return (
+          <div data-uid='index-container-div'>
+            <h1 data-uid='index-hero-h1' data-testid='index-hero-h1'>This is the hero section</h1>
+          </div>
+        )
+      }
+      `,
+      '/app/routes/index/column.jsx': `import React from 'react'
+      export function Column({ children }) {
+        return <div data-uid='index-column-div'>{children}</div>
+      }
+      `,
+    })
+    const renderResult = await renderRemixProject(project)
+
+    expect(
+      getNavigatorTargetsFromEditorState(renderResult.getEditorState().editor).navigatorTargets.map(
+        navigatorEntryToKey,
+      ),
+    ).toEqual([
+      'regular-storyboard/remix-scene',
+      'regular-storyboard/remix-scene:rootdiv',
+      'regular-storyboard/remix-scene:rootdiv/outlet',
+      'regular-storyboard/remix-scene:rootdiv/outlet:index-column',
+      'regular-storyboard/remix-scene:rootdiv/outlet:index-column/index-hero',
+    ])
+
+    const heroH1 = renderResult.renderedDOM.getByTestId('index-hero-h1')
+    const heroH1Bounds = heroH1.getBoundingClientRect()
+    const heroH1Center = windowPoint({
+      x: heroH1Bounds.x + heroH1Bounds.width / 2,
+      y: heroH1Bounds.y + heroH1Bounds.height / 2,
+    })
+
+    await mouseDoubleClickAtPoint(
+      renderResult.renderedDOM.getByTestId(CanvasControlsContainerID),
+      heroH1Center,
+    )
+
+    expect(
+      getNavigatorTargetsFromEditorState(renderResult.getEditorState().editor).navigatorTargets.map(
+        navigatorEntryToKey,
+      ),
+    ).toEqual([
+      'regular-storyboard/remix-scene',
+      'regular-storyboard/remix-scene:rootdiv',
+      'regular-storyboard/remix-scene:rootdiv/outlet',
+      'regular-storyboard/remix-scene:rootdiv/outlet:index-column',
+      'regular-storyboard/remix-scene:rootdiv/outlet:index-column/index-hero',
+      'regular-storyboard/remix-scene:rootdiv/outlet:index-column/index-hero:index-container-div',
+      'regular-storyboard/remix-scene:rootdiv/outlet:index-column/index-hero:index-container-div/index-hero-h1',
+    ])
+  })
 })
 
 describe('Remix getLoadContext', () => {
diff --git a/editor/src/core/property-controls/property-controls-local.spec.tsx b/editor/src/core/property-controls/property-controls-local.spec.tsx
index 3d0b448054b9..8302f3bbcd56 100644
--- a/editor/src/core/property-controls/property-controls-local.spec.tsx
+++ b/editor/src/core/property-controls/property-controls-local.spec.tsx
@@ -1648,7 +1648,7 @@ describe('registered property controls', () => {
                 Object {
                   "elementToInsert": [Function],
                   "importsToAdd": Object {
-                    "/src/card2.js": Object {
+                    "/src/card2": Object {
                       "importedAs": null,
                       "importedFromWithin": Array [
                         Object {
@@ -1914,7 +1914,7 @@ describe('registered property controls', () => {
                       Object {
                         "elementToInsert": [Function],
                         "importsToAdd": Object {
-                          "/src/card2.js": Object {
+                          "/src/card2": Object {
                             "importedAs": null,
                             "importedFromWithin": Array [
                               Object {
diff --git a/editor/src/core/property-controls/property-controls-local.ts b/editor/src/core/property-controls/property-controls-local.ts
index ffd05dff6e82..3449b3322b0a 100644
--- a/editor/src/core/property-controls/property-controls-local.ts
+++ b/editor/src/core/property-controls/property-controls-local.ts
@@ -97,7 +97,7 @@ import {
   type ComponentRendererComponent,
 } from '../../components/canvas/ui-jsx-canvas-renderer/component-renderer-component'
 import type { MapLike } from 'typescript'
-import { attemptToResolveParsedComponents } from '../../components/canvas/ui-jsx-canvas'
+import { emptyUiJsxCanvasContextData } from '../../components/canvas/ui-jsx-canvas'
 import { NO_OP } from '../shared/utils'
 import { createExecutionScope } from '../../components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-execution-scope'
 import type { EditorDispatch } from '../../components/editor/action-types'
@@ -157,93 +157,23 @@ function extendExportsWithInfo(exports: any, toImport: string): any {
   return exports
 }
 
-export const createRequireFn = (
-  editor: EditorState,
-  moduleName: string,
-  transform: (result: any, absoluteFilenameOrPackage: string) => any = identity,
-) => {
-  let mutableContextRef: { current: MutableUtopiaCtxRefData } = { current: {} }
-  let topLevelComponentRendererComponents: {
-    current: MapLike<MapLike<ComponentRendererComponent>>
-  } = { current: {} }
-  const emptyMetadataContext: UiJsxCanvasContextData = {
-    current: {
-      spyValues: {
-        allElementProps: {},
-        metadata: {},
-        variablesInScope: {},
-      },
-    },
-  }
-
-  let resolvedFiles: MapLike<MapLike<any>> = {}
-  let resolvedFileNames: Array<string> = [moduleName]
-
-  const requireFn = editor.codeResultCache.curriedRequireFn(editor.projectContents)
-  const resolve = editor.codeResultCache.curriedResolveFn(editor.projectContents)
-
-  const customRequire = (importOrigin: string, toImport: string) => {
-    if (resolvedFiles[importOrigin] == null) {
-      resolvedFiles[importOrigin] = []
-    }
-    let resolvedFromThisOrigin = resolvedFiles[importOrigin]
-
-    const alreadyResolved = resolvedFromThisOrigin[toImport] !== undefined
-    const filePathResolveResult = alreadyResolved
-      ? left<string, string>('Already resolved')
-      : resolve(importOrigin, toImport)
-
-    forEachRight(filePathResolveResult, (filepath) => resolvedFileNames.push(filepath))
-
-    const resolvedParseSuccess: Either<string, MapLike<any>> = attemptToResolveParsedComponents(
-      resolvedFromThisOrigin,
-      toImport,
-      editor.projectContents,
-      customRequire,
-      mutableContextRef,
-      topLevelComponentRendererComponents,
-      moduleName,
-      editor.canvas.base64Blobs,
-      editor.hiddenInstances,
-      editor.displayNoneInstances,
-      emptyMetadataContext,
-      NO_OP,
-      false,
-      filePathResolveResult,
-      null,
-    )
-    const result = foldEither(
-      () => {
-        // We did not find a ParseSuccess, fallback to standard require Fn
-        return requireFn(importOrigin, toImport, false)
-      },
-      (scope) => {
-        // Return an artificial exports object that contains our ComponentRendererComponents
-        return scope
-      },
-      resolvedParseSuccess,
-    )
-    const absoluteFilenameOrPackage = defaultEither(toImport, filePathResolveResult)
-    return transform(result, absoluteFilenameOrPackage)
-  }
-
-  return {
-    customRequire,
-    emptyMetadataContext,
-    mutableContextRef,
-    topLevelComponentRendererComponents,
-  }
-}
-
 export type ModuleEvaluator = (moduleName: string) => any
 export function createModuleEvaluator(editor: EditorState): ModuleEvaluator {
   return (moduleName: string) => {
-    const {
-      customRequire,
-      emptyMetadataContext,
-      mutableContextRef,
-      topLevelComponentRendererComponents,
-    } = createRequireFn(editor, moduleName, extendExportsWithInfo)
+    const requireFn = editor.codeResultCache.curriedRequireFn(editor.projectContents)
+    const resolveFn = editor.codeResultCache.curriedResolveFn(editor.projectContents)
+    const customRequire = (importOrigin: string, toImport: string) => {
+      const result = requireFn(importOrigin, toImport, false)
+      const filePathResolveResult = resolveFn(importOrigin, toImport)
+      const absoluteFilenameOrPackage = defaultEither(toImport, filePathResolveResult)
+      return extendExportsWithInfo(result, dropFileExtension(absoluteFilenameOrPackage))
+    }
+
+    let mutableContextRef: { current: MutableUtopiaCtxRefData } = { current: {} }
+    let topLevelComponentRendererComponents: {
+      current: MapLike<MapLike<ComponentRendererComponent>>
+    } = { current: {} }
+
     return createExecutionScope(
       moduleName,
       customRequire,
@@ -254,7 +184,7 @@ export function createModuleEvaluator(editor: EditorState): ModuleEvaluator {
       editor.canvas.base64Blobs,
       editor.hiddenInstances,
       editor.displayNoneInstances,
-      emptyMetadataContext,
+      emptyUiJsxCanvasContextData(),
       NO_OP,
       false,
       null,
diff --git a/editor/src/core/tailwind/tailwind-compilation.ts b/editor/src/core/tailwind/tailwind-compilation.ts
index 78f5ef83eae0..972fee42cc9c 100644
--- a/editor/src/core/tailwind/tailwind-compilation.ts
+++ b/editor/src/core/tailwind/tailwind-compilation.ts
@@ -18,7 +18,6 @@ import { ElementsToRerenderGLOBAL } from '../../components/canvas/ui-jsx-canvas'
 import { isFeatureEnabled } from '../../utils/feature-switches'
 import type { Config } from 'tailwindcss/types/config'
 import type { EditorState } from '../../components/editor/store/editor-state'
-import { createRequireFn } from '../property-controls/property-controls-local'
 
 const LatestConfig: { current: { code: string; config: Config } | null } = { current: null }
 export function getTailwindConfigCached(editorState: EditorState): Config | null {
@@ -34,8 +33,9 @@ export function getTailwindConfigCached(editorState: EditorState): Config | null
   if (cached != null) {
     return cached
   }
-  // FIXME this should use a shared long-lived require function instead of creating a brand new one
-  const { customRequire } = createRequireFn(editorState, TailwindConfigPath)
+  const requireFn = editorState.codeResultCache.curriedRequireFn(editorState.projectContents)
+  const customRequire = (importOrigin: string, toImport: string) =>
+    requireFn(importOrigin, toImport, false)
   const config = importDefault(customRequire('/', TailwindConfigPath)) as Config
   LatestConfig.current = { code: tailwindConfig.fileContents.code, config: config }
 

From b0bdeaffaa2ed1203ed7f4972a8ddf660216e775 Mon Sep 17 00:00:00 2001
From: RheeseyB <1044774+Rheeseyb@users.noreply.github.com>
Date: Tue, 15 Oct 2024 13:10:49 +0100
Subject: [PATCH 141/272] Removed a cyclic dependency from math-utils.ts
 (#6535)

**Problem:**
There has always been a cyclic dependency between `math-utils.ts` and
`array-utils.ts`, but for some reason it has started causing a runtime
error over the last few days:

![image](https://github.com/user-attachments/assets/55c10392-1587-4155-9571-60cdc7e1dbfb)

**Fix:**
`math-utils.ts` was importing a function `stripNulls` from
`array-utils.ts`, so I've removed the import and copied the function.
The fix could have been applied in the opposite direction, but I've
chosen this direction as it seems more likely that at a future date we'd
want to import another math function into `array-utils` than vice versa.
---
 editor/src/core/shared/math-utils.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/editor/src/core/shared/math-utils.ts b/editor/src/core/shared/math-utils.ts
index 37d54197e16e..4978b144f4bf 100644
--- a/editor/src/core/shared/math-utils.ts
+++ b/editor/src/core/shared/math-utils.ts
@@ -1,4 +1,3 @@
-import { stripNulls } from './array-utils'
 import type { Either } from './either'
 import { left, right, mapEither } from './either'
 
@@ -639,6 +638,17 @@ export function combineRectangles<C extends CoordinateMarker>(
   } as Rectangle<C>
 }
 
+// Copied from array-utils.ts to prevent a cyclic dependency
+function stripNulls<T>(array: Array<T | null | undefined>): Array<T> {
+  var workingArray: Array<T> = []
+  for (const value of array) {
+    if (value !== null && value !== undefined) {
+      workingArray.push(value)
+    }
+  }
+  return workingArray
+}
+
 export function boundingRectangleArray<C extends CoordinateMarker>(
   rectangles: Array<Rectangle<C> | null>,
 ): Rectangle<C> | null {

From a4487d50e7bfa911aaa0497095721dfe2ac47bfa Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Tue, 15 Oct 2024 15:46:21 +0200
Subject: [PATCH 142/272] fix(grid): zero length grid cell bounds (#6536)

**Problem:**
no gaps cause a null pointer exception

**Fix:**
check for array length and not just a null check.

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 editor/src/components/canvas/gap-utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
index b882f88a0264..e2e980f3e4d0 100644
--- a/editor/src/components/canvas/gap-utils.ts
+++ b/editor/src/components/canvas/gap-utils.ts
@@ -223,7 +223,7 @@ export function gridGapControlBoundsFromMetadata(
 
   const gridCellBounds = grid.specialSizeMeasurements.gridCellGlobalFrames
 
-  if (gridCellBounds == null) {
+  if (gridCellBounds == null || gridCellBounds.length == 0) {
     return emptyResult
   }
   const allCellsBound = canvasRectangle({

From 66fc4c8f9e4ac4c085a416a3a6c7de6c36737955 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Tue, 15 Oct 2024 17:31:11 +0200
Subject: [PATCH 143/272] GridMeasurementHelper component to continuously
 measure grid cells (#6517)

**Problem:**
When you reparent from a grid to another grid, for a single frame the
element blinks at the same cell position as it was in the original grid:
https://screenshot.click/09-31-10wrd-ysw94.mp4

**Root cause:**
As you hover over the target grid, the grid-reparent-strategy is
selected. It triggers a showGridControl command, so the grid control is
shown and the cells can be measured. However, it won't be able to
position to the real target cell in this frame yet, because the control
is not enabled yet, so we don't have the cell bounds in the metadata.

**Fix:**
Instead of using grid controls to measure let show permanent grid
measurement helpers so grids can always be measured.

**Commit Details:** (< vv pls delete this section if's not relevant)

- Added memoized function `getAllGrids` which returns all the grids from
the metadata
- Added `GridMeasurementHelper` component which renders a grid with
placeholder divs in its cells (similarly to `GridControl`, but much-much
simpler)
- Rendering `GridMeasurementHelper` for all grids
- Use rendered grid measurement helpers in dom-walker to measure the
size of grid cell bounds
- Remove all the hacks (most notably `getMetadataWithGridCellBounds`)
which made it possible to use latestMetadata in interaction when
startingMetadata did not include grid cell bounds. This is not needed
anymore, because the grid cells are always measured using the always-on
`GridMeasurementHelper` components

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../grid-draw-to-insert-strategy.tsx          |  14 +-
 .../strategies/grid-helpers.ts                |  56 ------
 .../strategies/grid-reparent-strategy.tsx     |  24 +--
 .../grid-resize-element-strategy.ts           |  17 +-
 .../controls/grid-controls-for-strategies.tsx |  71 +++++++-
 .../canvas/controls/grid-controls.tsx         | 162 ++++++++++++++----
 .../canvas/controls/new-canvas-controls.tsx   |   7 +-
 editor/src/components/canvas/dom-walker.ts    |   5 +-
 .../src/core/model/element-metadata-utils.ts  |   5 +
 ...performance-regression-tests.spec.tsx.snap |  26 ++-
 .../performance-regression-tests.spec.tsx     |   8 +-
 11 files changed, 249 insertions(+), 146 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index 7dae405f06a4..fea428a411d8 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -43,7 +43,7 @@ import {
   getStyleAttributesForFrameInAbsolutePosition,
   updateInsertionSubjectWithAttributes,
 } from './draw-to-insert-metastrategy'
-import { getMetadataWithGridCellBounds, setGridPropsCommands } from './grid-helpers'
+import { setGridPropsCommands } from './grid-helpers'
 import { newReparentSubjects } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentTargetUnified } from './reparent-helpers/reparent-strategy-parent-lookup'
 import { getGridCellUnderMouseFromMetadata } from './grid-cell-bounds'
@@ -132,13 +132,10 @@ const gridDrawToInsertStrategyInner =
       canvasState.propertyControlsInfo,
     )?.newParent.intendedParentPath
 
-    const { metadata: parent, customStrategyState: updatedCustomState } =
-      getMetadataWithGridCellBounds(
-        targetParent,
-        canvasState.startingMetadata,
-        interactionSession.latestMetadata,
-        customStrategyState,
-      )
+    const parent = MetadataUtils.findElementByElementPath(
+      canvasState.startingMetadata,
+      targetParent,
+    )
 
     if (targetParent == null || parent == null || !MetadataUtils.isGridLayoutedContainer(parent)) {
       return null
@@ -175,7 +172,6 @@ const gridDrawToInsertStrategyInner =
               updateHighlightedViews('mid-interaction', [targetParent]),
             ],
             [targetParent],
-            updatedCustomState ?? undefined,
           )
         }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index bf51b4149b2c..8f871138c922 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -710,62 +710,6 @@ export function getGridRelatedIndexes(params: {
   return expandedRelatedIndexes[params.index] ?? []
 }
 
-export function getMetadataWithGridCellBounds(
-  path: ElementPath | null | undefined,
-  startingMetadata: ElementInstanceMetadataMap,
-  latestMetadata: ElementInstanceMetadataMap,
-  customStrategyState: CustomStrategyState,
-): {
-  metadata: ElementInstanceMetadata | null
-  customStrategyState: CustomStrategyState | null
-} {
-  if (path == null) {
-    return {
-      metadata: null,
-      customStrategyState: null,
-    }
-  }
-
-  const fromStartingMetadata = MetadataUtils.findElementByElementPath(startingMetadata, path)
-
-  if (fromStartingMetadata?.specialSizeMeasurements.gridCellGlobalFrames != null) {
-    return {
-      metadata: fromStartingMetadata,
-      customStrategyState: null,
-    }
-  }
-
-  const fromStrategyState = customStrategyState.grid.metadataCacheForGrids[EP.toString(path)]
-  if (fromStrategyState != null) {
-    return {
-      metadata: fromStrategyState,
-      customStrategyState: null,
-    }
-  }
-
-  const fromLatestMetadata = MetadataUtils.findElementByElementPath(latestMetadata, path)
-  if (fromLatestMetadata?.specialSizeMeasurements.gridCellGlobalFrames != null) {
-    return {
-      metadata: fromLatestMetadata,
-      customStrategyState: {
-        ...customStrategyState,
-        grid: {
-          ...customStrategyState.grid,
-          metadataCacheForGrids: {
-            ...customStrategyState.grid.metadataCacheForGrids,
-            [EP.toString(path)]: fromLatestMetadata,
-          },
-        },
-      },
-    }
-  }
-
-  return {
-    metadata: fromStartingMetadata,
-    customStrategyState: null,
-  }
-}
-
 function getOriginalElementGridConfiguration(
   gridCellGlobalFrames: GridCellGlobalFrames,
   interactionData: DragInteractionData,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 9546b40916f7..cd20d3fa7db4 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -17,7 +17,6 @@ import type { InsertionPath } from '../../../editor/store/insertion-path'
 import { CSSCursor } from '../../canvas-types'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 import { propertyToSet, updateBulkProperties } from '../../commands/set-property-command'
-import { showGridControls } from '../../commands/show-grid-controls-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
 import { ParentBounds } from '../../controls/parent-bounds'
@@ -39,7 +38,7 @@ import {
 import type { DragInteractionData, InteractionSession, UpdatedPathMap } from '../interaction-state'
 import { honoursPropsPosition, shouldKeepMovingDraggedGroupChildren } from './absolute-utils'
 import { replaceFragmentLikePathsWithTheirChildrenRecursive } from './fragment-like-helpers'
-import { getMetadataWithGridCellBounds, runGridRearrangeMove } from './grid-helpers'
+import { runGridRearrangeMove } from './grid-helpers'
 import { ifAllowedToReparent, isAllowedToReparent } from './reparent-helpers/reparent-helpers'
 import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-property-changes'
 import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers'
@@ -164,13 +163,10 @@ export function applyGridReparent(
           return emptyStrategyApplicationResult
         }
 
-        const { metadata: grid, customStrategyState: updatedCustomState } =
-          getMetadataWithGridCellBounds(
-            newParent.intendedParentPath,
-            canvasState.startingMetadata,
-            interactionSession.latestMetadata,
-            customStrategyState,
-          )
+        const grid = MetadataUtils.findElementByElementPath(
+          canvasState.startingMetadata,
+          newParent.intendedParentPath,
+        )
 
         if (grid == null) {
           return strategyApplicationResult([], [newParent.intendedParentPath])
@@ -231,12 +227,6 @@ export function applyGridReparent(
           newParent.intendedParentPath,
         ])
 
-        const baseCustomState = updatedCustomState ?? customStrategyState
-        const customStrategyStatePatch = {
-          ...baseCustomState,
-          elementsToRerender: elementsToRerender,
-        }
-
         return strategyApplicationResult(
           [
             ...outcomes.flatMap((c) => c.commands),
@@ -245,7 +235,9 @@ export function applyGridReparent(
             setCursorCommand(CSSCursor.Reparent),
           ],
           elementsToRerender,
-          customStrategyStatePatch,
+          {
+            elementsToRerender: elementsToRerender,
+          },
         )
       },
     )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index fbd27c0778ba..ed1a5e39d48b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -1,12 +1,10 @@
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
-import type { GridElementProperties, GridPosition } from '../../../../core/shared/element-template'
 import {
   type CanvasRectangle,
   isInfinityRectangle,
   rectangleIntersection,
 } from '../../../../core/shared/math-utils'
-import { isCSSKeyword } from '../../../inspector/common/css-utils'
 import { isFillOrStretchModeApplied } from '../../../inspector/inspector-common'
 import {
   controlsForGridPlaceholders,
@@ -22,13 +20,12 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { getMetadataWithGridCellBounds, setGridPropsCommands } from './grid-helpers'
+import { setGridPropsCommands } from './grid-helpers'
 import { resizeBoundingBoxFromSide } from './resize-helpers'
 
 export const gridResizeElementStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
   interactionSession: InteractionSession | null,
-  customState,
 ) => {
   const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget)
   if (selectedElements.length !== 1) {
@@ -86,13 +83,10 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
-      const { metadata: container, customStrategyState: updatedCustomState } =
-        getMetadataWithGridCellBounds(
-          EP.parentPath(selectedElement),
-          canvasState.startingMetadata,
-          interactionSession.latestMetadata,
-          customState,
-        )
+      const container = MetadataUtils.findElementByElementPath(
+        canvasState.startingMetadata,
+        EP.parentPath(selectedElement),
+      )
 
       if (container == null) {
         return emptyStrategyApplicationResult
@@ -123,7 +117,6 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
       return strategyApplicationResult(
         setGridPropsCommands(selectedElement, gridTemplate, gridProps),
         [parentGridPath],
-        updatedCustomState ?? undefined,
       )
     },
   }
diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index c1e6beda11d3..5d6fd793dfe5 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -1,5 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
+import fastDeepEqual from 'fast-deep-equal'
 import type { Sides } from 'utopia-api/core'
 import type { ElementPath } from 'utopia-shared/src/types'
 import { isStaticGridRepeat, printGridAutoOrTemplateBase } from '../../inspector/common/css-utils'
@@ -61,22 +62,72 @@ export function getNullableAutoOrTemplateBaseString(
   }
 }
 
-export type GridData = {
-  elementPath: ElementPath
+export type GridMeasurementHelperData = {
   frame: CanvasRectangle
   gridTemplateColumns: GridAutoOrTemplateBase | null
   gridTemplateRows: GridAutoOrTemplateBase | null
-  gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null
-  gridTemplateRowsFromProps: GridAutoOrTemplateBase | null
   gap: number | null
-  justifyContent: string | null
-  alignContent: string | null
   rowGap: number | null
   columnGap: number | null
+  justifyContent: string | null
+  alignContent: string | null
   padding: Sides
-  rows: number
   columns: number
   cells: number
+}
+
+export function useGridMeasurentHelperData(
+  elementPath: ElementPath,
+): GridMeasurementHelperData | null {
+  return useEditorState(
+    Substores.metadata,
+    (store) => {
+      const element = MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, elementPath)
+
+      const targetGridContainer = MetadataUtils.isGridLayoutedContainer(element) ? element : null
+
+      if (
+        targetGridContainer == null ||
+        targetGridContainer.globalFrame == null ||
+        !isFiniteRectangle(targetGridContainer.globalFrame)
+      ) {
+        return null
+      }
+
+      const columns = getCellsCount(
+        targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns,
+      )
+      const rows = getCellsCount(
+        targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows,
+      )
+
+      return {
+        frame: targetGridContainer.globalFrame,
+        gridTemplateColumns:
+          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns,
+        gridTemplateRows:
+          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows,
+        gap: targetGridContainer.specialSizeMeasurements.gap,
+        rowGap: targetGridContainer.specialSizeMeasurements.rowGap,
+        columnGap: targetGridContainer.specialSizeMeasurements.columnGap,
+        justifyContent: targetGridContainer.specialSizeMeasurements.justifyContent,
+        alignContent: targetGridContainer.specialSizeMeasurements.alignContent,
+        padding: targetGridContainer.specialSizeMeasurements.padding,
+        columns: columns,
+        cells: rows * columns,
+      }
+    },
+    'useGridMeasurentHelperData',
+    fastDeepEqual, //TODO: this should not be needed, but it seems EditorStateKeepDeepEquality is not running, and metadata reference is always updated
+  )
+}
+
+export type GridData = GridMeasurementHelperData & {
+  elementPath: ElementPath
+  gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null
+  gridTemplateRowsFromProps: GridAutoOrTemplateBase | null
+  rows: number
+  cells: number
   metadata: ElementInstanceMetadata
 }
 
@@ -156,6 +207,12 @@ export const GridRowColumnResizingControls =
   )
 
 export const GridControlsKey = (gridPath: ElementPath) => `grid-controls-${EP.toString(gridPath)}`
+export const GridControlKey = (gridPath: ElementPath) => `grid-control-${EP.toString(gridPath)}`
+
+export const GridMeasurementHelpersKey = (gridPath: ElementPath) =>
+  `grid-measurement-helpers-${EP.toString(gridPath)}`
+export const GridMeasurementHelperKey = (gridPath: ElementPath) =>
+  `grid-measurement-helper-${EP.toString(gridPath)}`
 
 export interface GridControlProps {
   grid: GridData
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 7904bc99196b..9393c96963bb 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -11,7 +11,10 @@ import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { mapDropNulls, range, stripNulls, uniqBy } from '../../../core/shared/array-utils'
 import { defaultEither } from '../../../core/shared/either'
 import * as EP from '../../../core/shared/element-path'
-import type { GridAutoOrTemplateDimensions } from '../../../core/shared/element-template'
+import type {
+  ElementInstanceMetadataMap,
+  GridAutoOrTemplateDimensions,
+} from '../../../core/shared/element-template'
 import {
   isGridAutoOrTemplateDimensions,
   type GridAutoOrTemplateBase,
@@ -71,13 +74,21 @@ import { windowToCanvasCoordinates } from '../dom-lookup'
 import type { Axis } from '../gap-utils'
 import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
 import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
-import type { GridControlsProps, GridData } from './grid-controls-for-strategies'
+import type {
+  GridControlsProps,
+  GridData,
+  GridMeasurementHelperData,
+} from './grid-controls-for-strategies'
 import {
   edgePositionToGridResizeEdge,
   getNullableAutoOrTemplateBaseString,
   GridCellTestId,
+  GridControlKey,
   gridEdgeToEdgePosition,
+  GridMeasurementHelperKey,
+  GridMeasurementHelpersKey,
   useGridData,
+  useGridMeasurentHelperData,
 } from './grid-controls-for-strategies'
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 import { useResizeEdges } from './select-mode/use-resize-edges'
@@ -763,44 +774,14 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
   })
 
   const placeholders = range(0, grid.cells)
-  let style: CSSProperties = {
-    position: 'absolute',
-    top: grid.frame.y,
-    left: grid.frame.x,
-    width: grid.frame.width,
-    height: grid.frame.height,
-    display: 'grid',
-    gridTemplateColumns: getNullableAutoOrTemplateBaseString(grid.gridTemplateColumns),
-    gridTemplateRows: getNullableAutoOrTemplateBaseString(grid.gridTemplateRows),
+
+  const style: CSSProperties = {
+    ...getGridControlBaseStyle(grid),
     backgroundColor:
       activelyDraggingOrResizingCell != null ? colorTheme.primary10.value : 'transparent',
     outline: `1px solid ${
       activelyDraggingOrResizingCell != null ? colorTheme.primary.value : 'transparent'
     }`,
-    justifyContent: grid.justifyContent ?? 'initial',
-    alignContent: grid.alignContent ?? 'initial',
-    pointerEvents: 'none',
-    padding:
-      grid.padding == null
-        ? 0
-        : `${grid.padding.top}px ${grid.padding.right}px ${grid.padding.bottom}px ${grid.padding.left}px`,
-  }
-
-  // Gap needs to be set only if the other two are not present or we'll have rendering issues
-  // due to how measurements are calculated.
-  if (grid.rowGap != null && grid.columnGap != null) {
-    style.rowGap = grid.rowGap
-    style.columnGap = grid.columnGap
-  } else {
-    if (grid.gap != null) {
-      style.gap = grid.gap
-    }
-    if (grid.rowGap != null) {
-      style.rowGap = grid.rowGap
-    }
-    if (grid.columnGap != null) {
-      style.columnGap = grid.columnGap
-    }
   }
 
   return (
@@ -926,6 +907,70 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
 })
 GridControl.displayName = 'GridControl'
 
+export const GridMeasurementHelpers = React.memo(() => {
+  const metadata = useEditorState(
+    Substores.metadata,
+    (store) => store.editor.jsxMetadata,
+    'GridMeasurementHelpers metadata',
+  )
+
+  const grids = useAllGrids(metadata)
+
+  return (
+    <CanvasOffsetWrapper>
+      {grids.map((grid) => {
+        return <GridMeasurementHelper key={GridMeasurementHelpersKey(grid)} elementPath={grid} />
+      })}
+    </CanvasOffsetWrapper>
+  )
+})
+GridMeasurementHelpers.displayName = 'GridMeasurementHelpers'
+
+export interface GridMeasurementHelperProps {
+  elementPath: ElementPath
+}
+
+const GridMeasurementHelper = React.memo<{ elementPath: ElementPath }>(({ elementPath }) => {
+  const gridData = useGridMeasurentHelperData(elementPath)
+
+  if (gridData == null) {
+    return null
+  }
+
+  const placeholders = range(0, gridData.cells)
+
+  const style: CSSProperties = {
+    ...getGridControlBaseStyle(gridData),
+    opacity: 1,
+  }
+
+  return (
+    <div
+      id={GridMeasurementHelperKey(elementPath)}
+      data-grid-path={EP.toString(elementPath)}
+      style={style}
+    >
+      {placeholders.map((cell) => {
+        const countedRow = Math.floor(cell / gridData.columns) + 1
+        const countedColumn = Math.floor(cell % gridData.columns) + 1
+        const id = `${GridMeasurementHelperKey(elementPath)}-${countedRow}-${countedColumn}`
+        return (
+          <div
+            key={id}
+            style={{
+              position: 'relative',
+              pointerEvents: 'none',
+            }}
+            data-grid-row={countedRow}
+            data-grid-column={countedColumn}
+          />
+        )
+      })}
+    </div>
+  )
+})
+GridMeasurementHelper.displayName = 'GridMeasurementHelper'
+
 export const GridControlsComponent = ({ targets }: GridControlsProps) => {
   const targetRootCell = useEditorState(
     Substores.canvas,
@@ -949,7 +994,7 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
     <div id={'grid-controls'}>
       <CanvasOffsetWrapper>
         {grids.map((grid) => {
-          return <GridControl key={`grid-control-${EP.toString(grid.elementPath)}`} grid={grid} />
+          return <GridControl key={GridControlKey(grid.elementPath)} grid={grid} />
         })}
         <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
       </CanvasOffsetWrapper>
@@ -1592,3 +1637,48 @@ function gridPlaceholderTopOrLeftPosition(scale: number): string {
 function gridPlaceholderWidthOrHeight(scale: number): string {
   return `calc(100% + ${(borderExtension * 2) / scale}px)`
 }
+
+function useAllGrids(metadata: ElementInstanceMetadataMap) {
+  return React.useMemo(() => {
+    return MetadataUtils.getAllGrids(metadata)
+  }, [metadata])
+}
+
+function getGridControlBaseStyle(gridData: GridMeasurementHelperData) {
+  let style: CSSProperties = {
+    position: 'absolute',
+    top: gridData.frame.y,
+    left: gridData.frame.x,
+    width: gridData.frame.width,
+    height: gridData.frame.height,
+    display: 'grid',
+    gridTemplateColumns: getNullableAutoOrTemplateBaseString(gridData.gridTemplateColumns),
+    gridTemplateRows: getNullableAutoOrTemplateBaseString(gridData.gridTemplateRows),
+    justifyContent: gridData.justifyContent ?? 'initial',
+    alignContent: gridData.alignContent ?? 'initial',
+    pointerEvents: 'none',
+    padding:
+      gridData.padding == null
+        ? 0
+        : `${gridData.padding.top}px ${gridData.padding.right}px ${gridData.padding.bottom}px ${gridData.padding.left}px`,
+  }
+
+  // Gap needs to be set only if the other two are not present or we'll have rendering issues
+  // due to how measurements are calculated.
+  if (gridData.rowGap != null && gridData.columnGap != null) {
+    style.rowGap = gridData.rowGap
+    style.columnGap = gridData.columnGap
+  } else {
+    if (gridData.gap != null) {
+      style.gap = gridData.gap
+    }
+    if (gridData.rowGap != null) {
+      style.rowGap = gridData.rowGap
+    }
+    if (gridData.columnGap != null) {
+      style.columnGap = gridData.columnGap
+    }
+  }
+
+  return style
+}
diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx
index be85b3261131..344d57ed840d 100644
--- a/editor/src/components/canvas/controls/new-canvas-controls.tsx
+++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx
@@ -24,6 +24,7 @@ import { ElementContextMenu } from '../../element-context-menu'
 import type { Mode } from '../../editor/editor-modes'
 import {
   isCommentMode,
+  isInsertMode,
   isLiveMode,
   isSelectMode,
   isSelectModeWithArea,
@@ -74,6 +75,7 @@ import { NO_OP } from '../../../core/shared/utils'
 import { useIsMyProject } from '../../editor/store/collaborative-editing'
 import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 import { MultiplayerPresence } from '../multiplayer-presence'
+import { GridMeasurementHelpers } from './grid-controls'
 
 export const CanvasControlsContainerID = 'new-canvas-controls-container'
 
@@ -596,6 +598,10 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
                   isSelectOrInsertMode(editorMode) &&
                     !EP.multiplePathsAllWithTheSameUID(localSelectedViews),
                   <>
+                    {when(
+                      isSelectMode(editorMode) || isInsertMode(editorMode),
+                      <GridMeasurementHelpers />,
+                    )}
                     {strategyControls.map((c) => (
                       <RenderControlMemoized
                         key={c.key}
@@ -672,5 +678,4 @@ const SelectionAreaRectangle = React.memo(
     )
   },
 )
-
 SelectionAreaRectangle.displayName = 'SelectionAreaRectangle'
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 2dfe03416b5a..bd2560483fcf 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -80,6 +80,7 @@ import { runDOMWalker } from '../editor/actions/action-creators'
 import { CanvasContainerOuterId } from './canvas-component-entry'
 import { ElementsToRerenderGLOBAL } from './ui-jsx-canvas'
 import type { GridCellGlobalFrames } from './canvas-strategies/strategies/grid-helpers'
+import { GridMeasurementHelperKey } from './controls/grid-controls-for-strategies'
 
 export const ResizeObserver =
   window.ResizeObserver ?? ResizeObserverSyntheticDefault.default ?? ResizeObserverSyntheticDefault
@@ -1069,7 +1070,9 @@ function measureGlobalFramesOfGridCellsFromControl(
   const path = grid.getAttribute(UTOPIA_PATH_KEY)
   let gridCellGlobalFrames: Array<Array<CanvasRectangle>> | null = null
   if (path != null) {
-    const gridControlElement = document.getElementById(`grid-${path}`)
+    const gridControlElement = document.getElementById(
+      GridMeasurementHelperKey(EP.fromString(path)),
+    )
     if (gridControlElement != null) {
       gridCellGlobalFrames = []
       for (const cell of gridControlElement.children) {
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index e9c448db5d3e..ac005c2026ac 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -408,6 +408,11 @@ export const MetadataUtils = {
       specialSizeMeasurements.elementGridPropertiesFromProps.gridRowEnd == null
     )
   },
+  getAllGrids(metadata: ElementInstanceMetadataMap): Array<ElementPath> {
+    return Object.values(metadata)
+      .filter((m) => MetadataUtils.isGridLayoutedContainer(m))
+      .map((m) => m.elementPath)
+  },
   isComponentInstanceFromMetadata(
     metadata: ElementInstanceMetadataMap,
     path: ElementPath,
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 18108e135a96..61e602e6e233 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -32,6 +32,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -53,7 +54,9 @@ Array [
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div",
+  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
@@ -84,7 +87,7 @@ Array [
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
   "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div/ElementsOutsideVisibleAreaIndicator/Symbol(react.memo)(IndicatorArrow)",
@@ -812,6 +815,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -833,7 +837,9 @@ Array [
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div",
+  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
@@ -864,7 +870,7 @@ Array [
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
   "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div/ElementsOutsideVisibleAreaIndicator/Symbol(react.memo)(IndicatorArrow)",
@@ -1481,6 +1487,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -1770,6 +1777,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -1781,6 +1789,8 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
@@ -2371,6 +2381,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -2478,6 +2489,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -2596,6 +2608,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -2873,6 +2886,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -2884,6 +2898,8 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
@@ -3350,6 +3366,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -3399,6 +3416,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index 7f53a8cd0879..435dc603ed7f 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`858`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`864`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1110`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1116`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`650`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`653`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`775`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`778`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })

From 9d74ac4ddb40009e194d68eff623b1dd9c1c256f Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Tue, 15 Oct 2024 21:00:55 +0200
Subject: [PATCH 144/272] Grid Gap Control 2 (#6538)

**Problem:**
The orange grid gap controls are sometimes 1px off, they are one frame
behind, they show weird delays when the canvas zooms.

**Fix:**
A lot of the problem came down to `gridGapControlBoundsFromMetadata`
trying to calculate the bounding boxes of where the gaps are in the
selected Grid. However this is error prone because a lot of these boxes
will fall on fractional pixel values, and we were not rounding them the
same way Chrome was rounding the real grid.

Instead of trying to fix the math, I had an idea to replicate our hack
for the grid cell outline controls: take the
ComputedStyle.gridTemplateRows / Columns, and create a helper grid which
has the correct position and sizing for our gap outlines. The trick is
that we want to take the original grid's gap value, and turn those into
grid tracks too, setting the helper grid's gap to zero.

So if my original grid's ComputedStyle has tracks [5px 10px 15px 5px]
and a gap of 13px, we would create a helper grid with the tracks [5px
13px 10px 13px 15px 13px 5px]!

Now the only job is to fill it with the elements and make sure to only
draw anything in the tracks that correspond to gaps in the original grid
(they are always the odd numbered tracks).

This means we can offload the entire positioning and rendering to
Chrome, and makes our life much simpler going forward.

**Commit Details:**

- Fixed Hot Reload by creating a new file
`grid-gap-control-component.tsx`
- Brand new `GridGapControlComponent`, `GridPaddingOutlineForDimension`
and `GridRowHighlight` components.
- `GridPaddingOutlineForDimension` creates the helper grid with the
inlined gaps as tracks
- `GridRowHighlight` is responsible for the visual lines, and it
recreates the original grid in the given dimension so it can have a
handle for each original row
- `GridGapHandle` mostly unchanged

---------

Co-authored-by: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
---
 .../strategies/set-grid-gap-strategy.tsx      |   2 +-
 .../canvas/controls/grid-controls-helpers.ts  |  44 ++
 .../canvas/controls/grid-controls.tsx         |  48 +-
 .../controls/select-mode/controls-common.tsx  |  29 +-
 .../controls/select-mode/flex-gap-control.tsx |   2 +-
 .../grid-gap-control-component.tsx            | 477 +++++++++++++++++
 .../select-mode/grid-gap-control-helpers.tsx  |  35 ++
 .../controls/select-mode/grid-gap-control.tsx | 505 +-----------------
 editor/src/core/shared/array-utils.ts         |  13 +
 9 files changed, 597 insertions(+), 558 deletions(-)
 create mode 100644 editor/src/components/canvas/controls/grid-controls-helpers.ts
 create mode 100644 editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
 create mode 100644 editor/src/components/canvas/controls/select-mode/grid-gap-control-helpers.tsx

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
index f7f1fb13ad98..9339b388a790 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
@@ -40,7 +40,7 @@ import {
 import type { InteractionSession } from '../interaction-state'
 import { colorTheme } from '../../../../uuiui'
 import { activeFrameTargetPath, setActiveFrames } from '../../commands/set-active-frames-command'
-import type { GridGapControlProps } from '../../controls/select-mode/grid-gap-control'
+import type { GridGapControlProps } from '../../controls/select-mode/grid-gap-control-component'
 import { GridGapControl } from '../../controls/select-mode/grid-gap-control'
 import type { GridControlsProps } from '../../controls/grid-controls-for-strategies'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
diff --git a/editor/src/components/canvas/controls/grid-controls-helpers.ts b/editor/src/components/canvas/controls/grid-controls-helpers.ts
new file mode 100644
index 000000000000..3ba65cc81a61
--- /dev/null
+++ b/editor/src/components/canvas/controls/grid-controls-helpers.ts
@@ -0,0 +1,44 @@
+import type { CSSProperties } from 'react'
+import type { GridMeasurementHelperData } from './grid-controls-for-strategies'
+import { getNullableAutoOrTemplateBaseString } from './grid-controls-for-strategies'
+
+export function getGridHelperStyleMatchingTargetGrid(
+  grid: GridMeasurementHelperData,
+): CSSProperties {
+  let style: CSSProperties = {
+    position: 'absolute',
+    top: grid.frame.y,
+    left: grid.frame.x,
+    width: grid.frame.width,
+    height: grid.frame.height,
+    display: 'grid',
+    gridTemplateColumns: getNullableAutoOrTemplateBaseString(grid.gridTemplateColumns),
+    gridTemplateRows: getNullableAutoOrTemplateBaseString(grid.gridTemplateRows),
+    justifyContent: grid.justifyContent ?? 'initial',
+    alignContent: grid.alignContent ?? 'initial',
+    pointerEvents: 'none',
+    padding:
+      grid.padding == null
+        ? 0
+        : `${grid.padding.top}px ${grid.padding.right}px ${grid.padding.bottom}px ${grid.padding.left}px`,
+  }
+
+  // Gap needs to be set only if the other two are not present or we'll have rendering issues
+  // due to how measurements are calculated.
+  if (grid.rowGap != null && grid.columnGap != null) {
+    style.rowGap = grid.rowGap
+    style.columnGap = grid.columnGap
+  } else {
+    if (grid.gap != null) {
+      style.gap = grid.gap
+    }
+    if (grid.rowGap != null) {
+      style.rowGap = grid.rowGap
+    }
+    if (grid.columnGap != null) {
+      style.columnGap = grid.columnGap
+    }
+  }
+
+  return style
+}
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 9393c96963bb..685a0cf2d6fd 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -92,6 +92,7 @@ import {
 } from './grid-controls-for-strategies'
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 import { useResizeEdges } from './select-mode/use-resize-edges'
+import { getGridHelperStyleMatchingTargetGrid } from './grid-controls-helpers'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -774,9 +775,9 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
   })
 
   const placeholders = range(0, grid.cells)
-
-  const style: CSSProperties = {
-    ...getGridControlBaseStyle(grid),
+  const baseStyle = getGridHelperStyleMatchingTargetGrid(grid)
+  const style = {
+    ...baseStyle,
     backgroundColor:
       activelyDraggingOrResizingCell != null ? colorTheme.primary10.value : 'transparent',
     outline: `1px solid ${
@@ -940,7 +941,7 @@ const GridMeasurementHelper = React.memo<{ elementPath: ElementPath }>(({ elemen
   const placeholders = range(0, gridData.cells)
 
   const style: CSSProperties = {
-    ...getGridControlBaseStyle(gridData),
+    ...getGridHelperStyleMatchingTargetGrid(gridData),
     opacity: 1,
   }
 
@@ -1643,42 +1644,3 @@ function useAllGrids(metadata: ElementInstanceMetadataMap) {
     return MetadataUtils.getAllGrids(metadata)
   }, [metadata])
 }
-
-function getGridControlBaseStyle(gridData: GridMeasurementHelperData) {
-  let style: CSSProperties = {
-    position: 'absolute',
-    top: gridData.frame.y,
-    left: gridData.frame.x,
-    width: gridData.frame.width,
-    height: gridData.frame.height,
-    display: 'grid',
-    gridTemplateColumns: getNullableAutoOrTemplateBaseString(gridData.gridTemplateColumns),
-    gridTemplateRows: getNullableAutoOrTemplateBaseString(gridData.gridTemplateRows),
-    justifyContent: gridData.justifyContent ?? 'initial',
-    alignContent: gridData.alignContent ?? 'initial',
-    pointerEvents: 'none',
-    padding:
-      gridData.padding == null
-        ? 0
-        : `${gridData.padding.top}px ${gridData.padding.right}px ${gridData.padding.bottom}px ${gridData.padding.left}px`,
-  }
-
-  // Gap needs to be set only if the other two are not present or we'll have rendering issues
-  // due to how measurements are calculated.
-  if (gridData.rowGap != null && gridData.columnGap != null) {
-    style.rowGap = gridData.rowGap
-    style.columnGap = gridData.columnGap
-  } else {
-    if (gridData.gap != null) {
-      style.gap = gridData.gap
-    }
-    if (gridData.rowGap != null) {
-      style.rowGap = gridData.rowGap
-    }
-    if (gridData.columnGap != null) {
-      style.columnGap = gridData.columnGap
-    }
-  }
-
-  return style
-}
diff --git a/editor/src/components/canvas/controls/select-mode/controls-common.tsx b/editor/src/components/canvas/controls/select-mode/controls-common.tsx
index 7010cde16fe0..befbf9c125c0 100644
--- a/editor/src/components/canvas/controls/select-mode/controls-common.tsx
+++ b/editor/src/components/canvas/controls/select-mode/controls-common.tsx
@@ -168,17 +168,26 @@ export function useHoverWithDelay(
 ): [React.MouseEventHandler, React.MouseEventHandler] {
   const fadeInTimeout = React.useRef<Timeout | null>(null)
 
-  const onHoverEnd = () => {
-    if (fadeInTimeout.current != null) {
-      clearTimeout(fadeInTimeout.current)
-    }
-    fadeInTimeout.current = null
-    update(false)
-  }
+  const onHoverEnd = React.useCallback(
+    (e: React.MouseEvent) => {
+      if (fadeInTimeout.current != null) {
+        clearTimeout(fadeInTimeout.current)
+      }
+      fadeInTimeout.current = null
+      update(false)
+    },
+    [update],
+  )
 
-  const onHoverStart = () => {
-    fadeInTimeout.current = setTimeout(() => update(true), delay)
-  }
+  const onHoverStart = React.useCallback(
+    (e: React.MouseEvent) => {
+      if (fadeInTimeout.current != null) {
+        clearTimeout(fadeInTimeout.current)
+      }
+      fadeInTimeout.current = setTimeout(() => update(true), delay)
+    },
+    [update, delay],
+  )
 
   return [onHoverStart, onHoverEnd]
 }
diff --git a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
index 7cd5ce22b8be..950974fdf078 100644
--- a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
@@ -427,7 +427,7 @@ const GapControlSegment = React.memo<GapControlSegmentProps>((props) => {
 
 function handleDimensions(flexDirection: FlexDirection, scale: number): Size {
   if (flexDirection === 'row' || flexDirection === 'row-reverse') {
-    return size(3 / scale, 12 / scale)
+    return size(4 / scale, 12 / scale)
   }
   if (flexDirection === 'column' || flexDirection === 'column-reverse') {
     return size(12 / scale, 4 / scale)
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
new file mode 100644
index 000000000000..9a754866e4ee
--- /dev/null
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
@@ -0,0 +1,477 @@
+import type { CSSProperties } from 'react'
+import React from 'react'
+import { createArrayWithLength, interleaveArray } from '../../../../core/shared/array-utils'
+import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
+import type { CanvasVector, Size } from '../../../../core/shared/math-utils'
+import { size, windowPoint } from '../../../../core/shared/math-utils'
+import type { ElementPath } from '../../../../core/shared/project-file-types'
+import { assertNever } from '../../../../core/shared/utils'
+import { Modifier } from '../../../../utils/modifiers'
+import { when } from '../../../../utils/react-conditionals'
+import { useColorTheme, UtopiaStyles } from '../../../../uuiui'
+import { CSSCursor } from '../../../../uuiui-deps'
+import type { EditorDispatch } from '../../../editor/action-types'
+import { useDispatch } from '../../../editor/store/dispatch-context'
+import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook'
+import {
+  cssNumber,
+  printCSSNumber,
+  stringifyGridDimension,
+} from '../../../inspector/common/css-utils'
+import CanvasActions from '../../canvas-actions'
+import { createInteractionViaMouse, gridGapHandle } from '../../canvas-strategies/interaction-state'
+import { windowToCanvasCoordinates } from '../../dom-lookup'
+import type { Axis } from '../../gap-utils'
+import { maybeGridGapData } from '../../gap-utils'
+import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
+import type { GridData } from '../grid-controls-for-strategies'
+import { getNullableAutoOrTemplateBaseString, useGridData } from '../grid-controls-for-strategies'
+import { getGridHelperStyleMatchingTargetGrid } from '../grid-controls-helpers'
+import type { CSSNumberWithRenderedValue } from './controls-common'
+import { CanvasLabel, PillHandle, useHoverWithDelay } from './controls-common'
+import { startGapControlInteraction } from './grid-gap-control-helpers'
+
+export interface GridGapControlProps {
+  selectedElement: ElementPath
+  updatedGapValueRow: CSSNumberWithRenderedValue | null
+  updatedGapValueColumn: CSSNumberWithRenderedValue | null
+}
+
+export const GridGapControlTestId = 'grid-gap-control'
+export const GridGapControlHandleTestId = 'grid-gap-control-handle'
+// background delay when hovering the gap
+export const GridGapBackgroundHoverDelay = 1500
+// background delay when hovering the handle itself
+const GapHandleBackgroundHoverDelay = 750
+// px threshold for showing the gap handles even without hovering the gap itself
+// (for narrow gaps)
+const GapHandleGapWidthThreshold = 10
+
+const DefaultGapControlSizeConstants: GapControlSizeConstants = {
+  borderWidth: 1,
+  paddingIndicatorOffset: 10,
+  hitAreaPadding: 5,
+}
+
+export const GridGapControlComponent = React.memo<GridGapControlProps>((props) => {
+  const { selectedElement } = props
+
+  const dispatch = useDispatch()
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'GridGapControlComponent scale',
+  )
+
+  const elementHovered =
+    useEditorState(
+      Substores.highlightedHoveredViews,
+      (store) => store.editor.hoveredViews.includes(selectedElement),
+      'GridGapControlComponent elementHovered',
+    ) ?? false
+
+  const grid = useGridData([selectedElement]).at(0)
+
+  const activeDraggingAxis = useEditorState(
+    Substores.canvas,
+    (store) =>
+      store.editor.canvas.interactionSession?.activeControl.type === 'GRID_GAP_HANDLE'
+        ? store.editor.canvas.interactionSession?.activeControl.axis
+        : null,
+    'GridGapControl isDragging',
+  )
+
+  const canvasOffset = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
+
+  const axisMouseDownHandler = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>, axis: Axis) => {
+      startGapControlInteraction(e, dispatch, canvasOffset.current, scale, axis)
+    },
+    [canvasOffset, dispatch, scale],
+  )
+  const rowMouseDownHandler = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => axisMouseDownHandler(e, 'row'),
+    [axisMouseDownHandler],
+  )
+
+  const columnMouseDownHandler = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => axisMouseDownHandler(e, 'column'),
+    [axisMouseDownHandler],
+  )
+
+  const [hoveredAxis, setHoveredAxis] = React.useState<'row' | 'column'>('row')
+  const onMouseOverRow = React.useCallback(() => setHoveredAxis('row'), [])
+  const onMouseOverColumn = React.useCallback(() => setHoveredAxis('column'), [])
+
+  const gridGap = useEditorState(
+    Substores.metadata,
+    (store) => maybeGridGapData(store.editor.jsxMetadata, selectedElement),
+    'GridGapControlComponent gridGap',
+  )
+
+  if (grid == null || gridGap == null) {
+    return null
+  }
+
+  return (
+    <CanvasOffsetWrapper>
+      <GridPaddingOutlineForDimension
+        grid={grid}
+        dimension={'rows'}
+        onMouseDown={rowMouseDownHandler}
+        beingDragged={activeDraggingAxis === 'row'}
+        onMouseOver={onMouseOverRow}
+        zIndexPriority={hoveredAxis === 'row' ? true : false}
+        gridGap={gridGap.row}
+        elementHovered={elementHovered}
+      />
+      <GridPaddingOutlineForDimension
+        grid={grid}
+        dimension={'columns'}
+        onMouseDown={columnMouseDownHandler}
+        beingDragged={activeDraggingAxis === 'column'}
+        onMouseOver={onMouseOverColumn}
+        zIndexPriority={hoveredAxis === 'column' ? true : false}
+        gridGap={gridGap.column}
+        elementHovered={elementHovered}
+      />
+    </CanvasOffsetWrapper>
+  )
+})
+
+const GridPaddingOutlineForDimension = (props: {
+  grid: GridData
+  dimension: 'rows' | 'columns'
+  onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void
+  beingDragged: boolean
+  onMouseOver: () => void
+  zIndexPriority: boolean
+  gridGap: CSSNumberWithRenderedValue
+  elementHovered: boolean
+}) => {
+  const {
+    grid,
+    gridGap,
+    dimension,
+    onMouseDown,
+    beingDragged,
+    onMouseOver,
+    zIndexPriority,
+    elementHovered,
+  } = props
+
+  let style: CSSProperties = {
+    ...getGridHelperStyleMatchingTargetGrid(grid),
+    zIndex: zIndexPriority ? 1 : undefined,
+    gap: undefined,
+    rowGap: undefined,
+    columnGap: undefined,
+    gridTemplateRows:
+      dimension === 'rows'
+        ? tweakTrackListByInsertingGap(grid.gridTemplateRows, grid.rowGap ?? grid.gap)
+        : '1fr',
+    gridTemplateColumns:
+      dimension === 'columns'
+        ? tweakTrackListByInsertingGap(grid.gridTemplateColumns, grid.columnGap ?? grid.gap)
+        : '1fr',
+    overflow: 'hidden',
+  }
+
+  const length = 2 * (dimension === 'rows' ? grid.rows : grid.columns) - 1
+
+  return (
+    <div style={style}>
+      {createArrayWithLength(length, (index) => {
+        const hide = index === 0 || index === length - 1 || index % 2 === 0
+        return (
+          <GridRowHighlight
+            key={index}
+            hide={hide} // we only want to show the divs that fall in where the gaps are in the original grid
+            gapId={`${dimension}-${index}`}
+            onMouseDown={onMouseDown}
+            axis={dimension === 'rows' ? 'row' : 'column'}
+            template={getNullableAutoOrTemplateBaseString(
+              dimension === 'rows' ? grid.gridTemplateColumns : grid.gridTemplateRows,
+            )}
+            numberOfHandles={hide ? 0 : dimension === 'rows' ? grid.columns : grid.rows}
+            gap={dimension === 'columns' ? grid.rowGap ?? grid.gap : grid.columnGap ?? grid.gap}
+            gapValue={gridGap}
+            beingDragged={beingDragged}
+            onMouseOver={onMouseOver}
+            elementHovered={elementHovered}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+const GridRowHighlight = (props: {
+  gapId: string
+  onMouseDown: React.MouseEventHandler
+  hide: boolean
+  axis: 'row' | 'column'
+  template: string | undefined
+  numberOfHandles: number
+  gap: number | null
+  gapValue: CSSNumberWithRenderedValue | null
+  beingDragged: boolean
+  onMouseOver: () => void
+  elementHovered: boolean
+}) => {
+  const {
+    gapId,
+    onMouseDown,
+    hide,
+    axis,
+    template,
+    gap,
+    gapValue,
+    numberOfHandles,
+    beingDragged,
+    onMouseOver,
+    elementHovered,
+  } = props
+
+  const colorTheme = useColorTheme()
+  const canvasScale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'GridRowHighlight canvasScale',
+  )
+
+  const lineWidth = 1 / canvasScale
+
+  const outlineColor = beingDragged ? colorTheme.brandNeonOrange.value : 'transparent'
+
+  const [backgroundShown, setBackgroundShown] = React.useState<boolean>(false)
+
+  const [gapIsHovered, setGapIsHovered] = React.useState(false)
+  const [handleIsHovered, setHandleIsHovered] = React.useState<number | null>(null)
+  const [hoverStart, hoverEnd] = useHoverWithDelay(GridGapBackgroundHoverDelay, setBackgroundShown)
+
+  const onGapHover = React.useCallback(
+    (e: React.MouseEvent) => {
+      onMouseOver()
+      setGapIsHovered(true)
+    },
+    [onMouseOver],
+  )
+
+  const onHandleHover = React.useCallback(
+    (e: React.MouseEvent, index: number) => {
+      hoverStart(e)
+      setHandleIsHovered(index)
+    },
+    [hoverStart],
+  )
+
+  const onGapHoverEnd = React.useCallback(
+    (e: React.MouseEvent) => {
+      hoverEnd(e)
+      setGapIsHovered(false)
+      setHandleIsHovered(null)
+    },
+    [hoverEnd],
+  )
+
+  const shouldShowBackground = !beingDragged && backgroundShown
+
+  if (gapValue == null) {
+    return null
+  }
+
+  return (
+    <div
+      key={gapId}
+      onMouseEnter={onGapHover}
+      onMouseLeave={onGapHoverEnd}
+      data-testid={`gap-control-segment-${gapId}`}
+      style={{
+        pointerEvents: hide ? undefined : 'all',
+        display: 'grid',
+        position: 'relative',
+        boxShadow: `inset 0 0 0 ${lineWidth}px ${outlineColor}`,
+        opacity: hide ? 0 : 1,
+
+        alignItems: 'center',
+        justifyContent: 'center',
+        placeItems: 'center',
+
+        gap: gap ?? 0,
+        gridTemplateColumns: axis === 'row' ? template : '1fr',
+        gridTemplateRows: axis === 'column' ? template : '1fr',
+
+        ...(shouldShowBackground
+          ? UtopiaStyles.backgrounds.stripedBackground(
+              colorTheme.brandNeonOrange.value,
+              canvasScale,
+            )
+          : {}),
+      }}
+    >
+      {createArrayWithLength(numberOfHandles, (i) => (
+        <GridGapHandle
+          gapId={gapId}
+          index={i}
+          scale={canvasScale}
+          gapValue={gapValue}
+          axis={axis}
+          onMouseDown={onMouseDown}
+          isDragging={beingDragged}
+          onHandleHoverStartInner={onHandleHover}
+          indicatorShown={handleIsHovered}
+          elementHovered={elementHovered}
+          gapIsHovered={gapIsHovered}
+          backgroundShown={backgroundShown}
+        />
+      ))}
+    </div>
+  )
+}
+
+function tweakTrackListByInsertingGap(
+  trackList: GridAutoOrTemplateBase | null,
+  gap: number | null,
+): string | undefined {
+  if (trackList == null) {
+    return undefined
+  }
+
+  if (trackList.type === 'FALLBACK') {
+    throw new Error('Cannot insert gap into fallback')
+  }
+
+  const gapTrack = gap == null ? `0px` : `${gap}px`
+
+  return interleaveArray(trackList.dimensions.map(stringifyGridDimension), gapTrack).join(' ')
+}
+
+interface GapControlSizeConstants {
+  paddingIndicatorOffset: number
+  hitAreaPadding: number
+  borderWidth: number
+}
+
+const gapControlSizeConstants = (
+  constants: GapControlSizeConstants,
+  scale: number,
+): GapControlSizeConstants => ({
+  borderWidth: constants.borderWidth / scale,
+  paddingIndicatorOffset: constants.paddingIndicatorOffset / scale,
+  hitAreaPadding: constants.hitAreaPadding / scale,
+})
+
+type GridGapHandleProps = {
+  gapId: string
+  index: number
+  scale: number
+  gapValue: CSSNumberWithRenderedValue
+  axis: Axis
+  onMouseDown: React.MouseEventHandler
+  isDragging: boolean
+  onHandleHoverStartInner: (e: React.MouseEvent, index: number) => void
+  indicatorShown: number | null
+  elementHovered: boolean
+  gapIsHovered: boolean
+  backgroundShown: boolean
+}
+export function GridGapHandle({
+  gapId,
+  index,
+  scale,
+  gapValue,
+  axis,
+  onMouseDown,
+  onHandleHoverStartInner,
+  isDragging,
+  indicatorShown,
+  elementHovered,
+  gapIsHovered,
+  backgroundShown,
+}: GridGapHandleProps) {
+  const { width, height } = handleDimensions(axis, scale)
+  const { hitAreaPadding, paddingIndicatorOffset, borderWidth } = gapControlSizeConstants(
+    DefaultGapControlSizeConstants,
+    scale,
+  )
+  const colorTheme = useColorTheme()
+  const shouldShowIndicator = !isDragging && indicatorShown === index
+  let shouldShowHandle = !isDragging && gapIsHovered
+  // show the handle also if the gap is too narrow to hover
+  if (!gapIsHovered && !backgroundShown) {
+    shouldShowHandle = elementHovered && gapValue.renderedValuePx <= GapHandleGapWidthThreshold
+  }
+  const handleOpacity = gapIsHovered ? 1 : 0.3
+
+  const onHandleHoverStart = React.useCallback(
+    (e: React.MouseEvent) => {
+      onHandleHoverStartInner(e, index)
+    },
+    [onHandleHoverStartInner, index],
+  )
+
+  const rowGapStyles =
+    axis === 'row'
+      ? ({
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+          position: 'absolute',
+          gridArea: `1/${index + 1}/2/${index + 2}`,
+        } as const)
+      : {}
+  return (
+    <div
+      data-testid={`${GridGapControlHandleTestId}-${gapId}`}
+      style={{
+        visibility: shouldShowHandle ? 'visible' : 'hidden',
+        pointerEvents: 'all',
+        padding: hitAreaPadding,
+        cursor: axis === 'row' ? CSSCursor.GapNS : CSSCursor.GapEW,
+        opacity: handleOpacity,
+        ...rowGapStyles,
+      }}
+      onMouseDown={onMouseDown}
+      onMouseEnter={onHandleHoverStart}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          paddingTop: paddingIndicatorOffset,
+          paddingLeft: paddingIndicatorOffset,
+          pointerEvents: 'none',
+        }}
+      >
+        {when(
+          shouldShowIndicator,
+          <CanvasLabel
+            value={printCSSNumber(
+              gapValue.value ?? cssNumber(gapValue.renderedValuePx, 'px'),
+              null,
+            )}
+            scale={scale}
+            color={colorTheme.brandNeonOrange.value}
+            textColor={colorTheme.white.value}
+          />,
+        )}
+      </div>
+      <PillHandle
+        width={width}
+        height={height}
+        pillColor={colorTheme.brandNeonOrange.value}
+        borderWidth={borderWidth}
+      />
+    </div>
+  )
+}
+
+function handleDimensions(axis: Axis, scale: number): Size {
+  if (axis === 'row') {
+    return size(12 / scale, 4 / scale)
+  }
+  if (axis === 'column') {
+    return size(4 / scale, 12 / scale)
+  }
+  assertNever(axis)
+}
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control-helpers.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control-helpers.tsx
new file mode 100644
index 000000000000..296b24d5090e
--- /dev/null
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control-helpers.tsx
@@ -0,0 +1,35 @@
+import type { CanvasVector } from '../../../../core/shared/math-utils'
+import { windowPoint } from '../../../../core/shared/math-utils'
+import { Modifier } from '../../../../utils/modifiers'
+import type { EditorDispatch } from '../../../editor/action-types'
+import CanvasActions from '../../canvas-actions'
+import { createInteractionViaMouse, gridGapHandle } from '../../canvas-strategies/interaction-state'
+import { windowToCanvasCoordinates } from '../../dom-lookup'
+import type { Axis } from '../../gap-utils'
+
+export function startGapControlInteraction(
+  event: React.MouseEvent<HTMLDivElement>,
+  dispatch: EditorDispatch,
+  canvasOffset: CanvasVector,
+  scale: number,
+  axis: Axis,
+) {
+  if (event.buttons === 1 && event.button !== 2) {
+    event.stopPropagation()
+    const canvasPositions = windowToCanvasCoordinates(
+      scale,
+      canvasOffset,
+      windowPoint({ x: event.nativeEvent.x, y: event.nativeEvent.y }),
+    )
+    dispatch([
+      CanvasActions.createInteractionSession(
+        createInteractionViaMouse(
+          canvasPositions.canvasPositionRaw,
+          Modifier.modifiersForEvent(event),
+          gridGapHandle(axis),
+          'zero-drag-not-permitted',
+        ),
+      ),
+    ])
+  }
+}
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
index b25565d931dd..6cb1b9031ceb 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx
@@ -1,505 +1,4 @@
-import React, { useState } from 'react'
-import type { CanvasRectangle, CanvasVector, Size } from '../../../../core/shared/math-utils'
-import { size, windowPoint } from '../../../../core/shared/math-utils'
-import type { ElementPath } from '../../../../core/shared/project-file-types'
-import { assertNever } from '../../../../core/shared/utils'
-import { Modifier } from '../../../../utils/modifiers'
-import { when } from '../../../../utils/react-conditionals'
-import { useColorTheme, UtopiaStyles } from '../../../../uuiui'
-import type { EditorDispatch } from '../../../editor/action-types'
-import { useDispatch } from '../../../editor/store/dispatch-context'
-import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook'
-import type { CSSNumber } from '../../../inspector/common/css-utils'
-import { printCSSNumber } from '../../../inspector/common/css-utils'
-import CanvasActions from '../../canvas-actions'
 import { controlForStrategyMemoized } from '../../canvas-strategies/canvas-strategy-types'
-import { createInteractionViaMouse, gridGapHandle } from '../../canvas-strategies/interaction-state'
-import { windowToCanvasCoordinates } from '../../dom-lookup'
-import type { Axis } from '../../gap-utils'
-import { maybeGridGapData, gridGapControlBoundsFromMetadata } from '../../gap-utils'
-import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
-import type { CSSNumberWithRenderedValue } from './controls-common'
-import { CanvasLabel, fallbackEmptyValue, PillHandle, useHoverWithDelay } from './controls-common'
-import { CSSCursor } from '../../../../uuiui-deps'
-import { useBoundingBox } from '../bounding-box-hooks'
-import { isZeroSizedElement } from '../outline-utils'
-import { createArrayWithLength } from '../../../../core/shared/array-utils'
-import { useGridData } from '../grid-controls-for-strategies'
+import { GridGapControlComponent } from './grid-gap-control-component'
 
-export interface GridGapControlProps {
-  selectedElement: ElementPath
-  updatedGapValueRow: CSSNumberWithRenderedValue | null
-  updatedGapValueColumn: CSSNumberWithRenderedValue | null
-}
-
-export const GridGapControlTestId = 'grid-gap-control'
-export const GridGapControlHandleTestId = 'grid-gap-control-handle'
-// background delay when hovering the gap
-const GridGapBackgroundHoverDelay = 1500
-// background delay when hovering the handle itself
-const GapHandleBackgroundHoverDelay = 750
-// px threshold for showing the gap handles even without hovering the gap itself
-// (for narrow gaps)
-const GapHandleGapWidthThreshold = 10
-
-export const GridGapControl = controlForStrategyMemoized<GridGapControlProps>((props) => {
-  const { selectedElement, updatedGapValueRow, updatedGapValueColumn } = props
-  const colorTheme = useColorTheme()
-  const accentColor = colorTheme.gapControlsBg.value
-
-  const hoveredViews = useEditorState(
-    Substores.highlightedHoveredViews,
-    (store) => store.editor.hoveredViews,
-    'GridGapControl hoveredViews',
-  )
-
-  const [elementHovered, setElementHovered] = useState<boolean>(false)
-  const [rowAxisHandleHovererd, setRowAxisHandleHovered] = useState<boolean>(false)
-  const [columnAxisHandleHovererd, setColumnAxisHandleHovered] = useState<boolean>(false)
-
-  const [rowBackgroundShown, setRowBackgroundShown] = React.useState<boolean>(false)
-  const [columnBackgroundShown, setColumnBackgroundShown] = React.useState<boolean>(false)
-
-  const [rowControlHoverStart, rowControlHoverEnd] = useHoverWithDelay(
-    GridGapBackgroundHoverDelay,
-    setRowBackgroundShown,
-  )
-  const [columnControlHoverStart, columnControlHoverEnd] = useHoverWithDelay(
-    GridGapBackgroundHoverDelay,
-    setColumnBackgroundShown,
-  )
-
-  const [rowAxisHandleHoverStart, rowAxisHandleHoverEnd] = useHoverWithDelay(
-    GapHandleBackgroundHoverDelay,
-    setRowAxisHandleHovered,
-  )
-
-  const [columnAxisHandleHoverStart, columnAxisHandleHoverEnd] = useHoverWithDelay(
-    GapHandleBackgroundHoverDelay,
-    setColumnAxisHandleHovered,
-  )
-
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
-  React.useEffect(() => {
-    const timeoutHandle = timeoutRef.current
-    if (timeoutHandle != null) {
-      clearTimeout(timeoutHandle)
-    }
-
-    if (hoveredViews.includes(selectedElement)) {
-      timeoutRef.current = setTimeout(() => setElementHovered(true), 200)
-    } else {
-      setElementHovered(false)
-    }
-  }, [hoveredViews, selectedElement])
-
-  const dispatch = useDispatch()
-  const scale = useEditorState(
-    Substores.canvas,
-    (store) => store.editor.canvas.scale,
-    'GridGapControl scale',
-  )
-  const metadata = useEditorState(
-    Substores.metadata,
-    (store) => store.editor.jsxMetadata,
-    'GridGapControl metadata',
-  )
-
-  const isDragging = useEditorState(
-    Substores.canvas,
-    (store) => store.editor.canvas.interactionSession?.activeControl.type === 'GRID_GAP_HANDLE',
-    'GridGapControl isDragging',
-  )
-
-  const canvasOffset = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
-
-  const axisMouseDownHandler = React.useCallback(
-    (e: React.MouseEvent<HTMLDivElement>, axis: Axis) => {
-      startInteraction(e, dispatch, canvasOffset.current, scale, axis)
-    },
-    [canvasOffset, dispatch, scale],
-  )
-  const rowMouseDownHandler = React.useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => axisMouseDownHandler(e, 'row'),
-    [axisMouseDownHandler],
-  )
-
-  const columnMouseDownHandler = React.useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => axisMouseDownHandler(e, 'column'),
-    [axisMouseDownHandler],
-  )
-
-  const gridGap = maybeGridGapData(metadata, selectedElement)
-  if (gridGap == null) {
-    return null
-  }
-
-  const controlRef = useBoundingBox(
-    [selectedElement],
-    (ref, safeGappedBoundingBox, realBoundingBox) => {
-      if (isZeroSizedElement(realBoundingBox)) {
-        ref.current.style.display = 'none'
-      } else {
-        ref.current.style.display = 'block'
-        ref.current.style.left = safeGappedBoundingBox.x + 'px'
-        ref.current.style.top = safeGappedBoundingBox.y + 'px'
-        ref.current.style.width = safeGappedBoundingBox.width + 'px'
-        ref.current.style.height = safeGappedBoundingBox.height + 'px'
-      }
-    },
-  )
-
-  const gridGapRow = updatedGapValueRow ?? gridGap.row
-  const gridGapColumn = updatedGapValueColumn ?? gridGap.column
-
-  const gridRowColumnInfo = useGridData([selectedElement])
-
-  const controlBounds = gridGapControlBoundsFromMetadata(gridRowColumnInfo[0], {
-    row: fallbackEmptyValue(gridGapRow),
-    column: fallbackEmptyValue(gridGapColumn),
-  })
-
-  return (
-    <CanvasOffsetWrapper>
-      <div
-        data-testid={GridGapControlTestId}
-        style={{ pointerEvents: 'none', position: 'absolute' }}
-        ref={controlRef}
-      >
-        {controlBounds.gaps.map(({ gap, bounds, axis, gapId }) => {
-          const gapControlProps = {
-            mouseDownHandler: axisMouseDownHandler,
-            gapId: gapId,
-            bounds: bounds,
-            accentColor: accentColor,
-            scale: scale,
-            isDragging: isDragging,
-            axis: axis,
-            gapValue: gap,
-            internalGrid: {
-              gridTemplateRows: controlBounds.gridTemplateRows,
-              gridTemplateColumns: controlBounds.gridTemplateColumns,
-              gap: axis === 'row' ? controlBounds.gapValues.column : controlBounds.gapValues.row,
-            },
-            elementHovered: elementHovered,
-            handles: axis === 'row' ? controlBounds.columns : controlBounds.rows,
-          }
-          if (axis === 'row') {
-            return (
-              <GapControlSegment
-                {...gapControlProps}
-                key={gapId}
-                onMouseDown={rowMouseDownHandler}
-                gapHoverStart={rowControlHoverStart}
-                gapHoverEnd={rowControlHoverEnd}
-                onHandleHoverStart={rowAxisHandleHoverStart}
-                onHandleHoverEnd={rowAxisHandleHoverEnd}
-                backgroundShown={rowBackgroundShown || rowAxisHandleHovererd}
-              />
-            )
-          }
-          return (
-            <GapControlSegment
-              {...gapControlProps}
-              key={gapId}
-              onMouseDown={columnMouseDownHandler}
-              gapHoverStart={columnControlHoverStart}
-              gapHoverEnd={columnControlHoverEnd}
-              onHandleHoverStart={columnAxisHandleHoverStart}
-              onHandleHoverEnd={columnAxisHandleHoverEnd}
-              backgroundShown={columnBackgroundShown || columnAxisHandleHovererd}
-            />
-          )
-        })}
-      </div>
-    </CanvasOffsetWrapper>
-  )
-})
-
-interface GapControlSizeConstants {
-  dragBorderWidth: number
-  paddingIndicatorOffset: number
-  hitAreaPadding: number
-  borderWidth: number
-}
-
-const DefaultGapControlSizeConstants: GapControlSizeConstants = {
-  dragBorderWidth: 1,
-  borderWidth: 1,
-  paddingIndicatorOffset: 10,
-  hitAreaPadding: 5,
-}
-
-const gapControlSizeConstants = (
-  constants: GapControlSizeConstants,
-  scale: number,
-): GapControlSizeConstants => ({
-  dragBorderWidth: constants.dragBorderWidth / scale,
-  borderWidth: constants.borderWidth / scale,
-  paddingIndicatorOffset: constants.paddingIndicatorOffset / scale,
-  hitAreaPadding: constants.hitAreaPadding / scale,
-})
-
-interface GridGapControlSegmentProps {
-  onMouseDown: React.MouseEventHandler
-  gapHoverStart: React.MouseEventHandler
-  gapHoverEnd: React.MouseEventHandler
-  onHandleHoverStart: React.MouseEventHandler
-  onHandleHoverEnd: React.MouseEventHandler
-  bounds: CanvasRectangle
-  axis: Axis
-  gapValue: CSSNumber
-  elementHovered: boolean
-  gapId: string
-  accentColor: string
-  scale: number
-  isDragging: boolean
-  backgroundShown: boolean
-  handles: number
-  internalGrid: {
-    gridTemplateRows: string
-    gridTemplateColumns: string
-    gap: CSSNumber
-  }
-}
-
-const GapControlSegment = React.memo<GridGapControlSegmentProps>((props) => {
-  const {
-    gapHoverStart,
-    gapHoverEnd,
-    onHandleHoverStart,
-    onHandleHoverEnd,
-    bounds,
-    isDragging,
-    accentColor: accentColor,
-    scale,
-    gapId,
-    backgroundShown,
-    axis,
-    handles,
-    internalGrid,
-  } = props
-
-  const [indicatorShown, setIndicatorShown] = React.useState<number | null>(null)
-  const [gapIsHovered, setGapIsHovered] = React.useState<boolean>(false)
-
-  const { dragBorderWidth } = gapControlSizeConstants(DefaultGapControlSizeConstants, scale)
-
-  const onHandleHoverStartInner = React.useCallback(
-    (e: React.MouseEvent, indicatorIndex: number) => {
-      setIndicatorShown(indicatorIndex)
-      onHandleHoverStart(e)
-    },
-    [onHandleHoverStart],
-  )
-
-  const onGapHover = React.useCallback(
-    (e: React.MouseEvent) => {
-      setGapIsHovered(true)
-      gapHoverStart(e)
-    },
-    [gapHoverStart],
-  )
-
-  const onHandleHoverEndInner = React.useCallback(
-    (e: React.MouseEvent) => {
-      setGapIsHovered(false)
-      gapHoverEnd(e)
-      setIndicatorShown(null)
-      onHandleHoverEnd(e)
-    },
-    [onHandleHoverEnd, gapHoverEnd],
-  )
-
-  const shouldShowBackground = !isDragging && backgroundShown
-
-  // Invert the direction for the handle.
-  const segmentFlexDirection = axis === 'row' ? 'column' : 'row'
-
-  return (
-    <div
-      key={gapId}
-      onMouseEnter={onGapHover}
-      onMouseLeave={onHandleHoverEndInner}
-      data-testid={`gap-control-segment-${gapId}`}
-      style={{
-        pointerEvents: 'all',
-        position: 'absolute',
-        left: bounds.x,
-        top: bounds.y,
-        width: bounds.width,
-        height: bounds.height,
-        display: 'flex',
-        flexDirection: segmentFlexDirection,
-        border: isDragging ? `${dragBorderWidth}px solid ${accentColor}` : undefined,
-        ...(shouldShowBackground
-          ? UtopiaStyles.backgrounds.stripedBackground(accentColor, scale)
-          : {}),
-      }}
-    >
-      <div
-        style={{
-          width: bounds.width,
-          height: bounds.height,
-          display: 'grid',
-          alignItems: 'center',
-          justifyContent: 'center',
-          placeItems: 'center',
-          gap: internalGrid.gap.value,
-          gridTemplateColumns: axis === 'row' ? internalGrid.gridTemplateColumns : '1fr',
-          gridTemplateRows: axis === 'column' ? internalGrid.gridTemplateRows : '1fr',
-          position: 'relative',
-        }}
-      >
-        {createArrayWithLength(handles, (i) => (
-          <GridGapHandle
-            key={i}
-            index={i}
-            {...props}
-            onHandleHoverStartInner={onHandleHoverStartInner}
-            indicatorShown={indicatorShown}
-            gapIsHovered={gapIsHovered}
-            backgroundShown={backgroundShown}
-          />
-        ))}
-      </div>
-    </div>
-  )
-})
-
-type GridGapHandleProps = {
-  gapId: string
-  index: number
-  scale: number
-  gapValue: CSSNumber
-  axis: Axis
-  onMouseDown: React.MouseEventHandler
-  isDragging: boolean
-  onHandleHoverStartInner: (e: React.MouseEvent, index: number) => void
-  indicatorShown: number | null
-  elementHovered: boolean
-  gapIsHovered: boolean
-  backgroundShown: boolean
-}
-function GridGapHandle({
-  gapId,
-  index,
-  scale,
-  gapValue,
-  axis,
-  onMouseDown,
-  onHandleHoverStartInner,
-  isDragging,
-  indicatorShown,
-  elementHovered,
-  gapIsHovered,
-  backgroundShown,
-}: GridGapHandleProps) {
-  const { width, height } = handleDimensions(axis, scale)
-  const { hitAreaPadding, paddingIndicatorOffset, borderWidth } = gapControlSizeConstants(
-    DefaultGapControlSizeConstants,
-    scale,
-  )
-  const colorTheme = useColorTheme()
-  const shouldShowIndicator = !isDragging && indicatorShown === index
-  let shouldShowHandle = !isDragging && gapIsHovered
-  // show the handle also if the gap is too narrow to hover
-  if (!gapIsHovered && !backgroundShown) {
-    shouldShowHandle = elementHovered && gapValue.value <= GapHandleGapWidthThreshold
-  }
-  const handleOpacity = gapIsHovered ? 1 : 0.3
-
-  const onHandleHoverStart = React.useCallback(
-    (e: React.MouseEvent) => {
-      onHandleHoverStartInner(e, index)
-    },
-    [onHandleHoverStartInner, index],
-  )
-
-  const rowGapStyles =
-    axis === 'row'
-      ? ({
-          left: '50%',
-          top: '50%',
-          transform: 'translate(-50%, -50%)',
-          position: 'absolute',
-          gridArea: `1/${index + 1}/2/${index + 2}`,
-        } as const)
-      : {}
-  return (
-    <div
-      data-testid={`${GridGapControlHandleTestId}-${gapId}`}
-      style={{
-        visibility: shouldShowHandle ? 'visible' : 'hidden',
-        padding: hitAreaPadding,
-        cursor: axis === 'row' ? CSSCursor.GapNS : CSSCursor.GapEW,
-        opacity: handleOpacity,
-        ...rowGapStyles,
-      }}
-      onMouseDown={onMouseDown}
-      onMouseEnter={onHandleHoverStart}
-    >
-      <div
-        style={{
-          position: 'absolute',
-          paddingTop: paddingIndicatorOffset,
-          paddingLeft: paddingIndicatorOffset,
-          pointerEvents: 'none',
-        }}
-      >
-        {when(
-          shouldShowIndicator,
-          <CanvasLabel
-            value={printCSSNumber(gapValue, null)}
-            scale={scale}
-            color={colorTheme.brandNeonOrange.value}
-            textColor={colorTheme.white.value}
-          />,
-        )}
-      </div>
-      <PillHandle
-        width={width}
-        height={height}
-        pillColor={colorTheme.brandNeonOrange.value}
-        borderWidth={borderWidth}
-      />
-    </div>
-  )
-}
-
-function handleDimensions(axis: Axis, scale: number): Size {
-  if (axis === 'row') {
-    return size(12 / scale, 4 / scale)
-  }
-  if (axis === 'column') {
-    return size(3 / scale, 12 / scale)
-  }
-  assertNever(axis)
-}
-
-function startInteraction(
-  event: React.MouseEvent<HTMLDivElement>,
-  dispatch: EditorDispatch,
-  canvasOffset: CanvasVector,
-  scale: number,
-  axis: Axis,
-) {
-  if (event.buttons === 1 && event.button !== 2) {
-    event.stopPropagation()
-    const canvasPositions = windowToCanvasCoordinates(
-      scale,
-      canvasOffset,
-      windowPoint({ x: event.nativeEvent.x, y: event.nativeEvent.y }),
-    )
-    dispatch([
-      CanvasActions.createInteractionSession(
-        createInteractionViaMouse(
-          canvasPositions.canvasPositionRaw,
-          Modifier.modifiersForEvent(event),
-          gridGapHandle(axis),
-          'zero-drag-not-permitted',
-        ),
-      ),
-    ])
-  }
-}
+export const GridGapControl = controlForStrategyMemoized(GridGapControlComponent)
diff --git a/editor/src/core/shared/array-utils.ts b/editor/src/core/shared/array-utils.ts
index 4c52ed009c96..ebaadea6b50b 100644
--- a/editor/src/core/shared/array-utils.ts
+++ b/editor/src/core/shared/array-utils.ts
@@ -584,3 +584,16 @@ export function sortArrayByAndReturnPermutation<T>(
 export function revertArrayOrder<T>(array: T[], permutation: number[]): T[] {
   return array.map((_, index) => array[permutation.indexOf(index)])
 }
+
+// From https://stackoverflow.com/a/31879739
+export function interleaveArray<T>(array: T[], elem: T): T[] {
+  const newArray = []
+  let i = 0
+  if (i < array.length) {
+    newArray.push(array[i++])
+  }
+  while (i < array.length) {
+    newArray.push(elem, array[i++])
+  }
+  return newArray
+}

From bb8596f89e1f83b5c31f0293bcba9dd241f84fa9 Mon Sep 17 00:00:00 2001
From: McKayla Lankau <lankaukk@yahoo.com>
Date: Tue, 15 Oct 2024 16:12:36 -0400
Subject: [PATCH 145/272] Open Advanced Grid Settings from the +# Badge also
 (#6545)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• making the badge that tells you how many advanced settings are set,
into an actual button, with a hover state, theme responsive color, that
actually opens the advanced grid settings popup
• fixing the broken colors in the dark theme of the advanced settings
popup


| Before  | After |
| ------------- | ------------- |
|
![before](https://github.com/user-attachments/assets/44aeed14-44ec-4eb8-a1b3-f9618b598b3f)|
![after](https://github.com/user-attachments/assets/e4c6d820-cfa1-486b-bcbc-76f6da3e082c)
|
| <img width="511" alt="Screenshot 2024-10-15 at 4 01 33 PM"
src="https://github.com/user-attachments/assets/5fde2b12-352e-4040-9426-7ca1aaef5b6e">
| <img width="509" alt="Screenshot 2024-10-15 at 4 02 04 PM"
src="https://github.com/user-attachments/assets/93939aba-1d80-4ff2-8e41-e801a5792fd6">
|
| <img width="268" alt="Screenshot 2024-10-15 at 4 03 03 PM"
src="https://github.com/user-attachments/assets/a1496027-81fc-456c-9936-5cdfdeba5b43">
|<img width="279" alt="Screenshot 2024-10-15 at 4 02 33 PM"
src="https://github.com/user-attachments/assets/4c5ad8df-0b64-4dbf-9ac4-76b2d65d8324">
|
---
 .../inspector/add-remove-layout-system-control.tsx           | 5 +++--
 .../components/inspector/controls/advanced-grid-modal.tsx    | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/editor/src/components/inspector/add-remove-layout-system-control.tsx b/editor/src/components/inspector/add-remove-layout-system-control.tsx
index 6d8d5499bb3a..3da4b06c2f8f 100644
--- a/editor/src/components/inspector/add-remove-layout-system-control.tsx
+++ b/editor/src/components/inspector/add-remove-layout-system-control.tsx
@@ -247,9 +247,10 @@ export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemCont
         {when(
           numberOfGridPropsSet > 0 && !menuOpen && !popupOpen,
           <Button
+            onClick={openPopup}
+            highlight
             style={{
-              color: colorTheme.secondaryBlue.value,
-              background: colorTheme.bg3.value,
+              color: colorTheme.dynamicBlue.value,
               minWidth: 22,
             }}
           >
diff --git a/editor/src/components/inspector/controls/advanced-grid-modal.tsx b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
index 444949fa60d4..99f947ba5718 100644
--- a/editor/src/components/inspector/controls/advanced-grid-modal.tsx
+++ b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { InspectorModal } from '../widgets/inspector-modal'
-import { FlexColumn, H1, SquareButton, UtopiaStyles } from '../../../uuiui'
+import { colorTheme, FlexColumn, H1, SquareButton, UtopiaStyles } from '../../../uuiui'
 import type { GridRowVariant } from '../widgets/ui-grid-row'
 import { UIGridRow } from '../widgets/ui-grid-row'
 import type { OptionChainOption } from './option-chain-control'
@@ -113,6 +113,7 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
       style={{
         ...UtopiaStyles.popup,
         minWidth: 230,
+        color: colorTheme.fg1.value,
       }}
     >
       <FlexColumn>

From 9c831a1ce48087f31a6ae5575374ffedbed1ab29 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 16 Oct 2024 09:52:38 +0200
Subject: [PATCH 146/272] Fallback striped area size when resizing grid
 cols/rows (#6543)

**Problem:**

When resizing a grid col/row if the counterpart has no size, the striped
area collapses to `0` pixels.

**Fix:**

Fallback to the frame size if the counterpart axis has no size. Also,
disable the mouse event if the dimension is not set.

| Before | After |
|------|--------|
| ![Kapture 2024-10-15 at 21 19
53](https://github.com/user-attachments/assets/e9bdcceb-07a5-4b70-9f31-7e6d8dc3b6fe)
| ![Kapture 2024-10-15 at 21 19
37](https://github.com/user-attachments/assets/dfa0b547-e7f7-48a5-a2ae-b3c173640ba8)
|


Fixes #6542
---
 .../canvas/controls/grid-controls.tsx         | 48 +++++++++++++------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 685a0cf2d6fd..00c211396b2a 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -74,14 +74,9 @@ import { windowToCanvasCoordinates } from '../dom-lookup'
 import type { Axis } from '../gap-utils'
 import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
 import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
-import type {
-  GridControlsProps,
-  GridData,
-  GridMeasurementHelperData,
-} from './grid-controls-for-strategies'
+import type { GridControlsProps, GridData } from './grid-controls-for-strategies'
 import {
   edgePositionToGridResizeEdge,
-  getNullableAutoOrTemplateBaseString,
   GridCellTestId,
   GridControlKey,
   gridEdgeToEdgePosition,
@@ -148,8 +143,22 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
   const dispatch = useDispatch()
   const colorTheme = useColorTheme()
 
+  const canResize = React.useMemo(() => {
+    return (
+      props.fromPropsAxisValues?.type === 'DIMENSIONS' &&
+      props.fromPropsAxisValues.dimensions.length > 0
+    )
+  }, [props.fromPropsAxisValues])
+
   const mouseDownHandler = React.useCallback(
     (event: React.MouseEvent): void => {
+      event.stopPropagation()
+      event.preventDefault()
+
+      if (!canResize) {
+        return
+      }
+
       function mouseUpHandler() {
         setResizingIndex(null)
         window.removeEventListener('mouseup', mouseUpHandler)
@@ -173,10 +182,8 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
           ),
         ),
       ])
-      event.stopPropagation()
-      event.preventDefault()
     },
-    [canvasOffset, dispatch, props.axis, props.dimensionIndex, scale, setResizingIndex],
+    [canvasOffset, dispatch, props.axis, props.dimensionIndex, scale, setResizingIndex, canResize],
   )
 
   const { maybeClearHighlightsOnHoverEnd } = useMaybeHighlightElement()
@@ -229,7 +236,9 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          cursor: gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start'),
+          cursor: canResize
+            ? gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start')
+            : 'default',
           pointerEvents: 'initial',
         }}
         onMouseDown={mouseDownHandler}
@@ -452,16 +461,23 @@ export const GridRowColumnResizingControlsComponent = ({
 }: GridRowColumnResizingControlsProps) => {
   const grids = useGridData([target])
 
-  function getStripedAreaLength(template: GridAutoOrTemplateBase | null, gap: number) {
+  function getStripedAreaLength(
+    template: GridAutoOrTemplateBase | null,
+    gap: number,
+  ): number | null {
     if (template?.type !== 'DIMENSIONS') {
       return null
     }
-    return template.dimensions.reduce((acc, curr, index) => {
+    const fromDimensions = template.dimensions.reduce((acc, curr, index) => {
       if (curr.type === 'NUMBER') {
         return acc + curr.value.value + (index > 0 ? gap : 0)
       }
       return acc
     }, 0)
+    if (fromDimensions <= 0) {
+      return null
+    }
+    return fromDimensions
   }
 
   const scale = useEditorState(
@@ -514,7 +530,9 @@ export const GridRowColumnResizingControlsComponent = ({
             axis={'column'}
             gap={grid.columnGap ?? grid.gap}
             padding={grid.padding}
-            stripedAreaLength={getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0)}
+            stripedAreaLength={
+              getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0) ?? grid.frame.height
+            }
             alignContent={grid.justifyContent}
             justifyContent={grid.alignContent}
           />
@@ -530,7 +548,9 @@ export const GridRowColumnResizingControlsComponent = ({
             axis={'row'}
             gap={grid.rowGap ?? grid.gap}
             padding={grid.padding}
-            stripedAreaLength={getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0)}
+            stripedAreaLength={
+              getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0) ?? grid.frame.width
+            }
             alignContent={grid.alignContent}
             justifyContent={grid.justifyContent}
           />

From 7617ff1babac2ea553272c76a755dbcde7c84111 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Wed, 16 Oct 2024 10:17:08 +0200
Subject: [PATCH 147/272] Fix: bottom strategy controls go under selection
 outline (#6547)

**Problem:**

![image](https://github.com/user-attachments/assets/32e2698d-3d12-4e98-a37c-5ec411a3408c)

Problem: The selection outline lives below the grid cell outline.

Desired behavior:the grid cell outline should be among the bottommost
controls/decorators we draw.


**Fix:**
The strategy controls already have a setting whether they want to be
bottom, undefined or top.

The fix is to actually sort them into three arrays by their position,
and then render the bottom batch under any other control in
NewCanvasControls. Mid and Top remain where they were.

**Commit Details:** (< vv pls delete this section if's not relevant)

- Added helper pushUniquelyBy
- useGetApplicableStrategyControls exhaustively collects bottom, middle
and top controls
- NewCanvasControls is updated
---
 .../canvas-strategies/canvas-strategies.tsx   | 52 +++++++++++++------
 .../canvas/controls/new-canvas-controls.tsx   | 32 ++++++++++--
 ...performance-regression-tests.spec.tsx.snap | 10 ++++
 .../performance-regression-tests.spec.tsx     |  8 +--
 editor/src/core/shared/array-utils.ts         |  6 +++
 5 files changed, 84 insertions(+), 24 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
index 97f5895519ff..f95c64cacb59 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { createSelector } from 'reselect'
-import { addAllUniquelyBy, mapDropNulls, sortBy } from '../../../core/shared/array-utils'
+import { mapDropNulls, pushUniquelyBy, sortBy } from '../../../core/shared/array-utils'
 import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template'
 import { arrayEqualsByReference, assertNever } from '../../../core/shared/utils'
 import type {
@@ -648,9 +648,15 @@ function controlPriorityToNumber(prio: ControlWithProps<any>['priority']): numbe
   }
 }
 
-export function useGetApplicableStrategyControls(
-  localSelectedViews: Array<ElementPath>,
-): Array<ControlWithProps<unknown>> {
+const controlEquals = (l: ControlWithProps<any>, r: ControlWithProps<any>) => {
+  return l.control === r.control && l.key === r.key
+}
+
+export function useGetApplicableStrategyControls(localSelectedViews: Array<ElementPath>): {
+  bottomStrategyControls: Array<ControlWithProps<unknown>>
+  middleStrategyControls: Array<ControlWithProps<unknown>>
+  topStrategyControls: Array<ControlWithProps<unknown>>
+} {
   const applicableStrategies = useGetApplicableStrategies(localSelectedViews)
   const currentStrategy = useDelayedCurrentStrategy()
   const currentlyInProgress = useEditorState(
@@ -661,30 +667,44 @@ export function useGetApplicableStrategyControls(
     'useGetApplicableStrategyControls currentlyInProgress',
   )
   return React.useMemo(() => {
-    let applicableControls: Array<ControlWithProps<unknown>> = []
     let isResizable: boolean = false
+    const bottomStrategyControls: Array<ControlWithProps<unknown>> = []
+    const middleStrategyControls: Array<ControlWithProps<unknown>> = []
+    const topStrategyControls: Array<ControlWithProps<unknown>> = []
     // Add the controls for currently applicable strategies.
     for (const strategy of applicableStrategies) {
       if (isResizableStrategy(strategy)) {
         isResizable = true
       }
       const strategyControls = getApplicableControls(currentStrategy, strategy)
-      applicableControls = addAllUniquelyBy(
-        applicableControls,
-        strategyControls,
-        (l, r) => l.control === r.control && l.key === r.key,
-      )
+
+      // uniquely add the strategyControls to the bottom, middle, and top arrays
+      for (const control of strategyControls) {
+        switch (control.priority) {
+          case 'bottom':
+            pushUniquelyBy(bottomStrategyControls, control, controlEquals)
+            break
+          case undefined:
+            pushUniquelyBy(middleStrategyControls, control, controlEquals)
+            break
+          case 'top':
+            pushUniquelyBy(topStrategyControls, control, controlEquals)
+            break
+          default:
+            assertNever(control.priority)
+        }
+      }
     }
     // Special case controls.
     if (!isResizable && !currentlyInProgress) {
-      applicableControls.push(notResizableControls)
+      middleStrategyControls.push(notResizableControls)
     }
 
-    applicableControls = applicableControls.sort(
-      (a, b) => controlPriorityToNumber(a.priority) - controlPriorityToNumber(b.priority),
-    )
-
-    return applicableControls
+    return {
+      bottomStrategyControls: bottomStrategyControls,
+      middleStrategyControls: middleStrategyControls,
+      topStrategyControls: topStrategyControls,
+    }
   }, [applicableStrategies, currentStrategy, currentlyInProgress])
 }
 
diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx
index 344d57ed840d..bd1863cff4c7 100644
--- a/editor/src/components/canvas/controls/new-canvas-controls.tsx
+++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx
@@ -285,7 +285,8 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
 
   const dispatch = useDispatch()
   const colorTheme = useColorTheme()
-  const strategyControls = useGetApplicableStrategyControls(localSelectedViews)
+  const { bottomStrategyControls, middleStrategyControls, topStrategyControls } =
+    useGetApplicableStrategyControls(localSelectedViews)
   const [inspectorHoveredControls] = useAtom(InspectorHoveredCanvasControls)
   const [inspectorFocusedControls] = useAtom(InspectorFocusedCanvasControls)
 
@@ -523,6 +524,11 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
 
   const resizeStatus = getResizeStatus()
 
+  const showStrategyControls =
+    isMyProject &&
+    isSelectOrInsertMode(editorMode) &&
+    !EP.multiplePathsAllWithTheSameUID(localSelectedViews)
+
   return (
     <>
       <div
@@ -557,6 +563,18 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
         {when(
           resizeStatus !== 'disabled',
           <>
+            {when(
+              showStrategyControls,
+              <>
+                {bottomStrategyControls.map((c) => (
+                  <RenderControlMemoized
+                    key={c.key}
+                    control={c.control.control}
+                    propsForControl={c.props}
+                  />
+                ))}
+              </>,
+            )}
             {renderHighlightControls()}
             {unless(dragInteractionActive, <LayoutParentControl />)}
             {unless(
@@ -595,14 +613,20 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
                 {renderTextEditableControls()}
                 {when(isSelectMode(editorMode), <AbsoluteChildrenOutline />)}
                 {when(
-                  isSelectOrInsertMode(editorMode) &&
-                    !EP.multiplePathsAllWithTheSameUID(localSelectedViews),
+                  showStrategyControls,
                   <>
                     {when(
                       isSelectMode(editorMode) || isInsertMode(editorMode),
                       <GridMeasurementHelpers />,
                     )}
-                    {strategyControls.map((c) => (
+                    {middleStrategyControls.map((c) => (
+                      <RenderControlMemoized
+                        key={c.key}
+                        control={c.control.control}
+                        propsForControl={c.props}
+                      />
+                    ))}
+                    {topStrategyControls.map((c) => (
                       <RenderControlMemoized
                         key={c.key}
                         control={c.control.control}
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 61e602e6e233..cb4873639caa 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -25,6 +25,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(DataReferenceParentOutline)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -808,6 +809,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(DataReferenceParentOutline)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -1480,6 +1482,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(DataReferenceParentOutline)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -1770,6 +1773,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(DataReferenceParentOutline)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -2374,6 +2378,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(DataReferenceParentOutline)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -2482,6 +2487,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(DataReferenceParentOutline)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -2601,6 +2607,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(DataReferenceParentOutline)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -2879,6 +2886,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(DataReferenceParentOutline)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -3359,6 +3367,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(DataReferenceParentOutline)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -3409,6 +3418,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(DataReferenceParentOutline)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index 435dc603ed7f..b11167da5684 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`864`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`868`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1116`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1120`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`653`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`654`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`778`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`779`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })
diff --git a/editor/src/core/shared/array-utils.ts b/editor/src/core/shared/array-utils.ts
index ebaadea6b50b..8549b2d15c1b 100644
--- a/editor/src/core/shared/array-utils.ts
+++ b/editor/src/core/shared/array-utils.ts
@@ -272,6 +272,12 @@ export function addUniquely<T extends string | number | boolean | null | undefin
   }
 }
 
+export function pushUniquelyBy<T>(array: Array<T>, value: T, eq: (l: T, r: T) => boolean): void {
+  if (array.findIndex((a) => eq(a, value)) === -1) {
+    array.push(value)
+  }
+}
+
 export function addAllUniquely<T extends string | number | boolean | null | undefined>(
   array: Array<T>,
   values: Array<T>,

From e6dbbf85075e21568da0eb2b2170198d6207cc22 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Wed, 16 Oct 2024 10:17:18 +0200
Subject: [PATCH 148/272] Fix Absolute Resize Handle Priority (#6548)

**Problem:**

![image](https://github.com/user-attachments/assets/aba59de0-34c6-4100-8863-8864b75c2546)

The absolute resize handle would be obscured by other canvas controls.

The worst problem is that some invisible controls could also obscure it
and steal mouse events.

**Fix:**
- Setting the absolute resize handle to top priority.
- Taking away the top priority from `GridRowColumnResizingControls`
---
 .../strategies/absolute-resize-bounding-box-strategy.tsx  | 1 +
 .../strategies/basic-resize-strategy.tsx                  | 1 +
 .../strategies/flex-resize-basic-strategy.tsx             | 1 +
 .../canvas-strategies/strategies/flex-resize-strategy.tsx | 1 +
 .../strategies/keyboard-absolute-resize-strategy.tsx      | 1 +
 .../canvas-strategies/strategies/resize-grid-strategy.ts  | 1 -
 .../performance-regression-tests.spec.tsx.snap            | 8 ++++----
 7 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
index 25fef072f5bb..8942da7ab335 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
@@ -120,6 +120,7 @@ export function absoluteResizeBoundingBoxStrategy(
         props: { targets: originalTargets, pathsWereReplaced: pathsWereReplaced },
         key: 'absolute-resize-control',
         show: 'visible-except-when-other-strategy-is-active',
+        priority: 'top',
       }),
       controlWithProps({
         control: ZeroSizeResizeControlWrapper,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
index 5135bee92379..1ea457c5036a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -102,6 +102,7 @@ export function basicResizeStrategy(
         props: { targets: selectedElements, pathsWereReplaced: false },
         key: 'absolute-resize-control',
         show: 'always-visible',
+        priority: 'top',
       }),
       controlWithProps({
         control: ZeroSizeResizeControlWrapper,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx
index 12b843038f08..1ecb3e442b9e 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx
@@ -107,6 +107,7 @@ export function flexResizeBasicStrategy(
         props: { targets: selectedElements, pathsWereReplaced: false },
         key: 'absolute-resize-control',
         show: 'always-visible',
+        priority: 'top',
       }),
       controlWithProps({
         control: ZeroSizeResizeControlWrapper,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx
index 1197e3c9fe62..b8d0f8860531 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx
@@ -127,6 +127,7 @@ export function flexResizeStrategy(
         props: { targets: selectedElements, pathsWereReplaced: false },
         key: 'absolute-resize-control',
         show: 'always-visible',
+        priority: 'top',
       }),
       controlWithProps({
         control: ZeroSizeResizeControlWrapper,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx
index 70f8b5e5a474..b1ebec5d2fe6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx
@@ -166,6 +166,7 @@ export function keyboardAbsoluteResizeStrategy(
         props: { targets: selectedElements, pathsWereReplaced: pathsWereReplaced },
         key: 'absolute-resize-control',
         show: 'visible-except-when-other-strategy-is-active',
+        priority: 'top',
       }),
     ],
     fitness: getFitness(interactionSession),
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index c3ba580f450c..a2f66e3a36af 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -75,7 +75,6 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         props: { target: gridPath },
         key: `grid-row-col-resize-controls-${EP.toString(gridPath)}`,
         show: 'always-visible',
-        priority: 'top',
       },
       controlsForGridPlaceholders(gridPath),
     ],
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index cb4873639caa..d563c0adb06c 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -58,6 +58,8 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div",
   "/null/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
@@ -88,8 +90,6 @@ Array [
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
-  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
-  "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div/ElementsOutsideVisibleAreaIndicator/Symbol(react.memo)(IndicatorArrow)",
   "/div/div/NavigatorComponent/Symbol(react.memo)()",
@@ -842,6 +842,8 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div",
   "/null/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
@@ -872,8 +874,6 @@ Array [
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
-  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
-  "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div/ElementsOutsideVisibleAreaIndicator/Symbol(react.memo)(IndicatorArrow)",
   "/div/div/NavigatorComponent/Symbol(react.memo)()",

From 2f54a7862d2b9ebf18c30d561c1103e3b3ed4477 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 16 Oct 2024 09:18:05 +0100
Subject: [PATCH 149/272] fix(inspector) Display Grid Template Ellipsis When
 Hovered (#6539)

- Moved the logic in `AxisDimensionControl` that governed the visibility
of the ellipsis to be purely React based instead of using Emotion CSS.
---
 .../src/components/inspector/flex-section.tsx | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 0e9fef71b0db..6bf0d4680eff 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -92,8 +92,6 @@ import {
 import type { Axis } from '../canvas/gap-utils'
 import { GridExpressionInput } from '../../uuiui/inputs/grid-expression-input'
 
-const axisDropdownMenuButton = 'axisDropdownMenuButton'
-
 function getLayoutSystem(
   layoutSystem: DetectedLayoutSystem | null | undefined,
 ): 'grid' | 'flex' | null {
@@ -553,20 +551,20 @@ function AxisDimensionControl({
 
   const gridExpressionInputFocused = useGridExpressionInputFocused()
 
+  const [isHovered, setIsHovered] = React.useState(false)
+  const onMouseEnter = React.useCallback(() => {
+    setIsHovered(true)
+  }, [])
+  const onMouseLeave = React.useCallback(() => {
+    setIsHovered(false)
+  }, [])
+
   return (
     <div
       key={`col-${value}-${index}`}
       style={{ display: 'flex', alignItems: 'center', gap: 6 }}
-      css={{
-        [`& > .${axisDropdownMenuButton}`]: {
-          visibility: isOpen ? 'visible' : 'hidden',
-        },
-        ':hover': {
-          [`& > .${axisDropdownMenuButton}`]: {
-            visibility: 'visible',
-          },
-        },
-      }}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     >
       <div
         style={{
@@ -600,9 +598,9 @@ function AxisDimensionControl({
           onBlur={gridExpressionInputFocused.onBlur}
           keywords={gridDimensionDropdownKeywords}
         />
-        {unless(
-          gridExpressionInputFocused.focused,
-          <SquareButton className={axisDropdownMenuButton}>
+        {when(
+          (isHovered && !gridExpressionInputFocused.focused) || isOpen,
+          <SquareButton>
             <DropdownMenu align='end' items={items} opener={opener} onOpenChange={onOpenChange} />
           </SquareButton>,
         )}

From 03f7675af0113d6e13a8dae794ccd43538cfdd01 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 16 Oct 2024 11:22:03 +0200
Subject: [PATCH 150/272] Partial grid resize mixed with absolute resize
 (#6546)

**Problem:**

When a grid child is stretching on a single direction it should be
possible to cell-resize it along that direction, while element-resize it
in the other direction. The diagonal resize controls should be disabled
in that case.

**Fix:**

Do that.


https://github.com/user-attachments/assets/e53be7c8-08fc-4ffe-8248-d147e01981f9

Fixes #6544
---
 .../grid-resize-element-strategy.ts           |  4 +-
 .../canvas/controls/grid-controls.tsx         | 41 ++++++++-
 .../select-mode/absolute-resize-control.tsx   | 89 +++++++++++++++----
 .../components/inspector/inspector-common.ts  | 21 +++++
 ...performance-regression-tests.spec.tsx.snap | 70 ++++++++-------
 .../performance-regression-tests.spec.tsx     |  4 +-
 6 files changed, 173 insertions(+), 56 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index ed1a5e39d48b..f8b520bfe55f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -5,7 +5,7 @@ import {
   isInfinityRectangle,
   rectangleIntersection,
 } from '../../../../core/shared/math-utils'
-import { isFillOrStretchModeApplied } from '../../../inspector/inspector-common'
+import { isFillOrStretchModeAppliedOnAnySide } from '../../../inspector/inspector-common'
 import {
   controlsForGridPlaceholders,
   gridEdgeToEdgePosition,
@@ -49,7 +49,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  if (!isFillOrStretchModeApplied(canvasState.startingMetadata, selectedElement)) {
+  if (!isFillOrStretchModeAppliedOnAnySide(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 00c211396b2a..47f20a9bc565 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -88,6 +88,7 @@ import {
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 import { useResizeEdges } from './select-mode/use-resize-edges'
 import { getGridHelperStyleMatchingTargetGrid } from './grid-controls-helpers'
+import { isFillOrStretchModeAppliedOnSpecificSide } from '../../inspector/inspector-common'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -1586,6 +1587,28 @@ export const GridResizeControlsComponent = ({ target }: GridResizeControlProps)
     },
   })
 
+  const resizeDirection = useEditorState(
+    Substores.metadata,
+    (store) => {
+      if (element == null) {
+        return { horizontal: false, vertical: false }
+      }
+      return {
+        horizontal: isFillOrStretchModeAppliedOnSpecificSide(
+          store.editor.jsxMetadata,
+          element.elementPath,
+          'horizontal',
+        ),
+        vertical: isFillOrStretchModeAppliedOnSpecificSide(
+          store.editor.jsxMetadata,
+          element.elementPath,
+          'vertical',
+        ),
+      }
+    },
+    'GridResizeControlsComponent resizeDirection',
+  )
+
   if (
     element == null ||
     element.globalFrame == null ||
@@ -1618,10 +1641,20 @@ export const GridResizeControlsComponent = ({ target }: GridResizeControlProps)
             pointerEvents: 'none',
           }}
         >
-          {resizeEdges.top}
-          {resizeEdges.left}
-          {resizeEdges.bottom}
-          {resizeEdges.right}
+          {when(
+            resizeDirection.vertical,
+            <React.Fragment>
+              {resizeEdges.top}
+              {resizeEdges.bottom}
+            </React.Fragment>,
+          )}
+          {when(
+            resizeDirection.horizontal,
+            <React.Fragment>
+              {resizeEdges.left}
+              {resizeEdges.right}
+            </React.Fragment>,
+          )}
         </div>
       </div>
     </CanvasOffsetWrapper>
diff --git a/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx b/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
index 366453bbf8ad..afa79fca4bc8 100644
--- a/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
@@ -24,6 +24,8 @@ import type { FixedHugFill } from '../../../inspector/inspector-common'
 import {
   detectFillHugFixedState,
   invert,
+  isFillOrStretchModeAppliedOnAnySide,
+  isFillOrStretchModeAppliedOnSpecificSide,
   resizeToFitCommands,
 } from '../../../inspector/inspector-common'
 import { setPropHugStrategies } from '../../../inspector/inspector-strategies/inspector-strategies'
@@ -135,6 +137,38 @@ export const AbsoluteResizeControl = controlForStrategyMemoized(
       onEdgeDoubleClick,
     })
 
+    const canResize = useEditorState(
+      Substores.metadata,
+      (store) => {
+        const metadata = store.editor.jsxMetadata
+
+        let horizontally = true
+        let vertically = true
+        let diagonally = true
+
+        for (const element of selectedElementsRef.current) {
+          if (MetadataUtils.isGridCell(metadata, element)) {
+            if (isFillOrStretchModeAppliedOnAnySide(metadata, element)) {
+              diagonally = false
+            }
+            if (isFillOrStretchModeAppliedOnSpecificSide(metadata, element, 'horizontal')) {
+              horizontally = false
+            }
+            if (isFillOrStretchModeAppliedOnSpecificSide(metadata, element, 'vertical')) {
+              vertically = false
+            }
+          }
+        }
+
+        return {
+          horizontally: horizontally,
+          vertically: vertically,
+          diagonally: diagonally,
+        }
+      },
+      'AbsoluteResizeControl canResize',
+    )
+
     return (
       <CanvasOffsetWrapper>
         <div
@@ -145,22 +179,45 @@ export const AbsoluteResizeControl = controlForStrategyMemoized(
             pointerEvents: 'none',
           }}
         >
-          {resizeEdges.top}
-          {resizeEdges.left}
-          {resizeEdges.bottom}
-          {resizeEdges.right}
-          <ResizePoint ref={topLeftRef} position={{ x: 0, y: 0 }} cursor={CSSCursor.ResizeNWSE} />
-          <ResizePoint ref={topRightRef} position={{ x: 1, y: 0 }} cursor={CSSCursor.ResizeNESW} />
-          <ResizePoint
-            ref={bottomLeftRef}
-            position={{ x: 0, y: 1 }}
-            cursor={CSSCursor.ResizeNESW}
-          />
-          <ResizePoint
-            ref={bottomRightRef}
-            position={{ x: 1, y: 1 }}
-            cursor={CSSCursor.ResizeNWSE}
-          />
+          {when(
+            canResize.vertically,
+            <React.Fragment>
+              {resizeEdges.top}
+              {resizeEdges.bottom}
+            </React.Fragment>,
+          )}
+          {when(
+            canResize.horizontally,
+            <React.Fragment>
+              {resizeEdges.left}
+              {resizeEdges.right}
+            </React.Fragment>,
+          )}
+          {when(
+            canResize.diagonally,
+            <React.Fragment>
+              <ResizePoint
+                ref={topLeftRef}
+                position={{ x: 0, y: 0 }}
+                cursor={CSSCursor.ResizeNWSE}
+              />
+              <ResizePoint
+                ref={topRightRef}
+                position={{ x: 1, y: 0 }}
+                cursor={CSSCursor.ResizeNESW}
+              />
+              <ResizePoint
+                ref={bottomLeftRef}
+                position={{ x: 0, y: 1 }}
+                cursor={CSSCursor.ResizeNESW}
+              />
+              <ResizePoint
+                ref={bottomRightRef}
+                position={{ x: 1, y: 1 }}
+                cursor={CSSCursor.ResizeNWSE}
+              />
+            </React.Fragment>,
+          )}
           <SizeLabel ref={resizeRef} targets={targets} pathsWereReplaced={pathsWereReplaced} />
         </div>
       </CanvasOffsetWrapper>
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index 2d6cadf9f718..decc614de98c 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -921,6 +921,27 @@ export function isFillOrStretchModeApplied(
   )
 }
 
+export function isFillOrStretchModeAppliedOnAnySide(
+  metadata: ElementInstanceMetadataMap,
+  element: ElementPath,
+): boolean {
+  return (
+    isFixedHugFillModeAppliedOnAnySide(metadata, element, 'fill') ||
+    isFixedHugFillModeAppliedOnAnySide(metadata, element, 'stretch')
+  )
+}
+
+export function isFillOrStretchModeAppliedOnSpecificSide(
+  metadata: ElementInstanceMetadataMap,
+  element: ElementPath,
+  side: 'horizontal' | 'vertical',
+): boolean {
+  return (
+    detectFillHugFixedState(side, metadata, element).fixedHugFill?.type === 'fill' ||
+    detectFillHugFixedState(side, metadata, element).fixedHugFill?.type === 'stretch'
+  )
+}
+
 export function isFixedHugFillModeAppliedOnAnySide(
   metadata: ElementInstanceMetadataMap,
   element: ElementPath,
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index d563c0adb06c..1e4ec99abbfc 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -64,30 +64,33 @@ Array [
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
+  "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
+  "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))",
   "/Symbol(react.memo)()///div:data-testid='utopia-storyboard-uid/scene-aaa/app-entity:parent/ccc-absolute-resize-control'",
   "/Symbol(react.memo)()///Symbol(react.memo)()",
   "////div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0.5-0'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0-0.5'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0.5-1'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-1-0.5'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-0-0'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-1-0'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-0-1'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-1-1'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0.5-0'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0.5-1'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0-0.5'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-1-0.5'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-0-0'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-1-0'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-0-1'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-1-1'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
@@ -848,30 +851,33 @@ Array [
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))",
+  "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
+  "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))",
   "/Symbol(react.memo)()///div:data-testid='utopia-storyboard-uid/scene-aaa/app-entity:parent/ccc-absolute-resize-control'",
   "/Symbol(react.memo)()///Symbol(react.memo)()",
   "////div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0.5-0'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0-0.5'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0.5-1'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-1-0.5'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-0-0'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-1-0'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-0-1'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-1-1'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0.5-0'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0.5-1'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-0-0.5'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))/Symbol(react.forward_ref)(ResizeEdge)/div:data-testid='resize-control-1-0.5'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-0-0'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-1-0'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-0-1'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-1-1'",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index b11167da5684..57938fa23a2c 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`654`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`657`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`779`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`782`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })

From e6f3148eac50658ce8d924c1c092286054514588 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 16 Oct 2024 11:44:14 +0200
Subject: [PATCH 151/272] Conditional auto cols/rows input in the inspector,
 auto template in the advanced modal (#6541)

This is a followup to
https://github.com/concrete-utopia/utopia/pull/6533

This PR improves the previous iteration by:

1. showing the auto template input in the inspector only if there are no
template dimensions, or the auto template is set explicitly to something
that's not `auto`
2. showing the auto templates for both cols and rows in the advanced
modal
3. support dimming `auto` values in grid expression inputs to `fg6`


https://github.com/user-attachments/assets/e3ecb7f5-36ed-4a96-80d5-d3d4278e33b1




Fixes #6540
---
 .../components/inspector/common/css-utils.ts  |  32 ++++
 .../controls/advanced-grid-modal.tsx          |  40 +++++
 .../inspector/flex-section.spec.browser2.tsx  |  17 +-
 .../src/components/inspector/flex-section.tsx | 147 +++++-------------
 .../grid-auto-cols-or-rows-control.tsx        | 115 ++++++++++++++
 .../src/components/inspector/grid-helpers.ts  |  51 ++++++
 .../uuiui/inputs/grid-expression-input.tsx    |   8 +
 7 files changed, 294 insertions(+), 116 deletions(-)
 create mode 100644 editor/src/components/inspector/grid-auto-cols-or-rows-control.tsx
 create mode 100644 editor/src/components/inspector/grid-helpers.ts

diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index 2f5ebadc2f04..82b0ddcfd882 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -83,6 +83,7 @@ import { parseFlex, printFlexAsAttributeValue } from '../../../printer-parsers/c
 import { memoize } from '../../../core/shared/memoize'
 import * as csstree from 'css-tree'
 import type { IcnProps } from '../../../uuiui'
+import { cssNumberEqual } from '../../canvas/controls/select-mode/controls-common'
 
 var combineRegExp = function (regexpList: Array<RegExp | string>, flags?: string) {
   let source: string = ''
@@ -595,6 +596,37 @@ export type GridCSSKeyword = BaseGridDimension & {
   value: CSSKeyword<ValidGridDimensionKeyword>
 }
 
+export function gridDimensionsAreEqual(a: GridDimension, b: GridDimension): boolean {
+  switch (a.type) {
+    case 'KEYWORD':
+      if (a.type !== b.type) {
+        return false
+      }
+      return a.value.type === b.value.type && a.value.value === b.value.value
+    case 'NUMBER':
+      if (a.type !== b.type) {
+        return false
+      }
+      return cssNumberEqual(a.value, b.value)
+    case 'MINMAX':
+      if (a.type !== b.type) {
+        return false
+      }
+      return gridDimensionsAreEqual(a.min, b.min) && gridDimensionsAreEqual(a.max, b.max)
+    case 'REPEAT':
+      if (a.type !== b.type) {
+        return false
+      }
+      return (
+        a.times === b.times &&
+        a.value.length === b.value.length &&
+        a.value.every((value, index) => gridDimensionsAreEqual(value, b.value[index]))
+      )
+    default:
+      assertNever(a)
+  }
+}
+
 type BaseGridCSSRepeat = {
   type: 'REPEAT'
   value: Array<GridDimension>
diff --git a/editor/src/components/inspector/controls/advanced-grid-modal.tsx b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
index 99f947ba5718..ec8fb4cb4abb 100644
--- a/editor/src/components/inspector/controls/advanced-grid-modal.tsx
+++ b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
@@ -16,6 +16,10 @@ import {
 import { optionalMap } from '../../../core/shared/optional-utils'
 import type { FlexAlignment } from 'utopia-api/core'
 import { FlexJustifyContent } from 'utopia-api/core'
+import { GridAutoColsOrRowsControlInner } from '../grid-auto-cols-or-rows-control'
+import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
+import { MetadataUtils } from '../../../core/model/element-metadata-utils'
+import { selectedViewsSelector } from '../inpector-selectors'
 
 export interface AdvancedGridModalProps {
   id: string
@@ -103,6 +107,25 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
     [alignContentLayoutInfo],
   )
 
+  const selectedViewsRef = useRefEditorState(selectedViewsSelector)
+  const grid = useEditorState(
+    Substores.metadata,
+    (store) => {
+      if (selectedViewsRef.current.length !== 1) {
+        return null
+      }
+      return MetadataUtils.findElementByElementPath(
+        store.editor.jsxMetadata,
+        selectedViewsRef.current[0],
+      )
+    },
+    'AdvancedGridModal grid',
+  )
+
+  if (grid == null) {
+    return null
+  }
+
   const advancedGridModal = (
     <InspectorModal
       offsetX={modalOffset.x}
@@ -191,6 +214,23 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
             onOpenChange={toggleAlignContentDropdown}
           />
         </UIGridRow>
+        <UIGridRow padded variant='<-------------1fr------------->'>
+          <span style={{ fontWeight: 600 }}>Template</span>
+        </UIGridRow>
+        <UIGridRow
+          padded
+          variant={rowVariant}
+          className={`ignore-react-onclickoutside-${props.id}`}
+        >
+          <GridAutoColsOrRowsControlInner grid={grid} axis='column' label='Auto Cols' />
+        </UIGridRow>
+        <UIGridRow
+          padded
+          variant={rowVariant}
+          className={`ignore-react-onclickoutside-${props.id}`}
+        >
+          <GridAutoColsOrRowsControlInner grid={grid} axis='row' label='Auto Rows' />
+        </UIGridRow>
       </FlexColumn>
     </InspectorModal>
   )
diff --git a/editor/src/components/inspector/flex-section.spec.browser2.tsx b/editor/src/components/inspector/flex-section.spec.browser2.tsx
index f191ed5c125a..fb151839b8b8 100644
--- a/editor/src/components/inspector/flex-section.spec.browser2.tsx
+++ b/editor/src/components/inspector/flex-section.spec.browser2.tsx
@@ -2,7 +2,7 @@ import { selectComponentsForTest } from '../../utils/utils.test-utils'
 import { renderTestEditorWithCode } from '../canvas/ui-jsx.test-utils'
 import * as EP from '../../core/shared/element-path'
 import { act, fireEvent, screen } from '@testing-library/react'
-import { GridAutoColsOrRowsControlTestId } from './flex-section'
+import { GridAutoColsOrRowsControlTestId } from './grid-auto-cols-or-rows-control'
 
 describe('flex section', () => {
   describe('grid dimensions', () => {
@@ -78,7 +78,10 @@ describe('flex section', () => {
   })
   describe('auto cols/rows', () => {
     it('can set a number', async () => {
-      const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
+      const renderResult = await renderTestEditorWithCode(
+        gridProjectWithoutTemplate,
+        'await-first-dom-report',
+      )
       await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
       const control: HTMLInputElement = await screen.findByTestId(
         GridAutoColsOrRowsControlTestId('column'),
@@ -89,7 +92,10 @@ describe('flex section', () => {
       expect(control.value).toBe('50px')
     })
     it('can set a keyword', async () => {
-      const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
+      const renderResult = await renderTestEditorWithCode(
+        gridProjectWithoutTemplate,
+        'await-first-dom-report',
+      )
       await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
       const control: HTMLInputElement = await screen.findByTestId(
         GridAutoColsOrRowsControlTestId('column'),
@@ -100,7 +106,10 @@ describe('flex section', () => {
       expect(control.value).toBe('min-content')
     })
     it('can set an expression', async () => {
-      const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
+      const renderResult = await renderTestEditorWithCode(
+        gridProjectWithoutTemplate,
+        'await-first-dom-report',
+      )
       await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
       const control: HTMLInputElement = await screen.findByTestId(
         GridAutoColsOrRowsControlTestId('column'),
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 6bf0d4680eff..5114495c30a3 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -48,8 +48,6 @@ import {
   gridCSSNumber,
   isCSSKeyword,
   isCSSNumber,
-  isEmptyInputValue,
-  isGridCSSNumber,
   printArrayGridDimensions,
   type GridDimension,
 } from './common/css-utils'
@@ -91,6 +89,12 @@ import {
 } from '../canvas/controls/select-mode/select-mode-hooks'
 import type { Axis } from '../canvas/gap-utils'
 import { GridExpressionInput } from '../../uuiui/inputs/grid-expression-input'
+import {
+  gridDimensionDropdownKeywords,
+  parseGridDimensionInput,
+  useGridExpressionInputFocused,
+} from './grid-helpers'
+import { GridAutoColsOrRowsControl } from './grid-auto-cols-or-rows-control'
 
 function getLayoutSystem(
   layoutSystem: DetectedLayoutSystem | null | undefined,
@@ -233,6 +237,12 @@ const TemplateDimensionControl = React.memo(
       return fromProps
     }, [grid, axis, values])
 
+    const autoTemplate = React.useMemo(() => {
+      return axis === 'column'
+        ? grid.specialSizeMeasurements.containerGridPropertiesFromProps.gridAutoColumns
+        : grid.specialSizeMeasurements.containerGridPropertiesFromProps.gridAutoRows
+    }, [grid, axis])
+
     const onUpdateDimension = React.useCallback(
       (index: number) => (newValue: GridDimension) => {
         if (template?.type !== 'DIMENSIONS') {
@@ -464,6 +474,20 @@ const TemplateDimensionControl = React.memo(
 
     const dimensionsWithGeneratedIndexes = useGeneratedIndexesFromGridDimensions(values)
 
+    const showAutoColsOrRows = React.useMemo(() => {
+      return (
+        template?.type !== 'DIMENSIONS' ||
+        template.dimensions.length === 0 ||
+        (autoTemplate?.type === 'DIMENSIONS' &&
+          autoTemplate.dimensions.length > 0 &&
+          !(
+            autoTemplate.dimensions.length === 1 &&
+            autoTemplate.dimensions[0].type === 'KEYWORD' &&
+            autoTemplate.dimensions[0].value.value === 'auto'
+          ))
+      )
+    }, [template, autoTemplate])
+
     return (
       <div
         style={{
@@ -492,19 +516,20 @@ const TemplateDimensionControl = React.memo(
             opener={openDropdown}
           />
         ))}
-        <AutoColsOrRowsControl grid={grid} axis={axis} />
+        {when(
+          showAutoColsOrRows,
+          <GridAutoColsOrRowsControl
+            grid={grid}
+            axis={axis}
+            label={axis === 'column' ? 'Auto Cols' : 'Auto Rows'}
+          />,
+        )}
       </div>
     )
   },
 )
 TemplateDimensionControl.displayName = 'TemplateDimensionControl'
 
-const gridDimensionDropdownKeywords = [
-  { label: 'Auto', value: cssKeyword('auto') },
-  { label: 'Min-Content', value: cssKeyword('min-content') },
-  { label: 'Max-Content', value: cssKeyword('max-content') },
-]
-
 function AxisDimensionControl({
   value,
   index,
@@ -597,6 +622,7 @@ function AxisDimensionControl({
           onFocus={gridExpressionInputFocused.onFocus}
           onBlur={gridExpressionInputFocused.onBlur}
           keywords={gridDimensionDropdownKeywords}
+          defaultValue={gridCSSKeyword(cssKeyword('auto'), null)}
         />
         {when(
           (isHovered && !gridExpressionInputFocused.focused) || isOpen,
@@ -1090,106 +1116,3 @@ function useGeneratedIndexesFromGridDimensions(
     return result
   }, [dimensions])
 }
-
-const useGridExpressionInputFocused = () => {
-  const [focused, setFocused] = React.useState(false)
-  const onFocus = React.useCallback(() => setFocused(true), [])
-  const onBlur = React.useCallback(() => setFocused(false), [])
-  return { focused, onFocus, onBlur }
-}
-
-function parseGridDimensionInput(
-  value: UnknownOrEmptyInput<CSSNumber | CSSKeyword<ValidGridDimensionKeyword>>,
-  currentValue: GridDimension | null,
-) {
-  if (isCSSNumber(value)) {
-    const maybeUnit =
-      currentValue != null && isGridCSSNumber(currentValue) ? currentValue.value.unit : null
-    return gridCSSNumber(
-      cssNumber(value.value, value.unit ?? maybeUnit),
-      currentValue?.areaName ?? null,
-    )
-  } else if (isCSSKeyword(value)) {
-    return gridCSSKeyword(value, currentValue?.areaName ?? null)
-  } else if (isEmptyInputValue(value)) {
-    return gridCSSKeyword(cssKeyword('auto'), currentValue?.areaName ?? null)
-  } else {
-    return null
-  }
-}
-
-const AutoColsOrRowsControl = React.memo(
-  (props: { axis: 'column' | 'row'; grid: ElementInstanceMetadata }) => {
-    const value = React.useMemo(() => {
-      const template = props.grid.specialSizeMeasurements.containerGridPropertiesFromProps
-      const data = props.axis === 'column' ? template.gridAutoColumns : template.gridAutoRows
-      if (data?.type !== 'DIMENSIONS') {
-        return null
-      }
-      return data.dimensions[0]
-    }, [props.grid, props.axis])
-
-    const dispatch = useDispatch()
-
-    const onUpdateDimension = React.useCallback(
-      (newDimension: GridDimension) => {
-        dispatch([
-          applyCommandsAction([
-            setProperty(
-              'always',
-              props.grid.elementPath,
-              PP.create('style', props.axis === 'column' ? 'gridAutoColumns' : 'gridAutoRows'),
-              printArrayGridDimensions([newDimension]),
-            ),
-          ]),
-        ])
-      },
-      [props.grid, props.axis, dispatch],
-    )
-
-    const onUpdateNumberOrKeyword = React.useCallback(
-      (newValue: UnknownOrEmptyInput<CSSNumber | CSSKeyword<ValidGridDimensionKeyword>>) => {
-        const parsed = parseGridDimensionInput(newValue, null)
-        if (parsed == null) {
-          return
-        }
-        onUpdateDimension(parsed)
-      },
-      [onUpdateDimension],
-    )
-
-    const autoColsOrRowsValueFocused = useGridExpressionInputFocused()
-
-    return (
-      <div
-        style={{
-          display: 'grid',
-          gridAutoFlow: 'column',
-          alignItems: 'center',
-          gap: 6,
-          gridTemplateColumns: autoColsOrRowsValueFocused.focused
-            ? '40px auto'
-            : `40px auto ${UtopiaTheme.layout.inputHeight.default}px`,
-          gridTemplateRows: '1fr',
-          width: '100%',
-        }}
-      >
-        <div>Default</div>
-        <GridExpressionInput
-          testId={GridAutoColsOrRowsControlTestId(props.axis)}
-          value={value ?? gridCSSKeyword(cssKeyword('auto'), null)}
-          onUpdateNumberOrKeyword={onUpdateNumberOrKeyword}
-          onUpdateDimension={onUpdateDimension}
-          onFocus={autoColsOrRowsValueFocused.onFocus}
-          onBlur={autoColsOrRowsValueFocused.onBlur}
-          keywords={gridDimensionDropdownKeywords}
-        />
-      </div>
-    )
-  },
-)
-AutoColsOrRowsControl.displayName = 'AutoColsOrRowsControl'
-
-export function GridAutoColsOrRowsControlTestId(axis: 'column' | 'row'): string {
-  return `grid-template-auto-${axis}`
-}
diff --git a/editor/src/components/inspector/grid-auto-cols-or-rows-control.tsx b/editor/src/components/inspector/grid-auto-cols-or-rows-control.tsx
new file mode 100644
index 000000000000..6a60037d8866
--- /dev/null
+++ b/editor/src/components/inspector/grid-auto-cols-or-rows-control.tsx
@@ -0,0 +1,115 @@
+import React from 'react'
+import { useDispatch } from '../editor/store/dispatch-context'
+import { UtopiaTheme } from '../../uuiui'
+import type {
+  CSSKeyword,
+  CSSNumber,
+  UnknownOrEmptyInput,
+  ValidGridDimensionKeyword,
+} from './common/css-utils'
+import {
+  cssKeyword,
+  gridCSSKeyword,
+  printArrayGridDimensions,
+  type GridDimension,
+} from './common/css-utils'
+import { applyCommandsAction } from '../editor/actions/action-creators'
+import { setProperty } from '../canvas/commands/set-property-command'
+import * as PP from '../../core/shared/property-path'
+import { type ElementInstanceMetadata } from '../../core/shared/element-template'
+import { GridExpressionInput } from '../../uuiui/inputs/grid-expression-input'
+import {
+  gridDimensionDropdownKeywords,
+  parseGridDimensionInput,
+  useGridExpressionInputFocused,
+} from './grid-helpers'
+
+export const GridAutoColsOrRowsControl = React.memo(
+  (props: { axis: 'column' | 'row'; grid: ElementInstanceMetadata; label: string }) => {
+    const autoColsOrRowsValueFocused = useGridExpressionInputFocused()
+
+    return (
+      <div
+        style={{
+          display: 'grid',
+          gridAutoFlow: 'column',
+          alignItems: 'center',
+          gap: 6,
+          gridTemplateColumns: autoColsOrRowsValueFocused.focused
+            ? '60px auto'
+            : `60px auto ${UtopiaTheme.layout.inputHeight.default}px`,
+          gridTemplateRows: '1fr',
+          width: '100%',
+        }}
+      >
+        <GridAutoColsOrRowsControlInner {...props} />
+      </div>
+    )
+  },
+)
+GridAutoColsOrRowsControl.displayName = 'GridAutoColsOrRowsControl'
+
+export const GridAutoColsOrRowsControlInner = React.memo(
+  (props: { axis: 'column' | 'row'; grid: ElementInstanceMetadata; label: string }) => {
+    const value = React.useMemo(() => {
+      const template = props.grid.specialSizeMeasurements.containerGridPropertiesFromProps
+      const data = props.axis === 'column' ? template.gridAutoColumns : template.gridAutoRows
+      if (data?.type !== 'DIMENSIONS') {
+        return null
+      }
+      return data.dimensions[0]
+    }, [props.grid, props.axis])
+
+    const dispatch = useDispatch()
+
+    const onUpdateDimension = React.useCallback(
+      (newDimension: GridDimension) => {
+        dispatch([
+          applyCommandsAction([
+            setProperty(
+              'always',
+              props.grid.elementPath,
+              PP.create('style', props.axis === 'column' ? 'gridAutoColumns' : 'gridAutoRows'),
+              printArrayGridDimensions([newDimension]),
+            ),
+          ]),
+        ])
+      },
+      [props.grid, props.axis, dispatch],
+    )
+
+    const onUpdateNumberOrKeyword = React.useCallback(
+      (newValue: UnknownOrEmptyInput<CSSNumber | CSSKeyword<ValidGridDimensionKeyword>>) => {
+        const parsed = parseGridDimensionInput(newValue, null)
+        if (parsed == null) {
+          return
+        }
+        onUpdateDimension(parsed)
+      },
+      [onUpdateDimension],
+    )
+
+    const autoColsOrRowsValueFocused = useGridExpressionInputFocused()
+
+    return (
+      <React.Fragment>
+        <div>{props.label}</div>
+        <GridExpressionInput
+          testId={GridAutoColsOrRowsControlTestId(props.axis)}
+          value={value ?? gridCSSKeyword(cssKeyword('auto'), null)}
+          onUpdateNumberOrKeyword={onUpdateNumberOrKeyword}
+          onUpdateDimension={onUpdateDimension}
+          onFocus={autoColsOrRowsValueFocused.onFocus}
+          onBlur={autoColsOrRowsValueFocused.onBlur}
+          keywords={gridDimensionDropdownKeywords}
+          defaultValue={gridCSSKeyword(cssKeyword('auto'), null)}
+        />
+      </React.Fragment>
+    )
+  },
+)
+GridAutoColsOrRowsControlInner.displayName = 'GridAutoColsOrRowsControlInner'
+
+export function GridAutoColsOrRowsControlTestId(axis: 'column' | 'row'): string {
+  return `grid-template-auto-${axis}`
+}
diff --git a/editor/src/components/inspector/grid-helpers.ts b/editor/src/components/inspector/grid-helpers.ts
new file mode 100644
index 000000000000..8e5f2b967156
--- /dev/null
+++ b/editor/src/components/inspector/grid-helpers.ts
@@ -0,0 +1,51 @@
+import React from 'react'
+import type {
+  CSSKeyword,
+  CSSNumber,
+  UnknownOrEmptyInput,
+  ValidGridDimensionKeyword,
+} from './common/css-utils'
+import {
+  cssKeyword,
+  cssNumber,
+  gridCSSKeyword,
+  gridCSSNumber,
+  isCSSKeyword,
+  isCSSNumber,
+  isEmptyInputValue,
+  isGridCSSNumber,
+  type GridDimension,
+} from './common/css-utils'
+
+export const useGridExpressionInputFocused = () => {
+  const [focused, setFocused] = React.useState(false)
+  const onFocus = React.useCallback(() => setFocused(true), [])
+  const onBlur = React.useCallback(() => setFocused(false), [])
+  return { focused, onFocus, onBlur }
+}
+
+export function parseGridDimensionInput(
+  value: UnknownOrEmptyInput<CSSNumber | CSSKeyword<ValidGridDimensionKeyword>>,
+  currentValue: GridDimension | null,
+) {
+  if (isCSSNumber(value)) {
+    const maybeUnit =
+      currentValue != null && isGridCSSNumber(currentValue) ? currentValue.value.unit : null
+    return gridCSSNumber(
+      cssNumber(value.value, value.unit ?? maybeUnit),
+      currentValue?.areaName ?? null,
+    )
+  } else if (isCSSKeyword(value)) {
+    return gridCSSKeyword(value, currentValue?.areaName ?? null)
+  } else if (isEmptyInputValue(value)) {
+    return gridCSSKeyword(cssKeyword('auto'), currentValue?.areaName ?? null)
+  } else {
+    return null
+  }
+}
+
+export const gridDimensionDropdownKeywords = [
+  { label: 'Auto', value: cssKeyword('auto') },
+  { label: 'Min-Content', value: cssKeyword('min-content') },
+  { label: 'Max-Content', value: cssKeyword('max-content') },
+]
diff --git a/editor/src/uuiui/inputs/grid-expression-input.tsx b/editor/src/uuiui/inputs/grid-expression-input.tsx
index ddbfe783de5a..f4a82b1d7f4b 100644
--- a/editor/src/uuiui/inputs/grid-expression-input.tsx
+++ b/editor/src/uuiui/inputs/grid-expression-input.tsx
@@ -5,6 +5,7 @@ import type { CSSProperties } from 'react'
 import React from 'react'
 import {
   cssKeyword,
+  gridDimensionsAreEqual,
   isGridCSSNumber,
   isValidGridDimensionKeyword,
   parseCSSNumber,
@@ -37,6 +38,7 @@ interface GridExpressionInputProps {
   onBlur: () => void
   keywords: Array<{ label: string; value: CSSKeyword<any> }>
   style?: CSSProperties
+  defaultValue: GridDimension
 }
 
 const DropdownWidth = 25
@@ -51,6 +53,7 @@ export const GridExpressionInput = React.memo(
     onBlur,
     keywords,
     style = {},
+    defaultValue,
   }: GridExpressionInputProps) => {
     const colorTheme = useColorTheme()
 
@@ -157,6 +160,10 @@ export const GridExpressionInput = React.memo(
       onBlur()
     }, [onBlur])
 
+    const isDefault = React.useMemo(() => {
+      return gridDimensionsAreEqual(value, defaultValue)
+    }, [value, defaultValue])
+
     return (
       <div
         style={style}
@@ -190,6 +197,7 @@ export const GridExpressionInput = React.memo(
           style={{
             width: inputFocused ? '100%' : `calc(100% - ${DropdownWidth}px)`,
           }}
+          css={{ color: isDefault ? colorTheme.fg6.value : colorTheme.fg0.value }}
         />
         {unless(
           inputFocused,

From aa2934220f5a2b4976eac5252fdf756570100168 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 16 Oct 2024 14:13:26 +0100
Subject: [PATCH 152/272] fix(grids) Handle Nested Grid Dragging (#6526)

- Implemented `combineApplicableControls` to collate disparate instances
of `GridControls`.
- `controlsForGridPlaceholders` has been slightly tweaked to cater for
the change in the type of `GridControlsProps` and also to handle a new
option suffix.
- Removed `pointerEvents` setting which was bizarrely the cause of the
original issue.
- Removed spurious property.
- `GridControlsComponent` now includes ancestor paths.
- `GridControlsComponent` now sorts the grid paths by their depth, so
that the bottommost event triggers fire over those that are ancestors of
that element.
---
 .../canvas-strategies/canvas-strategies.tsx   |  85 +++++++++---
 .../canvas-strategies/interaction-state.ts    |   6 +-
 ...-rearrange-move-strategy.spec.browser2.tsx |  32 +++--
 .../rearrange-grid-swap-strategy.ts           |   4 +-
 .../controls/grid-controls-for-strategies.tsx |  15 +-
 .../canvas/controls/grid-controls.tsx         | 130 +++++++++++++-----
 .../store/store-deep-equality-instances.ts    |   6 +-
 editor/src/core/shared/array-utils.ts         |   2 +-
 8 files changed, 198 insertions(+), 82 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
index f95c64cacb59..c14f07eb91c0 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -19,6 +19,7 @@ import type {
   StrategyApplicationResult,
   InteractionLifecycle,
   CustomStrategyState,
+  WhenToShowControl,
 } from './canvas-strategy-types'
 import {
   ControlDelay,
@@ -83,6 +84,11 @@ import { getReparentTargetUnified } from './strategies/reparent-helpers/reparent
 import { gridRearrangeResizeKeyboardStrategy } from './strategies/grid-rearrange-keyboard-strategy'
 import createCachedSelector from 're-reselect'
 import { getActivePlugin } from '../plugins/style-plugins'
+import {
+  controlsForGridPlaceholders,
+  GridControls,
+  isGridControlsProps,
+} from '../controls/grid-controls-for-strategies'
 
 export type CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -648,6 +654,42 @@ function controlPriorityToNumber(prio: ControlWithProps<any>['priority']): numbe
   }
 }
 
+export function combineApplicableControls(
+  strategyControls: Array<ControlWithProps<unknown>>,
+): Array<ControlWithProps<unknown>> {
+  // Separate out the instances of `GridControls`.
+  let result: Array<ControlWithProps<unknown>> = []
+  let gridControlsInstances: Array<ControlWithProps<unknown>> = []
+  for (const control of strategyControls) {
+    if (control.control === GridControls) {
+      gridControlsInstances.push(control)
+    } else {
+      result.push(control)
+    }
+  }
+
+  // Sift the instances of `GridControls`, storing their targets by when they should be shown.
+  let gridControlsTargets: Map<WhenToShowControl, Array<ElementPath>> = new Map()
+  for (const control of gridControlsInstances) {
+    if (isGridControlsProps(control.props)) {
+      const possibleTargets = gridControlsTargets.get(control.show)
+      if (possibleTargets == null) {
+        gridControlsTargets.set(control.show, control.props.targets)
+      } else {
+        possibleTargets.push(...control.props.targets)
+      }
+    }
+  }
+
+  // Create new instances of `GridControls` with the combined targets.
+  for (const [show, targets] of gridControlsTargets) {
+    result.push(controlsForGridPlaceholders(targets, show, `-${show}`))
+  }
+
+  // Return the newly created controls with the combined entries.
+  return result
+}
+
 const controlEquals = (l: ControlWithProps<any>, r: ControlWithProps<any>) => {
   return l.control === r.control && l.key === r.key
 }
@@ -667,34 +709,37 @@ export function useGetApplicableStrategyControls(localSelectedViews: Array<Eleme
     'useGetApplicableStrategyControls currentlyInProgress',
   )
   return React.useMemo(() => {
+    let strategyControls: Array<ControlWithProps<unknown>> = []
     let isResizable: boolean = false
-    const bottomStrategyControls: Array<ControlWithProps<unknown>> = []
-    const middleStrategyControls: Array<ControlWithProps<unknown>> = []
-    const topStrategyControls: Array<ControlWithProps<unknown>> = []
     // Add the controls for currently applicable strategies.
     for (const strategy of applicableStrategies) {
       if (isResizableStrategy(strategy)) {
         isResizable = true
       }
-      const strategyControls = getApplicableControls(currentStrategy, strategy)
-
-      // uniquely add the strategyControls to the bottom, middle, and top arrays
-      for (const control of strategyControls) {
-        switch (control.priority) {
-          case 'bottom':
-            pushUniquelyBy(bottomStrategyControls, control, controlEquals)
-            break
-          case undefined:
-            pushUniquelyBy(middleStrategyControls, control, controlEquals)
-            break
-          case 'top':
-            pushUniquelyBy(topStrategyControls, control, controlEquals)
-            break
-          default:
-            assertNever(control.priority)
-        }
+      strategyControls.push(...getApplicableControls(currentStrategy, strategy))
+    }
+    const combinedControls = combineApplicableControls(strategyControls)
+    const bottomStrategyControls: Array<ControlWithProps<unknown>> = []
+    const middleStrategyControls: Array<ControlWithProps<unknown>> = []
+    const topStrategyControls: Array<ControlWithProps<unknown>> = []
+
+    // uniquely add the strategyControls to the bottom, middle, and top arrays
+    for (const control of combinedControls) {
+      switch (control.priority) {
+        case 'bottom':
+          pushUniquelyBy(bottomStrategyControls, control, controlEquals)
+          break
+        case undefined:
+          pushUniquelyBy(middleStrategyControls, control, controlEquals)
+          break
+        case 'top':
+          pushUniquelyBy(topStrategyControls, control, controlEquals)
+          break
+        default:
+          assertNever(control.priority)
       }
     }
+
     // Special case controls.
     if (!isResizable && !currentlyInProgress) {
       middleStrategyControls.push(notResizableControls)
diff --git a/editor/src/components/canvas/canvas-strategies/interaction-state.ts b/editor/src/components/canvas/canvas-strategies/interaction-state.ts
index 8be4107e03b3..d781e4a7f9a6 100644
--- a/editor/src/components/canvas/canvas-strategies/interaction-state.ts
+++ b/editor/src/components/canvas/canvas-strategies/interaction-state.ts
@@ -646,13 +646,13 @@ export function reorderSlider(): ReorderSlider {
 
 export interface GridCellHandle {
   type: 'GRID_CELL_HANDLE'
-  id: string
+  path: ElementPath
 }
 
-export function gridCellHandle(params: { id: string }): GridCellHandle {
+export function gridCellHandle(params: { path: ElementPath }): GridCellHandle {
   return {
     type: 'GRID_CELL_HANDLE',
-    id: params.id,
+    path: params.path,
   }
 }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
index 62683a10f419..31d979dd8cc7 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
@@ -11,7 +11,8 @@ import {
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 import CanvasActions from '../../canvas-actions'
 import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
-import { mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
+import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
+import { mouseDragFromPointToPoint, mouseUpAtPoint } from '../../event-helpers.test-utils'
 import type { EditorRenderResult } from '../../ui-jsx.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
 import type { GridCellCoordinates } from './grid-cell-bounds'
@@ -572,6 +573,7 @@ export var storyboard = (
           childCenter,
           offsetPoint(childCenter, windowPoint({ x: 280, y: 120 })),
           {
+            staggerMoveEvents: false,
             moveBeforeMouseDown: true,
           },
         )
@@ -767,24 +769,28 @@ async function runMoveTest(
   const sourceRect = sourceGridCell.getBoundingClientRect()
   const targetRect = targetGridCell.getBoundingClientRect()
 
+  const endPoint = getRectCenter(
+    localRectangle({
+      x: targetRect.x,
+      y: targetRect.y,
+      width: targetRect.width,
+      height: targetRect.height,
+    }),
+  )
+
   await mouseDragFromPointToPoint(
     sourceGridCell,
     {
       x: sourceRect.x + 10,
       y: sourceRect.y + 10,
     },
-    getRectCenter(
-      localRectangle({
-        x: targetRect.x,
-        y: targetRect.y,
-        width: targetRect.width,
-        height: targetRect.height,
-      }),
-    ),
+    endPoint,
     {
+      staggerMoveEvents: false,
       moveBeforeMouseDown: true,
     },
   )
+  await mouseUpAtPoint(editor.renderedDOM.getByTestId(CanvasControlsContainerID), endPoint)
 
   return editor.renderedDOM.getByTestId(props.testId).style
 }
@@ -941,7 +947,7 @@ export var storyboard = (
             height: '100%',
           }}
           data-uid='pink'
-		  data-testid='pink'
+		      data-testid='pink'
           data-label='pink'
         />
         <div
@@ -951,7 +957,7 @@ export var storyboard = (
             height: '100%',
           }}
           data-uid='orange'
-		  data-testid='orange'
+		      data-testid='orange'
           data-label='orange'
         />
         <div
@@ -961,7 +967,7 @@ export var storyboard = (
             height: '100%',
           }}
           data-uid='cyan'
-		  data-testid='cyan'
+		      data-testid='cyan'
           data-label='cyan'
         />
         <div
@@ -971,7 +977,7 @@ export var storyboard = (
             height: '100%',
           }}
           data-uid='blue'
-		  data-testid='blue'
+		      data-testid='blue'
           data-label='blue'
         />
       </div>
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
index 9ff15bde58c9..00429caaba56 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
@@ -104,11 +104,11 @@ export const rearrangeGridSwapStrategy: CanvasStrategyFactory = (
 
       if (
         pointerOverChild != null &&
-        EP.toUid(pointerOverChild.elementPath) !== interactionSession.activeControl.id
+        EP.toUid(pointerOverChild.elementPath) !== EP.toUid(interactionSession.activeControl.path)
       ) {
         commands.push(
           ...swapChildrenCommands({
-            grabbedElementUid: interactionSession.activeControl.id,
+            grabbedElementUid: EP.toUid(interactionSession.activeControl.path),
             swapToElementUid: EP.toUid(pointerOverChild.elementPath),
             children: children,
             parentPath: EP.parentPath(selectedElement),
diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index 5d6fd793dfe5..e492acf30673 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -219,9 +219,14 @@ export interface GridControlProps {
 }
 
 export interface GridControlsProps {
+  type: 'GRID_CONTROLS_PROPS'
   targets: ElementPath[]
 }
 
+export function isGridControlsProps(props: unknown): props is GridControlsProps {
+  return (props as GridControlsProps).type === 'GRID_CONTROLS_PROPS'
+}
+
 export const GridControls = controlForStrategyMemoized<GridControlsProps>(GridControlsComponent)
 
 interface GridResizeControlProps {
@@ -264,13 +269,17 @@ export function edgePositionToGridResizeEdge(position: EdgePosition): GridResize
 }
 
 export function controlsForGridPlaceholders(
-  gridPath: ElementPath,
+  gridPath: ElementPath | Array<ElementPath>,
   whenToShow: WhenToShowControl = 'always-visible',
+  suffix: string | null = null,
 ): ControlWithProps<any> {
   return {
     control: GridControls,
-    props: { targets: [gridPath] },
-    key: GridControlsKey(gridPath),
+    props: {
+      type: 'GRID_CONTROLS_PROPS',
+      targets: Array.isArray(gridPath) ? gridPath : [gridPath],
+    },
+    key: `GridControls${suffix == null ? '' : suffix}`,
     show: whenToShow,
     priority: 'bottom',
   }
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 47f20a9bc565..0ca1c10c48db 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -563,9 +563,10 @@ export const GridRowColumnResizingControlsComponent = ({
 
 interface GridControlProps {
   grid: GridData
+  controlsVisible: 'visible' | 'not-visible'
 }
 
-const GridControl = React.memo<GridControlProps>(({ grid }) => {
+const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) => {
   const dispatch = useDispatch()
   const controls = useAnimationControls()
   const colorTheme = useColorTheme()
@@ -598,7 +599,7 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
       store.editor.canvas.interactionSession?.interactionData.type === 'DRAG' &&
       store.editor.canvas.interactionSession?.interactionData.modifiers.cmd !== true &&
       store.editor.canvas.interactionSession?.interactionData.drag != null
-        ? store.editor.canvas.interactionSession.activeControl.id
+        ? EP.toUid(store.editor.canvas.interactionSession.activeControl.path)
         : null,
     'GridControl activelyDraggingOrResizingCell',
   )
@@ -609,6 +610,12 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
     'GridControl currentHoveredCell',
   )
 
+  const currentHoveredGrid = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.controls.gridControlData?.grid ?? null,
+    'GridControl currentHoveredGrid',
+  )
+
   const targetsAreCellsWithPositioning = useEditorState(
     Substores.metadata,
     (store) =>
@@ -638,7 +645,7 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
   const canvasOffsetRef = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
 
   const startInteractionWithUid = React.useCallback(
-    (params: { uid: string; row: number; column: number; frame: CanvasRectangle }) =>
+    (params: { path: ElementPath; row: number; column: number; frame: CanvasRectangle }) =>
       (event: React.MouseEvent) => {
         setInitialShadowFrame(params.frame)
 
@@ -653,7 +660,7 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
             createInteractionViaMouse(
               start.canvasPositionRounded,
               Modifier.modifiersForEvent(event),
-              gridCellHandle({ id: params.uid }),
+              gridCellHandle({ path: params.path }),
               'zero-drag-not-permitted',
             ),
           ),
@@ -699,13 +706,17 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
     (store) =>
       store.editor.canvas.interactionSession != null &&
       store.editor.canvas.interactionSession.activeControl.type === 'GRID_CELL_HANDLE'
-        ? store.editor.canvas.interactionSession.activeControl.id
+        ? store.editor.canvas.interactionSession.activeControl.path
         : null,
     'GridControl dragging',
   )
 
   const shadow = React.useMemo(() => {
-    return cells.find((cell) => EP.toUid(cell.elementPath) === dragging) ?? null
+    return (
+      cells.find(
+        (cell) => EP.toUid(cell.elementPath) === (dragging == null ? null : EP.toUid(dragging)),
+      ) ?? null
+    )
   }, [cells, dragging])
 
   const [initialShadowFrame, setInitialShadowFrame] = React.useState<CanvasRectangle | null>(
@@ -795,14 +806,18 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
     gridPath: gridPath,
   })
 
-  const placeholders = range(0, grid.cells)
+  const placeholders = controlsVisible === 'visible' ? range(0, grid.cells) : []
   const baseStyle = getGridHelperStyleMatchingTargetGrid(grid)
   const style = {
     ...baseStyle,
     backgroundColor:
-      activelyDraggingOrResizingCell != null ? colorTheme.primary10.value : 'transparent',
+      activelyDraggingOrResizingCell == null || controlsVisible === 'not-visible'
+        ? 'transparent'
+        : colorTheme.primary10.value,
     outline: `1px solid ${
-      activelyDraggingOrResizingCell != null ? colorTheme.primary.value : 'transparent'
+      activelyDraggingOrResizingCell == null || controlsVisible === 'not-visible'
+        ? 'transparent'
+        : colorTheme.primary.value
     }`,
   }
 
@@ -821,8 +836,13 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
           const id = gridCellTargetId(grid.elementPath, countedRow, countedColumn)
           const borderID = `${id}-border`
 
+          const isActiveGrid =
+            (dragging != null && EP.isParentOf(grid.elementPath, dragging)) ||
+            (currentHoveredGrid != null && EP.pathsEqual(grid.elementPath, currentHoveredGrid))
           const isActiveCell =
-            countedColumn === currentHoveredCell?.column && countedRow === currentHoveredCell?.row
+            isActiveGrid &&
+            countedColumn === currentHoveredCell?.column &&
+            countedRow === currentHoveredCell?.row
 
           const activePositioningTarget = isActiveCell && targetsAreCellsWithPositioning
 
@@ -834,33 +854,29 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
               key={id}
               id={id}
               data-testid={id}
-              data-wtf={`data-wtf`}
               style={{
                 position: 'relative',
-                pointerEvents: 'initial',
                 zIndex: activePositioningTarget ? 1 : undefined,
               }}
               data-grid-row={countedRow}
               data-grid-column={countedColumn}
             >
-              <React.Fragment>
-                <div
-                  key={borderID}
-                  id={borderID}
-                  data-testid={borderID}
-                  style={{
-                    position: 'relative',
-                    left: gridPlaceholderTopOrLeftPosition(scale),
-                    top: gridPlaceholderTopOrLeftPosition(scale),
-                    width: gridPlaceholderWidthOrHeight(scale),
-                    height: gridPlaceholderWidthOrHeight(scale),
-                    borderTop: gridPlaceholderBorder(borderColor, scale),
-                    borderLeft: gridPlaceholderBorder(borderColor, scale),
-                    borderBottom: gridPlaceholderBorder(borderColor, scale),
-                    borderRight: gridPlaceholderBorder(borderColor, scale),
-                  }}
-                />
-              </React.Fragment>
+              <div
+                key={borderID}
+                id={borderID}
+                data-testid={borderID}
+                style={{
+                  position: 'relative',
+                  left: gridPlaceholderTopOrLeftPosition(scale),
+                  top: gridPlaceholderTopOrLeftPosition(scale),
+                  width: gridPlaceholderWidthOrHeight(scale),
+                  height: gridPlaceholderWidthOrHeight(scale),
+                  borderTop: gridPlaceholderBorder(borderColor, scale),
+                  borderLeft: gridPlaceholderBorder(borderColor, scale),
+                  borderBottom: gridPlaceholderBorder(borderColor, scale),
+                  borderRight: gridPlaceholderBorder(borderColor, scale),
+                }}
+              />
             </div>
           )
         })}
@@ -870,7 +886,7 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
         return (
           <div
             onMouseDown={startInteractionWithUid({
-              uid: EP.toUid(cell.elementPath),
+              path: cell.elementPath,
               frame: cell.globalFrame,
               row: cell.row,
               column: cell.column,
@@ -888,7 +904,8 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
               alignItems: 'flex-end',
               backgroundColor:
                 activelyDraggingOrResizingCell != null &&
-                EP.toUid(cell.elementPath) !== activelyDraggingOrResizingCell
+                EP.toUid(cell.elementPath) !== activelyDraggingOrResizingCell &&
+                controlsVisible === 'visible'
                   ? '#ffffff66'
                   : 'transparent',
               borderRadius:
@@ -905,7 +922,8 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
       initialShadowFrame != null &&
       interactionData?.dragStart != null &&
       interactionData?.drag != null &&
-      hoveringStart != null ? (
+      hoveringStart != null &&
+      controlsVisible === 'visible' ? (
         <motion.div
           style={{
             pointerEvents: 'none',
@@ -994,19 +1012,47 @@ const GridMeasurementHelper = React.memo<{ elementPath: ElementPath }>(({ elemen
 GridMeasurementHelper.displayName = 'GridMeasurementHelper'
 
 export const GridControlsComponent = ({ targets }: GridControlsProps) => {
+  const ancestorPaths = React.useMemo(() => {
+    return targets.flatMap((target) => EP.getAncestors(target))
+  }, [targets])
+  const ancestorGrids: Array<ElementPath> = useEditorState(
+    Substores.metadata,
+    (store) => {
+      return ancestorPaths.filter((ancestorPath) => {
+        const ancestorMetadata = MetadataUtils.findElementByElementPath(
+          store.editor.jsxMetadata,
+          ancestorPath,
+        )
+        return MetadataUtils.isGridLayoutedContainer(ancestorMetadata)
+      })
+    },
+    'GridControlsComponent ancestorGrids',
+  )
+
   const targetRootCell = useEditorState(
     Substores.canvas,
     (store) => store.editor.canvas.controls.gridControlData?.rootCell ?? null,
-    'GridControls targetRootCell',
+    'GridControlsComponent targetRootCell',
   )
 
   const hoveredGrids = useEditorState(
     Substores.canvas,
     (store) => stripNulls([store.editor.canvas.controls.gridControlData?.grid]),
-    'GridControls hoveredGrids',
+    'GridControlsComponent hoveredGrids',
   )
 
-  const grids = useGridData(uniqBy([...targets, ...hoveredGrids], (a, b) => EP.pathsEqual(a, b)))
+  const gridsWithVisibleControls: Array<ElementPath> = [...targets, ...hoveredGrids]
+
+  // Uniqify the grid paths, and then sort them by depth.
+  // With the lowest depth grid at the end so that it renders on top and catches the events
+  // before those above it in the hierarchy.
+  const grids = useGridData(
+    uniqBy([...gridsWithVisibleControls, ...ancestorGrids], (a, b) => EP.pathsEqual(a, b)).sort(
+      (a, b) => {
+        return EP.fullDepth(a) - EP.fullDepth(b)
+      },
+    ),
+  )
 
   if (grids.length === 0) {
     return null
@@ -1016,7 +1062,17 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
     <div id={'grid-controls'}>
       <CanvasOffsetWrapper>
         {grids.map((grid) => {
-          return <GridControl key={GridControlKey(grid.elementPath)} grid={grid} />
+          const shouldHaveVisibleControls = EP.containsPath(
+            grid.elementPath,
+            gridsWithVisibleControls,
+          )
+          return (
+            <GridControl
+              key={GridControlKey(grid.elementPath)}
+              grid={grid}
+              controlsVisible={shouldHaveVisibleControls ? 'visible' : 'not-visible'}
+            />
+          )
         })}
         <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
       </CanvasOffsetWrapper>
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index f22431510ddb..62195fe69d70 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -2995,9 +2995,9 @@ export const BorderRadiusResizeHandleKeepDeepEquality: KeepDeepEqualityCall<
 
 export const GridCellHandleKeepDeepEquality: KeepDeepEqualityCall<GridCellHandle> =
   combine1EqualityCall(
-    (handle) => handle.id,
-    createCallWithTripleEquals<string>(),
-    (id) => gridCellHandle({ id }),
+    (handle) => handle.path,
+    ElementPathKeepDeepEquality,
+    (path) => gridCellHandle({ path }),
   )
 
 export const GridAxisHandleKeepDeepEquality: KeepDeepEqualityCall<GridAxisHandle> =
diff --git a/editor/src/core/shared/array-utils.ts b/editor/src/core/shared/array-utils.ts
index 8549b2d15c1b..d56455fcdae3 100644
--- a/editor/src/core/shared/array-utils.ts
+++ b/editor/src/core/shared/array-utils.ts
@@ -292,7 +292,7 @@ export function addAllUniquelyBy<T>(
 ): Array<T> {
   let workingArray = [...array]
   fastForEach(values, (value) => {
-    if (array.findIndex((a) => eq(a, value)) === -1) {
+    if (!workingArray.some((a) => eq(a, value))) {
       workingArray.push(value)
     }
   })

From e42de49df08d75602f685629afec35ae6adca4d7 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 16 Oct 2024 16:21:36 +0200
Subject: [PATCH 153/272] Grid rearrange strategy adds selected element to
 elementsToRerender (#6551)

**Problem:**
Grid rearrange doesn't render the result of the rearrange during the
interaction.

**Fix:**
Quick fix: It seems in some cases (remix? dragged element is component
instance?) the moved element has to be in elementsToRerender to make
sure it is rendered into its target position during the interaction.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../strategies/grid-rearrange-move-strategy.ts                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index f83c5a87519f..d798a5d4ee05 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -163,7 +163,7 @@ function getCommandsAndPatchForGridRearrange(
 
   return {
     commands: commands,
-    elementsToRerender: [EP.parentPath(selectedElement)],
+    elementsToRerender: [EP.parentPath(selectedElement), selectedElement],
   }
 }
 

From e053c5bf41c6e95339639ff6ed4f6b450cd56d90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Thu, 17 Oct 2024 11:31:07 +0200
Subject: [PATCH 154/272] Move normalization step into the dispatch flow
 (#6549)

https://github.com/user-attachments/assets/d184b155-e18a-42d6-ba84-1532f6ebd280

## Problem
The tailwind style plugin can't differentiate between a prop being
removed from the inline style prop, and that prop never having been
there at all. For example, when a flex gap is removed by dragging it in
the negative direction, it goes from positive -> 0 -> being removed from
the style prop. When the normalisation step kicks in, there's no gap
prop in the inline style, so the tailwind plugin doesn't do anything. To
make matters worse, when the gap property is removed while the
interaction is in progress, the value coming from the generated tailwind
class takes precedence, so the flex gap jumps back to its original size.

## Fix
The problem of removing props in the normalization step is fixed by
1. moving the normalization step in the display flow
2. making the normalization step aware that some props need to be
removed
3. find out which elements to normalize/which props to remove from the
dispatched actions and the strategies, and running the normalization on
those elements and prop.

The problem of prevent the CSS classes to kick in when a prop is removed
(for example, when the inline `gap` prop is removed in the flex gap
strategy), this PR adds a postprocessing step alongside the
normalization step, that patches an allowlisted set of props to a "zero"
value, which simulates the prop not being there at all

### Details
- added a test for removing the gap prop set from Tailwind
- added a `propertiesToRemove` param to `normalizeFromInlineStyle`, and
updated the tailwind style plugin to use that prop to remove classes
from the `className` prop
- added the code that finds out which elements/props to normalize from
the dispatched actions
- added the code that finds out which elements/props to normalize from
the strategies, and that tells which elements to patch during an
interaction

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #[ticket_number] (<< pls delete this line if it's not relevant)
---
 .../set-flex-gap-strategy.spec.browser2.tsx   |   8 +
 .../canvas/plugins/style-plugins.ts           |   5 +-
 .../plugins/tailwind-style-plugin.spec.ts     |   3 +-
 .../canvas/plugins/tailwind-style-plugin.ts   |  77 +++++++--
 .../components/editor/actions/action-utils.ts |  75 ++++++++-
 .../editor/store/dispatch-strategies.tsx      |  68 +++++++-
 .../src/components/editor/store/dispatch.tsx  | 158 +++++++++++++++---
 7 files changed, 347 insertions(+), 47 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx
index 72a3e7b527cf..bd91e06ef3d4 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx
@@ -772,6 +772,14 @@ export var storyboard = (
       const div = editor.renderedDOM.getByTestId(DivTestId)
       expect(div.className).toEqual('top-10 left-10 absolute flex flex-row gap-16')
     })
+
+    it('can remove tailwind gap by dragging past threshold', async () => {
+      const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
+      await selectComponentsForTest(editor, [EP.fromString('sb/scene/div')])
+      await doGapResize(editor, canvasPoint({ x: -100, y: 0 }))
+      const div = editor.renderedDOM.getByTestId(DivTestId)
+      expect(div.className).toEqual('top-10 left-10 absolute flex flex-row')
+    })
   })
 })
 
diff --git a/editor/src/components/canvas/plugins/style-plugins.ts b/editor/src/components/canvas/plugins/style-plugins.ts
index edbf8ce5720c..b4740be5ee80 100644
--- a/editor/src/components/canvas/plugins/style-plugins.ts
+++ b/editor/src/components/canvas/plugins/style-plugins.ts
@@ -7,6 +7,8 @@ import {
   getTailwindConfigCached,
   isTailwindEnabled,
 } from '../../../core/tailwind/tailwind-compilation'
+import type { PropertiesWithElementPath } from '../../editor/actions/action-utils'
+import { isFeatureEnabled } from '../../../utils/feature-switches'
 
 export interface StylePlugin {
   name: string
@@ -14,6 +16,7 @@ export interface StylePlugin {
   normalizeFromInlineStyle: (
     editorState: EditorState,
     elementsToNormalize: ElementPath[],
+    propertiesToRemove: PropertiesWithElementPath[],
   ) => EditorState
 }
 
@@ -23,7 +26,7 @@ export const Plugins = {
 } as const
 
 export function getActivePlugin(editorState: EditorState): StylePlugin {
-  if (isTailwindEnabled()) {
+  if (isFeatureEnabled('Tailwind') && isTailwindEnabled()) {
     return TailwindPlugin(getTailwindConfigCached(editorState))
   }
   return InlineStylePlugin
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts
index c4490e97d2a0..1c73ea9ef373 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts
@@ -66,6 +66,7 @@ describe('tailwind style plugin', () => {
     const normalizedEditor = TailwindPlugin(null).normalizeFromInlineStyle(
       editor.getEditorState().editor,
       [target],
+      [],
     )
 
     const normalizedElement = getJSXElementFromProjectContents(
@@ -96,7 +97,7 @@ describe('tailwind style plugin', () => {
     const target = EP.fromString('sb/scene/div')
     const normalizedEditor = TailwindPlugin(
       getTailwindConfigCached(editor.getEditorState().editor),
-    ).normalizeFromInlineStyle(editor.getEditorState().editor, [target])
+    ).normalizeFromInlineStyle(editor.getEditorState().editor, [target], [])
 
     const normalizedElement = getJSXElementFromProjectContents(
       target,
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
index 23e2e7413a9c..77bb8b9a32ef 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -1,5 +1,5 @@
 import * as TailwindClassParser from '@xengine/tailwindcss-class-parser'
-import type { JSXAttributesEntry } from 'utopia-shared/src/types'
+import type { JSExpression, JSXAttributesEntry, PropertyPath } from 'utopia-shared/src/types'
 import { isLeft } from '../../../core/shared/either'
 import { getClassNameAttribute } from '../../../core/tailwind/tailwind-options'
 import {
@@ -18,6 +18,7 @@ import type { StylePlugin } from './style-plugins'
 import type { WithPropertyTag } from '../canvas-types'
 import { withPropertyTag } from '../canvas-types'
 import type { Config } from 'tailwindcss/types/config'
+import type { PropertiesWithElementPath } from '../../editor/actions/action-utils'
 
 function parseTailwindProperty<T>(value: unknown, parse: Parser<T>): WithPropertyTag<T> | null {
   const parsed = parse(value, null)
@@ -47,7 +48,7 @@ function stringifiedStylePropValue(value: unknown): string | null {
   return null
 }
 
-function getTailwindClassMapping(classes: string[], config: Config | null) {
+function getTailwindClassMapping(classes: string[], config: Config | null): Record<string, string> {
   const mapping: Record<string, string> = {}
   classes.forEach((className) => {
     const parsed = TailwindClassParser.parse(className, config ?? undefined)
@@ -59,6 +60,55 @@ function getTailwindClassMapping(classes: string[], config: Config | null) {
   return mapping
 }
 
+function getStylePropContents(
+  styleProp: JSExpression,
+): Array<{ key: string; value: unknown }> | null {
+  if (styleProp.type === 'ATTRIBUTE_NESTED_OBJECT') {
+    return mapDropNulls(
+      (c): { key: string; value: unknown } | null =>
+        c.type === 'PROPERTY_ASSIGNMENT' &&
+        c.value.type === 'ATTRIBUTE_VALUE' &&
+        typeof c.key === 'string'
+          ? { key: c.key, value: c.value.value }
+          : null,
+      styleProp.content,
+    )
+  }
+
+  if (styleProp.type === 'ATTRIBUTE_VALUE' && typeof styleProp.value === 'object') {
+    return mapDropNulls(
+      ([key, value]) => (typeof key !== 'object' ? null : { key, value }),
+      Object.entries(styleProp.value),
+    )
+  }
+
+  return null
+}
+
+function getRemoveUpdates(properties: PropertyPath[]): UCL.ClassListUpdate[] {
+  return mapDropNulls((property) => {
+    const [maybeStyle, maybeCSSProp] = property.propertyElements
+    if (
+      maybeStyle !== 'style' ||
+      maybeCSSProp == null ||
+      !isSupportedTailwindProperty(maybeCSSProp)
+    ) {
+      return null
+    }
+    return UCL.remove(TailwindPropertyMapping[maybeCSSProp])
+  }, properties)
+}
+
+function getPropertyCleanupCommands(propertiesToRemove: PropertiesWithElementPath[]) {
+  return mapDropNulls(({ elementPath, properties }) => {
+    const removeUpdates = getRemoveUpdates(properties)
+    if (removeUpdates.length === 0) {
+      return null
+    }
+    return updateClassListCommand('always', elementPath, removeUpdates)
+  }, propertiesToRemove)
+}
+
 export const TailwindPlugin = (config: Config | null): StylePlugin => ({
   name: 'Tailwind',
   styleInfoFactory:
@@ -82,7 +132,7 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
         ),
       }
     },
-  normalizeFromInlineStyle: (editorState, elementsToNormalize) => {
+  normalizeFromInlineStyle: (editorState, elementsToNormalize, propertiesToRemove) => {
     const commands = elementsToNormalize.flatMap((elementPath) => {
       const element = getJSXElementFromProjectContents(elementPath, editorState.projectContents)
       if (element == null) {
@@ -97,19 +147,15 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
         return []
       }
 
-      const styleValue = styleAttribute.value
-      if (styleValue.type !== 'ATTRIBUTE_NESTED_OBJECT') {
+      const styleValue = getStylePropContents(styleAttribute.value)
+      if (styleValue == null) {
         return []
       }
 
       const styleProps = mapDropNulls(
         (c): { key: keyof typeof TailwindPropertyMapping; value: unknown } | null =>
-          c.type === 'PROPERTY_ASSIGNMENT' &&
-          c.value.type === 'ATTRIBUTE_VALUE' &&
-          isSupportedTailwindProperty(c.key)
-            ? { key: c.key, value: c.value.value }
-            : null,
-        styleValue.content,
+          isSupportedTailwindProperty(c.key) ? { key: c.key, value: c.value } : null,
+        styleValue,
       )
 
       const stylePropConversions = mapDropNulls(({ key, value }) => {
@@ -134,10 +180,15 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
         ),
       ]
     })
-    if (commands.length === 0) {
+
+    const commandsWithPropertyCleanup = [
+      ...commands,
+      ...getPropertyCleanupCommands(propertiesToRemove),
+    ]
+    if (commandsWithPropertyCleanup.length === 0) {
       return editorState
     }
 
-    return foldAndApplyCommandsSimple(editorState, commands)
+    return foldAndApplyCommandsSimple(editorState, commandsWithPropertyCleanup)
   },
 })
diff --git a/editor/src/components/editor/actions/action-utils.ts b/editor/src/components/editor/actions/action-utils.ts
index a695b30ad16a..5f00da49b4c8 100644
--- a/editor/src/components/editor/actions/action-utils.ts
+++ b/editor/src/components/editor/actions/action-utils.ts
@@ -1,4 +1,6 @@
-import { safeIndex } from '../../../core/shared/array-utils'
+import type { ElementPath, PropertyPath } from 'utopia-shared/src/types'
+import { mapDropNulls, safeIndex } from '../../../core/shared/array-utils'
+import type { CanvasCommand } from '../../canvas/commands/commands'
 import type { EditorAction } from '../action-types'
 import { isFromVSCodeAction } from './actions-from-vscode'
 
@@ -362,3 +364,74 @@ export function simpleStringifyActions(
     .map((a) => simpleStringifyAction(a, indentation))
     .join(`,\n${spacing}`)}\n${spacingBeforeClose}]`
 }
+
+export function getElementsToNormalizeFromCommands(commands: CanvasCommand[]): ElementPath[] {
+  return mapDropNulls((command) => {
+    switch (command.type) {
+      case 'ADJUST_CSS_LENGTH_PROPERTY':
+      case 'SET_CSS_LENGTH_PROPERTY':
+      case 'ADJUST_NUMBER_PROPERTY':
+      case 'CONVERT_CSS_PERCENT_TO_PX':
+      case 'CONVERT_TO_ABSOLUTE':
+        return command.target
+      case 'ADD_CONTAIN_LAYOUT_IF_NEEDED':
+      case 'SET_PROPERTY':
+      case 'UPDATE_BULK_PROPERTIES':
+        return command.element
+      default:
+        return null
+    }
+  }, commands)
+}
+
+export function getElementsToNormalizeFromActions(actions: EditorAction[]): ElementPath[] {
+  return actions.flatMap((action) => {
+    switch (action.action) {
+      case 'APPLY_COMMANDS':
+        return getElementsToNormalizeFromCommands(action.commands)
+      // TODO: extends this switch when we add support to non-canvas
+      // command-based edits
+      default:
+        return []
+    }
+  })
+}
+
+export interface PropertiesWithElementPath {
+  elementPath: ElementPath
+  properties: PropertyPath[]
+}
+
+export function getPropertiesToRemoveFromCommands(
+  commands: CanvasCommand[],
+): PropertiesWithElementPath[] {
+  return mapDropNulls((command) => {
+    switch (command.type) {
+      case 'DELETE_PROPERTIES':
+        return { elementPath: command.element, properties: command.properties }
+      case 'UPDATE_BULK_PROPERTIES':
+        return {
+          elementPath: command.element,
+          properties: mapDropNulls(
+            (p) => (p.type === 'DELETE' ? p.path : null),
+            command.properties,
+          ),
+        }
+      default:
+        return null
+    }
+  }, commands)
+}
+
+export function getPropertiesToRemoveFromActions(
+  actions: EditorAction[],
+): PropertiesWithElementPath[] {
+  return actions.flatMap((action) => {
+    switch (action.action) {
+      case 'APPLY_COMMANDS':
+        return getPropertiesToRemoveFromCommands(action.commands)
+      default:
+        return []
+    }
+  })
+}
diff --git a/editor/src/components/editor/store/dispatch-strategies.tsx b/editor/src/components/editor/store/dispatch-strategies.tsx
index 0180914754a7..1f153bc0c37c 100644
--- a/editor/src/components/editor/store/dispatch-strategies.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.tsx
@@ -30,7 +30,9 @@ import type {
   StartPostActionSession,
 } from '../action-types'
 import { SelectComponents } from '../action-types'
+import type { PropertiesWithElementPath } from '../actions/action-utils'
 import {
+  getPropertiesToRemoveFromCommands,
   isClearInteractionSession,
   isCreateOrUpdateInteractionSession,
   isTransientAction,
@@ -57,12 +59,40 @@ import { isInsertMode } from '../editor-modes'
 import { patchedCreateRemixDerivedDataMemo } from './remix-derived-data'
 import { allowedToEditProject } from './collaborative-editing'
 import { canMeasurePerformance } from '../../../core/performance/performance-utils'
-import { getActivePlugin } from '../../canvas/plugins/style-plugins'
+import type { ElementPath } from 'utopia-shared/src/types'
+
+export interface PropertiesToPatch {
+  type: 'properties-to-patch'
+  propertiesToPatch: PropertiesWithElementPath[]
+}
+
+export const propertiesToPatch = (props: PropertiesWithElementPath[]): PropertiesToPatch => ({
+  type: 'properties-to-patch',
+  propertiesToPatch: props,
+})
+
+export interface NormalizationData {
+  type: 'normalization-data'
+  elementsToNormalize: ElementPath[]
+  propertiesToRemove: PropertiesWithElementPath[]
+}
+
+export const normalizationData = (
+  elementsToNormalize: ElementPath[],
+  propsToRemove: PropertiesWithElementPath[],
+): NormalizationData => ({
+  type: 'normalization-data',
+  elementsToNormalize: elementsToNormalize,
+  propertiesToRemove: propsToRemove,
+})
+
+export type PostProcessingData = PropertiesToPatch | NormalizationData
 
 interface HandleStrategiesResult {
   unpatchedEditorState: EditorState
   patchedEditorState: EditorState
   newStrategyState: StrategyState
+  postProcessingData: PostProcessingData | null
 }
 
 export function interactionFinished(
@@ -113,14 +143,9 @@ export function interactionFinished(
       'end-interaction',
     )
 
-    const normalizedEditor = getActivePlugin(editorState).normalizeFromInlineStyle(
-      editorState,
-      strategyResult.elementsToRerender,
-    )
-
     const finalEditor: EditorState = applyElementsToRerenderFromStrategyResult(
       {
-        ...normalizedEditor,
+        ...editorState,
         // TODO instead of clearing the metadata, we should save the latest valid metadata here to save a dom-walker run
         jsxMetadata: {},
         domMetadata: {},
@@ -133,6 +158,10 @@ export function interactionFinished(
       unpatchedEditorState: finalEditor,
       patchedEditorState: finalEditor,
       newStrategyState: withClearedSession,
+      postProcessingData: normalizationData(
+        strategyResult.elementsToRerender,
+        getPropertiesToRemoveFromCommands(strategyResult.commands),
+      ),
     }
   } else {
     // Try to keep any updated metadata that may have been populated into here
@@ -148,6 +177,7 @@ export function interactionFinished(
       unpatchedEditorState: newEditorState,
       patchedEditorState: newEditorState,
       newStrategyState: withClearedSession,
+      postProcessingData: null,
     }
   }
 }
@@ -176,6 +206,7 @@ export function interactionHardReset(
       unpatchedEditorState: newEditorState,
       patchedEditorState: newEditorState,
       newStrategyState: withClearedSession,
+      postProcessingData: null,
     }
   } else {
     const resetInteractionSession = interactionSessionHardReset(interactionSession)
@@ -233,12 +264,14 @@ export function interactionHardReset(
           strategyResult,
         ),
         newStrategyState: newStrategyState,
+        postProcessingData: null,
       }
     } else {
       return {
         unpatchedEditorState: newEditorState,
         patchedEditorState: newEditorState,
         newStrategyState: withClearedSession,
+        postProcessingData: null,
       }
     }
   }
@@ -266,6 +299,7 @@ export function interactionUpdate(
       unpatchedEditorState: newEditorState,
       patchedEditorState: newEditorState,
       newStrategyState: result.strategyState,
+      postProcessingData: null,
     }
   } else {
     // Determine the new canvas strategy to run this time around.
@@ -348,6 +382,7 @@ export function interactionStart(
       unpatchedEditorState: newEditorState,
       patchedEditorState: newEditorState,
       newStrategyState: withClearedSession,
+      postProcessingData: null,
     }
   } else {
     // Determine the new canvas strategy to run this time around.
@@ -401,12 +436,14 @@ export function interactionStart(
           strategyResult,
         ),
         newStrategyState: newStrategyState,
+        postProcessingData: null,
       }
     } else {
       return {
         unpatchedEditorState: newEditorState,
         patchedEditorState: newEditorState,
         newStrategyState: withClearedSession,
+        postProcessingData: null,
       }
     }
   }
@@ -434,6 +471,7 @@ export function interactionCancel(
     unpatchedEditorState: updatedEditorState,
     patchedEditorState: updatedEditorState,
     newStrategyState: createEmptyStrategyState({}, {}, {}),
+    postProcessingData: null,
   }
 }
 
@@ -508,12 +546,14 @@ function handleUserChangedStrategy(
         strategyResult,
       ),
       newStrategyState: newStrategyState,
+      postProcessingData: null,
     }
   } else {
     return {
       unpatchedEditorState: newEditorState,
       patchedEditorState: newEditorState,
       newStrategyState: strategyState,
+      postProcessingData: null,
     }
   }
 }
@@ -594,6 +634,7 @@ function handleAccumulatingKeypresses(
           strategyResult,
         ),
         newStrategyState: newStrategyState,
+        postProcessingData: null,
       }
     }
   }
@@ -601,6 +642,7 @@ function handleAccumulatingKeypresses(
     unpatchedEditorState: newEditorState,
     patchedEditorState: newEditorState,
     newStrategyState: strategyState,
+    postProcessingData: null,
   }
 }
 
@@ -661,12 +703,16 @@ function handleUpdate(
         strategyResult,
       ),
       newStrategyState: newStrategyState,
+      postProcessingData: propertiesToPatch(
+        getPropertiesToRemoveFromCommands(strategyResult.commands),
+      ),
     }
   } else {
     return {
       unpatchedEditorState: newEditorState,
       patchedEditorState: newEditorState,
       newStrategyState: strategyState,
+      postProcessingData: null,
     }
   }
 }
@@ -686,6 +732,7 @@ export function handleStrategies(
   let unpatchedEditorState: EditorState
   let patchedEditorState: EditorState
   let newStrategyState: StrategyState
+  let postProcessingData: PostProcessingData | null
   if (allowedToEditProject(storedState.userState.loginState, storedState.projectServerState)) {
     const strategiesResult = handleStrategiesInner(
       strategies,
@@ -696,10 +743,12 @@ export function handleStrategies(
     unpatchedEditorState = strategiesResult.unpatchedEditorState
     patchedEditorState = strategiesResult.patchedEditorState
     newStrategyState = strategiesResult.newStrategyState
+    postProcessingData = strategiesResult.postProcessingData
   } else {
     unpatchedEditorState = result.unpatchedEditor
     patchedEditorState = result.unpatchedEditor
     newStrategyState = result.strategyState
+    postProcessingData = null
   }
 
   const patchedEditorWithMetadata: EditorState = {
@@ -739,8 +788,9 @@ export function handleStrategies(
   return {
     unpatchedEditorState: unpatchedEditorState,
     patchedEditorState: patchedEditorWithMetadata,
-    patchedDerivedState,
+    patchedDerivedState: patchedDerivedState,
     newStrategyState: newStrategyState,
+    postProcessingData: postProcessingData,
   }
 }
 
@@ -815,6 +865,7 @@ function handleStrategiesInner(
       unpatchedEditorState: result.unpatchedEditor, // we return the fresh unpatchedEditor, containing the up-to-date domMetadata and spyMetadata
       patchedEditorState: oldPatchedEditorWithNewMetadata, // the previous patched editor with updated metadata
       newStrategyState: storedState.strategyState,
+      postProcessingData: null,
     }
   } else if (storedState.unpatchedEditor.canvas.interactionSession == null) {
     if (result.unpatchedEditor.canvas.interactionSession == null) {
@@ -822,6 +873,7 @@ function handleStrategiesInner(
         unpatchedEditorState: result.unpatchedEditor,
         patchedEditorState: result.unpatchedEditor,
         newStrategyState: result.strategyState,
+        postProcessingData: null,
       }
     } else {
       return interactionStart(strategies, storedState, result)
diff --git a/editor/src/components/editor/store/dispatch.tsx b/editor/src/components/editor/store/dispatch.tsx
index e8a522d2d7f1..f014fcbd20d6 100644
--- a/editor/src/components/editor/store/dispatch.tsx
+++ b/editor/src/components/editor/store/dispatch.tsx
@@ -7,6 +7,7 @@ import type { CanvasAction } from '../../canvas/canvas-types'
 import type { LocalNavigatorAction } from '../../navigator/actions'
 import type { EditorAction, EditorDispatch, UpdateMetadataInEditorState } from '../action-types'
 import { isLoggedIn } from '../action-types'
+import type { PropertiesWithElementPath } from '../actions/action-utils'
 import {
   isTransientAction,
   isUndoOrRedo,
@@ -14,6 +15,8 @@ import {
   checkAnyWorkerUpdates,
   onlyActionIsWorkerParsedUpdate,
   simpleStringifyActions,
+  getElementsToNormalizeFromActions,
+  getPropertiesToRemoveFromActions,
 } from '../actions/action-utils'
 import * as EditorActions from '../actions/action-creators'
 import * as History from '../history'
@@ -27,6 +30,7 @@ import type {
 } from './editor-state'
 import {
   deriveState,
+  getJSXElementFromProjectContents,
   persistentModelFromEditorModel,
   storedEditorStateFromEditorState,
 } from './editor-state'
@@ -40,7 +44,7 @@ import {
   runResetOnlineState,
   runUpdateProjectServerState,
 } from './editor-update'
-import { isBrowserEnvironment } from '../../../core/shared/utils'
+import { assertNever, isBrowserEnvironment } from '../../../core/shared/utils'
 import type { UiJsxCanvasContextData } from '../../canvas/ui-jsx-canvas'
 import type { ProjectContentTreeRoot } from '../../assets'
 import { treeToContents } from '../../assets'
@@ -58,7 +62,8 @@ import {
   getProjectChanges,
   sendVSCodeChanges,
 } from './vscode-changes'
-import { handleStrategies, updatePostActionState } from './dispatch-strategies'
+import type { NormalizationData, PostProcessingData } from './dispatch-strategies'
+import { handleStrategies, normalizationData, updatePostActionState } from './dispatch-strategies'
 
 import type { MetaCanvasStrategy } from '../../canvas/canvas-strategies/canvas-strategies'
 import { RegisteredCanvasStrategies } from '../../canvas/canvas-strategies/canvas-strategies'
@@ -75,18 +80,8 @@ import { maybeClearPseudoInsertMode } from '../canvas-toolbar-states'
 import { isSteganographyEnabled } from '../../../core/shared/stegano-text'
 import { updateCollaborativeProjectContents } from './collaborative-editing'
 import { ensureSceneIdsExist } from '../../../core/model/scene-id-utils'
-import type { ModuleEvaluator } from '../../../core/property-controls/property-controls-local'
-import {
-  createModuleEvaluator,
-  isComponentDescriptorFile,
-} from '../../../core/property-controls/property-controls-local'
-import {
-  hasReactRouterErrorBeenLogged,
-  setReactRouterErrorHasBeenLogged,
-} from '../../../core/shared/runtime-report-logs'
-import type { PropertyControlsInfo } from '../../custom-code/code-file'
+import { isComponentDescriptorFile } from '../../../core/property-controls/property-controls-local'
 import { getFilePathMappings } from '../../../core/model/project-file-utils'
-import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template'
 import {
   getParserChunkCount,
   getParserWorkerCount,
@@ -97,6 +92,10 @@ import {
   startPerformanceMeasure,
 } from '../../../core/performance/performance-utils'
 import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
+import { getActivePlugin } from '../../canvas/plugins/style-plugins'
+import { mapDropNulls } from '../../../core/shared/array-utils'
+import { propertyToSet, updateBulkProperties } from '../../canvas/commands/set-property-command'
+import { foldAndApplyCommandsSimple } from '../../canvas/commands/commands'
 
 type DispatchResultFields = {
   nothingChanged: boolean
@@ -1003,18 +1002,56 @@ function editorDispatchInner(
       )
     }
 
-    const { unpatchedEditorState, patchedEditorState, newStrategyState, patchedDerivedState } =
-      handleStrategies(
-        strategiesToUse,
-        dispatchedActions,
-        storedState,
-        result,
-        storedState.patchedDerived,
-      )
+    const {
+      unpatchedEditorState: unpatchedEditorStateFromStrategies,
+      patchedEditorState: patchedEditorStateFromStrategies,
+      newStrategyState,
+      patchedDerivedState,
+      postProcessingData: postProcessingDataFromStrategies,
+    } = handleStrategies(
+      strategiesToUse,
+      dispatchedActions,
+      storedState,
+      result,
+      storedState.patchedDerived,
+    )
+
+    const elementsToNormalizeFromActions = getElementsToNormalizeFromActions(dispatchedActions)
+    const propertiesToRemoveFromActions = getPropertiesToRemoveFromActions(dispatchedActions)
+
+    const elementsToNormalize = [
+      ...elementsToNormalizeFromActions,
+      ...(postProcessingDataFromStrategies?.type === 'normalization-data'
+        ? postProcessingDataFromStrategies.elementsToNormalize
+        : []),
+    ]
+
+    const propertiesToRemove = [
+      ...propertiesToRemoveFromActions,
+      ...(postProcessingDataFromStrategies?.type === 'normalization-data'
+        ? postProcessingDataFromStrategies.propertiesToRemove
+        : []),
+    ]
+
+    const unpatchedEditor = runRemovedPropertyPatchingAndNormalization(
+      unpatchedEditorStateFromStrategies,
+      normalizationData(elementsToNormalize, propertiesToRemove),
+    )
+
+    const patchedEditor =
+      postProcessingDataFromStrategies === null
+        ? patchedEditorStateFromStrategies
+        : runRemovedPropertyPatchingAndNormalization(
+            patchedEditorStateFromStrategies,
+            addNormalizationDataFromActions(
+              postProcessingDataFromStrategies,
+              normalizationData(elementsToNormalizeFromActions, propertiesToRemoveFromActions),
+            ),
+          )
 
     return {
-      unpatchedEditor: unpatchedEditorState,
-      patchedEditor: patchedEditorState,
+      unpatchedEditor: unpatchedEditor,
+      patchedEditor: patchedEditor,
       unpatchedDerived: frozenDerivedState,
       patchedDerived: patchedDerivedState,
       strategyState: newStrategyState,
@@ -1072,3 +1109,78 @@ function resetUnpatchedEditorTransientFields(editor: EditorState): EditorState {
     },
   }
 }
+
+function addNormalizationDataFromActions(
+  data: PostProcessingData,
+  fromActions: NormalizationData,
+): PostProcessingData {
+  if (data.type === 'properties-to-patch') {
+    return data
+  }
+
+  return normalizationData(
+    [...data.elementsToNormalize, ...fromActions.elementsToNormalize],
+    [...data.propertiesToRemove, ...fromActions.propertiesToRemove],
+  )
+}
+
+const PropertyDefaultValues: Record<string, string> = {
+  gap: '0px',
+}
+
+function patchRemovedProperties(
+  editor: EditorState,
+  propertiesToPatch: PropertiesWithElementPath[],
+): EditorState {
+  const propertiesToSetCommands = mapDropNulls(
+    ({ elementPath, properties }) =>
+      getJSXElementFromProjectContents(elementPath, editor.projectContents) == null
+        ? null
+        : updateBulkProperties(
+            'always',
+            elementPath,
+            mapDropNulls((property) => {
+              const [maybeStyle, maybeCSSProp] = property.propertyElements
+              if (maybeStyle !== 'style' || maybeCSSProp == null) {
+                return null
+              }
+
+              const defaultValue = PropertyDefaultValues[maybeCSSProp]
+              if (defaultValue == null) {
+                return null
+              }
+              return propertyToSet(property, defaultValue)
+            }, properties),
+          ),
+    propertiesToPatch,
+  )
+  return foldAndApplyCommandsSimple(editor, propertiesToSetCommands)
+}
+
+function runRemovedPropertyPatchingAndNormalization(
+  editorState: EditorState,
+  postProcessingData: PostProcessingData,
+): EditorState {
+  if (postProcessingData.type === 'properties-to-patch') {
+    return postProcessingData.propertiesToPatch.length === 0
+      ? editorState
+      : patchRemovedProperties(editorState, postProcessingData.propertiesToPatch)
+  }
+
+  if (postProcessingData.type === 'normalization-data') {
+    if (
+      postProcessingData.elementsToNormalize.length === 0 &&
+      postProcessingData.propertiesToRemove.length === 0
+    ) {
+      return editorState
+    }
+
+    return getActivePlugin(editorState).normalizeFromInlineStyle(
+      editorState,
+      postProcessingData.elementsToNormalize,
+      postProcessingData.propertiesToRemove,
+    )
+  }
+
+  assertNever(postProcessingData)
+}

From aa2f65808dda91d0597bbf99b7f9a5149200bc82 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Thu, 17 Oct 2024 12:23:55 +0200
Subject: [PATCH 155/272] Fix missing target cell highlight during grid
 rearrange (#6554)

**Problem:**
Pink target cell highlight is not shown when the dragged item is not
pinned to a cell position.

**Fix:**
This is a regression, we just don't want to show the highlight when the
dragged item is absolute AND not pinned to a cell position.

**Commit Details:** (< vv pls delete this section if's not relevant)

I think we should move these conditions into the strategy, and don't
even set the target cell prop on the control in these cases. As a quick
fix I just fixed the condition in the control.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/components/canvas/controls/grid-controls.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 0ca1c10c48db..928d646d4082 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -821,6 +821,8 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
     }`,
   }
 
+  const dontShowActiveCellHighlight = !targetsAreCellsWithPositioning && anyTargetAbsolute
+
   return (
     <React.Fragment>
       {/* grid lines */}
@@ -844,11 +846,12 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
             countedColumn === currentHoveredCell?.column &&
             countedRow === currentHoveredCell?.row
 
-          const activePositioningTarget = isActiveCell && targetsAreCellsWithPositioning
+          const activePositioningTarget = isActiveCell && !dontShowActiveCellHighlight // TODO: move the logic into runGridRearrangeMove and do not set targetCell prop in these cases
 
           const borderColor = activePositioningTarget
             ? colorTheme.brandNeonPink.value
             : colorTheme.grey65.value
+
           return (
             <div
               key={id}

From ed378ef1bcf5a6a493e176af9d7d34bc2c94fd0d Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Thu, 17 Oct 2024 12:24:14 +0200
Subject: [PATCH 156/272] Reorder in grid reparent (#6552)

**Problem:**
We use grid-rearrange-move code after reparenting into a grid to
position the element into the target cell.
However, `reorder` mode of grid-rearrange-move is never activated, so we
set explicit gridRow/gridColumn props even when unnecessary.

**Fix:**
- Run the grid rearrange move commands after the reparent commands
- Add new optional parameter to `runGridRearrangeMove` called
`newPathAfterReparent` so it knows about the new path (end can use it in
the commands)
- Make the code to decide which mode (rearrange or reorder) work even
when the target is not originally in the new parent.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../strategies/grid-helpers.ts                |  58 +++--
 ...grid-reparent-strategies.spec.browser2.tsx | 236 +++++++++++++-----
 .../strategies/grid-reparent-strategy.tsx     |  16 +-
 3 files changed, 221 insertions(+), 89 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 8f871138c922..8091b2456250 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -52,12 +52,13 @@ export function runGridRearrangeMove(
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
   grid: ElementInstanceMetadata,
+  newPathAfterReparent?: ElementPath,
 ): CanvasCommand[] {
   if (interactionData.drag == null) {
     return []
   }
 
-  const isReparent = !EP.isParentOf(grid.elementPath, selectedElement)
+  const isReparent = newPathAfterReparent != null
 
   const { gridCellGlobalFrames, containerGridProperties: gridTemplate } =
     grid.specialSizeMeasurements
@@ -97,7 +98,9 @@ export function runGridRearrangeMove(
   // get the new adjusted column
   const column = Math.max(targetCellCoords.column - mouseCellPosInOriginalElement.column, 1)
 
-  const gridCellMoveCommands = setGridPropsCommands(targetElement, gridTemplate, {
+  const pathForCommands = newPathAfterReparent ?? targetElement // when reparenting, we want to use the new path for commands
+
+  const gridCellMoveCommands = setGridPropsCommands(pathForCommands, gridTemplate, {
     gridColumnStart: gridPositionValue(column),
     gridColumnEnd: gridPositionValue(column + originalCellBounds.height),
     gridRowStart: gridPositionValue(row),
@@ -147,14 +150,12 @@ export function runGridRearrangeMove(
     EP.pathsEqual(selectedElement, s.path),
   )
 
-  const moveType =
-    originalElementMetadata == null
-      ? 'rearrange'
-      : getGridMoveType({
-          originalElementMetadata: originalElementMetadata,
-          possiblyReorderIndex: possiblyReorderIndex,
-          cellsSortedByPosition: cellsSortedByPosition,
-        })
+  const moveType = getGridMoveType({
+    elementPath: targetElement,
+    originalElementMetadata: originalElementMetadata,
+    possiblyReorderIndex: possiblyReorderIndex,
+    cellsSortedByPosition: cellsSortedByPosition,
+  })
 
   const updateGridControlsCommand = showGridControls(
     'mid-interaction',
@@ -165,6 +166,9 @@ export function runGridRearrangeMove(
 
   switch (moveType) {
     case 'absolute': {
+      if (isReparent) {
+        return []
+      }
       const absoluteMoveCommands = gridChildAbsoluteMoveCommands(
         MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
         MetadataUtils.getFrameOrZeroRectInCanvasCoords(grid.elementPath, jsxMetadata),
@@ -176,7 +180,7 @@ export function runGridRearrangeMove(
       const targetRootCell = gridCellCoordinates(row, column)
       const canvasRect = getGlobalFrameOfGridCell(grid, targetRootCell)
       const absoluteMoveCommands =
-        canvasRect == null
+        canvasRect == null || isReparent
           ? []
           : gridChildAbsoluteMoveCommands(
               MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
@@ -188,7 +192,7 @@ export function runGridRearrangeMove(
         ...absoluteMoveCommands,
         reorderElement(
           'always',
-          selectedElement,
+          pathForCommands,
           absolute(Math.max(indexInSortedCellsForRearrange, 0)),
         ),
         updateGridControlsCommand,
@@ -196,8 +200,8 @@ export function runGridRearrangeMove(
     }
     case 'reorder': {
       return [
-        reorderElement('always', selectedElement, absolute(possiblyReorderIndex)),
-        deleteProperties('always', selectedElement, [
+        reorderElement('always', pathForCommands, absolute(possiblyReorderIndex)),
+        deleteProperties('always', pathForCommands, [
           PP.create('style', 'gridColumn'),
           PP.create('style', 'gridRow'),
           PP.create('style', 'gridColumnStart'),
@@ -451,12 +455,16 @@ type GridMoveType =
   | 'absolute' // a regular absolute move, relative to the grid
 
 function getGridMoveType(params: {
-  originalElementMetadata: ElementInstanceMetadata
+  elementPath: ElementPath
+  originalElementMetadata: ElementInstanceMetadata | null
   possiblyReorderIndex: number
   cellsSortedByPosition: SortableGridElementProperties[]
 }): GridMoveType {
-  const specialSizeMeasurements = params.originalElementMetadata.specialSizeMeasurements
-  if (MetadataUtils.isPositionAbsolute(params.originalElementMetadata)) {
+  const specialSizeMeasurements = params.originalElementMetadata?.specialSizeMeasurements
+  if (
+    specialSizeMeasurements != null &&
+    MetadataUtils.isPositionAbsolute(params.originalElementMetadata)
+  ) {
     return MetadataUtils.hasNoGridCellPositioning(specialSizeMeasurements)
       ? 'absolute'
       : 'rearrange'
@@ -465,11 +473,11 @@ function getGridMoveType(params: {
     return 'rearrange'
   }
 
-  const elementGridProperties = specialSizeMeasurements.elementGridProperties
-  const gridRowStart = gridPositionNumberValue(elementGridProperties.gridRowStart)
-  const gridColumnStart = gridPositionNumberValue(elementGridProperties.gridColumnStart)
-  const gridRowEnd = gridPositionNumberValue(elementGridProperties.gridRowEnd)
-  const gridColumnEnd = gridPositionNumberValue(elementGridProperties.gridColumnEnd)
+  const elementGridProperties = specialSizeMeasurements?.elementGridProperties
+  const gridRowStart = gridPositionNumberValue(elementGridProperties?.gridRowStart ?? null)
+  const gridColumnStart = gridPositionNumberValue(elementGridProperties?.gridColumnStart ?? null)
+  const gridRowEnd = gridPositionNumberValue(elementGridProperties?.gridRowEnd ?? null)
+  const gridColumnEnd = gridPositionNumberValue(elementGridProperties?.gridColumnEnd ?? null)
 
   const isMultiCellChild =
     (gridRowEnd != null && gridRowStart != null && gridRowEnd > gridRowStart + 1) ||
@@ -482,10 +490,8 @@ function getGridMoveType(params: {
   // The first element is intrinsically in order, so try to adjust for that
   if (params.possiblyReorderIndex === 0) {
     const isTheOnlyChild = params.cellsSortedByPosition.length === 1
-    const isAlreadyTheFirstChild = EP.pathsEqual(
-      params.cellsSortedByPosition[0].path,
-      params.originalElementMetadata.elementPath,
-    )
+    const isAlreadyTheFirstChild =
+      EP.toUid(params.cellsSortedByPosition[0].path) === EP.toUid(params.elementPath)
 
     const isAlreadyAtOrigin = gridRowStart === 1 && gridColumnStart === 1
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
index 15cebb6d6195..368d72977fb0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
@@ -4,7 +4,7 @@ import type { WindowPoint } from '../../../../core/shared/math-utils'
 import { offsetPoint, windowPoint } from '../../../../core/shared/math-utils'
 import type { Modifiers } from '../../../../utils/modifiers'
 import { cmdModifier } from '../../../../utils/modifiers'
-import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
+import { selectComponentsForTest, wait } from '../../../../utils/utils.test-utils'
 import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
 import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
 import type { Point } from '../../event-helpers.test-utils'
@@ -665,65 +665,187 @@ describe('grid reparent strategies', () => {
         formatTestProjectCode(
           makeTestProjectCode({
             extraCode: `
+    <div
+      style={{
+        backgroundColor: '#aaaaaa33',
+        position: 'absolute',
+        left: 500,
+        top: 500,
+        padding: 10,
+        display: 'grid',
+        gap: 10,
+        gridTemplateRows: '1fr 1fr',
+        gridTemplateColumns: '1fr 1fr 1fr 1fr',
+      }}
+      data-uid='another-grid'
+      data-testid='another-grid'
+    >
+      <div
+        style={{
+          backgroundColor: '#0ff',
+          width: 79,
+          height: 86,
+          gridRow: 1,
+          gridColumn: 1,
+        }}
+        data-uid='foo'
+        data-testid='foo'
+      />
+      <div
+        style={{
+          backgroundColor: '#0ff',
+          width: 79,
+          height: 86,
+          gridRow: 2,
+          gridColumn: 3,
+        }}
+        data-uid='bar'
+        data-testid='bar'
+      />
+      <div
+        style={{
+          backgroundColor: '#f0f',
+          width: 79,
+          height: 86,
+          gridColumn: 1,
+          gridRow: 2,
+        }}
+        data-uid='dragme'
+        data-testid='dragme'
+      />
+      <div
+        style={{
+          backgroundColor: '#0ff',
+          width: 79,
+          height: 86,
+          gridColumn: 2,
+          gridColumn: 2,
+        }}
+        data-uid='baz'
+      />
+    </div>
+      `,
+          }),
+        ),
+      )
+    })
+    it('into a grid container with reorder (no explicit gridRow/gridColumn props', async () => {
+      const editor = await renderTestEditorWithCode(
+        makeTestProjectCode({
+          insideGrid: `
         <div
           style={{
-            backgroundColor: '#aaaaaa33',
-            position: 'absolute',
-            left: 500,
-            top: 500,
-            padding: 10,
-            display: 'grid',
-            gap: 10,
-            gridTemplateRows: '1fr 1fr',
-            gridTemplateColumns: '1fr 1fr 1fr 1fr',
+            backgroundColor: '#f0f',
+            width: 79,
+            height: 86,
+            gridRow: 2,
+            gridColumn: 2,
           }}
-          data-uid='another-grid'
-          data-testid='another-grid'
-        >
-          <div
-            style={{
-              backgroundColor: '#0ff',
-              width: 79,
-              height: 86,
-              gridRow: 1,
-              gridColumn: 1,
-            }}
-            data-uid='foo'
-            data-testid='foo'
-          />
-          <div
-            style={{
-              backgroundColor: '#0ff',
-              width: 79,
-              height: 86,
-              gridRow: 2,
-              gridColumn: 3,
-            }}
-            data-uid='bar'
-            data-testid='bar'
-          />
-          <div
-            style={{
-              backgroundColor: '#0ff',
-              width: 79,
-              height: 86,
-              gridColumn: 2,
-              gridColumn: 2,
-            }}
-            data-uid='baz'
-          />
-          <div
-            style={{
-              backgroundColor: '#f0f',
-              width: 79,
-              height: 86,
-              gridColumn: 1,
-              gridRow: 2,
-            }}
-            data-uid='dragme'
-            data-testid='dragme'
-          />
-        </div>
+          data-uid='dragme'
+          data-testid='dragme'
+        />
+      `,
+          extraCode: `
+     <div
+      style={{
+        backgroundColor: '#aaaaaa33',
+        position: 'absolute',
+        left: 500,
+        top: 500,
+        padding: 10,
+        display: 'grid',
+        gap: 10,
+        gridTemplateRows: '1fr 1fr',
+        gridTemplateColumns: '1fr 1fr 1fr',
+        width: 317,
+      }}
+      data-uid='91c5676d-d826-423e-86d5-10b80717'
+      data-testid='another-grid'
+    >
+      <div
+        style={{
+          backgroundColor: '#0ff',
+          width: 79,
+          height: 86,
+        }}
+        data-uid='3995ebba-85b5-4293-964c-0c78fbe6'
+        data-testid='foo'
+      />
+      <div
+        style={{
+          backgroundColor: '#0ff',
+          width: 79,
+          height: 86,
+        }}
+        data-uid='eacc03a2-05bd-4f77-a8b2-3ab490ec'
+        data-testid='bar'
+      />
+    </div>
+    `,
+        }),
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
+
+      await dragOutToAnotherGrid(
+        editor,
+        'another-grid',
+        {
+          x: 300,
+          y: 20,
+        },
+        EP.fromString('sb/grid/dragme'),
+      )
+
+      expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+        formatTestProjectCode(
+          makeTestProjectCode({
+            extraCode: `
+        <div
+      style={{
+        backgroundColor: '#aaaaaa33',
+        position: 'absolute',
+        left: 500,
+        top: 500,
+        padding: 10,
+        display: 'grid',
+        gap: 10,
+        gridTemplateRows: '1fr 1fr',
+        gridTemplateColumns: '1fr 1fr 1fr',
+        width: 317,
+      }}
+      data-uid='91c5676d-d826-423e-86d5-10b80717'
+      data-testid='another-grid'
+    >
+      <div
+        style={{
+          backgroundColor: '#0ff',
+          width: 79,
+          height: 86,
+        }}
+        data-uid='3995ebba-85b5-4293-964c-0c78fbe6'
+        data-testid='foo'
+      />
+      <div
+        style={{
+          backgroundColor: '#0ff',
+          width: 79,
+          height: 86,
+        }}
+        data-uid='eacc03a2-05bd-4f77-a8b2-3ab490ec'
+        data-testid='bar'
+      />
+      <div
+        style={{
+          backgroundColor: '#f0f',
+          width: 79,
+          height: 86,
+        }}
+        data-uid='dragme'
+        data-testid='dragme'
+      />
+    </div>
       `,
           }),
         ),
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index cd20d3fa7db4..50aed2f5ed0d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -272,18 +272,22 @@ function gridReparentCommands(
   if (reparentResult == null) {
     return null
   }
-  const gridPropsCommands = runGridRearrangeMove(target, target, jsxMetadata, interactionData, grid)
-
-  if (gridPropsCommands == null) {
-    return null
-  }
 
   const { commands: reparentCommands, newPath } = reparentResult
 
+  const gridPropsCommands = runGridRearrangeMove(
+    target,
+    target,
+    jsxMetadata,
+    interactionData,
+    grid,
+    newPath,
+  )
+
   const removeAbsolutePositioningPropsCommands = removeAbsolutePositioningProps('always', newPath)
 
   return {
-    commands: [...gridPropsCommands, ...reparentCommands, removeAbsolutePositioningPropsCommands],
+    commands: [...reparentCommands, ...gridPropsCommands, removeAbsolutePositioningPropsCommands],
     newPath: newPath,
     oldPath: target,
   }

From cdb137115ebe78c3c07ad2bc12d5c8b472faa324 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 17 Oct 2024 15:56:04 +0200
Subject: [PATCH 157/272] Fix animations for Remix scenes (#6556)

**Problem:**

Animations don't work inside Remix scenes.

**Fix:**

The `animate` functions accepts both selectors as well as elements as a
target argument. For reasons beyond my ability to comprehend, using the
selector works on both the canvas as well as Remix scenes, but not the
opposite. So, let's use that.


https://github.com/user-attachments/assets/9226ffe0-4bce-48c3-bd9c-f81ec0cd4de6

Fixes #6555
---
 .../ui-jsx-canvas-renderer/animation-context.ts    | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/animation-context.ts b/editor/src/components/canvas/ui-jsx-canvas-renderer/animation-context.ts
index df61da3f9837..e8d66fc93f79 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-renderer/animation-context.ts
+++ b/editor/src/components/canvas/ui-jsx-canvas-renderer/animation-context.ts
@@ -46,21 +46,19 @@ export function useCanvasAnimation(paths: ElementPath[]) {
   )
 
   const selector = React.useMemo(() => {
+    if (uids.length === 0) {
+      return null
+    }
     return uids.map((uid) => `[data-uid='${uid}']`).join(',')
   }, [uids])
 
-  const elements = React.useMemo(
-    () => (selector === '' ? [] : document.querySelectorAll(selector)),
-    [selector],
-  )
-
   return React.useCallback(
     (keyframes: DOMKeyframesDefinition, options?: DynamicAnimationOptions) => {
-      if (ctx.animate == null || elements.length === 0) {
+      if (ctx.animate == null || selector == null) {
         return
       }
-      void ctx.animate(elements, keyframes, options)
+      void ctx.animate(selector, keyframes, options)
     },
-    [ctx, elements],
+    [ctx, selector],
   )
 }

From cc197466f119cad9c1c2a34a43c66c08e3ffe121 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 17 Oct 2024 18:48:05 +0200
Subject: [PATCH 158/272] Grid advanced modal color/stretch tweaks (#6559)

**Problem:**

1. The advanced grid modal always shows selected dropdown value with a
subdued color
2. The advaned grid modal doesn't offer `stretch` as an option for
justify/align.

**Fix:**

1. Fix the entries which are incorrectly set with `placeholder: true`
2. Use `FlexAlignment` for the options of the `align` section
3. Add `stretch` to the `FlexJustifyContent` enum

Fixes #6558
---
 .../inspector/controls/advanced-grid-modal.tsx | 18 ++++++++++++------
 utopia-api/src/layout/flex.ts                  |  2 ++
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/editor/src/components/inspector/controls/advanced-grid-modal.tsx b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
index ec8fb4cb4abb..463dd8ff574e 100644
--- a/editor/src/components/inspector/controls/advanced-grid-modal.tsx
+++ b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
@@ -14,7 +14,7 @@ import {
   separatorRadixSelectOption,
 } from '../../../uuiui/radix-components'
 import { optionalMap } from '../../../core/shared/optional-utils'
-import type { FlexAlignment } from 'utopia-api/core'
+import { FlexAlignment } from 'utopia-api/core'
 import { FlexJustifyContent } from 'utopia-api/core'
 import { GridAutoColsOrRowsControlInner } from '../grid-auto-cols-or-rows-control'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
@@ -79,12 +79,18 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
     [alignItemsLayoutInfo],
   )
 
-  const contentOptions = [
+  const justifyOptions = [
     unsetSelectOption,
     separatorRadixSelectOption(),
     ...Object.values(FlexJustifyContent).map(selectOption),
   ]
 
+  const alignOptions = [
+    unsetSelectOption,
+    separatorRadixSelectOption(),
+    ...Object.values(FlexAlignment).map(selectOption),
+  ]
+
   const onSubmitJustifyContent = React.useCallback(
     (value: string) => {
       if (value === 'unset') {
@@ -187,7 +193,7 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
           <RadixSelect
             id='grid.justifyContent'
             value={currentJustifyContentValue ?? unsetSelectOption}
-            options={contentOptions}
+            options={justifyOptions}
             onValueChange={onSubmitJustifyContent}
             contentClassName={`ignore-react-onclickoutside-${props.id}`}
             contentStyle={{
@@ -205,7 +211,7 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
           <RadixSelect
             id='grid.alignContent'
             value={currentAlignContentValue ?? unsetSelectOption}
-            options={contentOptions}
+            options={alignOptions}
             onValueChange={onSubmitAlignContent}
             contentClassName={`ignore-react-onclickoutside-${props.id}`}
             contentStyle={{
@@ -301,11 +307,11 @@ const justifyItemsOptions = itemsOptions('justify')
 const alignItemsOptions = itemsOptions('align')
 const rowVariant: GridRowVariant = '|--67px--|<--------1fr-------->'
 
-function selectOption(value: FlexJustifyContent) {
+function selectOption(value: FlexJustifyContent | FlexAlignment) {
   return regularRadixSelectOption({
     label: value.replace('-', ' '),
     value: value,
-    placeholder: true,
+    placeholder: false,
   })
 }
 
diff --git a/utopia-api/src/layout/flex.ts b/utopia-api/src/layout/flex.ts
index 23a2a0df37a6..5e89bc423da2 100644
--- a/utopia-api/src/layout/flex.ts
+++ b/utopia-api/src/layout/flex.ts
@@ -215,6 +215,7 @@ export enum FlexJustifyContent {
   SpaceAround = 'space-around',
   SpaceBetween = 'space-between',
   SpaceEvenly = 'space-evenly',
+  Stretch = 'stretch',
 }
 
 export const AllFlexJustifyContents: Array<FlexJustifyContent> = [
@@ -224,6 +225,7 @@ export const AllFlexJustifyContents: Array<FlexJustifyContent> = [
   FlexJustifyContent.SpaceAround,
   FlexJustifyContent.SpaceBetween,
   FlexJustifyContent.SpaceEvenly,
+  FlexJustifyContent.Stretch,
 ]
 
 export enum FlexDirection {

From 2be4c7de1789f9a9e60181795421c7a168b6868b Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Thu, 17 Oct 2024 17:57:20 +0100
Subject: [PATCH 159/272] fix(grids) Set the cursor when resizing a grid.
 (#6557)

- `resizeGridStrategy` now returns an instance of `setCursorCommand`.
---
 .../canvas/canvas-strategies/strategies/resize-grid-strategy.ts  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index a2f66e3a36af..a47f7878f069 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -187,6 +187,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
           ),
           propertyValueAsString,
         ),
+        setCursorCommand(control.axis === 'column' ? CSSCursor.ColResize : CSSCursor.RowResize),
       ]
 
       return strategyApplicationResult(commands, [gridPath])

From 07d1bbdce03d310511d70e1b10042b6128640fc7 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Thu, 17 Oct 2024 17:57:39 +0100
Subject: [PATCH 160/272] fix(grids) Show Controls And Update Grids With
 Generated Content (#6553)

- Simplified `isGridCell`.
- Implemented `findOriginalGrid` utility function.
- Added update to `layoutSystemForChildrenInherited` to
`fillLayoutSystemForChildrenFromAncestors`.
- `useGridData` now uses `findOriginalGrid` to look up the hierarchy to
find the grid we're interested in.
- `resizeGridStrategy` now uses `findOriginalGrid` to find the correct
element to update.
- DOM walker defaults `layoutSystemForChildrenInherited` to false.
---
 .../ui-jsx-canvas-bugs.spec.tsx.snap          |   2 +
 .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 257 ++++++++++++++++++
 .../strategies/grid-helpers.ts                |  25 ++
 .../resize-grid-strategy.spec.browser2.tsx    |  96 +++++++
 .../strategies/resize-grid-strategy.ts        |  17 +-
 .../controls/grid-controls-for-strategies.tsx |   9 +-
 editor/src/components/canvas/dom-walker.ts    |   1 +
 .../store-deep-equality-instances-3.spec.ts   |   7 +
 .../store/store-deep-equality-instances.ts    |   4 +
 .../src/core/model/element-metadata-utils.ts  |  13 +-
 editor/src/core/shared/element-template.ts    |   4 +
 11 files changed, 419 insertions(+), 16 deletions(-)

diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
index e945250df896..d01c0243995a 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
@@ -223,6 +223,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -373,6 +374,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
index 1bfd4ad728a5..1300f2829a97 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
@@ -264,6 +264,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -437,6 +438,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -905,6 +907,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -1222,6 +1225,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -1394,6 +1398,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -1566,6 +1571,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -1738,6 +1744,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -2015,6 +2022,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -2188,6 +2196,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -2467,6 +2476,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -2743,6 +2753,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -2916,6 +2927,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -3069,6 +3081,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -3363,6 +3376,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -3536,6 +3550,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -3916,6 +3931,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -4262,6 +4278,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -4463,6 +4480,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -4630,6 +4648,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -4831,6 +4850,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -4998,6 +5018,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -5199,6 +5220,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -5366,6 +5388,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -5711,6 +5734,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -5884,6 +5908,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -6485,6 +6510,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -7052,6 +7078,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -7459,6 +7486,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -7832,6 +7860,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -8053,6 +8082,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -8240,6 +8270,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -8461,6 +8492,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -8648,6 +8680,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -8869,6 +8902,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -9056,6 +9090,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -9463,6 +9498,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -9836,6 +9872,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -10057,6 +10094,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -10244,6 +10282,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -10465,6 +10504,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -10652,6 +10692,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -10873,6 +10914,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -11060,6 +11102,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -11467,6 +11510,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -11840,6 +11884,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -12061,6 +12106,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -12248,6 +12294,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -12469,6 +12516,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -12656,6 +12704,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -12877,6 +12926,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -13064,6 +13114,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -13352,6 +13403,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -13525,6 +13577,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -13739,6 +13792,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -13893,6 +13947,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -14047,6 +14102,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -14323,6 +14379,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -14496,6 +14553,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -14762,6 +14820,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -15056,6 +15115,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -15229,6 +15289,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -15626,6 +15687,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -15988,6 +16050,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -16209,6 +16272,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -16430,6 +16494,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -16651,6 +16716,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -16945,6 +17011,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -17118,6 +17185,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -17515,6 +17583,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -17877,6 +17946,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -18098,6 +18168,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -18319,6 +18390,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -18540,6 +18612,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -18828,6 +18901,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -19001,6 +19075,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -19215,6 +19290,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -19369,6 +19445,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -19523,6 +19600,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -19811,6 +19889,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -19984,6 +20063,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -20303,6 +20383,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -20588,6 +20669,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -20743,6 +20825,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -20898,6 +20981,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -21202,6 +21286,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -21390,6 +21475,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -21857,6 +21943,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -22143,6 +22230,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -22446,6 +22534,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -22634,6 +22723,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -23101,6 +23191,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -23387,6 +23478,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -23691,6 +23783,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -23879,6 +23972,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -24397,6 +24491,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -24734,6 +24829,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -25038,6 +25134,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -25226,6 +25323,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -25744,6 +25842,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -26081,6 +26180,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -26356,6 +26456,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -26529,6 +26630,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -26682,6 +26784,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -27080,6 +27183,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -27253,6 +27357,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -29184,6 +29289,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -30661,6 +30767,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -32104,6 +32211,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -32729,6 +32837,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -33082,6 +33191,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -33707,6 +33817,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -34060,6 +34171,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -34685,6 +34797,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -35038,6 +35151,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -35701,6 +35815,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -36096,6 +36211,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -36759,6 +36875,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -37154,6 +37271,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -37817,6 +37935,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -38212,6 +38331,7 @@ export var storyboard = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -38510,6 +38630,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -38683,6 +38804,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -38931,6 +39053,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -39102,6 +39225,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -39273,6 +39397,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -39550,6 +39675,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -39723,6 +39849,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -39943,6 +40070,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -40219,6 +40347,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -40392,6 +40521,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -40716,6 +40846,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -41038,6 +41169,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -41211,6 +41343,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -41492,6 +41625,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -41722,6 +41856,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -41901,6 +42036,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -42205,6 +42341,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -42393,6 +42530,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -42751,6 +42889,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -42931,6 +43070,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -43388,6 +43528,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -43576,6 +43717,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -43936,6 +44078,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -44116,6 +44259,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -44504,6 +44648,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -44676,6 +44821,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -45473,6 +45619,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -45628,6 +45775,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -45783,6 +45931,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -45938,6 +46087,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -46095,6 +46245,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -46250,6 +46401,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -46405,6 +46557,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -46560,6 +46713,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -46783,6 +46937,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -46967,6 +47122,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -47124,6 +47280,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -47279,6 +47436,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -47434,6 +47592,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -47589,6 +47748,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -47744,6 +47904,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -47899,6 +48060,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -48054,6 +48216,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -48209,6 +48372,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -48364,6 +48528,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -48519,6 +48684,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -48674,6 +48840,7 @@ export var App = (props) => {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -48968,6 +49135,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -49141,6 +49309,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -49538,6 +49707,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -49900,6 +50070,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -50121,6 +50292,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -50342,6 +50514,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -50563,6 +50736,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -50857,6 +51031,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -51030,6 +51205,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -51426,6 +51602,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -51787,6 +51964,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -52008,6 +52186,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -52229,6 +52408,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -52450,6 +52630,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -52744,6 +52925,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -52917,6 +53099,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -53357,6 +53540,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -53762,6 +53946,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -53983,6 +54168,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -54204,6 +54390,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -54425,6 +54612,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -54725,6 +54913,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -54913,6 +55102,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -55180,6 +55370,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -55360,6 +55551,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -55638,6 +55830,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -55788,6 +55981,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -55986,6 +56180,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -56146,6 +56341,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -56306,6 +56502,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -56571,6 +56768,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -56721,6 +56919,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -56977,6 +57176,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -57175,6 +57375,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -57336,6 +57537,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -57589,6 +57791,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -57739,6 +57942,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -58005,6 +58209,7 @@ export var storyboard = (
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -58180,6 +58385,7 @@ export var storyboard = (
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -58433,6 +58639,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -58583,6 +58790,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -58736,6 +58944,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -58997,6 +59206,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -59147,6 +59357,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -59378,6 +59589,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -59558,6 +59770,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -59813,6 +60026,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -59963,6 +60177,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -60291,6 +60506,7 @@ export var storyboard = (
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -60485,6 +60701,7 @@ export var storyboard = (
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -60679,6 +60896,7 @@ export var storyboard = (
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -60933,6 +61151,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -61083,6 +61302,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -61253,6 +61473,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -61552,6 +61773,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -61725,6 +61947,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -62235,6 +62458,7 @@ export var storyboard = (
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -62395,6 +62619,7 @@ export var storyboard = (
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -62669,6 +62894,7 @@ export var storyboard = (
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -62941,6 +63167,7 @@ export var storyboard = (
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -63137,6 +63364,7 @@ export var storyboard = (
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -63331,6 +63559,7 @@ export var storyboard = (
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -63612,6 +63841,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -63785,6 +64015,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -63987,6 +64218,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -64158,6 +64390,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -64437,6 +64670,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -64610,6 +64844,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -64763,6 +64998,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -65072,6 +65308,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -65245,6 +65482,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -65667,6 +65905,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -66054,6 +66293,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -66289,6 +66529,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -66494,6 +66735,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -66665,6 +66907,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -66900,6 +67143,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -67105,6 +67349,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -67276,6 +67521,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -67511,6 +67757,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -67716,6 +67963,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -67887,6 +68135,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -68165,6 +68414,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -68338,6 +68588,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -68491,6 +68742,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -68779,6 +69031,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -68952,6 +69205,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -69173,6 +69427,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -69364,6 +69619,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
@@ -69525,6 +69781,7 @@ Object {
       "justifyContent": null,
       "justifySelf": null,
       "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
       "margin": Object {},
       "naturalHeight": null,
       "naturalWidth": null,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 8091b2456250..401fe101782e 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -763,3 +763,28 @@ function getOriginalElementGridConfiguration(
     mouseCellPosInOriginalElement,
   }
 }
+
+export function findOriginalGrid(
+  metadata: ElementInstanceMetadataMap,
+  path: ElementPath,
+): ElementPath | null {
+  const elementMetadata = MetadataUtils.findElementByElementPath(metadata, path)
+  if (elementMetadata == null) {
+    return null
+  }
+
+  if (!MetadataUtils.isGridLayoutedContainer(elementMetadata)) {
+    return null
+  }
+
+  if (!elementMetadata.specialSizeMeasurements.layoutSystemForChildrenInherited) {
+    return path
+  }
+
+  const parentPath = EP.parentPath(path)
+  if (parentPath == null) {
+    return null
+  }
+
+  return findOriginalGrid(metadata, parentPath)
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
index 35a0c8c4dfa6..f086926e2bc6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
@@ -95,6 +95,40 @@ export var storyboard = (
 )
 `
 
+const makeTestProjectForAGeneratedGrid = (columns: string, rows: string) => `
+import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <div
+      data-uid='grid'
+      data-testid='grid'
+      style={{
+        position: 'absolute',
+        left: 25,
+        top: 305,
+        display: 'grid',
+        gap: 10,
+        width: 600,
+        height: 600,
+        gridTemplateColumns: '${columns}',
+        gridTemplateRows: '${rows}',
+        height: 'max-content',
+      }}
+    >
+      {[1,2,3].map(n => {
+        return <div
+        data-uid={\`row-1-column-\${n}\`}
+        data-testid={\`row-1-column-\${n}\`}
+        style={{ backgroundColor: 'pink' }}
+      />
+      })}
+    </div>
+  </Storyboard>
+)
+`
+
 describe('resize a grid', () => {
   it('update a fractionally sized column', async () => {
     const renderResult = await renderTestEditorWithCode(
@@ -212,6 +246,68 @@ export var storyboard = (
 `)
   })
 
+  it('update a fractionally sized column with generated content', async () => {
+    const renderResult = await renderTestEditorWithCode(
+      makeTestProjectForAGeneratedGrid('2.4fr 1fr 1fr', '99px 109px 90px'),
+      'await-first-dom-report',
+    )
+    const target = EP.fromString(`sb/grid`)
+    await renderResult.dispatch(selectComponents([target], false), true)
+    await renderResult.getDispatchFollowUpActionsFinished()
+    const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
+    const resizeControl = renderResult.renderedDOM.getByTestId(`grid-column-handle-1`)
+    const resizeControlRect = resizeControl.getBoundingClientRect()
+    const startPoint = canvasPoint({
+      x: resizeControlRect.x + resizeControlRect.width / 2,
+      y: resizeControlRect.y + resizeControlRect.height / 2,
+    })
+    const endPoint = canvasPoint({
+      x: startPoint.x + 100,
+      y: startPoint.y,
+    })
+    await mouseMoveToPoint(resizeControl, startPoint)
+    await mouseDownAtPoint(resizeControl, startPoint)
+    await mouseMoveToPoint(canvasControlsLayer, endPoint)
+    await mouseUpAtPoint(canvasControlsLayer, endPoint)
+    await renderResult.getDispatchFollowUpActionsFinished()
+
+    expect(getPrintedUiJsCode(renderResult.getEditorState()))
+      .toEqual(`import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <div
+      data-uid='grid'
+      data-testid='grid'
+      style={{
+        position: 'absolute',
+        left: 25,
+        top: 305,
+        display: 'grid',
+        gap: 10,
+        width: 600,
+        height: 600,
+        gridTemplateColumns: '2.4fr 1.8fr 1fr',
+        gridTemplateRows: '99px 109px 90px',
+        height: 'max-content',
+      }}
+    >
+      {[1, 2, 3].map((n) => {
+        return (
+          <div
+            data-uid={\`row-1-column-\${n}\`}
+            data-testid={\`row-1-column-\${n}\`}
+            style={{ backgroundColor: 'pink' }}
+          />
+        )
+      })}
+    </div>
+  </Storyboard>
+)
+`)
+  })
+
   it('update a pixel sized row', async () => {
     const renderResult = await renderTestEditorWithCode(
       makeTestProject('2.4fr 1fr 1fr', '99px 109px 90px'),
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index a47f7878f069..bf89f6246649 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -34,7 +34,11 @@ import type { Either } from '../../../../core/shared/either'
 import { foldEither, isLeft, isRight } from '../../../../core/shared/either'
 import { roundTo, roundToNearestWhole } from '../../../../core/shared/math-utils'
 import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
-import { expandGridDimensions, replaceGridTemplateDimensionAtIndex } from './grid-helpers'
+import {
+  expandGridDimensions,
+  findOriginalGrid,
+  replaceGridTemplateDimensionAtIndex,
+} from './grid-helpers'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 import { CSSCursor } from '../../canvas-types'
 
@@ -60,6 +64,11 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
   }
 
   const gridPath = isGrid ? selectedElement : EP.parentPath(selectedElement)
+  const metadata = interactionSession?.latestMetadata ?? canvasState.startingMetadata
+  const originalGridPath = findOriginalGrid(metadata, gridPath)
+  if (originalGridPath == null) {
+    return null
+  }
 
   return {
     id: 'resize-grid-strategy',
@@ -96,7 +105,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       const dragAmount = control.axis === 'column' ? drag.x : drag.y
 
       const gridSpecialSizeMeasurements =
-        canvasState.startingMetadata[EP.toString(gridPath)].specialSizeMeasurements
+        canvasState.startingMetadata[EP.toString(originalGridPath)].specialSizeMeasurements
 
       const originalValues =
         control.axis === 'column'
@@ -180,7 +189,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       const commands = [
         setProperty(
           'always',
-          gridPath,
+          originalGridPath,
           PP.create(
             'style',
             control.axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows',
@@ -190,7 +199,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         setCursorCommand(control.axis === 'column' ? CSSCursor.ColResize : CSSCursor.RowResize),
       ]
 
-      return strategyApplicationResult(commands, [gridPath])
+      return strategyApplicationResult(commands, [originalGridPath])
     },
   }
 }
diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index e492acf30673..a5534b5f4684 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -32,6 +32,7 @@ import {
   GridRowColumnResizingControlsComponent,
 } from './grid-controls'
 import { isEdgePositionOnSide } from '../canvas-utils'
+import { findOriginalGrid } from '../canvas-strategies/strategies/grid-helpers'
 
 export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`
 
@@ -136,7 +137,11 @@ export function useGridData(elementPaths: ElementPath[]): GridData[] {
     Substores.metadata,
     (store) => {
       return mapDropNulls((view) => {
-        const element = MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, view)
+        const originalGridPath = findOriginalGrid(store.editor.jsxMetadata, view)
+        const element = MetadataUtils.findElementByElementPath(
+          store.editor.jsxMetadata,
+          originalGridPath,
+        )
 
         const targetGridContainer = MetadataUtils.isGridLayoutedContainer(element) ? element : null
 
@@ -172,7 +177,7 @@ export function useGridData(elementPaths: ElementPath[]): GridData[] {
         )
 
         return {
-          elementPath: targetGridContainer.elementPath,
+          elementPath: view,
           metadata: targetGridContainer,
           frame: targetGridContainer.globalFrame,
           gridTemplateColumns: gridTemplateColumns,
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index bd2560483fcf..60f3d3c5f1ab 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -956,6 +956,7 @@ function getSpecialMeasurements(
     isParentNonStatic,
     parentLayoutSystem,
     layoutSystemForChildren,
+    false, // layoutSystemForChildrenInherited
     providesBoundsForAbsoluteChildren,
     elementStyle.display,
     position,
diff --git a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
index 7d92822b622e..3efbf85ed95b 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
@@ -233,6 +233,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     usesParentBounds: false,
     parentLayoutSystem: 'flex',
     layoutSystemForChildren: 'flex',
+    layoutSystemForChildrenInherited: false,
     providesBoundsForAbsoluteChildren: true,
     display: 'flex',
     position: 'absolute',
@@ -355,6 +356,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     usesParentBounds: false,
     parentLayoutSystem: 'flex',
     layoutSystemForChildren: 'flex',
+    layoutSystemForChildrenInherited: false,
     providesBoundsForAbsoluteChildren: true,
     display: 'flex',
     position: 'absolute',
@@ -532,6 +534,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       usesParentBounds: false,
       parentLayoutSystem: 'flex',
       layoutSystemForChildren: 'flex',
+      layoutSystemForChildrenInherited: false,
       providesBoundsForAbsoluteChildren: true,
       display: 'flex',
       position: 'absolute',
@@ -686,6 +689,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       usesParentBounds: false,
       parentLayoutSystem: 'flex',
       layoutSystemForChildren: 'flex',
+      layoutSystemForChildrenInherited: false,
       providesBoundsForAbsoluteChildren: true,
       display: 'flex',
       position: 'absolute',
@@ -865,6 +869,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         usesParentBounds: false,
         parentLayoutSystem: 'flex',
         layoutSystemForChildren: 'flex',
+        layoutSystemForChildrenInherited: false,
         providesBoundsForAbsoluteChildren: true,
         display: 'flex',
         position: 'absolute',
@@ -1022,6 +1027,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         parentLayoutSystem: 'flex',
         parentFlexGap: 0,
         layoutSystemForChildren: 'flex',
+        layoutSystemForChildrenInherited: false,
         providesBoundsForAbsoluteChildren: true,
         display: 'flex',
         position: 'absolute',
@@ -1177,6 +1183,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         usesParentBounds: false,
         parentLayoutSystem: 'flex',
         layoutSystemForChildren: 'flex',
+        layoutSystemForChildrenInherited: false,
         providesBoundsForAbsoluteChildren: true,
         display: 'flex',
         position: 'absolute',
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 62195fe69d70..cdf9eabda3f7 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -2191,6 +2191,8 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
       oldSize.layoutSystemForChildren,
       newSize.layoutSystemForChildren,
     ).areEqual
+    const layoutSystemForChildrenInheritedResult =
+      oldSize.layoutSystemForChildrenInherited === newSize.layoutSystemForChildrenInherited
     const providesBoundsForAbsoluteChildrenResult =
       oldSize.providesBoundsForAbsoluteChildren === newSize.providesBoundsForAbsoluteChildren
     const positionResult = oldSize.position === newSize.position
@@ -2278,6 +2280,7 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
       usesParentBoundsResult &&
       parentLayoutSystemResult &&
       layoutSystemForChildrenResult &&
+      layoutSystemForChildrenInheritedResult &&
       providesBoundsForAbsoluteChildrenResult &&
       positionResult &&
       marginResult.areEqual &&
@@ -2331,6 +2334,7 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
         newSize.usesParentBounds,
         newSize.parentLayoutSystem,
         newSize.layoutSystemForChildren,
+        newSize.layoutSystemForChildrenInherited,
         newSize.providesBoundsForAbsoluteChildren,
         newSize.display,
         newSize.position,
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index ac005c2026ac..f5f4fc0aca1f 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -381,16 +381,8 @@ export const MetadataUtils = {
     return instance?.specialSizeMeasurements.layoutSystemForChildren === 'grid'
   },
   isGridCell(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
-    const parent = MetadataUtils.findElementByElementPath(metadata, EP.parentPath(path))
-    return (
-      parent != null &&
-      isRight(parent.element) &&
-      isJSXElement(parent.element.value) &&
-      parent.element.value.children.length > 0 &&
-      parent.specialSizeMeasurements.containerGridProperties.gridTemplateColumns != null &&
-      parent.specialSizeMeasurements.containerGridProperties.gridTemplateRows != null &&
-      MetadataUtils.isGridLayoutedContainer(parent)
-    )
+    const elementMetadata = MetadataUtils.findElementByElementPath(metadata, path)
+    return elementMetadata?.specialSizeMeasurements.parentLayoutSystem === 'grid'
   },
   isGridCellWithPositioning(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
     const element = MetadataUtils.findElementByElementPath(metadata, path)
@@ -2660,6 +2652,7 @@ function fillLayoutSystemForChildrenFromAncestors(
       specialSizeMeasurements: {
         ...elem.specialSizeMeasurements,
         layoutSystemForChildren: layoutSystemForChildren,
+        layoutSystemForChildrenInherited: true,
       },
     }
   })
diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts
index b1480315c7fb..6e054876f9cf 100644
--- a/editor/src/core/shared/element-template.ts
+++ b/editor/src/core/shared/element-template.ts
@@ -2798,6 +2798,7 @@ export interface SpecialSizeMeasurements {
   usesParentBounds: boolean
   parentLayoutSystem: DetectedLayoutSystem // TODO make a specific boolean prop that tells us the parent is flex or not
   layoutSystemForChildren: DetectedLayoutSystem | null
+  layoutSystemForChildrenInherited: boolean
   providesBoundsForAbsoluteChildren: boolean
   display: string
   position: CSSPosition | null
@@ -2851,6 +2852,7 @@ export function specialSizeMeasurements(
   usesParentBounds: boolean,
   parentLayoutSystem: DetectedLayoutSystem,
   layoutSystemForChildren: DetectedLayoutSystem | null,
+  layoutSystemForChildrenInherited: boolean,
   providesBoundsForAbsoluteChildren: boolean,
   display: string,
   position: CSSPosition | null,
@@ -2905,6 +2907,7 @@ export function specialSizeMeasurements(
     usesParentBounds,
     parentLayoutSystem,
     layoutSystemForChildren,
+    layoutSystemForChildrenInherited,
     providesBoundsForAbsoluteChildren,
     display,
     position,
@@ -2963,6 +2966,7 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements(
   'flow',
   null,
   false,
+  false,
   'initial',
   null,
   sides(undefined, undefined, undefined, undefined),

From e4c5e04ae1c20a85bfa5c4fcc5dfb60dd241c44a Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Fri, 18 Oct 2024 09:30:50 +0200
Subject: [PATCH 161/272] Update gap when rowGap or columnGap is not specified
 (#6561)

**Problem:**
When no separate rowGap or columnGap property is specified, the gap
control should update the gap property.

**Fix:**
Check it in the strategy if a rowGap or columnGap exists, and if not,
update the gap property

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../strategies/set-grid-gap-strategy.tsx               | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
index 9339b388a790..efcba9317cb9 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
@@ -164,9 +164,17 @@ export const setGridGapStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
+      const shouldSetGapByAxis = gridGap.row.value != null || gridGap.column.value != null
+
       const axis = interactionSession.activeControl.axis
       const shouldTearOffGapByAxis = axis === 'row' ? shouldTearOffGap.y : shouldTearOffGap.x
-      const axisStyleProp = axis === 'row' ? StyleRowGapProp : StyleColumnGapProp
+
+      const axisStyleProp = shouldSetGapByAxis
+        ? axis === 'row'
+          ? StyleRowGapProp
+          : StyleColumnGapProp
+        : StyleGapProp
+
       const gridGapMeasurement =
         axis === 'row' ? updatedGridGapMeasurement.row : updatedGridGapMeasurement.column
 

From b27dfa8b2064e689c83d69549803c5400a6fba9f Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 18 Oct 2024 11:55:21 +0200
Subject: [PATCH 162/272] Fix grid resize striped area length with per-axis gap
 (#6563)

**Problem:**

When changing the grid gap via the canvas the row/column specific gap is
set (or using the split gap in the inspector), but it's not taken into
account when calculating the striped area length for grid resize.

**Fix:**

Take the `rowGap` / `columnGap` props into account when calculating the
striped area length in addition to the `gap` shorthand.

Fixes #6562
---
 editor/src/components/canvas/controls/grid-controls.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 928d646d4082..c0d0b99be34f 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -532,7 +532,8 @@ export const GridRowColumnResizingControlsComponent = ({
             gap={grid.columnGap ?? grid.gap}
             padding={grid.padding}
             stripedAreaLength={
-              getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0) ?? grid.frame.height
+              getStripedAreaLength(grid.gridTemplateRows, grid.rowGap ?? grid.gap ?? 0) ??
+              grid.frame.height
             }
             alignContent={grid.justifyContent}
             justifyContent={grid.alignContent}
@@ -550,7 +551,8 @@ export const GridRowColumnResizingControlsComponent = ({
             gap={grid.rowGap ?? grid.gap}
             padding={grid.padding}
             stripedAreaLength={
-              getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0) ?? grid.frame.width
+              getStripedAreaLength(grid.gridTemplateColumns, grid.columnGap ?? grid.gap ?? 0) ??
+              grid.frame.width
             }
             alignContent={grid.alignContent}
             justifyContent={grid.justifyContent}

From f9cea56a98cb26bfcbb17f932acf131a6d905d67 Mon Sep 17 00:00:00 2001
From: RheeseyB <1044774+Rheeseyb@users.noreply.github.com>
Date: Fri, 18 Oct 2024 12:04:17 +0100
Subject: [PATCH 163/272] fix(tests) Try to fix race condition in tests by
 awaiting dispatch follow up actions

---
 .../navigator/left-pane/settings-pane.spec.browser2.tsx         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/editor/src/components/navigator/left-pane/settings-pane.spec.browser2.tsx b/editor/src/components/navigator/left-pane/settings-pane.spec.browser2.tsx
index b76adcba9ef4..ff48ed3d9619 100644
--- a/editor/src/components/navigator/left-pane/settings-pane.spec.browser2.tsx
+++ b/editor/src/components/navigator/left-pane/settings-pane.spec.browser2.tsx
@@ -55,6 +55,7 @@ describe('Settings Pane', () => {
   it('Project name is editable if the user can edit project', async () => {
     const renderResult = await renderRemixProject(project)
     await renderResult.dispatch([updateProjectServerState({ isMyProject: 'yes' })], true)
+    await renderResult.getDispatchFollowUpActionsFinished()
 
     const settingsTabButton = await renderResult.renderedDOM.findByText('Settings')
 
@@ -71,6 +72,7 @@ describe('Settings Pane', () => {
   it('Project name is not editable if the user can not edit project', async () => {
     const renderResult = await renderRemixProject(project)
     await renderResult.dispatch([updateProjectServerState({ isMyProject: 'no' })], true)
+    await renderResult.getDispatchFollowUpActionsFinished()
 
     const settingsTabButton = await renderResult.renderedDOM.findByText('Settings')
 

From a53ecb5473eb66fbc54173058f06d10d4547b72c Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Fri, 18 Oct 2024 13:42:10 +0100
Subject: [PATCH 164/272] refactor(grid) Rework SubduedGridGapControl (#6564)

- Removed a lot of the contents of `SubduedGridGapControl` and replace
the main contents of the rendering with
`GridPaddingOutlineForDimension`.
- Added `draggedOutlineColor` to `GridPaddingOutlineForDimension` and
`GridRowHighlight`.
- Removed `gridGapControlBoundsFromMetadata`.
---
 .../grid-gap-control-component.tsx            |  12 +-
 .../select-mode/subdued-grid-gap-controls.tsx | 149 +++++-------------
 editor/src/components/canvas/gap-utils.ts     | 110 -------------
 3 files changed, 46 insertions(+), 225 deletions(-)

diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
index 9a754866e4ee..98ccb11f2a80 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
@@ -8,6 +8,7 @@ import type { ElementPath } from '../../../../core/shared/project-file-types'
 import { assertNever } from '../../../../core/shared/utils'
 import { Modifier } from '../../../../utils/modifiers'
 import { when } from '../../../../utils/react-conditionals'
+import type { UtopiColor } from '../../../../uuiui'
 import { useColorTheme, UtopiaStyles } from '../../../../uuiui'
 import { CSSCursor } from '../../../../uuiui-deps'
 import type { EditorDispatch } from '../../../editor/action-types'
@@ -139,7 +140,7 @@ export const GridGapControlComponent = React.memo<GridGapControlProps>((props) =
   )
 })
 
-const GridPaddingOutlineForDimension = (props: {
+export const GridPaddingOutlineForDimension = (props: {
   grid: GridData
   dimension: 'rows' | 'columns'
   onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void
@@ -148,6 +149,7 @@ const GridPaddingOutlineForDimension = (props: {
   zIndexPriority: boolean
   gridGap: CSSNumberWithRenderedValue
   elementHovered: boolean
+  draggedOutlineColor?: UtopiColor
 }) => {
   const {
     grid,
@@ -158,6 +160,7 @@ const GridPaddingOutlineForDimension = (props: {
     onMouseOver,
     zIndexPriority,
     elementHovered,
+    draggedOutlineColor,
   } = props
 
   let style: CSSProperties = {
@@ -199,6 +202,7 @@ const GridPaddingOutlineForDimension = (props: {
             beingDragged={beingDragged}
             onMouseOver={onMouseOver}
             elementHovered={elementHovered}
+            draggedOutlineColor={draggedOutlineColor}
           />
         )
       })}
@@ -218,6 +222,7 @@ const GridRowHighlight = (props: {
   beingDragged: boolean
   onMouseOver: () => void
   elementHovered: boolean
+  draggedOutlineColor?: UtopiColor
 }) => {
   const {
     gapId,
@@ -231,6 +236,7 @@ const GridRowHighlight = (props: {
     beingDragged,
     onMouseOver,
     elementHovered,
+    draggedOutlineColor,
   } = props
 
   const colorTheme = useColorTheme()
@@ -242,7 +248,9 @@ const GridRowHighlight = (props: {
 
   const lineWidth = 1 / canvasScale
 
-  const outlineColor = beingDragged ? colorTheme.brandNeonOrange.value : 'transparent'
+  const outlineColor = beingDragged
+    ? (draggedOutlineColor ?? colorTheme.brandNeonOrange).value
+    : 'transparent'
 
   const [backgroundShown, setBackgroundShown] = React.useState<boolean>(false)
 
diff --git a/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx b/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
index ffb35aae3811..3b45f1dcb3d7 100644
--- a/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
+++ b/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
@@ -1,15 +1,13 @@
 import React from 'react'
 import { useColorTheme } from '../../../../uuiui'
-import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook'
-import { useBoundingBox } from '../bounding-box-hooks'
+import { Substores, useEditorState } from '../../../editor/store/store-hook'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
 import type { Axis } from '../../gap-utils'
-import { gridGapControlBoundsFromMetadata, maybeGridGapData } from '../../gap-utils'
-import type { ElementPath } from 'utopia-shared/src/types'
 import { useGridData } from '../grid-controls-for-strategies'
-import { fallbackEmptyValue } from './controls-common'
-import type { CanvasRectangle } from '../../../../core/shared/math-utils'
-import type { CSSNumber } from '../../../../components/inspector/common/css-utils'
+import { unitlessCSSNumberWithRenderedValue } from './controls-common'
+import { NO_OP } from '../../../../core/shared/utils'
+import * as EP from '../../../../core/shared/element-path'
+import { GridPaddingOutlineForDimension } from './grid-gap-control-component'
 
 export interface SubduedGridGapControlProps {
   hoveredOrFocused: 'hovered' | 'focused'
@@ -18,124 +16,49 @@ export interface SubduedGridGapControlProps {
 
 export const SubduedGridGapControl = React.memo<SubduedGridGapControlProps>((props) => {
   const { hoveredOrFocused, axis } = props
+  const colorTheme = useColorTheme()
   const targets = useEditorState(
     Substores.selectedViews,
     (store) => store.editor.selectedViews,
     'SubduedGridGapControl selectedViews',
   )
 
-  const metadata = useRefEditorState((store) => store.editor.jsxMetadata)
-  const selectedElement = targets.at(0)
-
   const gridRowColumnInfo = useGridData(targets)
-  const selectedGrid = gridRowColumnInfo.at(0)
-
-  const filteredGaps = React.useMemo(() => {
-    if (selectedElement == null || selectedGrid == null) {
-      return []
-    }
-    const gridGap = maybeGridGapData(metadata.current, selectedElement)
-    if (gridGap == null) {
-      return []
-    }
-
-    const gridGapRow = gridGap.row
-    const gridGapColumn = gridGap.column
 
-    const controlBounds = gridGapControlBoundsFromMetadata(selectedGrid, {
-      row: fallbackEmptyValue(gridGapRow),
-      column: fallbackEmptyValue(gridGapColumn),
-    })
-    return controlBounds.gaps.filter((gap) => gap.axis === axis || axis === 'both')
-  }, [axis, metadata, selectedElement, selectedGrid])
-
-  if (filteredGaps.length === 0 || selectedElement == null) {
+  if (gridRowColumnInfo.length === 0) {
     return null
   }
 
-  return (
-    <>
-      {filteredGaps.map((gap) => (
-        <GridGapControl
-          key={gap.gapId}
-          targets={targets}
-          selectedElement={selectedElement}
-          hoveredOrFocused={hoveredOrFocused}
-          gap={gap}
-        />
-      ))}
-    </>
-  )
-})
-
-function GridGapControl({
-  targets,
-  selectedElement,
-  hoveredOrFocused,
-  gap,
-}: {
-  targets: Array<ElementPath>
-  selectedElement: ElementPath
-  hoveredOrFocused: 'hovered' | 'focused'
-  gap: {
-    bounds: CanvasRectangle
-    gapId: string
-    gap: CSSNumber
-    axis: Axis
-  }
-}) {
-  const metadata = useRefEditorState((store) => store.editor.jsxMetadata)
-  const scale = useEditorState(
-    Substores.canvas,
-    (store) => store.editor.canvas.scale,
-    'GridGapControl scale',
-  )
-  const gridRowColumnInfo = useGridData([selectedElement])
-
-  const sideRef = useBoundingBox([selectedElement], (ref, parentBoundingBox) => {
-    const gridGap = maybeGridGapData(metadata.current, selectedElement)
-    const selectedGrid = gridRowColumnInfo.at(0)
-    if (gridGap == null || selectedGrid == null) {
-      return
-    }
-
-    const controlBounds = gridGapControlBoundsFromMetadata(selectedGrid, {
-      row: fallbackEmptyValue(gridGap.row),
-      column: fallbackEmptyValue(gridGap.column),
-    })
-
-    const bound = controlBounds.gaps.find((updatedGap) => updatedGap.gapId === gap.gapId)
-    if (bound == null) {
-      return
-    }
-
-    ref.current.style.display = 'block'
-    ref.current.style.left = `${bound.bounds.x + parentBoundingBox.x}px`
-    ref.current.style.top = `${bound.bounds.y + parentBoundingBox.y}px`
-    ref.current.style.height = numberToPxValue(bound.bounds.height)
-    ref.current.style.width = numberToPxValue(bound.bounds.width)
-  })
-
-  const color = useColorTheme().brandNeonPink.value
-
-  const solidOrDashed = hoveredOrFocused === 'focused' ? 'solid' : 'dashed'
-
   return (
     <CanvasOffsetWrapper>
-      <div
-        ref={sideRef}
-        style={{
-          position: 'absolute',
-          border: `1px ${solidOrDashed} ${color}`,
-        }}
-        data-testid={getSubduedGridGaplTestID(hoveredOrFocused)}
-      />
+      {gridRowColumnInfo.map((gridData) => {
+        return (
+          <React.Fragment key={`grid-gap-${EP.toString(gridData.elementPath)}`}>
+            <GridPaddingOutlineForDimension
+              grid={gridData}
+              dimension={'rows'}
+              onMouseDown={NO_OP}
+              beingDragged={true}
+              onMouseOver={NO_OP}
+              zIndexPriority={false}
+              gridGap={unitlessCSSNumberWithRenderedValue(gridData.rowGap ?? 0)}
+              elementHovered={hoveredOrFocused === 'hovered' && axis === 'row'}
+              draggedOutlineColor={colorTheme.brandNeonPink}
+            />
+            <GridPaddingOutlineForDimension
+              grid={gridData}
+              dimension={'columns'}
+              onMouseDown={NO_OP}
+              beingDragged={true}
+              onMouseOver={NO_OP}
+              zIndexPriority={false}
+              gridGap={unitlessCSSNumberWithRenderedValue(gridData.columnGap ?? 0)}
+              elementHovered={hoveredOrFocused === 'hovered' && axis === 'column'}
+              draggedOutlineColor={colorTheme.brandNeonPink}
+            />
+          </React.Fragment>
+        )
+      })}
     </CanvasOffsetWrapper>
   )
-}
-
-export function getSubduedGridGaplTestID(hoveredOrFocused: 'hovered' | 'focused'): string {
-  return `SubduedGridGapControl-${hoveredOrFocused}`
-}
-
-const numberToPxValue = (n: number) => n + 'px'
+})
diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
index e2e980f3e4d0..17387f867068 100644
--- a/editor/src/components/canvas/gap-utils.ts
+++ b/editor/src/components/canvas/gap-utils.ts
@@ -176,116 +176,6 @@ export function gapControlBoundsFromMetadata(
   )
 }
 
-export function gridGapControlBoundsFromMetadata(
-  gridRowColumnInfo: GridData,
-  gapValues: { row: CSSNumber; column: CSSNumber },
-): {
-  gaps: Array<{
-    bounds: CanvasRectangle
-    gapId: string
-    gap: CSSNumber
-    axis: Axis
-  }>
-  rows: number
-  columns: number
-  cellBounds: CanvasRectangle
-  gapValues: { row: CSSNumber; column: CSSNumber }
-  gridTemplateRows: string
-  gridTemplateColumns: string
-} {
-  const emptyResult = {
-    rows: 0,
-    columns: 0,
-    gaps: [],
-    cellBounds: canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }),
-    gapValues: gapValues,
-    gridTemplateRows: '1fr',
-    gridTemplateColumns: '1fr',
-  }
-  const grid = gridRowColumnInfo.metadata
-
-  if (grid == null) {
-    return emptyResult
-  }
-
-  const parentGridBounds = grid.globalFrame
-
-  if (parentGridBounds == null || isInfinityRectangle(parentGridBounds)) {
-    return emptyResult
-  }
-
-  const gridRows = gridRowColumnInfo.rows
-  const gridColumns = gridRowColumnInfo.columns
-  const gridTemplateRows = getNullableAutoOrTemplateBaseString(gridRowColumnInfo.gridTemplateRows)
-  const gridTemplateColumns = getNullableAutoOrTemplateBaseString(
-    gridRowColumnInfo.gridTemplateColumns,
-  )
-
-  const gridCellBounds = grid.specialSizeMeasurements.gridCellGlobalFrames
-
-  if (gridCellBounds == null || gridCellBounds.length == 0) {
-    return emptyResult
-  }
-  const allCellsBound = canvasRectangle({
-    x: gridCellBounds[0][0].x - parentGridBounds.x,
-    y: gridCellBounds[0][0].y - parentGridBounds.y,
-    width:
-      gridCellBounds[0][gridCellBounds[0].length - 1].x +
-      gridCellBounds[0][gridCellBounds[0].length - 1].width -
-      gridCellBounds[0][0].x,
-    height:
-      gridCellBounds[gridCellBounds.length - 1][0].y +
-      gridCellBounds[gridCellBounds.length - 1][0].height -
-      gridCellBounds[0][0].y,
-  })
-
-  // row gaps array
-  const rowGaps = createArrayWithLength(gridCellBounds.length - 1, (i) => {
-    // cell i represents the gap between child [i * gridColumns] and child [(i+1) * gridColumns]
-    const firstChildBounds = gridCellBounds[i][0]
-    const secondChildBounds = gridCellBounds[i + 1][0]
-    return {
-      gapId: `${EP.toString(grid.elementPath)}-row-gap-${i}`,
-      bounds: canvasRectangle({
-        x: allCellsBound.x,
-        y: firstChildBounds.y + firstChildBounds.height - parentGridBounds.y,
-        width: allCellsBound.width,
-        height: secondChildBounds.y - firstChildBounds.y - firstChildBounds.height,
-      }),
-      gap: gapValues.row,
-      axis: 'row' as Axis,
-    }
-  })
-
-  // column gaps array
-  const columnGaps = createArrayWithLength(gridCellBounds[0].length - 1, (i) => {
-    // cell i represents the gap between child [i] and child [i + 1]
-    const firstChildBounds = gridCellBounds[0][i]
-    const secondChildBounds = gridCellBounds[0][i + 1]
-    return {
-      gapId: `${EP.toString(grid.elementPath)}-column-gap-${i}`,
-      bounds: canvasRectangle({
-        x: firstChildBounds.x + firstChildBounds.width - parentGridBounds.x,
-        y: allCellsBound.y,
-        width: secondChildBounds.x - firstChildBounds.x - firstChildBounds.width,
-        height: allCellsBound.height,
-      }),
-      gap: gapValues.column,
-      axis: 'column' as Axis,
-    }
-  })
-
-  return {
-    gaps: rowGaps.concat(columnGaps),
-    rows: gridRows,
-    columns: gridColumns,
-    gridTemplateRows: gridTemplateRows ?? '',
-    gridTemplateColumns: gridTemplateColumns ?? '',
-    cellBounds: allCellsBound,
-    gapValues: gapValues,
-  }
-}
-
 export interface GridGapData {
   row: CSSNumberWithRenderedValue
   column: CSSNumberWithRenderedValue

From 40c535ae0208a9d3975e01ba6d4b185d47eabea9 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Fri, 18 Oct 2024 14:57:01 +0200
Subject: [PATCH 165/272] Fix Grid Track Labels and Resize Indicators (#6566)

# **Problem:**
The grid labels and the grid resize indicators are in a state of being
fucked:

![image](https://github.com/user-attachments/assets/e68f433a-93e5-4f3a-92c7-a53764357651)

![image](https://github.com/user-attachments/assets/d2347204-9ae4-48de-bc5f-31592f81e751)

![image](https://github.com/user-attachments/assets/c0105ee6-793e-48d1-b68b-b2f9eb6f64e2)

# **Goal:**
Fix the various layout issues, and make the labels subdued until
hovered. The hovered label should z-index over its siblings:

![image](https://github.com/user-attachments/assets/52b0f170-6d6b-4fed-8290-1eb6f9a022c8)

# **Fix:**
<img width="566" alt="image"
src="https://github.com/user-attachments/assets/ade0a053-321f-438c-a9e2-d8538f5be293">


![image](https://github.com/user-attachments/assets/9cb73a40-b205-45c8-a43f-2f1aae5ff6bf)



**Commit Details:**

- Split `GridResizingControl` into `GridTrackSizeLabelForDimension` and
`GridResizingStripedIndicator`
- Render _two_ helper grids, one for the label and one for the sizing
indicator. This avoids future css intermingling problems, going forward
bug fixing one should not meaningfully affect the other.
- The helper grids use the blessed
`getGridHelperStyleMatchingTargetGrid` style instead of manually picking
an assortment of relevant grid properties. This simplifies our life 97%

**Note:**
The code could be further simplified, as this is now a copy-paste job. I
tried to remove the obviously unnecessary things, but there's still a
little too much div wrappers going on.

**Manual Tests:**
I hereby swear that:

- [ ] I opened a hydrogen project and it loaded
- [ ] I could navigate to various routes in Play mode
---
 .../canvas/controls/grid-controls.tsx         | 229 ++++++++++--------
 editor/src/uuiui/styles/theme/dark.ts         |   1 +
 editor/src/uuiui/styles/theme/light.ts        |   1 +
 3 files changed, 136 insertions(+), 95 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index c0d0b99be34f..756944ad8a37 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -74,7 +74,11 @@ import { windowToCanvasCoordinates } from '../dom-lookup'
 import type { Axis } from '../gap-utils'
 import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
 import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
-import type { GridControlsProps, GridData } from './grid-controls-for-strategies'
+import type {
+  GridControlsProps,
+  GridData,
+  GridMeasurementHelperData,
+} from './grid-controls-for-strategies'
 import {
   edgePositionToGridResizeEdge,
   GridCellTestId,
@@ -112,7 +116,6 @@ function getLabelForAxis(
   return gridCSSNumberToLabel(defaultEither(fromDOM, fromPropsAtIndex))
 }
 
-const GRID_RESIZE_HANDLE_CONTAINER_SIZE = 30 // px
 const GRID_RESIZE_HANDLE_SIZE = 15 // px
 
 interface GridResizingControlProps {
@@ -128,7 +131,7 @@ interface GridResizingControlProps {
   stripedAreaLength: number | null
 }
 
-const GridResizingControl = React.memo((props: GridResizingControlProps) => {
+const GridTrackSizeLabel = React.memo((props: GridResizingControlProps) => {
   const { setResizingIndex } = props
 
   const canvasOffset = useEditorState(
@@ -200,15 +203,18 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
   const labelId = `grid-${props.axis}-handle-${props.dimensionIndex}`
   const containerId = `${labelId}-container`
 
-  const shadowSize = React.useMemo(() => {
-    return props.axis === 'column'
-      ? props.containingFrame.height + GRID_RESIZE_HANDLE_CONTAINER_SIZE
-      : props.containingFrame.width + GRID_RESIZE_HANDLE_CONTAINER_SIZE
-  }, [props.containingFrame, props.axis])
-
-  const stripedAreaSkew = React.useMemo(
-    () => GRID_RESIZE_HANDLE_CONTAINER_SIZE / scale + props.padding,
-    [scale, props.padding],
+  const cssProp = React.useMemo(
+    () => ({
+      backgroundColor:
+        props.resizing === 'resize-target'
+          ? colorTheme.primary.value
+          : colorTheme.primarySubdued.value,
+      '&:hover': {
+        zIndex: 1,
+        backgroundColor: colorTheme.primary.value,
+      },
+    }),
+    [props.resizing, colorTheme],
   )
 
   return (
@@ -219,20 +225,22 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
         display: 'flex',
         alignItems: props.axis === 'column' ? 'flex-start' : 'center',
         justifyContent: props.axis === 'column' ? 'center' : 'flex-start',
-        height: props.axis === 'column' && props.resizing !== 'not-resizing' ? shadowSize : '100%',
-        width: props.axis === 'row' && props.resizing !== 'not-resizing' ? shadowSize : '100%',
+        height: '100%',
+        width: '100%',
         position: 'relative',
       }}
     >
       <div
         data-testid={labelId}
         style={{
+          position: 'absolute',
           zoom: 1 / scale,
           height: GRID_RESIZE_HANDLE_SIZE,
+          right: props.axis === 'row' ? 'calc(100% + 8px)' : undefined,
+          bottom: props.axis === 'column' ? 'calc(100% + 8px)' : undefined,
           borderRadius: 3,
           padding: '0 4px',
           border: `.1px solid ${colorTheme.white.value}`,
-          background: colorTheme.primary.value,
           color: colorTheme.white.value,
           display: 'flex',
           alignItems: 'center',
@@ -244,27 +252,46 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
         }}
         onMouseDown={mouseDownHandler}
         onMouseMove={onMouseMove}
+        css={cssProp}
       >
         {getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)}
       </div>
+    </div>
+  )
+})
+GridTrackSizeLabel.displayName = 'GridTrackSizeLabel'
+
+const GridResizingStripedIndicator = React.memo((props: GridResizingControlProps) => {
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'GridResizingControl scale',
+  )
+  const colorTheme = useColorTheme()
+
+  const labelId = `grid-${props.axis}-handle-${props.dimensionIndex}`
+  const containerId = `${labelId}-container`
+
+  return (
+    <div
+      key={containerId}
+      data-testid={containerId}
+      style={{
+        display: 'flex',
+        alignItems: props.axis === 'column' ? 'flex-start' : 'center',
+        justifyContent: props.axis === 'column' ? 'center' : 'flex-start',
+        height: '100%',
+        width: '100%',
+        position: 'relative',
+      }}
+    >
       {when(
         props.resizing !== 'not-resizing',
         <div
           style={{
-            position: 'absolute',
-            top: props.axis === 'column' ? stripedAreaSkew : 0,
-            left: props.axis === 'row' ? stripedAreaSkew : 0,
-            right: props.axis === 'row' || props.stripedAreaLength == null ? undefined : 0,
-            width:
-              props.axis === 'row' && props.stripedAreaLength != null
-                ? props.stripedAreaLength
-                : undefined,
-            bottom: props.axis === 'column' || props.stripedAreaLength == null ? undefined : 0,
-            height:
-              props.axis === 'column' && props.stripedAreaLength != null
-                ? props.stripedAreaLength
-                : undefined,
             display: 'flex',
+            width: '100%',
+            height: '100%',
             alignItems: 'center',
             justifyContent: 'center',
             border: `1px solid ${
@@ -302,9 +329,10 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
     </div>
   )
 })
-GridResizingControl.displayName = 'GridResizingControl'
+GridResizingStripedIndicator.displayName = 'GridResizingStripedIndicator'
 
 interface GridResizingProps {
+  targetGrid: GridMeasurementHelperData
   axisValues: GridAutoOrTemplateBase | null
   fromPropsAxisValues: GridAutoOrTemplateBase | null
   stripedAreaLength: number | null
@@ -375,75 +403,84 @@ const GridResizing = React.memo((props: GridResizingProps) => {
   }
   switch (props.axisValues.type) {
     case 'DIMENSIONS':
-      const size = GRID_RESIZE_HANDLE_CONTAINER_SIZE / canvasScale
       const dimensions = props.axisValues.dimensions
 
+      const helperGridBaseStyle: React.CSSProperties = getGridHelperStyleMatchingTargetGrid(
+        props.targetGrid,
+      )
+
+      const helperGridStyle: React.CSSProperties = {
+        ...helperGridBaseStyle,
+        gridTemplateRows: props.axis === 'row' ? helperGridBaseStyle.gridTemplateRows : '1fr',
+        gridTemplateColumns:
+          props.axis === 'column' ? helperGridBaseStyle.gridTemplateColumns : '1fr',
+      }
+
       return (
-        <div
-          style={{
-            position: 'absolute',
-            top: props.containingFrame.y - (props.axis === 'column' ? size : 0),
-            left: props.containingFrame.x - (props.axis === 'row' ? size : 0),
-            width: props.axis === 'column' ? props.containingFrame.width : size,
-            height: props.axis === 'row' ? props.containingFrame.height : size,
-            display: 'grid',
-            gridTemplateColumns:
-              props.axis === 'column'
-                ? dimensions.map((dim) => printGridCSSNumber(dim)).join(' ')
-                : undefined,
-            gridTemplateRows:
-              props.axis === 'row'
-                ? dimensions.map((dim) => printGridCSSNumber(dim)).join(' ')
-                : undefined,
-            gap: props.gap ?? 0,
-            paddingLeft:
-              props.axis === 'column' && props.padding != null
-                ? `${props.padding.left}px`
-                : undefined,
-            paddingTop:
-              props.axis === 'row' && props.padding != null ? `${props.padding.top}px` : undefined,
-            paddingRight:
-              props.axis === 'column' && props.padding != null
-                ? `${props.padding.right}px`
-                : undefined,
-            paddingBottom:
-              props.axis === 'row' && props.padding != null
-                ? `${props.padding.bottom}px`
-                : undefined,
-            justifyContent: props.justifyContent ?? undefined,
-            alignContent: props.alignContent ?? undefined,
-          }}
-        >
-          {dimensions.flatMap((dimension, dimensionIndex) => {
-            return (
-              <GridResizingControl
-                key={`grid-resizing-control-${dimensionIndex}`}
-                dimensionIndex={dimensionIndex}
-                dimension={dimension}
-                fromPropsAxisValues={fromProps}
-                stripedAreaLength={props.stripedAreaLength}
-                axis={props.axis}
-                containingFrame={props.containingFrame}
-                resizing={
-                  resizingIndex === dimensionIndex
-                    ? 'resize-target'
-                    : coresizingIndexes.includes(dimensionIndex)
-                    ? 'resize-generated'
-                    : 'not-resizing'
-                }
-                resizeLocked={resizeLocked}
-                setResizingIndex={setResizingIndex}
-                padding={
-                  props.padding == null
-                    ? 0
-                    : props.axis === 'column'
-                    ? props.padding.top ?? 0
-                    : props.padding.left ?? 0
-                }
-              />
-            )
-          })}
-        </div>
+        <React.Fragment>
+          <div style={helperGridStyle}>
+            {dimensions.flatMap((dimension, dimensionIndex) => {
+              return (
+                <GridResizingStripedIndicator
+                  key={`grid-resizing-striped-indicator-${dimensionIndex}`}
+                  dimensionIndex={dimensionIndex}
+                  dimension={dimension}
+                  fromPropsAxisValues={fromProps}
+                  stripedAreaLength={props.stripedAreaLength}
+                  axis={props.axis}
+                  containingFrame={props.containingFrame}
+                  resizing={
+                    resizingIndex === dimensionIndex
+                      ? 'resize-target'
+                      : coresizingIndexes.includes(dimensionIndex)
+                      ? 'resize-generated'
+                      : 'not-resizing'
+                  }
+                  resizeLocked={resizeLocked}
+                  setResizingIndex={setResizingIndex}
+                  padding={
+                    props.padding == null
+                      ? 0
+                      : props.axis === 'column'
+                      ? props.padding.top ?? 0
+                      : props.padding.left ?? 0
+                  }
+                />
+              )
+            })}
+          </div>
+          <div style={helperGridStyle}>
+            {dimensions.flatMap((dimension, dimensionIndex) => {
+              return (
+                <GridTrackSizeLabel
+                  key={`grid-resizing-label-${dimensionIndex}`}
+                  dimensionIndex={dimensionIndex}
+                  dimension={dimension}
+                  fromPropsAxisValues={fromProps}
+                  stripedAreaLength={props.stripedAreaLength}
+                  axis={props.axis}
+                  containingFrame={props.containingFrame}
+                  resizing={
+                    resizingIndex === dimensionIndex
+                      ? 'resize-target'
+                      : coresizingIndexes.includes(dimensionIndex)
+                      ? 'resize-generated'
+                      : 'not-resizing'
+                  }
+                  resizeLocked={resizeLocked}
+                  setResizingIndex={setResizingIndex}
+                  padding={
+                    props.padding == null
+                      ? 0
+                      : props.axis === 'column'
+                      ? props.padding.top ?? 0
+                      : props.padding.left ?? 0
+                  }
+                />
+              )
+            })}
+          </div>
+        </React.Fragment>
       )
     case 'FALLBACK':
       return null
@@ -525,6 +562,7 @@ export const GridRowColumnResizingControlsComponent = ({
         return (
           <GridResizing
             key={`grid-resizing-column-${EP.toString(grid.elementPath)}`}
+            targetGrid={grid}
             axisValues={grid.gridTemplateColumns}
             fromPropsAxisValues={grid.gridTemplateColumnsFromProps}
             containingFrame={grid.frame}
@@ -544,6 +582,7 @@ export const GridRowColumnResizingControlsComponent = ({
         return (
           <GridResizing
             key={`grid-resizing-row-${EP.toString(grid.elementPath)}`}
+            targetGrid={grid}
             axisValues={grid.gridTemplateRows}
             fromPropsAxisValues={grid.gridTemplateRowsFromProps}
             containingFrame={grid.frame}
diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
index 7e76faef77b3..a20d92defc3b 100644
--- a/editor/src/uuiui/styles/theme/dark.ts
+++ b/editor/src/uuiui/styles/theme/dark.ts
@@ -3,6 +3,7 @@ import type { light } from './light'
 
 const darkBase = {
   primary: createUtopiColor('oklch(59% 0.25 254)'),
+  primarySubdued: createUtopiColor('oklch(43% 0.15 254)'),
   primary10solid: createUtopiColor('oklch(0.98 0.01 253.75)'),
   primary10: createUtopiColor('oklch(59% 0.25 254 / 10%)'),
   primary25: createUtopiColor('oklch(59% 0.25 254 / 25%)'),
diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts
index ad00d11d5e84..6a16fac353c8 100644
--- a/editor/src/uuiui/styles/theme/light.ts
+++ b/editor/src/uuiui/styles/theme/light.ts
@@ -3,6 +3,7 @@ import type { dark } from './dark'
 
 const lightBase = {
   primary: createUtopiColor('oklch(59% 0.25 254)'),
+  primarySubdued: createUtopiColor('oklch(75% 0.15 254)'),
   primary10solid: createUtopiColor('oklch(0.98 0.01 253.75)'),
   primary10: createUtopiColor('oklch(59% 0.25 254 / 10%)'),
   primary25: createUtopiColor('oklch(59% 0.25 254 / 25%)'),

From 06565e5251c6cf8d0c80b35c5aecedd603681f1e Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Fri, 18 Oct 2024 15:03:11 +0200
Subject: [PATCH 166/272] Fix misaligned gap controls when justifyContent or
 alignContent is set (#6565)

**Problem:**
Gap controls are misaligned when justifyContent or alignContent is set,
e.g.:
<img width="337" alt="image"
src="https://github.com/user-attachments/assets/64150066-2114-4b20-84f3-fbedfce94840">


**Fix:**
GridRowHighlight (I renamed it to GridRowOrColumnHighlight) component
sets alignContent (when it is a column) or justifyContent (when it is a
row) to the value coming from the grid style.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../controls/grid-controls-for-strategies.tsx |  5 ++--
 .../grid-gap-control-component.tsx            | 24 ++++++++++---------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index a5534b5f4684..59a7b34d616b 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -33,6 +33,7 @@ import {
 } from './grid-controls'
 import { isEdgePositionOnSide } from '../canvas-utils'
 import { findOriginalGrid } from '../canvas-strategies/strategies/grid-helpers'
+import type { AlignContent, FlexJustifyContent } from '../../inspector/inspector-common'
 
 export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`
 
@@ -70,8 +71,8 @@ export type GridMeasurementHelperData = {
   gap: number | null
   rowGap: number | null
   columnGap: number | null
-  justifyContent: string | null
-  alignContent: string | null
+  justifyContent: FlexJustifyContent | null
+  alignContent: AlignContent | null
   padding: Sides
   columns: number
   cells: number
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
index 98ccb11f2a80..ae1e6a05d8ce 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
@@ -2,16 +2,14 @@ import type { CSSProperties } from 'react'
 import React from 'react'
 import { createArrayWithLength, interleaveArray } from '../../../../core/shared/array-utils'
 import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
-import type { CanvasVector, Size } from '../../../../core/shared/math-utils'
-import { size, windowPoint } from '../../../../core/shared/math-utils'
+import type { Size } from '../../../../core/shared/math-utils'
+import { size } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 import { assertNever } from '../../../../core/shared/utils'
-import { Modifier } from '../../../../utils/modifiers'
 import { when } from '../../../../utils/react-conditionals'
 import type { UtopiColor } from '../../../../uuiui'
 import { useColorTheme, UtopiaStyles } from '../../../../uuiui'
 import { CSSCursor } from '../../../../uuiui-deps'
-import type { EditorDispatch } from '../../../editor/action-types'
 import { useDispatch } from '../../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook'
 import {
@@ -19,9 +17,6 @@ import {
   printCSSNumber,
   stringifyGridDimension,
 } from '../../../inspector/common/css-utils'
-import CanvasActions from '../../canvas-actions'
-import { createInteractionViaMouse, gridGapHandle } from '../../canvas-strategies/interaction-state'
-import { windowToCanvasCoordinates } from '../../dom-lookup'
 import type { Axis } from '../../gap-utils'
 import { maybeGridGapData } from '../../gap-utils'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
@@ -31,6 +26,7 @@ import { getGridHelperStyleMatchingTargetGrid } from '../grid-controls-helpers'
 import type { CSSNumberWithRenderedValue } from './controls-common'
 import { CanvasLabel, PillHandle, useHoverWithDelay } from './controls-common'
 import { startGapControlInteraction } from './grid-gap-control-helpers'
+import type { AlignContent, FlexJustifyContent } from '../../../inspector/inspector-common'
 
 export interface GridGapControlProps {
   selectedElement: ElementPath
@@ -187,7 +183,7 @@ export const GridPaddingOutlineForDimension = (props: {
       {createArrayWithLength(length, (index) => {
         const hide = index === 0 || index === length - 1 || index % 2 === 0
         return (
-          <GridRowHighlight
+          <GridRowOrColumnHighlight
             key={index}
             hide={hide} // we only want to show the divs that fall in where the gaps are in the original grid
             gapId={`${dimension}-${index}`}
@@ -202,6 +198,8 @@ export const GridPaddingOutlineForDimension = (props: {
             beingDragged={beingDragged}
             onMouseOver={onMouseOver}
             elementHovered={elementHovered}
+            gridJustifyContent={grid.justifyContent}
+            gridAlignContent={grid.alignContent}
             draggedOutlineColor={draggedOutlineColor}
           />
         )
@@ -210,7 +208,7 @@ export const GridPaddingOutlineForDimension = (props: {
   )
 }
 
-const GridRowHighlight = (props: {
+const GridRowOrColumnHighlight = (props: {
   gapId: string
   onMouseDown: React.MouseEventHandler
   hide: boolean
@@ -222,6 +220,8 @@ const GridRowHighlight = (props: {
   beingDragged: boolean
   onMouseOver: () => void
   elementHovered: boolean
+  gridJustifyContent: FlexJustifyContent | null
+  gridAlignContent: AlignContent | null
   draggedOutlineColor?: UtopiColor
 }) => {
   const {
@@ -236,6 +236,8 @@ const GridRowHighlight = (props: {
     beingDragged,
     onMouseOver,
     elementHovered,
+    gridJustifyContent,
+    gridAlignContent,
     draggedOutlineColor,
   } = props
 
@@ -302,8 +304,8 @@ const GridRowHighlight = (props: {
         boxShadow: `inset 0 0 0 ${lineWidth}px ${outlineColor}`,
         opacity: hide ? 0 : 1,
 
-        alignItems: 'center',
-        justifyContent: 'center',
+        alignContent: axis === 'row' ? undefined : gridAlignContent ?? undefined,
+        justifyContent: axis === 'row' ? gridJustifyContent ?? undefined : undefined,
         placeItems: 'center',
 
         gap: gap ?? 0,

From fd3e0ad5f05cb24492b27c8e4f4d1160d3cf6552 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Mon, 21 Oct 2024 14:07:19 +0200
Subject: [PATCH 167/272] Remove unnecessary Tailwind class compilation calls
 (#6534)

# [Editions
store](https://utopia.fish/p/2e4310b0-nostalgic-blackberry/?branch_name=fix-tailwind-fine-grained-dom-observer)

## Problem
The Tailwind class generation code was running twice at the end of an
interaction. Instead, we only want to re-run the tailwind compilation
code when
- a new element is added to the DOM or the `class` attribute of an
element is updated
- the Tailwind config file is updated (so tweaks to the tailwind config
show up right away on the canvas)

## Fix
- remove the `RequireFn` param from `useTailwindCompilation`. This param
is problematic because a new `requireFn` is passed to
`useTailwindCompilation` whenever `projectContents` changes, which
triggers a re-compilation. Instead, the require fn is constructed in a
`useRefEditorState` and used through that ref
- The Tailwind config file is selected with a hook using
`createSelector` for memoization
- The mutation observer that runs the Tailwind class generation is only
run if there were new nodes added (with potentially new Tailwind classes
added to the DOM) or a `class` attribute was updated (with a potentially
new Tailwind class)

### Out of scope
This PR doesn't deal with the problem of generating new Tailwind classes
only for the elements that have changed. This is due to how the library
we use for tailwind class compilation works, finding a more fine-grained
way to do this would be a more involved task

### Details
- The PR also adds a test that tests tailwind style generation with
Remix navigation
---
 .../src/components/canvas/ui-jsx-canvas.tsx   |   2 +-
 .../src/core/tailwind/tailwind-compilation.ts |  82 ++++++---
 .../core/tailwind/tailwind.spec.browser2.tsx  | 170 ++++++++++++++++++
 3 files changed, 230 insertions(+), 24 deletions(-)

diff --git a/editor/src/components/canvas/ui-jsx-canvas.tsx b/editor/src/components/canvas/ui-jsx-canvas.tsx
index 85239c3dce47..3f21fb976144 100644
--- a/editor/src/components/canvas/ui-jsx-canvas.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas.tsx
@@ -498,7 +498,7 @@ export const UiJsxCanvas = React.memo<UiJsxCanvasPropsWithErrorCallback>((props)
 
   const executionScope = scope
 
-  useTailwindCompilation(customRequire)
+  useTailwindCompilation()
 
   const topLevelElementsMap = useKeepReferenceEqualityIfPossible(new Map(topLevelJsxComponents))
 
diff --git a/editor/src/core/tailwind/tailwind-compilation.ts b/editor/src/core/tailwind/tailwind-compilation.ts
index 972fee42cc9c..b71edcc1b587 100644
--- a/editor/src/core/tailwind/tailwind-compilation.ts
+++ b/editor/src/core/tailwind/tailwind-compilation.ts
@@ -1,9 +1,8 @@
 import React from 'react'
 import type { TailwindConfig, Tailwindcss } from '@mhsdesign/jit-browser-tailwindcss'
 import { createTailwindcss } from '@mhsdesign/jit-browser-tailwindcss'
-import type { ProjectContentTreeRoot, TextFile, TextFileContents } from 'utopia-shared/src/types'
+import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
 import { getProjectFileByFilePath, walkContentsTree } from '../../components/assets'
-import { interactionSessionIsActive } from '../../components/canvas/canvas-strategies/interaction-state'
 import { CanvasContainerID } from '../../components/canvas/canvas-types'
 import {
   Substores,
@@ -18,6 +17,8 @@ import { ElementsToRerenderGLOBAL } from '../../components/canvas/ui-jsx-canvas'
 import { isFeatureEnabled } from '../../utils/feature-switches'
 import type { Config } from 'tailwindcss/types/config'
 import type { EditorState } from '../../components/editor/store/editor-state'
+import { createSelector } from 'reselect'
+import type { ProjectContentSubstate } from '../../components/editor/store/store-hook-substore-types'
 
 const LatestConfig: { current: { code: string; config: Config } | null } = { current: null }
 export function getTailwindConfigCached(editorState: EditorState): Config | null {
@@ -87,45 +88,80 @@ function generateTailwindClasses(projectContents: ProjectContentTreeRoot, requir
   void generateTailwindStyles(tailwindCss, allCSSFiles)
 }
 
-export const useTailwindCompilation = (requireFn: RequireFn) => {
-  const projectContents = useEditorState(
-    Substores.projectContents,
-    (store) => store.editor.projectContents,
-    'useTailwindCompilation projectContents',
+function runTailwindClassGenerationOnDOMMutation(
+  mutations: MutationRecord[],
+  projectContents: ProjectContentTreeRoot,
+  isInteractionActive: boolean,
+  requireFn: RequireFn,
+) {
+  const updateHasNewTailwindData = mutations.some(
+    (m) =>
+      m.addedNodes.length > 0 || // new DOM element was added with potentially new classes
+      m.attributeName === 'class', // potentially new classes were added to the class attribute of an element
+  )
+  if (
+    !updateHasNewTailwindData ||
+    isInteractionActive ||
+    ElementsToRerenderGLOBAL.current !== 'rerender-all-elements' // implies that an interaction is in progress)
+  ) {
+    return
+  }
+  generateTailwindClasses(projectContents, requireFn)
+}
+
+const tailwindConfigSelector = createSelector(
+  (store: ProjectContentSubstate) => store.editor.projectContents,
+  (projectContents) => getProjectFileByFilePath(projectContents, TailwindConfigPath),
+)
+
+export const useTailwindCompilation = () => {
+  const requireFnRef = useRefEditorState((store) => {
+    const requireFn = store.editor.codeResultCache.curriedRequireFn(store.editor.projectContents)
+    return (importOrigin: string, toImport: string) => requireFn(importOrigin, toImport, false)
+  })
+  const projectContentsRef = useRefEditorState((store) => store.editor.projectContents)
+
+  const isInteractionActiveRef = useRefEditorState(
+    (store) => store.editor.canvas.interactionSession != null,
   )
 
-  const isInteractionActiveRef = useRefEditorState((store) =>
-    interactionSessionIsActive(store.editor.canvas.interactionSession),
+  // this is not a ref, beacuse we want to re-compile the Tailwind classes when the tailwind config changes
+  const tailwindConfig = useEditorState(
+    Substores.projectContents,
+    tailwindConfigSelector,
+    'useTailwindCompilation tailwindConfig',
   )
 
-  const observerCallback = React.useCallback(() => {
+  React.useEffect(() => {
+    const canvasContainer = document.getElementById(CanvasContainerID)
     if (
-      isInteractionActiveRef.current ||
-      ElementsToRerenderGLOBAL.current !== 'rerender-all-elements' || // implies that an interaction is in progress
+      tailwindConfig == null || // TODO: read this from the utopia key in package.json
+      canvasContainer == null ||
       !isFeatureEnabled('Tailwind')
     ) {
       return
     }
-    generateTailwindClasses(projectContents, requireFn)
-  }, [isInteractionActiveRef, projectContents, requireFn])
 
-  React.useEffect(() => {
-    const tailwindConfigFile = getProjectFileByFilePath(projectContents, TailwindConfigPath)
-    if (tailwindConfigFile == null || tailwindConfigFile.type !== 'TEXT_FILE') {
-      return // we consider tailwind to be enabled if there's a tailwind config file in the project
-    }
-    const observer = new MutationObserver(observerCallback)
+    const observer = new MutationObserver((mutations) => {
+      runTailwindClassGenerationOnDOMMutation(
+        mutations,
+        projectContentsRef.current,
+        isInteractionActiveRef.current,
+        requireFnRef.current,
+      )
+    })
 
-    observer.observe(document.getElementById(CanvasContainerID)!, {
+    observer.observe(canvasContainer, {
       attributes: true,
       childList: true,
       subtree: true,
     })
 
-    observerCallback()
+    // run the initial tailwind class generation
+    generateTailwindClasses(projectContentsRef.current, requireFnRef.current)
 
     return () => {
       observer.disconnect()
     }
-  }, [isInteractionActiveRef, observerCallback, projectContents, requireFn])
+  }, [isInteractionActiveRef, projectContentsRef, requireFnRef, tailwindConfig])
 }
diff --git a/editor/src/core/tailwind/tailwind.spec.browser2.tsx b/editor/src/core/tailwind/tailwind.spec.browser2.tsx
index b95956046c32..91b3eb6447a0 100644
--- a/editor/src/core/tailwind/tailwind.spec.browser2.tsx
+++ b/editor/src/core/tailwind/tailwind.spec.browser2.tsx
@@ -1,5 +1,13 @@
+import { mouseClickAtPoint } from '../../components/canvas/event-helpers.test-utils'
+import type { EditorRenderResult } from '../../components/canvas/ui-jsx.test-utils'
 import { renderTestEditorWithModel } from '../../components/canvas/ui-jsx.test-utils'
+import { switchEditorMode } from '../../components/editor/actions/action-creators'
+import { EditorModes } from '../../components/editor/editor-modes'
+import { StoryboardFilePath } from '../../components/editor/store/editor-state'
+import { createModifiedProject } from '../../sample-projects/sample-project-utils.test-utils'
 import { setFeatureForBrowserTestsUseInDescribeBlockOnly } from '../../utils/utils.test-utils'
+import { windowPoint } from '../shared/math-utils'
+import { TailwindConfigPath } from './tailwind-config'
 import { Project } from './tailwind.test-utils'
 
 describe('rendering tailwind projects in the editor', () => {
@@ -133,4 +141,166 @@ describe('rendering tailwind projects in the editor', () => {
       })
     }
   })
+
+  describe('Remix', () => {
+    const projectWithMultipleRoutes = createModifiedProject({
+      [StoryboardFilePath]: `import * as React from 'react'
+        import { RemixScene, Storyboard } from 'utopia-api'
+        
+        export var storyboard = (
+          <Storyboard data-uid='storyboard'>
+            <RemixScene
+              className='absolute top-[100px] left-[200px] w-[700px] h-[700px]'
+              data-label='Playground'
+              data-uid='remix'
+            />
+          </Storyboard>
+        )
+        `,
+      ['/app/root.js']: `import React from 'react'
+        import { Outlet } from '@remix-run/react'
+        
+        export default function Root() {
+          return (
+            <div data-testid='root' className='flex flex-col gap-10 bg-red-200 text-2xl'>
+              I am Root!
+              <Outlet />
+            </div>
+          )
+        }
+        `,
+      ['/app/routes/_index.js']: `import React from 'react'
+        import { Link } from '@remix-run/react'
+  
+        export default function Index() {
+          return (
+            <div data-testid='index' className='flex flex-col gap-8'>
+              Index page
+              <Link to='/about' data-testid='remix-link'>About</Link>
+            </div>
+          )
+        }
+        `,
+      ['/app/routes/about.js']: `import React from 'react'
+  
+        export default function About() {
+          return (
+            <div data-testid='about' className='flex flex-row gap-6 p-4'>
+              <span data-testid='about-text' className='text-shadow-md'>About page</span>
+            </div>
+          )
+        }
+        `,
+      '/src/app.css': `
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+        `,
+      [TailwindConfigPath]: `
+        const Tailwind = {
+    theme: {
+      colors: {
+        transparent: 'transparent',
+        current: 'currentColor',
+        white: '#ffffff',
+        purple: '#3f3cbb',
+        midnight: '#121063',
+        metal: '#565584',
+        tahiti: '#3ab7bf',
+        silver: '#ecebff',
+        'bubble-gum': '#ff77e9',
+        bermuda: '#78dcca',
+      },
+    },
+    plugins: [
+      function ({ addUtilities }) {
+        const newUtilities = {
+          '.text-shadow': {
+            textShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)',
+          },
+          '.text-shadow-md': {
+            textShadow: '3px 3px 6px rgba(0, 0, 0, 0.2)',
+          },
+          '.text-shadow-lg': {
+            textShadow: '4px 4px 8px rgba(0, 0, 0, 0.3)',
+          },
+          '.text-shadow-none': {
+            textShadow: 'none',
+          },
+        }
+  
+        addUtilities(newUtilities, ['responsive', 'hover'])
+      },
+    ],
+  }
+  export default Tailwind`,
+    })
+
+    it('can render content in a RemixScene', async () => {
+      const editor = await renderTestEditorWithModel(
+        projectWithMultipleRoutes,
+        'await-first-dom-report',
+      )
+      {
+        const root = editor.renderedDOM.getByTestId('root')
+        const { backgroundColor, display, flexDirection, gap, fontSize } = getComputedStyle(root)
+        expect({ backgroundColor, display, flexDirection, gap, fontSize }).toEqual({
+          backgroundColor: 'rgba(0, 0, 0, 0)',
+          display: 'flex',
+          flexDirection: 'column',
+          fontSize: '24px',
+          gap: '40px',
+        })
+      }
+      {
+        const index = editor.renderedDOM.getByTestId('index')
+        const { display, flexDirection, gap } = getComputedStyle(index)
+        expect({ display, flexDirection, gap }).toEqual({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '32px',
+        })
+      }
+    })
+    it('can render content after navigating to a different page', async () => {
+      const editor = await renderTestEditorWithModel(
+        projectWithMultipleRoutes,
+        'await-first-dom-report',
+      )
+      await switchToLiveMode(editor)
+      await clickRemixLink(editor)
+
+      {
+        const about = editor.renderedDOM.getByTestId('about')
+        const { display, flexDirection, gap, padding } = getComputedStyle(about)
+        expect({ display, flexDirection, gap, padding }).toEqual({
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '24px',
+          padding: '16px',
+        })
+      }
+      {
+        const aboutText = editor.renderedDOM.getByTestId('about-text')
+        const { textShadow } = getComputedStyle(aboutText)
+        expect(textShadow).toEqual('rgba(0, 0, 0, 0.2) 3px 3px 6px')
+      }
+    })
+  })
 })
+
+const switchToLiveMode = (editor: EditorRenderResult) =>
+  editor.dispatch([switchEditorMode(EditorModes.liveMode())], true)
+
+async function clickLinkWithTestId(editor: EditorRenderResult, testId: string) {
+  const targetElement = editor.renderedDOM.queryAllByTestId(testId)[0]
+  const targetElementBounds = targetElement.getBoundingClientRect()
+
+  const clickPoint = windowPoint({ x: targetElementBounds.x + 5, y: targetElementBounds.y + 5 })
+  await mouseClickAtPoint(targetElement, clickPoint)
+}
+
+async function clickRemixLink(editor: EditorRenderResult) {
+  await clickLinkWithTestId(editor, 'remix-link')
+  await editor.getDispatchFollowUpActionsFinished()
+}

From 4c0ed00b4caf29416cc78b96290529572cda4f4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Tue, 22 Oct 2024 11:20:19 +0200
Subject: [PATCH 168/272] Clean up unused commands (#6570)

## Problems
- `AdjustNumberProperty` and `UpdatePropIfExists` command aren't used
- `deleteValuesAtPath` and `applyValuesAtPath` are defined in command
runners, but are actually widely used helpers

## Fix
- Delete `AdjustNumberProperty` and `UpdatePropIfExists`
- Move `deleteValuesAtPath` and `applyValuesAtPath` into a dedicated
utils file

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

---------

Co-authored-by: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
---
 .../convert-to-absolute-and-move-strategy.tsx |   1 -
 .../strategies/set-padding-strategy.tsx       |   4 -
 ...shared-absolute-resize-strategy-helpers.ts |   5 -
 .../add-contain-layout-if-needed-command.ts   |   3 +-
 .../commands/adjust-css-length-command.ts     |   4 +-
 .../commands/adjust-number-command.spec.tsx   | 143 ------------
 .../canvas/commands/adjust-number-command.ts  | 211 ------------------
 .../components/canvas/commands/commands.ts    |  10 -
 .../convert-css-percent-to-px-command.ts      |   2 +-
 .../commands/convert-to-absolute-command.ts   |   2 +-
 .../commands/delete-properties-command.ts     |  48 +---
 .../canvas/commands/set-css-length-command.ts |   2 +-
 .../canvas/commands/set-property-command.ts   |   3 +-
 .../commands/update-class-list-command.ts     |   2 +-
 .../commands/update-prop-if-exists-command.ts |  86 -------
 .../canvas/commands/utils/property-utils.ts   |  88 ++++++++
 .../components/editor/actions/action-utils.ts |   1 -
 .../src/components/editor/actions/actions.tsx |   7 +-
 18 files changed, 100 insertions(+), 522 deletions(-)
 delete mode 100644 editor/src/components/canvas/commands/adjust-number-command.spec.tsx
 delete mode 100644 editor/src/components/canvas/commands/adjust-number-command.ts
 delete mode 100644 editor/src/components/canvas/commands/update-prop-if-exists-command.ts
 create mode 100644 editor/src/components/canvas/commands/utils/property-utils.ts

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
index 422708377163..eb8bf8f0b0dc 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
@@ -44,7 +44,6 @@ import { getFullFrame } from '../../../frame'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
 import type { CanvasFrameAndTarget } from '../../canvas-types'
 import type { CanvasCommand } from '../../commands/commands'
-import { convertToAbsolute } from '../../commands/convert-to-absolute-command'
 import type { SetCssLengthProperty } from '../../commands/set-css-length-command'
 import {
   setCssLengthProperty,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
index bb69d4fc2a7c..607524af53b9 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
@@ -72,10 +72,6 @@ import { elementHasOnlyTextChildren } from '../../canvas-utils'
 import type { Modifiers } from '../../../../utils/modifiers'
 import type { Axis } from '../../../inspector/inspector-common'
 import { detectFillHugFixedState, isHuggingFixedHugFill } from '../../../inspector/inspector-common'
-import {
-  AdjustCssLengthProperties,
-  adjustCssLengthProperties,
-} from '../../commands/adjust-css-length-command'
 import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
 import { activeFrameTargetPath, setActiveFrames } from '../../commands/set-active-frames-command'
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/shared-absolute-resize-strategy-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/shared-absolute-resize-strategy-helpers.ts
index 17c7d5f55b7e..a70ebc28d65c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/shared-absolute-resize-strategy-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/shared-absolute-resize-strategy-helpers.ts
@@ -40,11 +40,6 @@ import {
   EdgePositionBottom,
 } from '../../canvas-types'
 import { pickPointOnRect, snapPoint } from '../../canvas-utils'
-import type { AdjustCssLengthProperties } from '../../commands/adjust-css-length-command'
-import {
-  adjustCssLengthProperties,
-  lengthPropertyToAdjust,
-} from '../../commands/adjust-css-length-command'
 import { pointGuidelineToBoundsEdge } from '../../controls/guideline-helpers'
 import type { AbsolutePin } from './resize-helpers'
 import { ensureAtLeastTwoPinsForEdgePosition, resizeBoundingBox } from './resize-helpers'
diff --git a/editor/src/components/canvas/commands/add-contain-layout-if-needed-command.ts b/editor/src/components/canvas/commands/add-contain-layout-if-needed-command.ts
index 19364723ad6d..f9d67d83cb80 100644
--- a/editor/src/components/canvas/commands/add-contain-layout-if-needed-command.ts
+++ b/editor/src/components/canvas/commands/add-contain-layout-if-needed-command.ts
@@ -2,11 +2,10 @@ import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import * as EP from '../../../core/shared/element-path'
 import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
 import type { ElementPath } from '../../../core/shared/project-file-types'
-import { PropertyPath } from '../../../core/shared/project-file-types'
 import * as PP from '../../../core/shared/property-path'
 import type { EditorState } from '../../editor/store/editor-state'
-import { applyValuesAtPath } from './adjust-number-command'
 import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+import { applyValuesAtPath } from './utils/property-utils'
 
 export interface AddContainLayoutIfNeeded extends BaseCommand {
   type: 'ADD_CONTAIN_LAYOUT_IF_NEEDED'
diff --git a/editor/src/components/canvas/commands/adjust-css-length-command.ts b/editor/src/components/canvas/commands/adjust-css-length-command.ts
index 90daf3c850e6..c7186760ec23 100644
--- a/editor/src/components/canvas/commands/adjust-css-length-command.ts
+++ b/editor/src/components/canvas/commands/adjust-css-length-command.ts
@@ -22,8 +22,8 @@ import { modifyUnderlyingForOpenFile } from '../../editor/store/editor-state'
 import type { CSSNumber, FlexDirection } from '../../inspector/common/css-utils'
 import { parseCSSPercent, parseCSSPx, printCSSNumber } from '../../inspector/common/css-utils'
 import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
-import { deleteValuesAtPath } from './delete-properties-command'
 import { patchParseSuccessAtElementPath } from './patch-utils'
+import { deleteValuesAtPath } from './utils/property-utils'
 
 export type CreateIfNotExistant = 'create-if-not-existing' | 'do-not-create-if-doesnt-exist'
 
@@ -416,7 +416,7 @@ function getConflictingPropertiesToDelete(
   return propertiesToDelete
 }
 
-export function deleteConflictingPropsForWidthHeightFromAttributes(
+function deleteConflictingPropsForWidthHeightFromAttributes(
   attributes: JSXAttributes,
   propertyPath: PropertyPath,
   parentFlexDirection: FlexDirection | null,
diff --git a/editor/src/components/canvas/commands/adjust-number-command.spec.tsx b/editor/src/components/canvas/commands/adjust-number-command.spec.tsx
deleted file mode 100644
index 41ac2e58d9f5..000000000000
--- a/editor/src/components/canvas/commands/adjust-number-command.spec.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import update from 'immutability-helper'
-import { styleStringInArray } from '../../../utils/common-constants'
-import { createBuiltInDependenciesList } from '../../../core/es-modules/package-manager/built-in-dependencies-list'
-import * as EP from '../../../core/shared/element-path'
-import { getNumberPropertyFromProps } from '../../../core/shared/jsx-attributes'
-import { complexDefaultProjectPreParsed } from '../../../sample-projects/sample-project-utils.test-utils'
-import { withUnderlyingTargetFromEditorState } from '../../editor/store/editor-state'
-import { stylePropPathMappingFn } from '../../inspector/common/property-path-hooks'
-import {
-  DefaultStartingFeatureSwitches,
-  makeTestProjectCodeWithSnippet,
-  renderTestEditorWithCode,
-  renderTestEditorWithModel,
-} from '../ui-jsx.test-utils'
-import { adjustNumberProperty, runAdjustNumberProperty } from './adjust-number-command'
-import { updateEditorStateWithPatches } from './commands'
-import { isJSXElement } from '../../../core/shared/element-template'
-
-describe('adjustNumberProperty', () => {
-  it('works for left style prop', async () => {
-    const renderResult = await renderTestEditorWithModel(
-      complexDefaultProjectPreParsed(),
-      'dont-await-first-dom-report',
-      DefaultStartingFeatureSwitches,
-      createBuiltInDependenciesList(null),
-    )
-
-    const cardInstancePath = EP.elementPath([
-      ['storyboard-entity', 'scene-1-entity', 'app-entity'],
-      ['app-outer-div', 'card-instance'],
-    ])
-
-    const originalEditorState = renderResult.getEditorState().editor
-
-    const originalLeftStyleProp = withUnderlyingTargetFromEditorState(
-      cardInstancePath,
-      originalEditorState,
-      null,
-      (success, element, underlyingTarget, underlyingFilePath) => {
-        if (isJSXElement(element)) {
-          return getNumberPropertyFromProps(
-            element.props,
-            stylePropPathMappingFn('left', styleStringInArray),
-          )
-        } else {
-          return null
-        }
-      },
-    )!
-
-    const delta = 10
-
-    const adjustNumberPropertyCommand = adjustNumberProperty(
-      'always',
-      cardInstancePath,
-      stylePropPathMappingFn('left', styleStringInArray),
-      delta,
-      true,
-    )
-
-    const result = runAdjustNumberProperty(
-      renderResult.getEditorState().editor,
-      adjustNumberPropertyCommand,
-    )
-
-    const patchedEditor = updateEditorStateWithPatches(
-      renderResult.getEditorState().editor,
-      result.editorStatePatches,
-    )
-
-    const updatedLeftStyleProp = withUnderlyingTargetFromEditorState(
-      cardInstancePath,
-      patchedEditor,
-      null,
-      (success, element, underlyingTarget, underlyingFilePath) => {
-        if (isJSXElement(element)) {
-          return getNumberPropertyFromProps(
-            element.props,
-            stylePropPathMappingFn('left', styleStringInArray),
-          )
-        } else {
-          return null
-        }
-      },
-    )
-
-    expect(updatedLeftStyleProp).toEqual(originalLeftStyleProp + delta)
-  })
-  it('works for missing left style prop', async () => {
-    const renderResult = await renderTestEditorWithCode(
-      makeTestProjectCodeWithSnippet(` <View style={{ ...(props.style || {}) }} data-uid='parent'>
-        <View
-          style={{ backgroundColor: '#aaaaaa33', position: 'absolute', top: 50, width: 250, height: 300 }}
-          data-uid='child'
-        />
-      </View>`),
-      'dont-await-first-dom-report',
-    )
-
-    const elementPath = EP.elementPath([
-      ['scene-aaa', 'app-entity'],
-      ['parent', 'child'],
-    ])
-
-    const delta = 10
-
-    // left prop is missing, it should be just set to the delta value
-    const adjustNumberPropertyCommand = adjustNumberProperty(
-      'always',
-      elementPath,
-      stylePropPathMappingFn('left', styleStringInArray),
-      delta,
-      true,
-    )
-
-    const result = runAdjustNumberProperty(
-      renderResult.getEditorState().editor,
-      adjustNumberPropertyCommand,
-    )
-
-    const patchedEditor = updateEditorStateWithPatches(
-      renderResult.getEditorState().editor,
-      result.editorStatePatches,
-    )
-    const updatedLeftStyleProp = withUnderlyingTargetFromEditorState(
-      elementPath,
-      patchedEditor,
-      null,
-      (success, element, underlyingTarget, underlyingFilePath) => {
-        if (isJSXElement(element)) {
-          return getNumberPropertyFromProps(
-            element.props,
-            stylePropPathMappingFn('left', styleStringInArray),
-          )
-        } else {
-          return null
-        }
-      },
-    )
-
-    expect(updatedLeftStyleProp).toEqual(delta)
-  })
-})
diff --git a/editor/src/components/canvas/commands/adjust-number-command.ts b/editor/src/components/canvas/commands/adjust-number-command.ts
deleted file mode 100644
index 6750b8a0b328..000000000000
--- a/editor/src/components/canvas/commands/adjust-number-command.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-import { foldEither } from '../../../core/shared/either'
-import * as EP from '../../../core/shared/element-path'
-import type { JSXElement } from '../../../core/shared/element-template'
-import {
-  emptyComments,
-  isJSXElement,
-  jsExpressionValue,
-} from '../../../core/shared/element-template'
-import type { ValueAtPath } from '../../../core/shared/jsx-attributes'
-import {
-  getNumberPropertyFromProps,
-  setJSXValuesAtPaths,
-} from '../../../core/shared/jsx-attributes'
-import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
-import * as PP from '../../../core/shared/property-path'
-import type { EditorState, EditorStatePatch } from '../../editor/store/editor-state'
-import {
-  modifyUnderlyingElementForOpenFile,
-  withUnderlyingTargetFromEditorState,
-} from '../../editor/store/editor-state'
-import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
-import { patchParseSuccessAtElementPath } from './patch-utils'
-
-export interface AdjustNumberProperty extends BaseCommand {
-  type: 'ADJUST_NUMBER_PROPERTY'
-  target: ElementPath
-  property: PropertyPath
-  value: number | AdjustNumberInequalityCondition
-  createIfNonExistant: boolean
-}
-
-export function adjustNumberProperty(
-  whenToRun: WhenToRun,
-  target: ElementPath,
-  property: PropertyPath,
-  value: number | AdjustNumberInequalityCondition,
-  createIfNonExistant: boolean,
-): AdjustNumberProperty {
-  return {
-    type: 'ADJUST_NUMBER_PROPERTY',
-    whenToRun: whenToRun,
-    target: target,
-    property: property,
-    value: value,
-    createIfNonExistant: createIfNonExistant,
-  }
-}
-
-export type AdjustNumberCondition = 'less-than' | 'greater-than'
-
-export interface AdjustNumberInequalityCondition {
-  property: PropertyPath
-  condition: AdjustNumberCondition
-}
-
-export function adjustNumberInequalityCondition(
-  property: PropertyPath,
-  condition: AdjustNumberCondition,
-): AdjustNumberInequalityCondition {
-  return {
-    property: property,
-    condition: condition,
-  }
-}
-
-export const runAdjustNumberProperty: CommandFunction<AdjustNumberProperty> = (
-  editorState: EditorState,
-  command: AdjustNumberProperty,
-) => {
-  // Handle updating the existing value, treating a value that can't be parsed
-  // as zero.
-  let newValue: number = 0
-
-  // Identify the current value, whatever that may be.
-  let targetPropertyNonExistant: boolean = false
-  let inequalityValue: number | null = null
-  const currentValue = withUnderlyingTargetFromEditorState(
-    command.target,
-    editorState,
-    null,
-    (success, element, underlyingTarget, underlyingFilePath) => {
-      if (isJSXElement(element)) {
-        // Check for the inequality adjustment target while we're here.
-        if (typeof command.value !== 'number') {
-          inequalityValue = getNumberPropertyFromProps(element.props, command.value.property)
-        }
-
-        // Try the property we're updating.
-        const fromProperty = getNumberPropertyFromProps(element.props, command.property)
-        if (fromProperty == null) {
-          targetPropertyNonExistant = true
-        } else {
-          return fromProperty
-        }
-      }
-      return null
-    },
-  )
-
-  if (targetPropertyNonExistant && !command.createIfNonExistant) {
-    return {
-      editorStatePatches: [],
-      commandDescription: `Adjust Number Prop: ${EP.toUid(command.target)}/${PP.toString(
-        command.property,
-      )} not applied as the property does not exist.`,
-    }
-  } else {
-    if (typeof command.value === 'number') {
-      if (currentValue != null) {
-        newValue += currentValue
-      }
-
-      // Change the value.
-      newValue += command.value
-    } else {
-      if (currentValue != null && inequalityValue != null) {
-        switch (command.value.condition) {
-          case 'less-than':
-            if (inequalityValue <= currentValue) {
-              return {
-                editorStatePatches: [],
-                commandDescription: `Adjust Number Prop: ${EP.toUid(command.target)}/${PP.toString(
-                  command.property,
-                )} not applied as value is large enough already.`,
-              }
-            } else {
-              newValue = inequalityValue
-            }
-            break
-          case 'greater-than':
-            if (inequalityValue >= currentValue) {
-              return {
-                editorStatePatches: [],
-                commandDescription: `Adjust Number Prop: ${EP.toUid(command.target)}/${PP.toString(
-                  command.property,
-                )} not applied as value is small enough already.`,
-              }
-            } else {
-              newValue = inequalityValue
-            }
-            break
-          default:
-            const _exhaustiveCheck: never = command.value.condition
-            throw new Error(`Unhandled command condition of ${JSON.stringify(command.value)}`)
-        }
-      }
-    }
-
-    const propsToUpdate: Array<ValueAtPath> = [
-      {
-        path: command.property,
-        value: jsExpressionValue(newValue, emptyComments),
-      },
-    ]
-
-    // Apply the update to the properties.
-    const { editorStatePatch: propertyUpdatePatch } = applyValuesAtPath(
-      editorState,
-      command.target,
-      propsToUpdate,
-    )
-
-    return {
-      editorStatePatches: [propertyUpdatePatch],
-      commandDescription: `Adjust Number Prop: ${EP.toUid(command.target)}/${PP.toString(
-        command.property,
-      )} by ${command.value}`,
-    }
-  }
-}
-
-export function applyValuesAtPath(
-  editorState: EditorState,
-  target: ElementPath,
-  jsxValuesAndPathsToSet: ValueAtPath[],
-): { editorStateWithChanges: EditorState; editorStatePatch: EditorStatePatch } {
-  const workingEditorState = modifyUnderlyingElementForOpenFile(
-    target,
-    editorState,
-    (element: JSXElement) => {
-      return foldEither(
-        () => {
-          return element
-        },
-        (updatedProps) => {
-          return {
-            ...element,
-            props: updatedProps,
-          }
-        },
-        setJSXValuesAtPaths(element.props, jsxValuesAndPathsToSet),
-      )
-    },
-  )
-
-  const editorStatePatch = patchParseSuccessAtElementPath(target, workingEditorState, (success) => {
-    return {
-      topLevelElements: {
-        $set: success.topLevelElements,
-      },
-      imports: {
-        $set: success.imports,
-      },
-    }
-  })
-
-  return {
-    editorStateWithChanges: workingEditorState,
-    editorStatePatch: editorStatePatch,
-  }
-}
diff --git a/editor/src/components/canvas/commands/commands.ts b/editor/src/components/canvas/commands/commands.ts
index cf7428ce5209..816ad0c558cd 100644
--- a/editor/src/components/canvas/commands/commands.ts
+++ b/editor/src/components/canvas/commands/commands.ts
@@ -6,8 +6,6 @@ import type { EditorState, EditorStatePatch } from '../../editor/store/editor-st
 import type { CommandDescription } from '../canvas-strategies/interaction-state'
 import type { AdjustCssLengthProperties } from './adjust-css-length-command'
 import { runAdjustCssLengthProperties } from './adjust-css-length-command'
-import type { AdjustNumberProperty } from './adjust-number-command'
-import { runAdjustNumberProperty } from './adjust-number-command'
 import type { ConvertToAbsolute } from './convert-to-absolute-command'
 import { runConvertToAbsolute } from './convert-to-absolute-command'
 import type { ReorderElement } from './reorder-element-command'
@@ -47,8 +45,6 @@ import type { InsertElementInsertionSubject } from './insert-element-insertion-s
 import { runInsertElementInsertionSubject } from './insert-element-insertion-subject'
 import type { AddElement } from './add-element-command'
 import { runAddElement } from './add-element-command'
-import type { UpdatePropIfExists } from './update-prop-if-exists-command'
-import { runUpdatePropIfExists } from './update-prop-if-exists-command'
 import type { HighlightElementsCommand } from './highlight-element-command'
 import { runHighlightElementsCommand } from './highlight-element-command'
 import type { InteractionLifecycle } from '../canvas-strategies/canvas-strategy-types'
@@ -102,7 +98,6 @@ export type CanvasCommand =
   | WildcardPatch
   | UpdateFunctionCommand
   | StrategySwitched
-  | AdjustNumberProperty
   | AdjustCssLengthProperties
   | ReparentElement
   | DuplicateElement
@@ -119,7 +114,6 @@ export type CanvasCommand =
   | PushIntendedBoundsAndUpdateHuggingElements
   | DeleteProperties
   | SetProperty
-  | UpdatePropIfExists
   | AddImportsToFile
   | AddToReparentedToPaths
   | InsertElementInsertionSubject
@@ -151,8 +145,6 @@ export function runCanvasCommand(
       return runUpdateFunctionCommand(editorState, command, commandLifecycle)
     case 'STRATEGY_SWITCHED':
       return runStrategySwitchedCommand(command)
-    case 'ADJUST_NUMBER_PROPERTY':
-      return runAdjustNumberProperty(editorState, command)
     case 'ADJUST_CSS_LENGTH_PROPERTY':
       return runAdjustCssLengthProperties(editorState, command)
     case 'REPARENT_ELEMENT':
@@ -187,8 +179,6 @@ export function runCanvasCommand(
       return runSetProperty(editorState, command)
     case 'UPDATE_BULK_PROPERTIES':
       return runBulkUpdateProperties(editorState, command)
-    case 'UPDATE_PROP_IF_EXISTS':
-      return runUpdatePropIfExists(editorState, command)
     case 'ADD_IMPORTS_TO_FILE':
       return runAddImportsToFile(editorState, command)
     case 'ADD_TO_REPARENTED_TO_PATHS':
diff --git a/editor/src/components/canvas/commands/convert-css-percent-to-px-command.ts b/editor/src/components/canvas/commands/convert-css-percent-to-px-command.ts
index 990dbc2ac63c..8b77cf92a033 100644
--- a/editor/src/components/canvas/commands/convert-css-percent-to-px-command.ts
+++ b/editor/src/components/canvas/commands/convert-css-percent-to-px-command.ts
@@ -16,8 +16,8 @@ import type { EditorState } from '../../editor/store/editor-state'
 import { withUnderlyingTargetFromEditorState } from '../../editor/store/editor-state'
 import type { CSSNumber } from '../../inspector/common/css-utils'
 import { parseCSSPercent, printCSSNumber } from '../../inspector/common/css-utils'
-import { applyValuesAtPath } from './adjust-number-command'
 import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+import { applyValuesAtPath } from './utils/property-utils'
 
 export interface ConvertCssPercentToPx extends BaseCommand {
   type: 'CONVERT_CSS_PERCENT_TO_PX'
diff --git a/editor/src/components/canvas/commands/convert-to-absolute-command.ts b/editor/src/components/canvas/commands/convert-to-absolute-command.ts
index 7ecb5b1726ab..2effb0eef891 100644
--- a/editor/src/components/canvas/commands/convert-to-absolute-command.ts
+++ b/editor/src/components/canvas/commands/convert-to-absolute-command.ts
@@ -7,8 +7,8 @@ import type { ValueAtPath } from '../../../core/shared/jsx-attributes'
 import type { ElementPath } from '../../../core/shared/project-file-types'
 import type { EditorState, EditorStatePatch } from '../../editor/store/editor-state'
 import { stylePropPathMappingFn } from '../../inspector/common/property-path-hooks'
-import { applyValuesAtPath } from './adjust-number-command'
 import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+import { applyValuesAtPath } from './utils/property-utils'
 
 export interface ConvertToAbsolute extends BaseCommand {
   type: 'CONVERT_TO_ABSOLUTE'
diff --git a/editor/src/components/canvas/commands/delete-properties-command.ts b/editor/src/components/canvas/commands/delete-properties-command.ts
index f1d8501385b3..65565b21d922 100644
--- a/editor/src/components/canvas/commands/delete-properties-command.ts
+++ b/editor/src/components/canvas/commands/delete-properties-command.ts
@@ -1,13 +1,9 @@
-import type { JSXElement } from '../../../core/shared/element-template'
-import type { EditorState, EditorStatePatch } from '../../../components/editor/store/editor-state'
-import { modifyUnderlyingElementForOpenFile } from '../../../components/editor/store/editor-state'
-import { foldEither } from '../../../core/shared/either'
-import { unsetJSXValuesAtPaths } from '../../../core/shared/jsx-attributes'
+import type { EditorState } from '../../../components/editor/store/editor-state'
 import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
 import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
 import * as EP from '../../../core/shared/element-path'
 import * as PP from '../../../core/shared/property-path'
-import { patchParseSuccessAtElementPath } from './patch-utils'
+import { deleteValuesAtPath } from './utils/property-utils'
 
 export interface DeleteProperties extends BaseCommand {
   type: 'DELETE_PROPERTIES'
@@ -46,43 +42,3 @@ export const runDeleteProperties: CommandFunction<DeleteProperties> = (
       .join(',')} on ${EP.toUid(command.element)}`,
   }
 }
-
-export function deleteValuesAtPath(
-  editorState: EditorState,
-  target: ElementPath,
-  properties: Array<PropertyPath>,
-): { editorStateWithChanges: EditorState; editorStatePatch: EditorStatePatch } {
-  const workingEditorState = modifyUnderlyingElementForOpenFile(
-    target,
-    editorState,
-    (element: JSXElement) => {
-      return foldEither(
-        () => {
-          return element
-        },
-        (updatedProps) => {
-          return {
-            ...element,
-            props: updatedProps,
-          }
-        },
-        unsetJSXValuesAtPaths(element.props, properties),
-      )
-    },
-  )
-
-  const editorStatePatch = patchParseSuccessAtElementPath(target, workingEditorState, (success) => {
-    return {
-      topLevelElements: {
-        $set: success.topLevelElements,
-      },
-      imports: {
-        $set: success.imports,
-      },
-    }
-  })
-  return {
-    editorStateWithChanges: workingEditorState,
-    editorStatePatch: editorStatePatch,
-  }
-}
diff --git a/editor/src/components/canvas/commands/set-css-length-command.ts b/editor/src/components/canvas/commands/set-css-length-command.ts
index cde200d644a5..0a4bafc4d315 100644
--- a/editor/src/components/canvas/commands/set-css-length-command.ts
+++ b/editor/src/components/canvas/commands/set-css-length-command.ts
@@ -25,9 +25,9 @@ import {
 } from '../../inspector/common/css-utils'
 import type { CreateIfNotExistant } from './adjust-css-length-command'
 import { deleteConflictingPropsForWidthHeight } from './adjust-css-length-command'
-import { applyValuesAtPath } from './adjust-number-command'
 import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
 import { addToastPatch } from './show-toast-command'
+import { applyValuesAtPath } from './utils/property-utils'
 
 type CssNumberOrKeepOriginalUnit =
   | { type: 'EXPLICIT_CSS_NUMBER'; value: CSSNumber | CSSKeyword }
diff --git a/editor/src/components/canvas/commands/set-property-command.ts b/editor/src/components/canvas/commands/set-property-command.ts
index a7b06f27de13..ca791fd81306 100644
--- a/editor/src/components/canvas/commands/set-property-command.ts
+++ b/editor/src/components/canvas/commands/set-property-command.ts
@@ -8,9 +8,8 @@ import type {
 } from '../../../core/shared/project-file-types'
 import * as PP from '../../../core/shared/property-path'
 import type { EditorState } from '../../editor/store/editor-state'
-import { applyValuesAtPath } from './adjust-number-command'
 import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
-import { deleteValuesAtPath } from './delete-properties-command'
+import { applyValuesAtPath, deleteValuesAtPath } from './utils/property-utils'
 
 type PositionProp = 'left' | 'top' | 'right' | 'bottom' | 'width' | 'height'
 
diff --git a/editor/src/components/canvas/commands/update-class-list-command.ts b/editor/src/components/canvas/commands/update-class-list-command.ts
index 208c80719ec8..1643ccbeea3c 100644
--- a/editor/src/components/canvas/commands/update-class-list-command.ts
+++ b/editor/src/components/canvas/commands/update-class-list-command.ts
@@ -14,8 +14,8 @@ import {
 import { getTailwindConfigCached } from '../../../core/tailwind/tailwind-compilation'
 import { getClassNameAttribute } from '../../../core/tailwind/tailwind-options'
 import { getElementFromProjectContents, type EditorState } from '../../editor/store/editor-state'
-import { applyValuesAtPath } from './adjust-number-command'
 import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+import { applyValuesAtPath } from './utils/property-utils'
 
 export interface UpdateClassList extends BaseCommand {
   type: 'UPDATE_CLASS_LIST'
diff --git a/editor/src/components/canvas/commands/update-prop-if-exists-command.ts b/editor/src/components/canvas/commands/update-prop-if-exists-command.ts
deleted file mode 100644
index 3f8677579462..000000000000
--- a/editor/src/components/canvas/commands/update-prop-if-exists-command.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { foldEither, isRight } from '../../../core/shared/either'
-import * as EP from '../../../core/shared/element-path'
-import {
-  emptyComments,
-  modifiableAttributeIsAttributeNotFound,
-  isJSXElement,
-  jsExpressionValue,
-} from '../../../core/shared/element-template'
-import { getModifiableJSXAttributeAtPath } from '../../../core/shared/jsx-attribute-utils'
-import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
-import * as PP from '../../../core/shared/property-path'
-import type { EditorState } from '../../editor/store/editor-state'
-import { withUnderlyingTargetFromEditorState } from '../../editor/store/editor-state'
-import { applyValuesAtPath } from './adjust-number-command'
-import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
-
-export interface UpdatePropIfExists extends BaseCommand {
-  type: 'UPDATE_PROP_IF_EXISTS'
-  element: ElementPath
-  property: PropertyPath
-  value: string
-}
-
-export function updatePropIfExists(
-  whenToRun: WhenToRun,
-  element: ElementPath,
-  property: PropertyPath,
-  value: string,
-): UpdatePropIfExists {
-  return {
-    type: 'UPDATE_PROP_IF_EXISTS',
-    whenToRun: whenToRun,
-    element: element,
-    property: property,
-    value: value,
-  }
-}
-
-export const runUpdatePropIfExists: CommandFunction<UpdatePropIfExists> = (
-  editorState: EditorState,
-  command: UpdatePropIfExists,
-) => {
-  // check if the prop exists
-  const propertyExists = withUnderlyingTargetFromEditorState(
-    command.element,
-    editorState,
-    false,
-    (_, element) => {
-      if (isJSXElement(element)) {
-        return foldEither(
-          () => false,
-          (value) => !modifiableAttributeIsAttributeNotFound(value),
-          getModifiableJSXAttributeAtPath(element.props, command.property),
-        )
-      } else {
-        return false
-      }
-    },
-  )
-
-  if (propertyExists) {
-    // Apply the update to the properties.
-    const { editorStatePatch: propertyUpdatePatch } = applyValuesAtPath(
-      editorState,
-      command.element,
-      [{ path: command.property, value: jsExpressionValue(command.value, emptyComments) }],
-    )
-
-    return {
-      editorStatePatches: [propertyUpdatePatch],
-      commandDescription: `Update Prop if Exists ${PP.toString(command.property)}=${JSON.stringify(
-        command.property,
-        null,
-        2,
-      )} on ${EP.toUid(command.element)}`,
-    }
-  } else {
-    // no op return to prevent updating a nonexistant prop. if you want to set a prop regardless whether it exists or not, use the setPropertyCommand
-    return {
-      editorStatePatches: [],
-      commandDescription: `Update Prop if Exists did not find existing prop for ${PP.toString(
-        command.property,
-      )}`,
-    }
-  }
-}
diff --git a/editor/src/components/canvas/commands/utils/property-utils.ts b/editor/src/components/canvas/commands/utils/property-utils.ts
new file mode 100644
index 000000000000..0198ad74bcc7
--- /dev/null
+++ b/editor/src/components/canvas/commands/utils/property-utils.ts
@@ -0,0 +1,88 @@
+import type { ElementPath, JSXElement, PropertyPath } from 'utopia-shared/src/types'
+import { foldEither } from '../../../../core/shared/either'
+import type { ValueAtPath } from '../../../../core/shared/jsx-attributes'
+import { setJSXValuesAtPaths, unsetJSXValuesAtPaths } from '../../../../core/shared/jsx-attributes'
+import type { EditorState, EditorStatePatch } from '../../../editor/store/editor-state'
+import { modifyUnderlyingElementForOpenFile } from '../../../editor/store/editor-state'
+import { patchParseSuccessAtElementPath } from '../patch-utils'
+
+export function applyValuesAtPath(
+  editorState: EditorState,
+  target: ElementPath,
+  jsxValuesAndPathsToSet: ValueAtPath[],
+): { editorStateWithChanges: EditorState; editorStatePatch: EditorStatePatch } {
+  const workingEditorState = modifyUnderlyingElementForOpenFile(
+    target,
+    editorState,
+    (element: JSXElement) => {
+      return foldEither(
+        () => {
+          return element
+        },
+        (updatedProps) => {
+          return {
+            ...element,
+            props: updatedProps,
+          }
+        },
+        setJSXValuesAtPaths(element.props, jsxValuesAndPathsToSet),
+      )
+    },
+  )
+
+  const editorStatePatch = patchParseSuccessAtElementPath(target, workingEditorState, (success) => {
+    return {
+      topLevelElements: {
+        $set: success.topLevelElements,
+      },
+      imports: {
+        $set: success.imports,
+      },
+    }
+  })
+
+  return {
+    editorStateWithChanges: workingEditorState,
+    editorStatePatch: editorStatePatch,
+  }
+}
+
+export function deleteValuesAtPath(
+  editorState: EditorState,
+  target: ElementPath,
+  properties: Array<PropertyPath>,
+): { editorStateWithChanges: EditorState; editorStatePatch: EditorStatePatch } {
+  const workingEditorState = modifyUnderlyingElementForOpenFile(
+    target,
+    editorState,
+    (element: JSXElement) => {
+      return foldEither(
+        () => {
+          return element
+        },
+        (updatedProps) => {
+          return {
+            ...element,
+            props: updatedProps,
+          }
+        },
+        unsetJSXValuesAtPaths(element.props, properties),
+      )
+    },
+  )
+
+  const editorStatePatch = patchParseSuccessAtElementPath(target, workingEditorState, (success) => {
+    return {
+      topLevelElements: {
+        $set: success.topLevelElements,
+      },
+      imports: {
+        $set: success.imports,
+      },
+    }
+  })
+  return {
+    editorStateWithChanges: workingEditorState,
+    editorStatePatch: editorStatePatch,
+  }
+}
diff --git a/editor/src/components/editor/actions/action-utils.ts b/editor/src/components/editor/actions/action-utils.ts
index 5f00da49b4c8..2cba7eaa684a 100644
--- a/editor/src/components/editor/actions/action-utils.ts
+++ b/editor/src/components/editor/actions/action-utils.ts
@@ -370,7 +370,6 @@ export function getElementsToNormalizeFromCommands(commands: CanvasCommand[]): E
     switch (command.type) {
       case 'ADJUST_CSS_LENGTH_PROPERTY':
       case 'SET_CSS_LENGTH_PROPERTY':
-      case 'ADJUST_NUMBER_PROPERTY':
       case 'CONVERT_CSS_PERCENT_TO_PX':
       case 'CONVERT_TO_ABSOLUTE':
         return command.target
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index b70275861002..05968e0c0bbf 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -544,10 +544,7 @@ import {
   replaceWithElementsWrappedInFragmentBehaviour,
 } from '../store/insertion-path'
 import { getConditionalCaseCorrespondingToBranchPath } from '../../../core/model/conditionals'
-import {
-  deleteProperties,
-  deleteValuesAtPath,
-} from '../../canvas/commands/delete-properties-command'
+import { deleteProperties } from '../../canvas/commands/delete-properties-command'
 import { treatElementAsFragmentLike } from '../../canvas/canvas-strategies/strategies/fragment-like-helpers'
 import {
   fixParentContainingBlockSettings,
@@ -628,8 +625,8 @@ import { isReplaceKeepChildrenAndStyleTarget } from '../../navigator/navigator-i
 import { canCondenseJSXElementChild } from '../../../utils/can-condense'
 import { getNavigatorTargetsFromEditorState } from '../../navigator/navigator-utils'
 import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
-import { applyValuesAtPath } from '../../canvas/commands/adjust-number-command'
 import { styleP } from '../../inspector/inspector-common'
+import { applyValuesAtPath, deleteValuesAtPath } from '../../canvas/commands/utils/property-utils'
 
 export const MIN_CODE_PANE_REOPEN_WIDTH = 100
 

From 519593609f156d192b8cde73d574d04e4d3ad7f6 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 14:45:03 +0200
Subject: [PATCH 169/272] Fix GridExpressionInput's border radius and highlight
 color conditions (#6576)

**Problem:**

The border highlight of selected `GridExpressionInput` components should
stay active while the dropdown is open. Also, the border radius should
use the theme's value.

**Fix:**

Fix the inset shadow conditions so that the border is shown as blue if
the _text_ input is focused (not the container), or the dropdown is
open, even if the mouse is not over the dropdown trigger.

In addition, update the border radius size with
`UtopiaTheme.inputBorderRadius`.


| Before | After |
|--------|----------|
| ![Kapture 2024-10-22 at 13 30
43](https://github.com/user-attachments/assets/4a56bc21-3fcd-4531-9632-20eb2d3aa6f6)
| ![Kapture 2024-10-22 at 13 29
21](https://github.com/user-attachments/assets/15c397d5-db82-4af9-9fd3-9b53ff3032d9)
|

Fixes #6575
---
 editor/src/uuiui/inputs/grid-expression-input.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/editor/src/uuiui/inputs/grid-expression-input.tsx b/editor/src/uuiui/inputs/grid-expression-input.tsx
index f4a82b1d7f4b..93701a9e060f 100644
--- a/editor/src/uuiui/inputs/grid-expression-input.tsx
+++ b/editor/src/uuiui/inputs/grid-expression-input.tsx
@@ -27,7 +27,7 @@ import {
 import { Icons, SmallerIcons } from '../icons'
 import { NO_OP } from '../../core/shared/utils'
 import { unless } from '../../utils/react-conditionals'
-import { useColorTheme } from '../styles/theme'
+import { useColorTheme, UtopiaTheme } from '../styles/theme'
 
 interface GridExpressionInputProps {
   testId: string
@@ -164,23 +164,25 @@ export const GridExpressionInput = React.memo(
       return gridDimensionsAreEqual(value, defaultValue)
     }, [value, defaultValue])
 
+    const highlightBorder = dropdownOpen || inputFocused
+
     return (
       <div
         style={style}
         css={{
-          borderRadius: 2,
+          borderRadius: UtopiaTheme.inputBorderRadius,
           display: 'flex',
           alignItems: 'center',
           flexGrow: 1,
           flexDirection: 'row',
+          boxShadow: `inset 0px 0px 0px 1px ${
+            highlightBorder ? colorTheme.dynamicBlue.value : 'transparent'
+          }`,
           '&:hover': {
             boxShadow: `inset 0px 0px 0px 1px ${
-              dropdownOpen ? colorTheme.dynamicBlue.value : colorTheme.fg7.value
+              highlightBorder ? colorTheme.dynamicBlue.value : colorTheme.fg7.value
             }`,
           },
-          '&:focus-within': {
-            boxShadow: `inset 0px 0px 0px 1px ${colorTheme.dynamicBlue.value}`,
-          },
         }}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}

From 2849b28dde694feb2b2594f62aecbfbdf679f6f3 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 14:45:48 +0200
Subject: [PATCH 170/272] Open grid template row/col inspector menu with right
 click on title (#6573)

**Problem:**

It should be possible to open the dropdown/context menu for grid
template rows/cols in the inspector by right-clicking the item's title.

**Fix:**

Add an invisible context menu in the title component and trigger it
conditionally by right clicking the title itself.
This solution works better than conditionally opening the same dropdown
menu as the three dots button because it will correctly position it.



https://github.com/user-attachments/assets/2c25fc94-b039-4423-9a3f-0c6e0f71b562



Fixes #6572
---
 .../src/components/inspector/flex-section.tsx | 39 ++++++++++++++++---
 editor/src/uuiui/radix-components.tsx         |  4 +-
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 5114495c30a3..5d27487c3357 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -4,7 +4,7 @@
 import { jsx } from '@emotion/react'
 import React from 'react'
 import { createSelector } from 'reselect'
-import { unless, when } from '../../utils/react-conditionals'
+import { when } from '../../utils/react-conditionals'
 import { Substores, useEditorState, useRefEditorState } from '../editor/store/store-hook'
 import { AddRemoveLayoutSystemControl } from './add-remove-layout-system-control'
 import { FlexDirectionToggle } from './flex-direction-control'
@@ -554,9 +554,15 @@ function AxisDimensionControl({
   opener: (isOpen: boolean) => React.ReactElement
 }) {
   const testId = `grid-dimension-${axis}-${index}`
-  const [isOpen, setIsOpen] = React.useState(false)
-  const onOpenChange = React.useCallback((isDropdownOpen: boolean) => {
-    setIsOpen(isDropdownOpen)
+  const [isDotsMenuOpen, setDotsMenuOpen] = React.useState(false)
+  const [isTitleMenuOpen, setTitleMenuOpen] = React.useState(false)
+
+  const onOpenChangeDotsMenu = React.useCallback((isDropdownOpen: boolean) => {
+    setDotsMenuOpen(isDropdownOpen)
+  }, [])
+
+  const onOpenChangeTitleMenu = React.useCallback(() => {
+    setTitleMenuOpen(false)
   }, [])
 
   const isDynamic = React.useMemo(() => {
@@ -584,6 +590,14 @@ function AxisDimensionControl({
     setIsHovered(false)
   }, [])
 
+  const onContextMenuTitle = React.useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setTitleMenuOpen(true)
+  }, [])
+
+  const invisibleOpener = React.useCallback(() => null, [])
+
   return (
     <div
       key={`col-${value}-${index}`}
@@ -611,8 +625,16 @@ function AxisDimensionControl({
             whiteSpace: 'nowrap',
           }}
           title={isDynamic ? dynamicIndexTitle : undefined}
+          onContextMenu={onContextMenuTitle}
         >
           {title}
+          <DropdownMenu
+            align='start'
+            items={items}
+            opener={invisibleOpener}
+            onOpenChange={onOpenChangeTitleMenu}
+            forceOpen={isTitleMenuOpen}
+          />
         </Subdued>
         <GridExpressionInput
           testId={testId}
@@ -625,9 +647,14 @@ function AxisDimensionControl({
           defaultValue={gridCSSKeyword(cssKeyword('auto'), null)}
         />
         {when(
-          (isHovered && !gridExpressionInputFocused.focused) || isOpen,
+          (isHovered && !gridExpressionInputFocused.focused) || isDotsMenuOpen,
           <SquareButton>
-            <DropdownMenu align='end' items={items} opener={opener} onOpenChange={onOpenChange} />
+            <DropdownMenu
+              align='end'
+              items={items}
+              opener={opener}
+              onOpenChange={onOpenChangeDotsMenu}
+            />
           </SquareButton>,
         )}
       </div>
diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx
index 86ed787124af..189d596eac52 100644
--- a/editor/src/uuiui/radix-components.tsx
+++ b/editor/src/uuiui/radix-components.tsx
@@ -11,6 +11,7 @@ import { Icons, SmallerIcons } from './icons'
 import { when } from '../utils/react-conditionals'
 import { Icn, type IcnProps } from './icn'
 import { forceNotNull } from '../core/shared/optional-utils'
+import { usePropControlledStateV2 } from '../components/inspector/common/inspector-utils'
 
 // Keep this in sync with the radix-components-portal div in index.html.
 export const RadixComponentsPortalId = 'radix-components-portal'
@@ -90,6 +91,7 @@ export interface DropdownMenuProps {
   alignOffset?: number
   onOpenChange?: (open: boolean) => void
   style?: CSSProperties
+  forceOpen?: boolean
 }
 
 export const ItemContainerTestId = (id: string) => `item-container-${id}`
@@ -103,7 +105,7 @@ export const DropdownMenu = React.memo<DropdownMenuProps>((props) => {
   }, [])
   const onEscapeKeyDown = React.useCallback((e: KeyboardEvent) => e.stopPropagation(), [])
 
-  const [open, setOpen] = React.useState(false)
+  const [open, setOpen] = usePropControlledStateV2(props.forceOpen || false)
 
   const shouldShowCheckboxes = props.items.some(
     (i) => !isSeparatorDropdownMenuItem(i) && i.checked != null,

From 7ee1484f26b376e1be559b810079250cb2e8daa2 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 17:51:13 +0200
Subject: [PATCH 171/272] Ellipsize grid expression input (#6578)

**Problem:**

Overflowing template strings in `GridExpressionInput` components should
be truncated and ellipsized.

**Fix:**

| Before | After |
|-------|-------|
| <img width="262" alt="Screenshot 2024-10-22 at 15 00 02"
src="https://github.com/user-attachments/assets/4c2197ed-1cb9-43df-98bf-dd23b98b229d">
| <img width="262" alt="Screenshot 2024-10-22 at 14 59 53"
src="https://github.com/user-attachments/assets/f7dfa3a0-d3e0-49f7-aa2e-1afab2e253d0">
|

Fixes #6577
---
 editor/src/uuiui/inputs/grid-expression-input.tsx |  1 +
 editor/src/uuiui/inputs/string-input.tsx          | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/editor/src/uuiui/inputs/grid-expression-input.tsx b/editor/src/uuiui/inputs/grid-expression-input.tsx
index 93701a9e060f..6407f163b6d2 100644
--- a/editor/src/uuiui/inputs/grid-expression-input.tsx
+++ b/editor/src/uuiui/inputs/grid-expression-input.tsx
@@ -200,6 +200,7 @@ export const GridExpressionInput = React.memo(
             width: inputFocused ? '100%' : `calc(100% - ${DropdownWidth}px)`,
           }}
           css={{ color: isDefault ? colorTheme.fg6.value : colorTheme.fg0.value }}
+          ellipsize={true}
         />
         {unless(
           inputFocused,
diff --git a/editor/src/uuiui/inputs/string-input.tsx b/editor/src/uuiui/inputs/string-input.tsx
index c38c162bb491..5cddfd0d280e 100644
--- a/editor/src/uuiui/inputs/string-input.tsx
+++ b/editor/src/uuiui/inputs/string-input.tsx
@@ -3,6 +3,7 @@
 import { jsx } from '@emotion/react'
 import styled from '@emotion/styled'
 import composeRefs from '@seznam/compose-react-refs'
+import type { CSSProperties } from 'react'
 import React from 'react'
 import type { ControlStatus } from '../../components/inspector/common/control-status'
 import type { ControlStyles } from '../../components/inspector/common/control-styles'
@@ -34,6 +35,7 @@ export interface StringInputProps
   pasteHandler?: boolean
   showBorder?: boolean
   innerStyle?: React.CSSProperties
+  ellipsize?: boolean
 }
 
 export const StringInput = React.memo(
@@ -49,6 +51,7 @@ export const StringInput = React.memo(
         DEPRECATED_labelBelow: labelBelow,
         testId,
         showBorder,
+        ellipsize,
         ...inputProps
       },
       propsRef,
@@ -88,6 +91,13 @@ export const StringInput = React.memo(
 
       const placeholder = getControlStylesAwarePlaceholder(controlStyles) ?? initialPlaceHolder
 
+      let inputStyle: CSSProperties = {}
+      if (ellipsize) {
+        inputStyle.textOverflow = 'ellipsis'
+        inputStyle.whiteSpace = 'nowrap'
+        inputStyle.overflow = 'hidden'
+      }
+
       return (
         <form
           autoComplete='off'
@@ -142,6 +152,7 @@ export const StringInput = React.memo(
               autoComplete='off'
               spellCheck={false}
               growInputAutomatically={inputProps.growInputAutomatically}
+              style={inputStyle}
             />
             {labelBelow == null ? null : (
               <LabelBelow htmlFor={inputProps.id} style={{ color: controlStyles.secondaryColor }}>

From a68934598175a6fab29d38abdb2a455188a46968 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Tue, 22 Oct 2024 17:00:35 +0100
Subject: [PATCH 172/272] fix(canvas) Handle Changing Imports In Canvas (#6567)

- Removed the previous handling of `shouldRerenderRef`.
- Implemented `projectContentsSameForRefreshRequire`.
- Changed out old `haveProjectImportsChanged` call to use the new
  `projectContentsSameForRefreshRequire`.
---
 .../grid-draw-to-insert-strategy.tsx          |  2 +-
 editor/src/components/canvas/canvas-utils.ts  | 83 ++++++++++++++++++-
 ...sx-canvas-code-execution.spec.browser2.tsx | 13 ++-
 .../src/components/canvas/ui-jsx-canvas.tsx   | 25 +++---
 4 files changed, 102 insertions(+), 21 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index fea428a411d8..e9eaad7b1255 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -171,7 +171,7 @@ const gridDrawToInsertStrategyInner =
               ),
               updateHighlightedViews('mid-interaction', [targetParent]),
             ],
-            [targetParent],
+            [],
           )
         }
 
diff --git a/editor/src/components/canvas/canvas-utils.ts b/editor/src/components/canvas/canvas-utils.ts
index 50b5f71e9ac6..a40fa5ee34b2 100644
--- a/editor/src/components/canvas/canvas-utils.ts
+++ b/editor/src/components/canvas/canvas-utils.ts
@@ -63,7 +63,12 @@ import type {
   HighlightBoundsForUids,
   ExportsDetail,
 } from '../../core/shared/project-file-types'
-import { isExportDefault, isParseSuccess, isTextFile } from '../../core/shared/project-file-types'
+import {
+  importsEquals,
+  isExportDefault,
+  isParseSuccess,
+  isTextFile,
+} from '../../core/shared/project-file-types'
 import {
   applyUtopiaJSXComponentsChanges,
   getDefaultExportedTopLevelElement,
@@ -140,7 +145,11 @@ import { getStoryboardUID } from '../../core/model/scene-utils'
 import { optionalMap } from '../../core/shared/optional-utils'
 import { assertNever, fastForEach } from '../../core/shared/utils'
 import type { ProjectContentTreeRoot } from '../assets'
-import { getProjectFileByFilePath } from '../assets'
+import {
+  getProjectFileByFilePath,
+  isProjectContentDirectory,
+  isProjectContentFile,
+} from '../assets'
 import type { CSSNumber } from '../inspector/common/css-utils'
 import { parseCSSLengthPercent, printCSSNumber } from '../inspector/common/css-utils'
 import { getTopLevelName, importedFromWhere } from '../editor/import-utils'
@@ -2180,3 +2189,73 @@ export function canvasPanelOffsets(): {
     right: inspector?.clientWidth ?? 0,
   }
 }
+
+export function projectContentsSameForRefreshRequire(
+  oldProjectContents: ProjectContentTreeRoot,
+  newProjectContents: ProjectContentTreeRoot,
+): boolean {
+  if (oldProjectContents === newProjectContents) {
+    // Identical references, so the imports are the same.
+    return true
+  } else {
+    for (const [filename, oldProjectTree] of Object.entries(oldProjectContents)) {
+      const newProjectTree = newProjectContents[filename]
+      // No need to check these further if they have the same reference.
+      if (oldProjectTree === newProjectTree) {
+        continue
+      }
+      // If the file can't be found in the other tree, the imports are not the same.
+      if (newProjectTree == null) {
+        return false
+      }
+      if (isProjectContentFile(oldProjectTree) && isProjectContentFile(newProjectTree)) {
+        // Both entries are files.
+        const oldContent = oldProjectTree.content
+        const newContent = newProjectTree.content
+        if (isTextFile(oldContent) || isTextFile(newContent)) {
+          if (isTextFile(oldContent) && isTextFile(newContent)) {
+            const oldParsed = oldContent.fileContents.parsed
+            const newParsed = newContent.fileContents.parsed
+            if (isParseSuccess(oldParsed) || isParseSuccess(newParsed)) {
+              if (isParseSuccess(oldParsed) && isParseSuccess(newParsed)) {
+                if (
+                  !importsEquals(oldParsed.imports, newParsed.imports) ||
+                  oldParsed.combinedTopLevelArbitraryBlock !==
+                    newParsed.combinedTopLevelArbitraryBlock ||
+                  oldParsed.exportsDetail !== newParsed.exportsDetail
+                ) {
+                  // For the same file the imports, combined top
+                  // level arbitrary block or exports have changed.
+                  return false
+                }
+              } else {
+                // One of the files is a parse success but the other is not.
+                return false
+              }
+            }
+          } else {
+            // One of the files is a text file but the other is not.
+            return false
+          }
+        }
+      } else if (
+        isProjectContentDirectory(oldProjectTree) &&
+        isProjectContentDirectory(newProjectTree)
+      ) {
+        // Both entries are directories.
+        if (
+          !projectContentsSameForRefreshRequire(oldProjectTree.children, newProjectTree.children)
+        ) {
+          // The imports of the subdirectories differ.
+          return false
+        }
+      } else {
+        // One of the entries is a file and the other is a directory.
+        return false
+      }
+    }
+  }
+
+  // If nothing differs, return true.
+  return true
+}
diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-code-execution.spec.browser2.tsx b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-code-execution.spec.browser2.tsx
index f59ebb86be40..bf8132dc9f15 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-code-execution.spec.browser2.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-code-execution.spec.browser2.tsx
@@ -215,13 +215,18 @@ describe('Re-mounting is avoided when', () => {
 
     await switchToLiveMode(renderResult)
 
+    function checkClicky(expectedContentText: string): void {
+      const clicky = renderResult.renderedDOM.getByTestId('clicky')
+      expect(clicky.innerText).toEqual(expectedContentText)
+    }
+
     // Ensure we can find the original text
-    expect(renderResult.renderedDOM.queryByText('Clicked 0 times')).not.toBeNull()
+    checkClicky('Clicked 0 times')
 
     await clickButton(renderResult)
 
     // Ensure it has been updated
-    expect(renderResult.renderedDOM.queryByText('Clicked 1 times')).not.toBeNull()
+    checkClicky('Clicked 1 times')
 
     // Update the top level arbitrary JS block
     await updateCode(
@@ -231,7 +236,7 @@ describe('Re-mounting is avoided when', () => {
     )
 
     // Check that it has updated without resetting the state
-    expect(renderResult.renderedDOM.queryByText('Clicked: 1 times')).not.toBeNull()
+    checkClicky('Clicked: 1 times')
 
     // Update the component itself
     await updateCode(
@@ -241,7 +246,7 @@ describe('Re-mounting is avoided when', () => {
     )
 
     // Check again that it has updated without resetting the state
-    expect(renderResult.renderedDOM.queryByText('Clicked: 1 times!')).not.toBeNull()
+    checkClicky('Clicked: 1 times!')
   })
 
   it('arbitrary JS or a component is edited in a remix project', async () => {
diff --git a/editor/src/components/canvas/ui-jsx-canvas.tsx b/editor/src/components/canvas/ui-jsx-canvas.tsx
index 3f21fb976144..5912a6c1ca57 100644
--- a/editor/src/components/canvas/ui-jsx-canvas.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas.tsx
@@ -75,7 +75,11 @@ import {
 } from './ui-jsx-canvas-renderer/ui-jsx-canvas-execution-scope'
 import { applyUIDMonkeyPatch } from '../../utils/canvas-react-utils'
 import type { RemixValidPathsGenerationContext } from './canvas-utils'
-import { getParseSuccessForFilePath, getValidElementPaths } from './canvas-utils'
+import {
+  projectContentsSameForRefreshRequire,
+  getParseSuccessForFilePath,
+  getValidElementPaths,
+} from './canvas-utils'
 import { arrayEqualsByValue, fastForEach, NO_OP } from '../../core/shared/utils'
 import {
   AlwaysFalse,
@@ -360,20 +364,13 @@ export const UiJsxCanvas = React.memo<UiJsxCanvasPropsWithErrorCallback>((props)
 
   useClearSpyMetadataOnRemount(props.invalidatedCanvasData, isRemounted, metadataContext)
 
-  const elementsToRerenderRef = React.useRef(ElementsToRerenderGLOBAL.current)
-  const shouldRerenderRef = React.useRef(false)
-  shouldRerenderRef.current =
-    ElementsToRerenderGLOBAL.current === 'rerender-all-elements' ||
-    elementsToRerenderRef.current === 'rerender-all-elements' || // TODO this means the first drag frame will still be slow, figure out a nicer way to immediately switch to true. probably this should live in a dedicated a function
-    !arrayEqualsByValue(
-      ElementsToRerenderGLOBAL.current,
-      elementsToRerenderRef.current,
-      EP.pathsEqual,
-    ) // once we get here, we know that both `ElementsToRerenderGLOBAL.current` and `elementsToRerenderRef.current` are arrays
-  elementsToRerenderRef.current = ElementsToRerenderGLOBAL.current
-
   const maybeOldProjectContents = React.useRef(projectContents)
-  if (shouldRerenderRef.current) {
+
+  const projectContentsSimilarEnough = projectContentsSameForRefreshRequire(
+    maybeOldProjectContents.current,
+    projectContents,
+  )
+  if (!projectContentsSimilarEnough) {
     maybeOldProjectContents.current = projectContents
   }
 

From b6297d9bbd9e711728b1d7e948fe938ae6b6bd01 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 24 Oct 2024 18:07:37 +0200
Subject: [PATCH 173/272] Rename areaName to lineName (#6583)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Problem:**

Grid dimension (which should be named tracks 🙃 , but that's for another
day) have a field called `areaName` but it should actually be called
`lineName`
(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines).

**Fix:**

Rename `areaName` to `lineName`, and all its related mentions and
(indirect) references.

Fixes #6582
---
 .../strategies/grid-helpers.ts                | 36 +++++-----
 .../strategies/resize-grid-strategy.ts        |  4 +-
 .../canvas/controls/grid-controls.tsx         |  4 +-
 .../store/store-deep-equality-instances.ts    |  8 +--
 .../components/inspector/common/css-utils.ts  | 72 +++++++++----------
 .../inspector/flex-section.spec.browser2.tsx  | 28 ++++----
 .../src/components/inspector/flex-section.tsx | 34 ++++-----
 .../src/components/inspector/grid-helpers.ts  |  6 +-
 .../grid-cell-subsection.tsx                  | 56 +++++++--------
 editor/src/core/shared/element-template.ts    |  2 +-
 .../uuiui/inputs/grid-expression-input.tsx    |  2 +-
 11 files changed, 126 insertions(+), 126 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 401fe101782e..8f5029506b21 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -249,14 +249,14 @@ export function setGridPropsCommands(
   const rowStart = gridPositionToValue(gridProps.gridRowStart)
   const rowEnd = gridPositionToValue(gridProps.gridRowEnd)
 
-  const areaColumnStart = asMaybeNamedAreaOrValue(gridTemplate, 'column', columnStart)
-  const areaColumnEnd = asMaybeNamedAreaOrValue(gridTemplate, 'column', columnEnd)
-  const areaRowStart = asMaybeNamedAreaOrValue(gridTemplate, 'row', rowStart)
-  const areaRowEnd = asMaybeNamedAreaOrValue(gridTemplate, 'row', rowEnd)
+  const lineColumnStart = asMaybeNamedLineOrValue(gridTemplate, 'column', columnStart)
+  const lineColumnEnd = asMaybeNamedLineOrValue(gridTemplate, 'column', columnEnd)
+  const lineRowStart = asMaybeNamedLineOrValue(gridTemplate, 'row', rowStart)
+  const lineRowEnd = asMaybeNamedLineOrValue(gridTemplate, 'row', rowEnd)
 
   if (columnStart != null && columnStart === columnEnd) {
     commands.push(
-      setProperty('always', elementPath, PP.create('style', 'gridColumn'), areaColumnStart),
+      setProperty('always', elementPath, PP.create('style', 'gridColumn'), lineColumnStart),
     )
   } else if (
     columnStart != null &&
@@ -266,23 +266,23 @@ export function setGridPropsCommands(
     columnStart === columnEnd - 1
   ) {
     commands.push(
-      setProperty('always', elementPath, PP.create('style', 'gridColumn'), areaColumnStart),
+      setProperty('always', elementPath, PP.create('style', 'gridColumn'), lineColumnStart),
     )
   } else {
     if (columnStart != null) {
       commands.push(
-        setProperty('always', elementPath, PP.create('style', 'gridColumnStart'), areaColumnStart),
+        setProperty('always', elementPath, PP.create('style', 'gridColumnStart'), lineColumnStart),
       )
     }
     if (columnEnd != null) {
       commands.push(
-        setProperty('always', elementPath, PP.create('style', 'gridColumnEnd'), areaColumnEnd),
+        setProperty('always', elementPath, PP.create('style', 'gridColumnEnd'), lineColumnEnd),
       )
     }
   }
 
   if (rowStart != null && rowStart === rowEnd) {
-    commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), areaRowStart))
+    commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), lineRowStart))
   } else if (
     rowStart != null &&
     typeof rowStart === 'number' &&
@@ -290,16 +290,16 @@ export function setGridPropsCommands(
     typeof rowEnd === 'number' &&
     rowStart === rowEnd - 1
   ) {
-    commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), areaRowStart))
+    commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), lineRowStart))
   } else {
     if (rowStart != null) {
       commands.push(
-        setProperty('always', elementPath, PP.create('style', 'gridRowStart'), areaRowStart),
+        setProperty('always', elementPath, PP.create('style', 'gridRowStart'), lineRowStart),
       )
     }
     if (rowEnd != null) {
       commands.push(
-        setProperty('always', elementPath, PP.create('style', 'gridRowEnd'), areaRowEnd),
+        setProperty('always', elementPath, PP.create('style', 'gridRowEnd'), lineRowEnd),
       )
     }
   }
@@ -352,7 +352,7 @@ function getCellCoordsDelta(
   return gridCellCoordinates(rowDiff, columnDiff)
 }
 
-function asMaybeNamedAreaOrValue(
+function asMaybeNamedLineOrValue(
   grid: GridContainerProperties,
   axis: 'row' | 'column',
   value: number | string | null,
@@ -362,9 +362,9 @@ function asMaybeNamedAreaOrValue(
   } else if (typeof value === 'number') {
     const template = axis === 'row' ? grid.gridTemplateRows : grid.gridTemplateColumns
     if (template?.type === 'DIMENSIONS') {
-      const maybeAreaStart = template.dimensions.at(value - 1)
-      if (maybeAreaStart != null && maybeAreaStart.areaName != null) {
-        return maybeAreaStart.areaName
+      const maybeLineStart = template.dimensions.at(value - 1)
+      if (maybeLineStart != null && maybeLineStart.lineName != null) {
+        return maybeLineStart.lineName
       }
     }
     return value === 0 ? 1 : value
@@ -602,12 +602,12 @@ function alterGridTemplateDimensions(params: {
           if (before.length + after.length === 0) {
             return null
           }
-          return gridCSSRepeat(dim.times, [...before, ...after], dim.areaName)
+          return gridCSSRepeat(dim.times, [...before, ...after], dim.lineName)
         case 'REPLACE':
           return gridCSSRepeat(
             dim.times,
             [...before, params.patch.newValue, ...after],
-            dim.areaName,
+            dim.lineName,
           )
         default:
           assertNever(params.patch)
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index bf89f6246649..2df2477034eb 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -165,7 +165,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
 
       const isFractional = mergedUnit.value === 'fr'
       const precision = modifiers.cmd ? 'coarse' : 'precise'
-      const areaName = mergedValues.dimensions[control.columnOrRow]?.areaName ?? null
+      const lineName = mergedValues.dimensions[control.columnOrRow]?.lineName ?? null
 
       const newValue = Math.max(
         0,
@@ -181,7 +181,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
         originalValues.dimensions,
         expandedOriginalValues,
         control.columnOrRow,
-        gridCSSNumber(cssNumber(newValue, mergedUnit.value), areaName),
+        gridCSSNumber(cssNumber(newValue, mergedUnit.value), lineName),
       )
 
       const propertyValueAsString = printArrayGridDimensions(newDimensions)
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 756944ad8a37..91ae616bf5ae 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -309,7 +309,7 @@ const GridResizingStripedIndicator = React.memo((props: GridResizingControlProps
           }}
         >
           {when(
-            props.dimension.areaName != null,
+            props.dimension.lineName != null,
             <div
               style={{
                 position: 'absolute',
@@ -321,7 +321,7 @@ const GridResizingStripedIndicator = React.memo((props: GridResizingControlProps
                 borderRadius: '0 0 3px 0',
               }}
             >
-              {props.dimension.areaName}
+              {props.dimension.lineName}
             </div>,
           )}
         </div>,
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index cdf9eabda3f7..872d6b86b085 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -1977,7 +1977,7 @@ export const GridCSSNumberKeepDeepEquality: KeepDeepEqualityCall<GridCSSNumber>
   combine2EqualityCalls(
     (p) => p.value,
     CSSNumberKeepDeepEquality,
-    (p) => p.areaName,
+    (p) => p.lineName,
     NullableStringKeepDeepEquality,
     gridCSSNumber,
   )
@@ -1986,7 +1986,7 @@ export const GridCSSKeywordKeepDeepEquality: KeepDeepEqualityCall<GridCSSKeyword
   combine2EqualityCalls(
     (p) => p.value,
     createCallWithTripleEquals(),
-    (p) => p.areaName,
+    (p) => p.lineName,
     NullableStringKeepDeepEquality,
     gridCSSKeyword,
   )
@@ -2030,7 +2030,7 @@ export const GridCSSRepeatKeepDeepEquality: KeepDeepEqualityCall<GridCSSRepeat>
     createCallWithTripleEquals(),
     (p) => p.value,
     arrayDeepEquality(GridDimensionKeepDeepEquality),
-    (p) => p.areaName,
+    (p) => p.lineName,
     NullableStringKeepDeepEquality,
     gridCSSRepeat,
   )
@@ -2064,7 +2064,7 @@ export const GridCSSMinmaxKeepDeepEquality: KeepDeepEqualityCall<GridCSSMinmax>
     GridCSSNumberOrKeywordKeepDeepEquality,
     (p) => p.max,
     GridCSSNumberOrKeywordKeepDeepEquality,
-    (p) => p.areaName,
+    (p) => p.lineName,
     NullableStringKeepDeepEquality,
     gridCSSMinmax,
   )
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index 82b0ddcfd882..eb74150ed104 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -583,7 +583,7 @@ export type GridCSSNumberUnit = LengthUnit | ResolutionUnit | PercentUnit | 'fr'
 const GridCSSNumberUnits: Array<GridCSSNumberUnit> = [...LengthUnits, ...ResolutionUnits, '%', 'fr']
 
 type BaseGridDimension = {
-  areaName: string | null
+  lineName: string | null
 }
 
 export type GridCSSNumber = BaseGridDimension & {
@@ -630,17 +630,17 @@ export function gridDimensionsAreEqual(a: GridDimension, b: GridDimension): bool
 type BaseGridCSSRepeat = {
   type: 'REPEAT'
   value: Array<GridDimension>
-  areaName: string | null
+  lineName: string | null
 }
 
 function baseGridCSSRepeat(
   value: Array<GridDimension>,
-  areaName: string | null,
+  lineName: string | null,
 ): BaseGridCSSRepeat {
   return {
     type: 'REPEAT',
     value: value,
-    areaName: areaName,
+    lineName: lineName,
   }
 }
 
@@ -651,10 +651,10 @@ type GridCSSRepeatStatic = BaseGridCSSRepeat & {
 function gridCSSRepeatStatic(
   times: number,
   value: Array<GridDimension>,
-  areaName: string | null,
+  lineName: string | null,
 ): GridCSSRepeatStatic {
   return {
-    ...baseGridCSSRepeat(value, areaName),
+    ...baseGridCSSRepeat(value, lineName),
     times: times,
   }
 }
@@ -666,10 +666,10 @@ type GridCSSRepeatDynamic = BaseGridCSSRepeat & {
 function gridCSSRepeatDynamic(
   times: CSSKeyword<'auto-fill' | 'auto-fit'>,
   value: Array<GridDimension>,
-  areaName: string | null,
+  lineName: string | null,
 ): GridCSSRepeatDynamic {
   return {
-    ...baseGridCSSRepeat(value, areaName),
+    ...baseGridCSSRepeat(value, lineName),
     times: times,
   }
 }
@@ -713,24 +713,24 @@ export function isGridCSSKeyword(dim: GridDimension): dim is GridCSSKeyword {
 
 export function gridCSSKeyword(
   value: CSSKeyword<ValidGridDimensionKeyword>,
-  areaName: string | null,
+  lineName: string | null,
 ): GridCSSKeyword {
   return {
     type: 'KEYWORD',
     value: value,
-    areaName: areaName,
+    lineName: lineName,
   }
 }
 
 export function gridCSSRepeat(
   times: GridCSSRepeatTimes,
   value: GridDimension[],
-  areaName: string | null,
+  lineName: string | null,
 ): GridCSSRepeat {
   if (typeof times === 'number') {
-    return gridCSSRepeatStatic(times, value, areaName)
+    return gridCSSRepeatStatic(times, value, lineName)
   } else {
-    return gridCSSRepeatDynamic(times, value, areaName)
+    return gridCSSRepeatDynamic(times, value, lineName)
   }
 }
 
@@ -749,21 +749,21 @@ export function isGridCSSMinmax(dim: GridDimension): dim is GridCSSMinmax {
 export function gridCSSMinmax(
   min: GridCSSNumber | GridCSSKeyword,
   max: GridCSSNumber | GridCSSKeyword,
-  areaName: string | null,
+  lineName: string | null,
 ): GridCSSMinmax {
   return {
     type: 'MINMAX',
     min: min,
     max: max,
-    areaName: areaName,
+    lineName: lineName,
   }
 }
 
-export function gridCSSNumber(value: CSSNumber, areaName: string | null): GridCSSNumber {
+export function gridCSSNumber(value: CSSNumber, lineName: string | null): GridCSSNumber {
   return {
     type: 'NUMBER',
     value: value,
-    areaName: areaName,
+    lineName: lineName,
   }
 }
 
@@ -949,8 +949,8 @@ export function printCSSNumber(
 }
 
 export function printGridDimensionCSS(dimension: GridDimension): string {
-  const areaName = dimension.areaName != null ? `[${dimension.areaName}] ` : ''
-  return areaName + stringifyGridDimension(dimension)
+  const lineName = dimension.lineName != null ? `[${dimension.lineName}] ` : ''
+  return lineName + stringifyGridDimension(dimension)
 }
 
 export function stringifyGridDimension(dimension: GridDimension): string {
@@ -1083,19 +1083,19 @@ export function parseToCSSGridDimension(input: unknown): Either<string, GridDime
       const match = input.match(gridCSSTemplateNumberRegex)
       if (match != null) {
         return {
-          areaName: match[1],
+          lineName: match[1],
           inputToParse: match[2],
         }
       }
     }
-    return { areaName: null, inputToParse: input }
+    return { lineName: null, inputToParse: input }
   }
-  const { areaName, inputToParse } = getParts()
+  const { lineName: lineName, inputToParse } = getParts()
 
   return mapEither((value) => {
     return {
       ...value,
-      areaName: value.type === 'REPEAT' ? null : areaName,
+      lineName: value.type === 'REPEAT' ? null : lineName,
     } as GridDimension
   }, parseCSSGrid(inputToParse))
 }
@@ -1128,7 +1128,7 @@ export function parseGridPosition(
     const referenceTemplate =
       axis === 'row' ? container.gridTemplateRows : container.gridTemplateColumns
     if (referenceTemplate?.type === 'DIMENSIONS') {
-      const maybeArea = referenceTemplate.dimensions.findIndex((dim) => dim.areaName === input)
+      const maybeArea = referenceTemplate.dimensions.findIndex((dim) => dim.lineName === input)
       if (maybeArea >= 0) {
         let value = gridPositionValue(maybeArea + 1)
         if (
@@ -1236,12 +1236,12 @@ export function parseGridAutoOrTemplateBase(
 export function parseGridChildren(
   children: csstree.List<csstree.CssNode>,
 ): Either<string, GridDimension[]> {
-  let nextAreaName: string | null = null
+  let nextLineName: string | null = null
 
-  function getAreaName() {
-    const currentAreaName = nextAreaName != null ? `${nextAreaName}` : null
-    nextAreaName = null
-    return currentAreaName
+  function getLineName() {
+    const currentLineName = nextLineName != null ? `${nextLineName}` : null
+    nextLineName = null
+    return currentLineName
   }
 
   let dimensions: GridDimension[] = []
@@ -1250,7 +1250,7 @@ export function parseGridChildren(
       case 'Dimension': {
         const parsedDimension = parseCSSNumber(`${child.value}${child.unit}`, 'AnyValid')
         if (isRight(parsedDimension)) {
-          dimensions.push(gridCSSNumber(parsedDimension.value, getAreaName()))
+          dimensions.push(gridCSSNumber(parsedDimension.value, getLineName()))
         } else {
           return left('Invalid grid CSS dimension.')
         }
@@ -1258,7 +1258,7 @@ export function parseGridChildren(
       }
       case 'Identifier': {
         if (isValidGridDimensionKeyword(child.name)) {
-          dimensions.push(gridCSSKeyword(cssKeyword(child.name), getAreaName()))
+          dimensions.push(gridCSSKeyword(cssKeyword(child.name), getLineName()))
         } else {
           return left('Invalid grid CSS keyword.')
         }
@@ -1274,7 +1274,7 @@ export function parseGridChildren(
               return left('Invalid grid CSS repeat times.')
             }
 
-            const areaName = getAreaName()
+            const lineName = getLineName()
 
             const values = new csstree.List<csstree.CssNode>().fromArray(
               otherChildren.filter(
@@ -1287,7 +1287,7 @@ export function parseGridChildren(
             )
             const parsedDimensions = parseGridChildren(values)
             if (isRight(parsedDimensions)) {
-              dimensions.push(gridCSSRepeat(times, parsedDimensions.value, areaName))
+              dimensions.push(gridCSSRepeat(times, parsedDimensions.value, lineName))
             } else {
               return left('Invalid grid CSS repeat values.')
             }
@@ -1311,7 +1311,7 @@ export function parseGridChildren(
               ) {
                 return left('Invalid minmax arguments.')
               }
-              dimensions.push(gridCSSMinmax(min, max, getAreaName()))
+              dimensions.push(gridCSSMinmax(min, max, getLineName()))
             }
             break
           }
@@ -1321,8 +1321,8 @@ export function parseGridChildren(
         break
       }
       case 'Brackets': {
-        // The next child will get this area name
-        nextAreaName = child.children.toArray().find((c) => c.type === 'Identifier')?.name ?? null
+        // The next child will get this line name
+        nextLineName = child.children.toArray().find((c) => c.type === 'Identifier')?.name ?? null
         break
       }
       default:
diff --git a/editor/src/components/inspector/flex-section.spec.browser2.tsx b/editor/src/components/inspector/flex-section.spec.browser2.tsx
index fb151839b8b8..e7c1749b892c 100644
--- a/editor/src/components/inspector/flex-section.spec.browser2.tsx
+++ b/editor/src/components/inspector/flex-section.spec.browser2.tsx
@@ -12,7 +12,7 @@ describe('flex section', () => {
       const control = await screen.findByTestId('grid-dimension-column-0')
       await typeIntoField(control, '200px')
       const grid = await renderResult.renderedDOM.findByTestId('grid')
-      expect(grid.style.gridTemplateColumns).toEqual('[area1] 200px 1fr 1fr 1fr 1fr')
+      expect(grid.style.gridTemplateColumns).toEqual('[line1] 200px 1fr 1fr 1fr 1fr')
     })
     it('can type a number without unit for dimension', async () => {
       const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
@@ -20,7 +20,7 @@ describe('flex section', () => {
       const control = await screen.findByTestId('grid-dimension-column-0')
       await typeIntoField(control, '2')
       const grid = await renderResult.renderedDOM.findByTestId('grid')
-      expect(grid.style.gridTemplateColumns).toEqual('[area1] 2fr 1fr 1fr 1fr 1fr')
+      expect(grid.style.gridTemplateColumns).toEqual('[line1] 2fr 1fr 1fr 1fr 1fr')
     })
     it('can type a fractional number for dimension', async () => {
       const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
@@ -28,7 +28,7 @@ describe('flex section', () => {
       const control = await screen.findByTestId('grid-dimension-column-0')
       await typeIntoField(control, '2fr')
       const grid = await renderResult.renderedDOM.findByTestId('grid')
-      expect(grid.style.gridTemplateColumns).toEqual('[area1] 2fr 1fr 1fr 1fr 1fr')
+      expect(grid.style.gridTemplateColumns).toEqual('[line1] 2fr 1fr 1fr 1fr 1fr')
     })
     it('can type a keyword for dimension', async () => {
       const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
@@ -36,7 +36,7 @@ describe('flex section', () => {
       const control = await screen.findByTestId('grid-dimension-column-0')
       await typeIntoField(control, 'min-content')
       const grid = await renderResult.renderedDOM.findByTestId('grid')
-      expect(grid.style.gridTemplateColumns).toEqual('[area1] min-content 1fr 1fr 1fr 1fr')
+      expect(grid.style.gridTemplateColumns).toEqual('[line1] min-content 1fr 1fr 1fr 1fr')
     })
     it('ignores a typed invalid keyword for dimension', async () => {
       const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
@@ -44,7 +44,7 @@ describe('flex section', () => {
       const control = await screen.findByTestId('grid-dimension-column-0')
       await typeIntoField(control, 'not-a-keyword')
       const grid = await renderResult.renderedDOM.findByTestId('grid')
-      expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr 1fr 1fr 1fr 1fr')
+      expect(grid.style.gridTemplateColumns).toEqual('[line1] 1fr 1fr 1fr 1fr 1fr')
     })
     it('defaults to auto if empty', async () => {
       const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
@@ -52,7 +52,7 @@ describe('flex section', () => {
       const control = await screen.findByTestId('grid-dimension-column-0')
       await typeIntoField(control, null)
       const grid = await renderResult.renderedDOM.findByTestId('grid')
-      expect(grid.style.gridTemplateColumns).toEqual('[area1] auto 1fr 1fr 1fr 1fr')
+      expect(grid.style.gridTemplateColumns).toEqual('[line1] auto 1fr 1fr 1fr 1fr')
     })
     it('updates a repeat expression', async () => {
       const renderResult = await renderTestEditorWithCode(
@@ -64,15 +64,15 @@ describe('flex section', () => {
       const grid = await renderResult.renderedDOM.findByTestId('grid')
       const input: HTMLInputElement = await screen.findByTestId('grid-dimension-column-1')
       await typeIntoField(input, 'repeat(2, 0.5fr 42px)')
-      expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr repeat(2, 0.5fr 42px) 2fr')
+      expect(grid.style.gridTemplateColumns).toEqual('[line1] 1fr repeat(2, 0.5fr 42px) 2fr')
       expect(input.value).toBe('repeat(2, 0.5fr 42px)')
     })
-    it('does not show area names in the input', async () => {
+    it('does not show line names in the input', async () => {
       const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report')
       await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
       const control: HTMLInputElement = await screen.findByTestId('grid-dimension-column-0')
       const grid = await renderResult.renderedDOM.findByTestId('grid')
-      expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr 1fr 1fr 1fr 1fr')
+      expect(grid.style.gridTemplateColumns).toEqual('[line1] 1fr 1fr 1fr 1fr 1fr')
       expect(control.value).toBe('1fr')
     })
   })
@@ -142,7 +142,7 @@ export var storyboard = (
       style={{
         display: 'grid',
         gridTemplateRows: '80px 1fr 1fr',
-        gridTemplateColumns: '[area1] 1fr 1fr 1fr 1fr 1fr',
+        gridTemplateColumns: '[line1] 1fr 1fr 1fr 1fr 1fr',
         gridGap: 10,
         height: 322,
         width: 364,
@@ -166,7 +166,7 @@ export var storyboard = (
           width: 41,
           height: 23,
           border: '1px solid #000',
-          gridColumn: 'area1',
+          gridColumn: 'line1',
           gridRow: 1,
           backgroundColor: '#09f',
         }}
@@ -223,7 +223,7 @@ export var storyboard = (
           width: 41,
           height: 23,
           border: '1px solid #000',
-          gridColumn: 'area1',
+          gridColumn: 'line1',
           gridRow: 1,
           backgroundColor: '#09f',
         }}
@@ -258,7 +258,7 @@ export var storyboard = (
       style={{
         display: 'grid',
         gridTemplateRows: '80px 1fr 1fr',
-        gridTemplateColumns: '[area1] 1fr repeat(2, 10px 30px) 2fr',
+        gridTemplateColumns: '[line1] 1fr repeat(2, 10px 30px) 2fr',
         gridGap: 10,
         height: 322,
         width: 364,
@@ -282,7 +282,7 @@ export var storyboard = (
           width: 41,
           height: 23,
           border: '1px solid #000',
-          gridColumn: 'area1',
+          gridColumn: 'line1',
           gridRow: 1,
           backgroundColor: '#09f',
         }}
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 5d27487c3357..34f9aaf4cf29 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -387,22 +387,22 @@ const TemplateDimensionControl = React.memo(
         if (dimensions?.type !== 'DIMENSIONS') {
           return
         }
-        const currentAreaName = dimensions.dimensions[index]?.areaName ?? undefined
+        const currentLineName = dimensions.dimensions[index]?.lineName ?? undefined
 
-        const rawNewAreaName = window.prompt('Area name:', currentAreaName)?.trim()
-        if (rawNewAreaName == null) {
+        const rawNewLineName = window.prompt('Line name:', currentLineName)?.trim()
+        if (rawNewLineName == null) {
           return
         }
 
-        const newAreaName: string | null =
-          rawNewAreaName.length === 0 ? null : sanitizeAreaName(rawNewAreaName)
+        const newLineName: string | null =
+          rawNewLineName.length === 0 ? null : sanitizeLineName(rawNewLineName)
 
         const left = template.dimensions.slice(0, index)
         const right = template.dimensions.slice(index + 1)
 
         const newValues = [
           ...left,
-          { ...values[index], areaName: newAreaName } as GridDimension,
+          { ...values[index], lineName: newLineName } as GridDimension,
           ...right,
         ]
 
@@ -415,13 +415,13 @@ const TemplateDimensionControl = React.memo(
           ),
         ]
 
-        // replace the area name in the template and update the grid children so they
-        // reference the new area name, if they used to reference the previous one
-        const adjustedGridTemplate = renameAreaInTemplateAtIndex(
+        // replace the line name in the template and update the grid children so they
+        // reference the new line name, if they used to reference the previous one
+        const adjustedGridTemplate = renameLineInTemplateAtIndex(
           container,
           axis,
           index,
-          newAreaName,
+          newLineName,
         )
         const children = MetadataUtils.getChildrenUnordered(metadataRef.current, grid.elementPath)
         for (const child of children) {
@@ -575,9 +575,9 @@ function AxisDimensionControl({
 
   const title = React.useMemo(() => {
     if (isDynamic) {
-      return value.areaName ?? dynamicIndexTitle
+      return value.lineName ?? dynamicIndexTitle
     }
-    return value.areaName ?? indexFrom
+    return value.lineName ?? indexFrom
   }, [value, indexFrom, isDynamic, dynamicIndexTitle])
 
   const gridExpressionInputFocused = useGridExpressionInputFocused()
@@ -694,17 +694,17 @@ function removeTemplateValueAtIndex(
   }
 }
 
-function renameAreaInTemplateAtIndex(
+function renameLineInTemplateAtIndex(
   original: GridContainerProperties,
   axis: 'column' | 'row',
   index: number,
-  newAreaName: string | null,
+  newLineName: string | null,
 ): GridContainerProperties {
   function renameDimension(dimension: GridDimension, idx: number): GridDimension {
     return idx === index
       ? ({
           ...dimension,
-          areaName: dimension.type === 'REPEAT' ? null : newAreaName,
+          lineName: dimension.type === 'REPEAT' ? null : newLineName,
         } as GridDimension)
       : dimension
   }
@@ -734,8 +734,8 @@ function renameAreaInTemplateAtIndex(
 
 const reAlphanumericDashUnderscore = /[^0-9a-z\-_]+/gi
 
-function sanitizeAreaName(areaName: string): string {
-  return areaName.replace(reAlphanumericDashUnderscore, '-')
+function sanitizeLineName(lineName: string): string {
+  return lineName.replace(reAlphanumericDashUnderscore, '-')
 }
 
 function serializeValue(v: CSSNumber) {
diff --git a/editor/src/components/inspector/grid-helpers.ts b/editor/src/components/inspector/grid-helpers.ts
index 8e5f2b967156..ef8be9bff817 100644
--- a/editor/src/components/inspector/grid-helpers.ts
+++ b/editor/src/components/inspector/grid-helpers.ts
@@ -33,12 +33,12 @@ export function parseGridDimensionInput(
       currentValue != null && isGridCSSNumber(currentValue) ? currentValue.value.unit : null
     return gridCSSNumber(
       cssNumber(value.value, value.unit ?? maybeUnit),
-      currentValue?.areaName ?? null,
+      currentValue?.lineName ?? null,
     )
   } else if (isCSSKeyword(value)) {
-    return gridCSSKeyword(value, currentValue?.areaName ?? null)
+    return gridCSSKeyword(value, currentValue?.lineName ?? null)
   } else if (isEmptyInputValue(value)) {
-    return gridCSSKeyword(cssKeyword('auto'), currentValue?.areaName ?? null)
+    return gridCSSKeyword(cssKeyword('auto'), currentValue?.lineName ?? null)
   } else {
     return null
   }
diff --git a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
index 4550fb33fef7..6cfcc258cb5e 100644
--- a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
+++ b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
@@ -190,12 +190,12 @@ const DimensionsControls = React.memo(
             ? gridPositionValue(e.value)
             : cssKeyword(e.value)
 
-          const maybeAreaValue = maybeValueFromAreaName(
+          const maybeLineValue = maybeValueFromLineName(
             value,
             dimension === 'gridColumnStart' || dimension === 'width' ? columnLabels : rowLabels,
           )
-          if (maybeAreaValue != null) {
-            value = maybeAreaValue
+          if (maybeLineValue != null) {
+            value = maybeLineValue
           }
 
           let newValues = {
@@ -277,8 +277,8 @@ const DimensionsControls = React.memo(
               onSubmitValue={onSubmitPosition('gridColumnStart')}
               value={columnStartValue.value}
               valueAlias={columnStartValue.alias}
-              keywords={keywordsForPosition(columnLabels.map((l) => l.areaName))}
-              keywordTypeCheck={isValidGridPositionKeyword(columnLabels.map((l) => l.areaName))}
+              keywords={keywordsForPosition(columnLabels.map((l) => l.lineName))}
+              keywordTypeCheck={isValidGridPositionKeyword(columnLabels.map((l) => l.lineName))}
               labelInner={{
                 category: 'inspector-element',
                 type: 'gridColumn',
@@ -290,8 +290,8 @@ const DimensionsControls = React.memo(
               onSubmitValue={onSubmitPosition('gridRowStart')}
               value={rowStartValue.value}
               valueAlias={rowStartValue.alias}
-              keywords={keywordsForPosition(rowLabels.map((l) => l.areaName))}
-              keywordTypeCheck={isValidGridPositionKeyword(rowLabels.map((l) => l.areaName))}
+              keywords={keywordsForPosition(rowLabels.map((l) => l.lineName))}
+              keywordTypeCheck={isValidGridPositionKeyword(rowLabels.map((l) => l.lineName))}
               labelInner={{
                 category: 'inspector-element',
                 type: 'gridRow',
@@ -354,14 +354,14 @@ const BoundariesControls = React.memo(
             ? gridPositionValue(e.value)
             : cssKeyword(e.value)
 
-          const maybeAreaValue = maybeValueFromAreaName(
+          const maybeLineValue = maybeValueFromLineName(
             value,
             dimension === 'gridColumnStart' || dimension === 'gridColumnEnd'
               ? columnLabels
               : rowLabels,
           )
-          if (maybeAreaValue != null) {
-            value = maybeAreaValue
+          if (maybeLineValue != null) {
+            value = maybeLineValue
           }
 
           const newValues = {
@@ -418,8 +418,8 @@ const BoundariesControls = React.memo(
                 type: 'gridColumn-start',
                 color: 'on-highlight-secondary',
               }}
-              keywords={keywordsForPosition(columnLabels.map((l) => l.areaName))}
-              keywordTypeCheck={isValidGridPositionKeyword(columnLabels.map((l) => l.areaName))}
+              keywords={keywordsForPosition(columnLabels.map((l) => l.lineName))}
+              keywordTypeCheck={isValidGridPositionKeyword(columnLabels.map((l) => l.lineName))}
             />
             <NumberOrKeywordControl
               value={rowStartValue.value}
@@ -431,8 +431,8 @@ const BoundariesControls = React.memo(
                 type: 'gridRow-start',
                 color: 'on-highlight-secondary',
               }}
-              keywords={keywordsForPosition(rowLabels.map((l) => l.areaName))}
-              keywordTypeCheck={isValidGridPositionKeyword(rowLabels.map((l) => l.areaName))}
+              keywords={keywordsForPosition(rowLabels.map((l) => l.lineName))}
+              keywordTypeCheck={isValidGridPositionKeyword(rowLabels.map((l) => l.lineName))}
             />
           </UIGridRow>
         </UIGridRow>
@@ -449,8 +449,8 @@ const BoundariesControls = React.memo(
                 type: 'gridColumn-end',
                 color: 'on-highlight-secondary',
               }}
-              keywords={keywordsForPosition(columnLabels.map((l) => l.areaName))}
-              keywordTypeCheck={isValidGridPositionKeyword(columnLabels.map((l) => l.areaName))}
+              keywords={keywordsForPosition(columnLabels.map((l) => l.lineName))}
+              keywordTypeCheck={isValidGridPositionKeyword(columnLabels.map((l) => l.lineName))}
             />
             <NumberOrKeywordControl
               value={rowEndValue.value}
@@ -462,8 +462,8 @@ const BoundariesControls = React.memo(
                 type: 'gridRow-end',
                 color: 'on-highlight-secondary',
               }}
-              keywords={keywordsForPosition(rowLabels.map((l) => l.areaName))}
-              keywordTypeCheck={isValidGridPositionKeyword(rowLabels.map((l) => l.areaName))}
+              keywords={keywordsForPosition(rowLabels.map((l) => l.lineName))}
+              keywordTypeCheck={isValidGridPositionKeyword(rowLabels.map((l) => l.lineName))}
             />
           </UIGridRow>
         </UIGridRow>
@@ -496,10 +496,10 @@ function getLabelsFromTemplate(gridTemplate: GridContainerProperties) {
       return []
     }
     return mapDropNulls((d, index) => {
-      if (d.areaName == null) {
+      if (d.lineName == null) {
         return null
       }
-      return { areaName: d.areaName, position: index + 1 }
+      return { lineName: d.lineName, position: index + 1 }
     }, template.dimensions)
   }
   const columnLabels = getAxisLabels('gridTemplateColumns')
@@ -523,28 +523,28 @@ function keywordsForPosition(labels: string[]) {
   return items
 }
 
-function maybeValueFromAreaName(
+function maybeValueFromLineName(
   value: GridPosition,
-  labels: { areaName: string; position: number }[],
+  labels: { lineName: string; position: number }[],
 ): GridPositionValue | null {
   if (!isCSSKeyword(value)) {
     return null
   }
-  const areaMatch = labels.find((l) => l.areaName === value.value)
-  if (areaMatch != null) {
-    return gridPositionValue(areaMatch.position)
+  const lineMatch = labels.find((l) => l.lineName === value.value)
+  if (lineMatch != null) {
+    return gridPositionValue(lineMatch.position)
   }
   return null
 }
 
 function getValueWithAlias(
   position: GridPosition | null,
-  labels: { areaName: string; position: number }[],
+  labels: { lineName: string; position: number }[],
 ) {
   const value = getValue(position) ?? cssKeyword('auto')
   if (isCSSKeyword(value)) {
     return { value: value }
   }
-  const areaName = labels.find((l) => l.position === value.value)
-  return { value: value, alias: areaName?.areaName }
+  const lineName = labels.find((l) => l.position === value.value)
+  return { value: value, alias: lineName?.lineName }
 }
diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts
index 6e054876f9cf..f7b204760872 100644
--- a/editor/src/core/shared/element-template.ts
+++ b/editor/src/core/shared/element-template.ts
@@ -2667,7 +2667,7 @@ export function gridPositionValue(numericalPosition: number | null): GridPositio
 
 export const validGridPositionKeywords = ['auto']
 
-export type ValidGridPositionKeyword = string // using <string> because valid keywords are also area names we cannot know in advance
+export type ValidGridPositionKeyword = string // using <string> because valid keywords are also line names we cannot know in advance
 
 export type GridPosition = GridPositionValue | CSSKeyword<ValidGridPositionKeyword>
 
diff --git a/editor/src/uuiui/inputs/grid-expression-input.tsx b/editor/src/uuiui/inputs/grid-expression-input.tsx
index 6407f163b6d2..f86e841fd60f 100644
--- a/editor/src/uuiui/inputs/grid-expression-input.tsx
+++ b/editor/src/uuiui/inputs/grid-expression-input.tsx
@@ -83,7 +83,7 @@ export const GridExpressionInput = React.memo(
         if (maybeMinmax != null) {
           return onUpdateDimension({
             ...maybeMinmax,
-            areaName: value.areaName,
+            lineName: value.lineName,
           } as GridDimension)
         }
 

From 2bd05c014867db73630e2152c6ac719d96543d92 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 25 Oct 2024 13:51:39 +0200
Subject: [PATCH 174/272] Grid advanced modal: visible allowed values outside
 of shown options for justify/align dropdown (#6585)

**Problem:**

Acceptable values for the dropdowns in the grid advanced modal for
justify/align content should still be visible in the dropdown when set,
even if we don't show them in the full dropdown itself by default.

**Fix:**

1. Add the missing acceptable values to the type enums in `flex.ts`
2. Restrict which values we show in the dropdown to the ones we had so
far (we can tweak this as we go)
3. Add the ability to show an extra dropdown row at the top of the list
if its value is allowed for that dropdown and it's not found in the
available options



https://github.com/user-attachments/assets/9c22d25e-6ac1-4569-945d-e85d22e5fdb2



Fixes #6584
---
 .../components/inspector/common/css-utils.ts  |  9 ++++
 .../controls/advanced-grid-modal.tsx          | 22 +++++++--
 editor/src/uuiui/radix-components.tsx         | 49 ++++++++++++++++++-
 utopia-api/src/layout/flex.ts                 | 16 ++++++
 4 files changed, 91 insertions(+), 5 deletions(-)

diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index eb74150ed104..0e982adcfddb 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -4620,6 +4620,11 @@ const flexAlignmentsParser: Parser<FlexAlignment> = isOneOfTheseParser([
   FlexAlignment.Center,
   FlexAlignment.FlexEnd,
   FlexAlignment.Stretch,
+  FlexAlignment.Baseline,
+  FlexAlignment.FirstBaseline,
+  FlexAlignment.LastBaseline,
+  FlexAlignment.SafeCenter,
+  FlexAlignment.UnsafeCenter,
 ])
 
 const flexJustifyContentParser: Parser<FlexJustifyContent> = isOneOfTheseParser([
@@ -4629,6 +4634,10 @@ const flexJustifyContentParser: Parser<FlexJustifyContent> = isOneOfTheseParser(
   FlexJustifyContent.SpaceAround,
   FlexJustifyContent.SpaceBetween,
   FlexJustifyContent.SpaceEvenly,
+  FlexJustifyContent.Stretch,
+  FlexJustifyContent.Normal,
+  FlexJustifyContent.SafeCenter,
+  FlexJustifyContent.UnsafeCenter,
 ])
 
 export type CSSPosition = '-webkit-sticky' | 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'
diff --git a/editor/src/components/inspector/controls/advanced-grid-modal.tsx b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
index 463dd8ff574e..f42b93c157c9 100644
--- a/editor/src/components/inspector/controls/advanced-grid-modal.tsx
+++ b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
@@ -14,7 +14,7 @@ import {
   separatorRadixSelectOption,
 } from '../../../uuiui/radix-components'
 import { optionalMap } from '../../../core/shared/optional-utils'
-import { FlexAlignment } from 'utopia-api/core'
+import { AllFlexAlignments, AllFlexJustifyContents, FlexAlignment } from 'utopia-api/core'
 import { FlexJustifyContent } from 'utopia-api/core'
 import { GridAutoColsOrRowsControlInner } from '../grid-auto-cols-or-rows-control'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
@@ -82,13 +82,27 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
   const justifyOptions = [
     unsetSelectOption,
     separatorRadixSelectOption(),
-    ...Object.values(FlexJustifyContent).map(selectOption),
+    ...[
+      FlexJustifyContent.FlexStart,
+      FlexJustifyContent.Center,
+      FlexJustifyContent.FlexEnd,
+      FlexJustifyContent.SpaceAround,
+      FlexJustifyContent.SpaceBetween,
+      FlexJustifyContent.SpaceEvenly,
+      FlexJustifyContent.Stretch,
+    ].map(selectOption),
   ]
 
   const alignOptions = [
     unsetSelectOption,
     separatorRadixSelectOption(),
-    ...Object.values(FlexAlignment).map(selectOption),
+    ...[
+      FlexAlignment.Auto,
+      FlexAlignment.FlexStart,
+      FlexAlignment.Center,
+      FlexAlignment.FlexEnd,
+      FlexAlignment.Stretch,
+    ].map(selectOption),
   ]
 
   const onSubmitJustifyContent = React.useCallback(
@@ -200,6 +214,7 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
               zIndex: 1,
             }}
             onOpenChange={toggleJustifyContentDropdown}
+            allowedValues={AllFlexJustifyContents}
           />
         </UIGridRow>
         <UIGridRow
@@ -218,6 +233,7 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
               zIndex: 1,
             }}
             onOpenChange={toggleAlignContentDropdown}
+            allowedValues={AllFlexAlignments}
           />
         </UIGridRow>
         <UIGridRow padded variant='<-------------1fr------------->'>
diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx
index 189d596eac52..77feb64fe1db 100644
--- a/editor/src/uuiui/radix-components.tsx
+++ b/editor/src/uuiui/radix-components.tsx
@@ -12,6 +12,7 @@ import { when } from '../utils/react-conditionals'
 import { Icn, type IcnProps } from './icn'
 import { forceNotNull } from '../core/shared/optional-utils'
 import { usePropControlledStateV2 } from '../components/inspector/common/inspector-utils'
+import { assertNever } from '../core/shared/utils'
 
 // Keep this in sync with the radix-components-portal div in index.html.
 export const RadixComponentsPortalId = 'radix-components-portal'
@@ -256,6 +257,29 @@ export function separatorRadixSelectOption(): Separator {
 
 export type RadixSelectOption = RegularRadixSelectOption | Separator
 
+function equalRadixSelectOptions(
+  a: RadixSelectOption | null,
+  b: RadixSelectOption | null,
+): boolean {
+  if (a == null && b == null) {
+    return true
+  }
+  if (a == null || b == null) {
+    return false
+  }
+  switch (a.type) {
+    case 'REGULAR':
+      if (b.type !== 'REGULAR') {
+        return false
+      }
+      return a.value === b.value && a.label === b.label
+    case 'SEPARATOR':
+      return b.type === 'SEPARATOR'
+    default:
+      assertNever(a)
+  }
+}
+
 function optionLabelToString(
   option: RegularRadixSelectOption | null,
   isOpen: boolean,
@@ -280,6 +304,7 @@ export const RadixSelect = React.memo(
     onValueChange?: (value: string) => void
     contentClassName?: string
     onOpenChange?: (open: boolean) => void
+    allowedValues?: string[]
   }) => {
     const stopPropagation = React.useCallback((e: React.KeyboardEvent) => {
       e.stopPropagation()
@@ -296,7 +321,27 @@ export const RadixSelect = React.memo(
       [propsOnOpenChange],
     )
 
-    const valueLabel = optionLabelToString(props.value ?? null, isOpen, props.value?.value ?? null)
+    const valueLabel = React.useMemo(() => {
+      return optionLabelToString(props.value ?? null, isOpen, props.value?.value ?? null)
+    }, [props.value, isOpen])
+
+    const options = React.useMemo(() => {
+      let fullOptions = [...props.options]
+
+      if (
+        // the value is not null
+        props.value != null &&
+        // the value is allowed for this dropdown
+        props.allowedValues?.some((allowed) => allowed === props.value?.value) &&
+        // the options don't contain the value already
+        !fullOptions.some((opt) => equalRadixSelectOptions(opt, props.value))
+      ) {
+        // add the given option + separator at the top of the options
+        fullOptions.unshift(...[props.value, separatorDropdownMenuItem('unknown-dropdown-value')])
+      }
+
+      return fullOptions
+    }, [props.options, props.value, props.allowedValues])
 
     return (
       <Select.Root
@@ -355,7 +400,7 @@ export const RadixSelect = React.memo(
                 gap: 2,
               }}
             >
-              {props.options.map((option, index) => {
+              {options.map((option, index) => {
                 if (option.type === 'SEPARATOR') {
                   return (
                     <Select.Separator
diff --git a/utopia-api/src/layout/flex.ts b/utopia-api/src/layout/flex.ts
index 5e89bc423da2..4710a077965e 100644
--- a/utopia-api/src/layout/flex.ts
+++ b/utopia-api/src/layout/flex.ts
@@ -198,6 +198,11 @@ export enum FlexAlignment {
   Center = 'center',
   FlexEnd = 'flex-end',
   Stretch = 'stretch',
+  Baseline = 'baseline',
+  FirstBaseline = 'first baseline',
+  LastBaseline = 'last baseline',
+  SafeCenter = 'safe center',
+  UnsafeCenter = 'unsafe center',
 }
 
 export const AllFlexAlignments: Array<FlexAlignment> = [
@@ -206,6 +211,11 @@ export const AllFlexAlignments: Array<FlexAlignment> = [
   FlexAlignment.Center,
   FlexAlignment.FlexEnd,
   FlexAlignment.Stretch,
+  FlexAlignment.Baseline,
+  FlexAlignment.FirstBaseline,
+  FlexAlignment.LastBaseline,
+  FlexAlignment.SafeCenter,
+  FlexAlignment.UnsafeCenter,
 ]
 
 export enum FlexJustifyContent {
@@ -216,6 +226,9 @@ export enum FlexJustifyContent {
   SpaceBetween = 'space-between',
   SpaceEvenly = 'space-evenly',
   Stretch = 'stretch',
+  Normal = 'normal',
+  SafeCenter = 'safe center',
+  UnsafeCenter = 'unsafe center',
 }
 
 export const AllFlexJustifyContents: Array<FlexJustifyContent> = [
@@ -226,6 +239,9 @@ export const AllFlexJustifyContents: Array<FlexJustifyContent> = [
   FlexJustifyContent.SpaceBetween,
   FlexJustifyContent.SpaceEvenly,
   FlexJustifyContent.Stretch,
+  FlexJustifyContent.Normal,
+  FlexJustifyContent.SafeCenter,
+  FlexJustifyContent.UnsafeCenter,
 ]
 
 export enum FlexDirection {

From b7687ff0c396bec53f68feabeaa7b7ea3a5ab4db Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 25 Oct 2024 15:20:12 +0200
Subject: [PATCH 175/272] Grid resize: remove shorthand, serialize other
 longhand when not auto (#6581)

**Problem:**

If a grid is configured with the `gridTemplate` shorthand, resizing the
grid does not handle that correctly.

**Fix:**

This PR handles `gridTemplate` shorthands during template changes via
the canvas.
**An incremental PR will do the same for the inspector template
editing**.

For example, if a grid is configured as follows: `gridTemplate: 1fr 2fr
/ 3fr 4fr`, changing its first column to `3.5fr` will result in the
following style:
```
gridTemplateColumns: '3.5fr 4fr',
gridTemplateRows: '1fr 2fr'
```

If a grid has a shorthand with an axis being the default (a single
`auto` keyword), for example `gridTemplate: auto / 3fr 4fr`, the same
change as above will result in:
```
gridTemplateColumns: '3.5fr 4fr',
```

Fixes #6580
---
 .../strategies/grid-helpers.ts                |   9 +
 .../resize-grid-strategy.spec.browser2.tsx    | 388 +++++++++++++++++-
 .../strategies/resize-grid-strategy.ts        |  56 ++-
 .../src/components/inspector/flex-section.tsx |  11 +-
 4 files changed, 429 insertions(+), 35 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 8f5029506b21..079a12531a0c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -788,3 +788,12 @@ export function findOriginalGrid(
 
   return findOriginalGrid(metadata, parentPath)
 }
+
+// Returns whether the given dimensions are made of just one item, being a CSS keyword with value "auto".
+export function isJustAutoGridDimension(dimensions: GridDimension[]): boolean {
+  return (
+    dimensions.length === 1 &&
+    dimensions[0].type === 'KEYWORD' &&
+    dimensions[0].value.value === 'auto'
+  )
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
index f086926e2bc6..a8bc6730953f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
@@ -5,7 +5,12 @@ import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
 import { mouseDownAtPoint, mouseMoveToPoint, mouseUpAtPoint } from '../../event-helpers.test-utils'
 import { canvasPoint } from '../../../../core/shared/math-utils'
 
-const makeTestProject = (columns: string, rows: string) => `
+const makeTestProject = (params: {
+  columns: string | null
+  rows: string | null
+  shorthand: string | null
+  height?: number | string
+}) => `
 import * as React from 'react'
 import { Storyboard } from 'utopia-api'
 
@@ -21,10 +26,10 @@ export var storyboard = (
         display: 'grid',
         gap: 10,
         width: 600,
-        height: 600,
-        gridTemplateColumns: '${columns}',
-        gridTemplateRows: '${rows}',
-        height: 'max-content',
+        height: ${params.height ?? "'max-content'"},
+        ${params.columns != null ? `gridTemplateColumns: '${params.columns}',` : ''}
+        ${params.rows != null ? `gridTemplateRows: '${params.rows}',` : ''}
+        ${params.shorthand != null ? `gridTemplate: '${params.shorthand}',` : ''}
       }}
     >
       <div
@@ -132,7 +137,7 @@ export var storyboard = (
 describe('resize a grid', () => {
   it('update a fractionally sized column', async () => {
     const renderResult = await renderTestEditorWithCode(
-      makeTestProject('2.4fr 1fr 1fr', '99px 109px 90px'),
+      makeTestProject({ columns: '2.4fr 1fr 1fr', rows: '99px 109px 90px', shorthand: null }),
       'await-first-dom-report',
     )
     const target = EP.fromString(`sb/grid/row-1-column-2`)
@@ -171,10 +176,9 @@ export var storyboard = (
         display: 'grid',
         gap: 10,
         width: 600,
-        height: 600,
+        height: 'max-content',
         gridTemplateColumns: '2.4fr 1.8fr 1fr',
         gridTemplateRows: '99px 109px 90px',
-        height: 'max-content',
       }}
     >
       <div
@@ -287,10 +291,9 @@ export var storyboard = (
         display: 'grid',
         gap: 10,
         width: 600,
-        height: 600,
+        height: 'max-content',
         gridTemplateColumns: '2.4fr 1.8fr 1fr',
         gridTemplateRows: '99px 109px 90px',
-        height: 'max-content',
       }}
     >
       {[1, 2, 3].map((n) => {
@@ -310,7 +313,7 @@ export var storyboard = (
 
   it('update a pixel sized row', async () => {
     const renderResult = await renderTestEditorWithCode(
-      makeTestProject('2.4fr 1fr 1fr', '99px 109px 90px'),
+      makeTestProject({ columns: '2.4fr 1fr 1fr', rows: '99px 109px 90px', shorthand: null }),
       'await-first-dom-report',
     )
     const target = EP.fromString(`sb/grid/row-1-column-2`)
@@ -349,10 +352,9 @@ export var storyboard = (
         display: 'grid',
         gap: 10,
         width: 600,
-        height: 600,
+        height: 'max-content',
         gridTemplateColumns: '2.4fr 1fr 1fr',
         gridTemplateRows: '99px 129px 90px',
-        height: 'max-content',
       }}
     >
       <div
@@ -426,7 +428,7 @@ export var storyboard = (
 
   it('update a repeat (fr) sized column', async () => {
     const renderResult = await renderTestEditorWithCode(
-      makeTestProject('repeat(3, 1fr)', '99px 109px 90px'),
+      makeTestProject({ columns: 'repeat(3, 1fr)', rows: '99px 109px 90px', shorthand: null }),
       'await-first-dom-report',
     )
     const target = EP.fromString(`sb/grid/row-1-column-2`)
@@ -465,10 +467,247 @@ export var storyboard = (
         display: 'grid',
         gap: 10,
         width: 600,
-        height: 600,
+        height: 'max-content',
         gridTemplateColumns: 'repeat(3, 1.5fr)',
         gridTemplateRows: '99px 109px 90px',
+      }}
+    >
+      <div
+        data-uid='row-1-column-1'
+        data-testid='row-1-column-1'
+        style={{
+          backgroundColor: 'green',
+          gridColumnStart: 1,
+          gridColumnEnd: 1,
+          gridRowStart: 2,
+          gridRowEnd: 2,
+        }}
+      />
+      <div
+        data-uid='row-1-column-2'
+        data-testid='row-1-column-2'
+        style={{ backgroundColor: 'blue' }}
+      />
+      <div
+        data-uid='row-1-column-3'
+        data-testid='row-1-column-3'
+        style={{ backgroundColor: 'pink' }}
+      />
+      <div
+        data-uid='row-2-column-1'
+        data-testid='row-2-column-1'
+        style={{
+          backgroundColor: 'green',
+          gridColumnStart: 3,
+          gridColumnEnd: 4,
+          gridRowStart: 2,
+          gridRowEnd: 4,
+        }}
+      />
+      <div
+        data-uid='row-2-column-2'
+        data-testid='row-2-column-2'
+        style={{
+          backgroundColor: 'blue',
+          gridColumnStart: 2,
+          gridColumnEnd: 2,
+          gridRowStart: 2,
+          gridRowEnd: 2,
+        }}
+      />
+      <div
+        data-uid='row-2-column-3'
+        data-testid='row-2-column-3'
+        style={{ backgroundColor: 'pink' }}
+      />
+      <div
+        data-uid='row-3-column-1'
+        data-testid='row-3-column-1'
+        style={{ backgroundColor: 'green' }}
+      />
+      <div
+        data-uid='row-3-column-2'
+        data-testid='row-3-column-2'
+        style={{ backgroundColor: 'blue' }}
+      />
+      <div
+        data-uid='row-3-column-3'
+        data-testid='row-3-column-3'
+        style={{ backgroundColor: 'pink' }}
+      />
+    </div>
+  </Storyboard>
+)
+`)
+  })
+
+  describe('shorthand handling', () => {
+    it('removes the shorthand and adds the longhand for both the other axii', async () => {
+      const renderResult = await renderTestEditorWithCode(
+        makeTestProject({
+          shorthand: '99px 109px 90px / 2.4fr 1fr 1fr',
+          columns: null,
+          rows: null,
+        }),
+        'await-first-dom-report',
+      )
+      const target = EP.fromString(`sb/grid/row-1-column-2`)
+      await renderResult.dispatch(selectComponents([target], false), true)
+      await renderResult.getDispatchFollowUpActionsFinished()
+      const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
+      const resizeControl = renderResult.renderedDOM.getByTestId(`grid-column-handle-1`)
+      const resizeControlRect = resizeControl.getBoundingClientRect()
+      const startPoint = canvasPoint({
+        x: resizeControlRect.x + resizeControlRect.width / 2,
+        y: resizeControlRect.y + resizeControlRect.height / 2,
+      })
+      const endPoint = canvasPoint({
+        x: startPoint.x + 100,
+        y: startPoint.y,
+      })
+      await mouseMoveToPoint(resizeControl, startPoint)
+      await mouseDownAtPoint(resizeControl, startPoint)
+      await mouseMoveToPoint(canvasControlsLayer, endPoint)
+      await mouseUpAtPoint(canvasControlsLayer, endPoint)
+      await renderResult.getDispatchFollowUpActionsFinished()
+
+      expect(getPrintedUiJsCode(renderResult.getEditorState()))
+        .toEqual(`import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <div
+      data-uid='grid'
+      data-testid='grid'
+      style={{
+        position: 'absolute',
+        left: 25,
+        top: 305,
+        display: 'grid',
+        gap: 10,
+        width: 600,
         height: 'max-content',
+        gridTemplateColumns: '2.4fr 1.8fr 1fr',
+        gridTemplateRows: '99px 109px 90px',
+      }}
+    >
+      <div
+        data-uid='row-1-column-1'
+        data-testid='row-1-column-1'
+        style={{
+          backgroundColor: 'green',
+          gridColumnStart: 1,
+          gridColumnEnd: 1,
+          gridRowStart: 2,
+          gridRowEnd: 2,
+        }}
+      />
+      <div
+        data-uid='row-1-column-2'
+        data-testid='row-1-column-2'
+        style={{ backgroundColor: 'blue' }}
+      />
+      <div
+        data-uid='row-1-column-3'
+        data-testid='row-1-column-3'
+        style={{ backgroundColor: 'pink' }}
+      />
+      <div
+        data-uid='row-2-column-1'
+        data-testid='row-2-column-1'
+        style={{
+          backgroundColor: 'green',
+          gridColumnStart: 3,
+          gridColumnEnd: 4,
+          gridRowStart: 2,
+          gridRowEnd: 4,
+        }}
+      />
+      <div
+        data-uid='row-2-column-2'
+        data-testid='row-2-column-2'
+        style={{
+          backgroundColor: 'blue',
+          gridColumnStart: 2,
+          gridColumnEnd: 2,
+          gridRowStart: 2,
+          gridRowEnd: 2,
+        }}
+      />
+      <div
+        data-uid='row-2-column-3'
+        data-testid='row-2-column-3'
+        style={{ backgroundColor: 'pink' }}
+      />
+      <div
+        data-uid='row-3-column-1'
+        data-testid='row-3-column-1'
+        style={{ backgroundColor: 'green' }}
+      />
+      <div
+        data-uid='row-3-column-2'
+        data-testid='row-3-column-2'
+        style={{ backgroundColor: 'blue' }}
+      />
+      <div
+        data-uid='row-3-column-3'
+        data-testid='row-3-column-3'
+        style={{ backgroundColor: 'pink' }}
+      />
+    </div>
+  </Storyboard>
+)
+`)
+    })
+    it("removes the shorthand without adding the longhand if it's auto", async () => {
+      const renderResult = await renderTestEditorWithCode(
+        makeTestProject({
+          shorthand: 'auto / 2.4fr 1fr 1fr',
+          columns: null,
+          rows: null,
+          height: 600,
+        }),
+        'await-first-dom-report',
+      )
+      const target = EP.fromString(`sb/grid/row-1-column-2`)
+      await renderResult.dispatch(selectComponents([target], false), true)
+      await renderResult.getDispatchFollowUpActionsFinished()
+      const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
+      const resizeControl = renderResult.renderedDOM.getByTestId(`grid-column-handle-1`)
+      const resizeControlRect = resizeControl.getBoundingClientRect()
+      const startPoint = canvasPoint({
+        x: resizeControlRect.x + resizeControlRect.width / 2,
+        y: resizeControlRect.y + resizeControlRect.height / 2,
+      })
+      const endPoint = canvasPoint({
+        x: startPoint.x + 100,
+        y: startPoint.y,
+      })
+      await mouseMoveToPoint(resizeControl, startPoint)
+      await mouseDownAtPoint(resizeControl, startPoint)
+      await mouseMoveToPoint(canvasControlsLayer, endPoint)
+      await mouseUpAtPoint(canvasControlsLayer, endPoint)
+      await renderResult.getDispatchFollowUpActionsFinished()
+
+      expect(getPrintedUiJsCode(renderResult.getEditorState()))
+        .toEqual(`import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <div
+      data-uid='grid'
+      data-testid='grid'
+      style={{
+        position: 'absolute',
+        left: 25,
+        top: 305,
+        display: 'grid',
+        gap: 10,
+        width: 600,
+        height: 600,
+        gridTemplateColumns: '2.4fr 1.8fr 1fr',
       }}
     >
       <div
@@ -538,5 +777,124 @@ export var storyboard = (
   </Storyboard>
 )
 `)
+    })
+    it("does not add the other longhand if the shorthand is not defined and the other longhand it's auto", async () => {
+      const renderResult = await renderTestEditorWithCode(
+        makeTestProject({
+          shorthand: 'auto / 2.4fr 1fr 1fr',
+          columns: null,
+          rows: null,
+          height: 600,
+        }),
+        'await-first-dom-report',
+      )
+      const target = EP.fromString(`sb/grid/row-1-column-2`)
+      await renderResult.dispatch(selectComponents([target], false), true)
+      await renderResult.getDispatchFollowUpActionsFinished()
+      const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
+      const resizeControl = renderResult.renderedDOM.getByTestId(`grid-column-handle-1`)
+      const resizeControlRect = resizeControl.getBoundingClientRect()
+      const startPoint = canvasPoint({
+        x: resizeControlRect.x + resizeControlRect.width / 2,
+        y: resizeControlRect.y + resizeControlRect.height / 2,
+      })
+      const endPoint = canvasPoint({
+        x: startPoint.x + 100,
+        y: startPoint.y,
+      })
+      await mouseMoveToPoint(resizeControl, startPoint)
+      await mouseDownAtPoint(resizeControl, startPoint)
+      await mouseMoveToPoint(canvasControlsLayer, endPoint)
+      await mouseUpAtPoint(canvasControlsLayer, endPoint)
+      await renderResult.getDispatchFollowUpActionsFinished()
+
+      expect(getPrintedUiJsCode(renderResult.getEditorState()))
+        .toEqual(`import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <div
+      data-uid='grid'
+      data-testid='grid'
+      style={{
+        position: 'absolute',
+        left: 25,
+        top: 305,
+        display: 'grid',
+        gap: 10,
+        width: 600,
+        height: 600,
+        gridTemplateColumns: '2.4fr 1.8fr 1fr',
+      }}
+    >
+      <div
+        data-uid='row-1-column-1'
+        data-testid='row-1-column-1'
+        style={{
+          backgroundColor: 'green',
+          gridColumnStart: 1,
+          gridColumnEnd: 1,
+          gridRowStart: 2,
+          gridRowEnd: 2,
+        }}
+      />
+      <div
+        data-uid='row-1-column-2'
+        data-testid='row-1-column-2'
+        style={{ backgroundColor: 'blue' }}
+      />
+      <div
+        data-uid='row-1-column-3'
+        data-testid='row-1-column-3'
+        style={{ backgroundColor: 'pink' }}
+      />
+      <div
+        data-uid='row-2-column-1'
+        data-testid='row-2-column-1'
+        style={{
+          backgroundColor: 'green',
+          gridColumnStart: 3,
+          gridColumnEnd: 4,
+          gridRowStart: 2,
+          gridRowEnd: 4,
+        }}
+      />
+      <div
+        data-uid='row-2-column-2'
+        data-testid='row-2-column-2'
+        style={{
+          backgroundColor: 'blue',
+          gridColumnStart: 2,
+          gridColumnEnd: 2,
+          gridRowStart: 2,
+          gridRowEnd: 2,
+        }}
+      />
+      <div
+        data-uid='row-2-column-3'
+        data-testid='row-2-column-3'
+        style={{ backgroundColor: 'pink' }}
+      />
+      <div
+        data-uid='row-3-column-1'
+        data-testid='row-3-column-1'
+        style={{ backgroundColor: 'green' }}
+      />
+      <div
+        data-uid='row-3-column-2'
+        data-testid='row-3-column-2'
+        style={{ backgroundColor: 'blue' }}
+      />
+      <div
+        data-uid='row-3-column-3'
+        data-testid='row-3-column-3'
+        style={{ backgroundColor: 'pink' }}
+      />
+    </div>
+  </Storyboard>
+)
+`)
+    })
   })
 })
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index 2df2477034eb..e3242fdd3f97 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -7,7 +7,12 @@ import {
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
 import * as PP from '../../../../core/shared/property-path'
-import { setProperty } from '../../commands/set-property-command'
+import type { PropertyToUpdate } from '../../commands/set-property-command'
+import {
+  propertyToDelete,
+  propertyToSet,
+  updateBulkProperties,
+} from '../../commands/set-property-command'
 import {
   controlsForGridPlaceholders,
   GridRowColumnResizingControls,
@@ -30,17 +35,19 @@ import {
   printArrayGridDimensions,
 } from '../../../../components/inspector/common/css-utils'
 import { toFirst } from '../../../../core/shared/optics/optic-utilities'
-import type { Either } from '../../../../core/shared/either'
-import { foldEither, isLeft, isRight } from '../../../../core/shared/either'
-import { roundTo, roundToNearestWhole } from '../../../../core/shared/math-utils'
+import { isLeft } from '../../../../core/shared/either'
+import { roundToNearestWhole } from '../../../../core/shared/math-utils'
 import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
 import {
   expandGridDimensions,
   findOriginalGrid,
+  isJustAutoGridDimension,
   replaceGridTemplateDimensionAtIndex,
 } from './grid-helpers'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 import { CSSCursor } from '../../canvas-types'
+import type { CanvasCommand } from '../../commands/commands'
+import type { Axis } from '../../gap-utils'
 
 export const resizeGridStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -116,6 +123,12 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
           ? gridSpecialSizeMeasurements.containerGridProperties.gridTemplateColumns
           : gridSpecialSizeMeasurements.containerGridProperties.gridTemplateRows
 
+      const otherAxis: Axis = control.axis === 'column' ? 'row' : 'column'
+      const otherAxisValues =
+        otherAxis === 'column'
+          ? gridSpecialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateColumns
+          : gridSpecialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateRows
+
       if (
         calculatedValues == null ||
         calculatedValues.type !== 'DIMENSIONS' ||
@@ -186,16 +199,31 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
 
       const propertyValueAsString = printArrayGridDimensions(newDimensions)
 
-      const commands = [
-        setProperty(
-          'always',
-          originalGridPath,
-          PP.create(
-            'style',
-            control.axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows',
-          ),
-          propertyValueAsString,
-        ),
+      const propertyAxis = PP.create(
+        'style',
+        control.axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows',
+      )
+      let propertiesToUpdate: PropertyToUpdate[] = [
+        propertyToSet(propertyAxis, propertyValueAsString),
+        propertyToDelete(PP.create('style', 'gridTemplate')), // delete the shorthand in favor of the longhands
+      ]
+
+      if (
+        otherAxisValues?.type === 'DIMENSIONS' &&
+        otherAxisValues.dimensions.length > 0 &&
+        !isJustAutoGridDimension(otherAxisValues.dimensions)
+      ) {
+        // if the other axis has dimensions, serialize them in their longhand
+        const propertyOtherAxis = PP.create(
+          'style',
+          otherAxis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows',
+        )
+        const otherAxisValueAsString = printArrayGridDimensions(otherAxisValues.dimensions)
+        propertiesToUpdate.push(propertyToSet(propertyOtherAxis, otherAxisValueAsString))
+      }
+
+      let commands: CanvasCommand[] = [
+        updateBulkProperties('always', originalGridPath, propertiesToUpdate),
         setCursorCommand(control.axis === 'column' ? CSSCursor.ColResize : CSSCursor.RowResize),
       ]
 
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 34f9aaf4cf29..5b5410823dc0 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -66,7 +66,10 @@ import {
   type ElementInstanceMetadata,
   type GridElementProperties,
 } from '../../core/shared/element-template'
-import { setGridPropsCommands } from '../canvas/canvas-strategies/strategies/grid-helpers'
+import {
+  isJustAutoGridDimension,
+  setGridPropsCommands,
+} from '../canvas/canvas-strategies/strategies/grid-helpers'
 import { type CanvasCommand } from '../canvas/commands/commands'
 import type { DropdownMenuItem } from '../../uuiui/radix-components'
 import {
@@ -480,11 +483,7 @@ const TemplateDimensionControl = React.memo(
         template.dimensions.length === 0 ||
         (autoTemplate?.type === 'DIMENSIONS' &&
           autoTemplate.dimensions.length > 0 &&
-          !(
-            autoTemplate.dimensions.length === 1 &&
-            autoTemplate.dimensions[0].type === 'KEYWORD' &&
-            autoTemplate.dimensions[0].value.value === 'auto'
-          ))
+          !isJustAutoGridDimension(autoTemplate.dimensions))
       )
     }, [template, autoTemplate])
 

From 796759257b74342b27b31890f4f5a1d6d4d486ef Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Fri, 25 Oct 2024 15:34:14 +0200
Subject: [PATCH 176/272] Better Try Me button (#6587)

**Problem:**
The try me button opens the empty project.

**Fix:**
The try me button clones the hydrogen demo project.
---
 .github/workflows/pull-requests.yml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.github/workflows/pull-requests.yml b/.github/workflows/pull-requests.yml
index df6622984508..1faa6f9e049a 100644
--- a/.github/workflows/pull-requests.yml
+++ b/.github/workflows/pull-requests.yml
@@ -255,8 +255,7 @@ jobs:
           issue-number: ${{ github.event.pull_request.number }}
           edit-mode: replace
           body: |
-            ## [Try me](https://${{ secrets.STAGING_SERVER }}/p/?accessLevel=public&branch_name=${{ steps.extract_branch.outputs.branch }})
-
+            ## [Try me](https://${{ secrets.STAGING_SERVER }}/p/?accessLevel=public&clone=concrete-utopia/hydrogen-editions-24&branch_name=${{ steps.extract_branch.outputs.branch }})
   performance-test:
     name: Run Performance Tests
     if: false # TODO restore / revamp this! (Temporarily disabled)

From 741e69002d03d98f4e0aa3ce8041c03ff2301d49 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Fri, 25 Oct 2024 15:34:44 +0200
Subject: [PATCH 177/272] oops empty line

---
 .github/workflows/pull-requests.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/pull-requests.yml b/.github/workflows/pull-requests.yml
index 1faa6f9e049a..92d538ee67b5 100644
--- a/.github/workflows/pull-requests.yml
+++ b/.github/workflows/pull-requests.yml
@@ -256,6 +256,7 @@ jobs:
           edit-mode: replace
           body: |
             ## [Try me](https://${{ secrets.STAGING_SERVER }}/p/?accessLevel=public&clone=concrete-utopia/hydrogen-editions-24&branch_name=${{ steps.extract_branch.outputs.branch }})
+
   performance-test:
     name: Run Performance Tests
     if: false # TODO restore / revamp this! (Temporarily disabled)

From fc4cfb4c20bc6d6b84c5ce6cb42d788b5229d36e Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Fri, 25 Oct 2024 14:40:38 +0100
Subject: [PATCH 178/272] refactor(editor) Rectangle insertion now inserts a
 div. (#6579)

- `defaultRectangleElement` now creates a `div`.
- `INSERT_RECTANGLE_SHORTCUT` now doesn't include an import for
`utopia-api`.
- `UtopiaApiComponents` descriptor for a `Rectangle` now creates a `div`
instead.
---
 editor/src/components/editor/defaults.ts      |  3 +-
 .../components/editor/global-shortcuts.tsx    |  4 +-
 .../core/third-party/utopia-api-components.ts | 39 ++++++++++++++++++-
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/editor/src/components/editor/defaults.ts b/editor/src/components/editor/defaults.ts
index 1652011c6c3e..d3584072378b 100644
--- a/editor/src/components/editor/defaults.ts
+++ b/editor/src/components/editor/defaults.ts
@@ -98,11 +98,12 @@ export function defaultRectangleElementStyle(): JSExpression {
 
 export function defaultRectangleElement(uid: string): JSXElement {
   return jsxElement(
-    jsxElementName('Rectangle', []),
+    jsxElementName('div', []),
     uid,
     jsxAttributesFromMap({
       style: defaultRectangleElementStyle(),
       'data-uid': jsExpressionValue(uid, emptyComments),
+      'data-label': jsExpressionValue('Rectangle', emptyComments),
     }),
     [],
   )
diff --git a/editor/src/components/editor/global-shortcuts.tsx b/editor/src/components/editor/global-shortcuts.tsx
index ef19ed9c7287..d752adab41a5 100644
--- a/editor/src/components/editor/global-shortcuts.tsx
+++ b/editor/src/components/editor/global-shortcuts.tsx
@@ -653,9 +653,7 @@ export function handleKeyDown(
             EditorActions.enableInsertModeForJSXElement(
               defaultRectangleElement(newUID),
               newUID,
-              {
-                'utopia-api': importDetails(null, [importAlias('Rectangle')], null),
-              },
+              {},
               null,
             ),
             modifiers,
diff --git a/editor/src/core/third-party/utopia-api-components.ts b/editor/src/core/third-party/utopia-api-components.ts
index fb6cb8893f6e..43ea91c7d030 100644
--- a/editor/src/core/third-party/utopia-api-components.ts
+++ b/editor/src/core/third-party/utopia-api-components.ts
@@ -18,6 +18,43 @@ import {
   jsxElementWithoutUID,
 } from '../shared/element-template'
 
+const IntrinsicComponentDescriptor = (
+  name: string,
+  insertMenuLabel: string,
+  supportsChildren: boolean,
+  styleProp: () => JSExpression,
+): ComponentDescriptor => {
+  return {
+    properties: {
+      style: {
+        control: 'style-controls',
+      },
+    },
+    supportsChildren: supportsChildren,
+    preferredChildComponents: [],
+    variants: [
+      {
+        insertMenuLabel: insertMenuLabel,
+        importsToAdd: {},
+        elementToInsert: () =>
+          jsxElementWithoutUID(
+            name,
+            [
+              jsxAttributesEntry('style', styleProp(), emptyComments),
+              jsxAttributesEntry(
+                'data-label',
+                jsExpressionValue('Rectangle', emptyComments),
+                emptyComments,
+              ),
+            ],
+            [],
+          ),
+      },
+    ],
+    source: defaultComponentDescriptor(),
+    ...ComponentDescriptorDefaults,
+  }
+}
 const BasicUtopiaComponentDescriptor = (
   name: string,
   supportsChildren: boolean,
@@ -106,7 +143,7 @@ const BasicUtopiaSceneDescriptor = (
 
 export const UtopiaApiComponents: ComponentDescriptorsForFile = {
   Ellipse: BasicUtopiaComponentDescriptor('Ellipse', false, defaultElementStyle),
-  Rectangle: BasicUtopiaComponentDescriptor('Rectangle', false, defaultRectangleElementStyle),
+  Rectangle: IntrinsicComponentDescriptor('div', 'Rectangle', false, defaultRectangleElementStyle),
   View: BasicUtopiaComponentDescriptor('View', true, defaultElementStyle),
   FlexRow: BasicUtopiaComponentDescriptor('FlexRow', true, defaultFlexRowOrColStyle),
   FlexCol: BasicUtopiaComponentDescriptor('FlexCol', true, defaultFlexRowOrColStyle),

From 7f377c9846b2cca836b7df4c5ace3b41a2469156 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Fri, 25 Oct 2024 16:15:34 +0100
Subject: [PATCH 179/272] fix(canvas) Fixed handling of parent frames to get
 the right positioning. (#6586)

- Split `maybeAddContainLayout` into that and another function
`shouldAddContainLayout`.
- Corrected two tests which were inserting into the second flex child
and were also offset similar to how the grid items were.
- `getAbsoluteReparentPropertyChanges` now takes a parameter which
specifies if `contain: 'layout'` will be added to the container.
- `getMoveCommandsForSelectedElement` now has an additional fallback for
`elementParentBounds` when the closest non fragment parent provides
bounds for absolute children.
- `getLocalFrame` now has an optional parameter to specify the parent to
target, to allow for handling the lookups where the element has yet to
be reparented.
---
 .../strategies/absolute-reparent-strategy.tsx |  35 +++-
 .../absolute-resize-bounding-box-strategy.tsx |   2 +-
 .../draw-to-insert-strategy.spec.browser2.tsx | 172 +++++++++++++++++-
 ...lute-reparent-strategies.spec.browser2.tsx |   4 +-
 .../reparent-helpers/reparent-helpers.ts      |   4 +-
 .../reparent-property-changes.ts              |   8 +-
 .../reparent-property-strategies.ts           |   1 +
 .../shared-move-strategies-helpers.ts         |  42 ++++-
 editor/src/components/canvas/canvas-utils.ts  |   5 +-
 .../flex-gap-control.test-utils.tsx           |   1 +
 .../controls/select-mode/flex-gap-control.tsx |   2 +-
 .../convert-to-flex-strategy.ts               |   2 +-
 .../src/components/editor/actions/actions.tsx |   7 +-
 .../insert-as-absolute-strategy.tsx           |   1 +
 ...eparent-to-unwrap-as-absolute-strategy.tsx |   1 +
 .../components/inspector/inspector-common.ts  |   4 +-
 ...-updating-layout-section.spec.browser2.tsx |   1 +
 .../frame-updating-layout-section.tsx         |  24 ++-
 .../components/text-editor/text-handling.ts   |   2 +-
 editor/src/core/layout/layout-utils.ts        |   2 +-
 .../src/core/model/element-metadata-utils.ts  |  11 +-
 21 files changed, 297 insertions(+), 34 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx
index 504a642b1f0d..587de432e8c3 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx
@@ -37,6 +37,7 @@ import type { InteractionSession, UpdatedPathMap } from '../interaction-state'
 import { absoluteMoveStrategy } from './absolute-move-strategy'
 import { honoursPropsPosition, shouldKeepMovingDraggedGroupChildren } from './absolute-utils'
 import { replaceFragmentLikePathsWithTheirChildrenRecursive } from './fragment-like-helpers'
+import type { ShouldAddContainLayout } from './reparent-helpers/reparent-helpers'
 import { ifAllowedToReparent, isAllowedToReparent } from './reparent-helpers/reparent-helpers'
 import type { ForcePins } from './reparent-helpers/reparent-property-changes'
 import { getAbsoluteReparentPropertyChanges } from './reparent-helpers/reparent-property-changes'
@@ -184,6 +185,12 @@ export function applyAbsoluteReparent(
                 projectContents,
                 nodeModules,
                 'force-pins',
+                shouldAddContainLayout(
+                  canvasState.startingMetadata,
+                  canvasState.startingAllElementProps,
+                  canvasState.startingElementPathTree,
+                  newParent.intendedParentPath,
+                ),
               ),
             selectedElements,
           )
@@ -254,6 +261,7 @@ export function createAbsoluteReparentAndOffsetCommands(
   projectContents: ProjectContentTreeRoot,
   nodeModules: NodeModules,
   forcePins: ForcePins,
+  willContainLayoutBeAdded: ShouldAddContainLayout,
 ) {
   const reparentResult = getReparentOutcome(
     metadata,
@@ -271,12 +279,13 @@ export function createAbsoluteReparentAndOffsetCommands(
   if (reparentResult == null) {
     return null
   } else {
-    const offsetCommands = replaceFragmentLikePathsWithTheirChildrenRecursive(
+    const replacedPaths = replaceFragmentLikePathsWithTheirChildrenRecursive(
       metadata,
       elementProps,
       pathTree,
       [target],
-    ).flatMap((p) => {
+    )
+    const offsetCommands = replacedPaths.flatMap((p) => {
       return getAbsoluteReparentPropertyChanges(
         p,
         newParent.intendedParentPath,
@@ -284,6 +293,7 @@ export function createAbsoluteReparentAndOffsetCommands(
         metadata,
         projectContents,
         forcePins,
+        willContainLayoutBeAdded,
       )
     })
 
@@ -296,12 +306,12 @@ export function createAbsoluteReparentAndOffsetCommands(
   }
 }
 
-function maybeAddContainLayout(
+export function shouldAddContainLayout(
   metadata: ElementInstanceMetadataMap,
   allElementProps: AllElementProps,
   pathTrees: ElementPathTrees,
   path: ElementPath,
-): CanvasCommand[] {
+): ShouldAddContainLayout {
   const closestNonFragmentParent = MetadataUtils.getClosestNonFragmentParent(
     metadata,
     allElementProps,
@@ -310,14 +320,23 @@ function maybeAddContainLayout(
   )
 
   if (EP.isStoryboardPath(closestNonFragmentParent)) {
-    return []
+    return 'dont-add-contain-layout'
   }
 
   const parentProvidesBoundsForAbsoluteChildren =
     MetadataUtils.findElementByElementPath(metadata, closestNonFragmentParent)
       ?.specialSizeMeasurements.providesBoundsForAbsoluteChildren === true
 
-  return parentProvidesBoundsForAbsoluteChildren
-    ? []
-    : [setProperty('always', path, PP.create('style', 'contain'), 'layout')]
+  return parentProvidesBoundsForAbsoluteChildren ? 'dont-add-contain-layout' : 'add-contain-layout'
+}
+
+function maybeAddContainLayout(
+  metadata: ElementInstanceMetadataMap,
+  allElementProps: AllElementProps,
+  pathTrees: ElementPathTrees,
+  path: ElementPath,
+): CanvasCommand[] {
+  return shouldAddContainLayout(metadata, allElementProps, pathTrees, path) === 'add-contain-layout'
+    ? [setProperty('always', path, PP.create('style', 'contain'), 'layout')]
+    : []
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
index 8942da7ab335..0409ecb7a166 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
@@ -482,7 +482,7 @@ function getConstrainedSizes(
       constraints.right ||
       constraints.width
 
-    const localFrame = MetadataUtils.getLocalFrame(element.elementPath, jsxMetadata)
+    const localFrame = MetadataUtils.getLocalFrame(element.elementPath, jsxMetadata, null)
     if (
       isConstrained &&
       localFrame != null &&
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
index 9c26194be566..07f3ec449d2c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx
@@ -16,9 +16,15 @@ import {
 import { RightMenuTab } from '../../../editor/store/editor-state'
 import { FOR_TESTS_setNextGeneratedUid } from '../../../../core/model/element-template-utils.test-utils'
 import type { WindowPoint } from '../../../../core/shared/math-utils'
-import { windowPoint } from '../../../../core/shared/math-utils'
+import {
+  nullIfInfinity,
+  rectangleContainsRectangle,
+  windowPoint,
+} from '../../../../core/shared/math-utils'
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 import CanvasActions from '../../canvas-actions'
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import { forceNotNull } from '../../../../core/shared/optional-utils'
 
 function slightlyOffsetWindowPointBecauseVeryWeirdIssue(point: { x: number; y: number }) {
   // FIXME when running in headless chrome, the result of getBoundingClientRect will be slightly
@@ -201,6 +207,109 @@ export var storyboard = (
     </Scene>
   </Storyboard>
 )
+`
+
+    const projectWithGridContent = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 700,
+        height: 759,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          position: 'absolute',
+          left: 10,
+          top: 10,
+          width: 500,
+          height: 300,
+          display: 'grid',
+          gap: 2,
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr',
+          backgroundColor: '#9dc1ea',
+        }}
+        data-uid='grid'
+        data-testid='grid'
+      >
+        <div
+          style={{
+            backgroundColor: 'red',
+          }}
+          data-uid='grid-item-1'
+          data-testid='grid-item-1'
+        />
+        <div
+          style={{
+            backgroundColor: 'green',
+          }}
+          data-uid='grid-item-2'
+          data-testid='grid-item-2'
+        />
+        <div
+          style={{
+            backgroundColor: 'blue',
+          }}
+          data-uid='grid-item-3'
+          data-testid='grid-item-3'
+        />
+        <div
+          style={{
+            backgroundColor: 'red',
+          }}
+          data-uid='grid-item-4'
+          data-testid='grid-item-4'
+        />
+        <div
+          style={{
+            backgroundColor: 'green',
+          }}
+          data-uid='grid-item-5'
+          data-testid='grid-item-5'
+        />
+        <div
+          style={{
+            backgroundColor: 'blue',
+          }}
+          data-uid='grid-item-6'
+          data-testid='grid-item-6'
+        />
+        <div
+          style={{
+            backgroundColor: 'red',
+          }}
+          data-uid='grid-item-7'
+          data-testid='grid-item-7'
+        />
+        <div
+          style={{
+            backgroundColor: 'green',
+          }}
+          data-uid='grid-item-8'
+          data-testid='grid-item-8'
+        />
+        <div
+          style={{
+            backgroundColor: 'blue',
+          }}
+          data-uid='grid-item-9'
+          data-testid='grid-item-9'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
 `
 
     it('can click to insert into a grid', async () => {
@@ -377,5 +486,66 @@ export var storyboard = (
         width: '20px',
       })
     })
+
+    it('can draw to insert into an element in a grid', async () => {
+      const editor = await renderTestEditorWithCode(
+        projectWithGridContent,
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/grid-item-8')])
+
+      await pressKey('d')
+      ensureInInsertMode(editor)
+
+      const gridItem = editor.renderedDOM.getByTestId('grid-item-8')
+      const gridBB = gridItem.getBoundingClientRect()
+
+      const target: WindowPoint = windowPoint({
+        x: gridBB.x + 5,
+        y: gridBB.y + 5,
+      })
+
+      const canvasControlsLayer = editor.renderedDOM.getByTestId(CanvasControlsContainerID)
+
+      await mouseMoveToPoint(canvasControlsLayer, target)
+      await mouseDragFromPointToPoint(canvasControlsLayer, target, {
+        x: target.x + 40,
+        y: target.y + 60,
+      })
+      await editor.getDispatchFollowUpActionsFinished()
+
+      const child = gridItem.firstChild
+      if (child == null) {
+        throw new Error('Draw to insert should be able to insert an element')
+      }
+
+      const { position, top, left, width, height } = (child as HTMLElement).style
+
+      expect({ position, top, left, width, height }).toEqual({
+        position: 'absolute',
+        left: '6px',
+        top: '6px',
+        width: '40px',
+        height: '60px',
+      })
+
+      const gridItem8Metadata =
+        editor.getEditorState().editor.jsxMetadata['sb/scene/grid/grid-item-8']
+      const gridItem8GlobalFrame = forceNotNull(
+        'Item 8 should have a global frame.',
+        nullIfInfinity(gridItem8Metadata.globalFrame),
+      )
+      const gridItem8Children = MetadataUtils.getChildrenUnordered(
+        editor.getEditorState().editor.jsxMetadata,
+        EP.fromString('sb/scene/grid/grid-item-8'),
+      )
+      const gridItem8Child = forceNotNull('Could not find child.', gridItem8Children.at(0))
+      const gridItem8ChildGlobalFrame = forceNotNull(
+        'Child of item 8 should have a global frame.',
+        nullIfInfinity(gridItem8Child.globalFrame),
+      )
+      expect(rectangleContainsRectangle(gridItem8GlobalFrame, gridItem8ChildGlobalFrame)).toBe(true)
+    })
   })
 })
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/forced-absolute-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/forced-absolute-reparent-strategies.spec.browser2.tsx
index 7c9ec0953a84..a9712b9857f4 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/forced-absolute-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/forced-absolute-reparent-strategies.spec.browser2.tsx
@@ -281,7 +281,7 @@ describe('Fallback Absolute Reparent Strategies', () => {
         <div
           style={{
             position: 'absolute',
-            left: 100,
+            left: 0,
             top: 0,
             width: 100,
             height: 100,
@@ -511,7 +511,7 @@ describe('Fallback Absolute Reparent Strategies', () => {
         <div
           style={{
             position: 'absolute',
-            left: 100,
+            left: 0,
             top: 0,        
             width: 100,
             height: 100,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts
index c9600a2094ca..67dc8834143f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts
@@ -75,6 +75,8 @@ import type { ReparentTargetForPaste } from '../reparent-utils'
 import { cleanSteganoTextData } from '../../../../../core/shared/stegano-text'
 import { assertNever } from '../../../../../core/shared/utils'
 
+export type ShouldAddContainLayout = 'add-contain-layout' | 'dont-add-contain-layout'
+
 export function isAllowedToReparent(
   projectContents: ProjectContentTreeRoot,
   startingMetadata: ElementInstanceMetadataMap,
@@ -531,7 +533,7 @@ export function absolutePositionForReparent(
   }
 
   const localFrame = zeroRectIfNullOrInfinity(
-    MetadataUtils.getLocalFrame(targetParent, metadata.currentMetadata) ?? null,
+    MetadataUtils.getLocalFrame(targetParent, metadata.currentMetadata, null) ?? null,
   )
 
   // offset the element with the target parent's offset, since the target parent doesn't
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-changes.ts b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-changes.ts
index 307d87ad479b..f8053cd0a8f6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-changes.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-changes.ts
@@ -67,6 +67,7 @@ import {
   treatElementAsFragmentLike,
 } from '../fragment-like-helpers'
 import type { OldPathToNewPathMapping } from '../../post-action-options/post-action-paste'
+import type { ShouldAddContainLayout } from './reparent-helpers'
 
 const propertiesToRemove: Array<PropertyPath> = [
   PP.create('style', 'left'),
@@ -90,6 +91,7 @@ export function getAbsoluteReparentPropertyChanges(
   newParentStartingMetadata: ElementInstanceMetadataMap,
   projectContents: ProjectContentTreeRoot,
   forcePins: ForcePins,
+  willContainLayoutBeAdded: ShouldAddContainLayout,
 ): Array<AdjustCssLengthProperties | ConvertCssPercentToPx> {
   const element: JSXElement | null = getJSXElementFromProjectContents(target, projectContents)
 
@@ -108,7 +110,10 @@ export function getAbsoluteReparentPropertyChanges(
 
   const currentParentContentBox =
     MetadataUtils.getGlobalContentBoxForChildren(originalParentInstance)
-  const newParentContentBox = MetadataUtils.getGlobalContentBoxForChildren(newParentInstance)
+  const newParentContentBox =
+    willContainLayoutBeAdded === 'add-contain-layout'
+      ? nullIfInfinity(newParentInstance.globalFrame)
+      : MetadataUtils.getGlobalContentBoxForChildren(newParentInstance)
 
   if (currentParentContentBox == null || newParentContentBox == null) {
     return []
@@ -349,6 +354,7 @@ export function getReparentPropertyChanges(
         currentMetadata,
         projectContents,
         'force-pins',
+        'dont-add-contain-layout',
       )
 
       const strategyCommands = runReparentPropertyStrategies([
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-strategies.ts b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-strategies.ts
index 39c06c04f062..526cb7d73a83 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-strategies.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-strategies.ts
@@ -313,6 +313,7 @@ export const convertFragmentLikeChildrenToVisualSize =
           metadata.currentMetadata,
           projectContents,
           'force-pins',
+          'dont-add-contain-layout',
         )
       } else {
         const directions = singleAxisAutoLayoutContainerDirections(
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts
index 4f93b1e1f635..7ec32d192246 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts
@@ -31,6 +31,7 @@ import {
 } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 
+import type { AllElementProps } from '../../../editor/store/editor-state'
 import { getJSXElementFromProjectContents } from '../../../editor/store/editor-state'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
 import { determineConstrainedDragAxis } from '../../canvas-controls-frame'
@@ -78,6 +79,7 @@ import {
 } from '../../commands/set-css-length-command'
 import type { ActiveFrame, ActiveFrameAction } from '../../commands/set-active-frames-command'
 import { activeFrameTargetRect, setActiveFrames } from '../../commands/set-active-frames-command'
+import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
 
 export interface MoveCommandsOptions {
   ignoreLocalFrame?: boolean
@@ -227,6 +229,8 @@ function getAppropriateLocalFrame(
 export function getDirectMoveCommandsForSelectedElement(
   projectContents: ProjectContentTreeRoot,
   startingMetadata: ElementInstanceMetadataMap,
+  startingAllElementProps: AllElementProps,
+  startingElementPathTree: ElementPathTrees,
   selectedElement: ElementPath,
   mappedPath: ElementPath,
   leftOrTop: 'left' | 'top',
@@ -246,6 +250,8 @@ export function getDirectMoveCommandsForSelectedElement(
   return getMoveCommandsForSelectedElement(
     projectContents,
     startingMetadata,
+    startingAllElementProps,
+    startingElementPathTree,
     selectedElement,
     mappedPath,
     drag,
@@ -255,6 +261,8 @@ export function getDirectMoveCommandsForSelectedElement(
 export function getMoveCommandsForSelectedElement(
   projectContents: ProjectContentTreeRoot,
   startingMetadata: ElementInstanceMetadataMap,
+  startingAllElementProps: AllElementProps,
+  startingElementPathTree: ElementPathTrees,
   selectedElement: ElementPath,
   mappedPath: ElementPath,
   drag: CanvasVector,
@@ -273,14 +281,34 @@ export function getMoveCommandsForSelectedElement(
     selectedElement,
   )
 
+  const closestNonFragmentParent = MetadataUtils.getClosestNonFragmentParent(
+    startingMetadata,
+    startingAllElementProps,
+    startingElementPathTree,
+    EP.parentPath(mappedPath),
+  )
+  const closestNonFragmentParentMetadata = MetadataUtils.findElementByElementPath(
+    startingMetadata,
+    closestNonFragmentParent,
+  )
+  const providesBoundsForAbsoluteChildren =
+    closestNonFragmentParentMetadata?.specialSizeMeasurements.providesBoundsForAbsoluteChildren ??
+    false
+
   const elementParentBounds =
-    elementMetadata?.specialSizeMeasurements.coordinateSystemBounds ?? null
+    elementMetadata?.specialSizeMeasurements.coordinateSystemBounds ??
+    (providesBoundsForAbsoluteChildren
+      ? nullIfInfinity(closestNonFragmentParentMetadata?.globalFrame)
+      : null) ??
+    null
 
   const globalFrame = nullIfInfinity(
     MetadataUtils.getFrameInCanvasCoords(selectedElement, startingMetadata),
   )
 
-  const localFrame = nullIfInfinity(MetadataUtils.getLocalFrame(selectedElement, startingMetadata))
+  const localFrame = nullIfInfinity(
+    MetadataUtils.getLocalFrame(selectedElement, startingMetadata, EP.parentPath(mappedPath)),
+  )
 
   if (element == null) {
     return { commands: [], intendedBounds: [] }
@@ -330,6 +358,8 @@ export function getInteractionMoveCommandsForSelectedElement(
   return getMoveCommandsForSelectedElement(
     canvasState.projectContents,
     canvasState.startingMetadata,
+    canvasState.startingAllElementProps,
+    canvasState.startingElementPathTree,
     selectedElement,
     mappedPath,
     drag,
@@ -339,6 +369,8 @@ export function getInteractionMoveCommandsForSelectedElement(
 
 export function moveInspectorStrategy(
   metadata: ElementInstanceMetadataMap,
+  allElementProps: AllElementProps,
+  elementPathTree: ElementPathTrees,
   selectedElementPaths: ElementPath[],
   projectContents: ProjectContentTreeRoot,
   movement: CanvasVector,
@@ -352,6 +384,8 @@ export function moveInspectorStrategy(
         const moveCommandsResult = getMoveCommandsForSelectedElement(
           projectContents,
           metadata,
+          allElementProps,
+          elementPathTree,
           selectedPath,
           selectedPath,
           movement,
@@ -368,6 +402,8 @@ export function moveInspectorStrategy(
 
 export function directMoveInspectorStrategy(
   metadata: ElementInstanceMetadataMap,
+  allElementProps: AllElementProps,
+  elementPathTree: ElementPathTrees,
   selectedElementPaths: ElementPath[],
   projectContents: ProjectContentTreeRoot,
   leftOrTop: 'left' | 'top',
@@ -382,6 +418,8 @@ export function directMoveInspectorStrategy(
         const moveCommandsResult = getDirectMoveCommandsForSelectedElement(
           projectContents,
           metadata,
+          allElementProps,
+          elementPathTree,
           selectedPath,
           selectedPath,
           leftOrTop,
diff --git a/editor/src/components/canvas/canvas-utils.ts b/editor/src/components/canvas/canvas-utils.ts
index a40fa5ee34b2..2bfd96433fdc 100644
--- a/editor/src/components/canvas/canvas-utils.ts
+++ b/editor/src/components/canvas/canvas-utils.ts
@@ -356,6 +356,7 @@ export function updateFramesOfScenesAndComponents(
             const localFrame = MetadataUtils.getLocalFrame(
               frameAndTarget.target,
               workingEditorState.jsxMetadata,
+              null,
             )
             const valueFromDOM = getObservableValueForLayoutProp(
               elementMetadata,
@@ -439,7 +440,7 @@ export function updateFramesOfScenesAndComponents(
               frameAndTarget.frame,
             )
             const currentLocalFrame = nullIfInfinity(
-              MetadataUtils.getLocalFrame(target, workingEditorState.jsxMetadata),
+              MetadataUtils.getLocalFrame(target, workingEditorState.jsxMetadata, null),
             )
             const currentFullFrame = optionalMap(Frame.getFullFrame, currentLocalFrame)
             const fullFrame = Frame.getFullFrame(newLocalFrame)
@@ -935,7 +936,7 @@ export function collectGuidelines(
       }
 
       const instance = MetadataUtils.findElementByElementPath(metadata, selectedView)
-      const localFrame = MetadataUtils.getLocalFrame(selectedView, metadata)
+      const localFrame = MetadataUtils.getLocalFrame(selectedView, metadata, null)
       if (
         instance != null &&
         MetadataUtils.isImg(instance) &&
diff --git a/editor/src/components/canvas/controls/select-mode/flex-gap-control.test-utils.tsx b/editor/src/components/canvas/controls/select-mode/flex-gap-control.test-utils.tsx
index a17811afdd54..a5d6243d21ae 100644
--- a/editor/src/components/canvas/controls/select-mode/flex-gap-control.test-utils.tsx
+++ b/editor/src/components/canvas/controls/select-mode/flex-gap-control.test-utils.tsx
@@ -38,6 +38,7 @@ export async function checkFlexGapHandlesPositionedCorrectly(
     const localFrame = MetadataUtils.getLocalFrame(
       selectedElement.elementPath,
       editorState.jsxMetadata,
+      null,
     )
     const selectedElementFrame = zeroRectIfNullOrInfinity(localFrame)
     // If this is a flex element and it has a gap specified.
diff --git a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
index 950974fdf078..f210ec1e0621 100644
--- a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
@@ -178,7 +178,7 @@ export const FlexGapControl = controlForStrategyMemoized<FlexGapControlProps>((p
 
     const bounds = boundingRectangleArray(
       mapDropNulls((c) => {
-        const localFrame = MetadataUtils.getLocalFrame(c.elementPath, metadata)
+        const localFrame = MetadataUtils.getLocalFrame(c.elementPath, metadata, null)
         return localFrame != null && isFiniteRectangle(localFrame) ? localFrame : null
       }, children),
     )
diff --git a/editor/src/components/common/shared-strategies/convert-to-flex-strategy.ts b/editor/src/components/common/shared-strategies/convert-to-flex-strategy.ts
index 812fd1f10dc7..f1963d1ee0c4 100644
--- a/editor/src/components/common/shared-strategies/convert-to-flex-strategy.ts
+++ b/editor/src/components/common/shared-strategies/convert-to-flex-strategy.ts
@@ -174,7 +174,7 @@ function convertThreeElementGroupRow(
     ).map((element) => {
       return {
         ...element,
-        localFrame: MetadataUtils.getLocalFrame(element.elementPath, metadata),
+        localFrame: MetadataUtils.getLocalFrame(element.elementPath, metadata, null),
       }
     })
     if (childrenMetadata.length === 3) {
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index 05968e0c0bbf..9f5793794639 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -1129,7 +1129,7 @@ function deleteElements(
         if (metadata == null || isLeft(metadata.element)) {
           return null
         }
-        const frame = MetadataUtils.getLocalFrame(path, editor.jsxMetadata)
+        const frame = MetadataUtils.getLocalFrame(path, editor.jsxMetadata, null)
         if (frame == null || !isFiniteRectangle(frame)) {
           return null
         }
@@ -3316,7 +3316,7 @@ export const UPDATE_FNS = {
   },
   RESET_PINS: (action: ResetPins, editor: EditorModel): EditorModel => {
     const target = action.target
-    const frame = MetadataUtils.getLocalFrame(target, editor.jsxMetadata)
+    const frame = MetadataUtils.getLocalFrame(target, editor.jsxMetadata, null)
 
     if (frame == null || isInfinityRectangle(frame)) {
       return editor
@@ -3344,7 +3344,7 @@ export const UPDATE_FNS = {
     }
   },
   UPDATE_FRAME_DIMENSIONS: (action: UpdateFrameDimensions, editor: EditorModel): EditorModel => {
-    const initialFrame = MetadataUtils.getLocalFrame(action.element, editor.jsxMetadata)
+    const initialFrame = MetadataUtils.getLocalFrame(action.element, editor.jsxMetadata, null)
 
     if (initialFrame == null || isInfinityRectangle(initialFrame)) {
       return editor
@@ -5516,6 +5516,7 @@ export const UPDATE_FNS = {
         const localFrame = MetadataUtils.getLocalFrame(
           action.insertionPath.intendedParentPath,
           editor.jsxMetadata,
+          null,
         )
         if (group != null && localFrame != null) {
           switch (element.type) {
diff --git a/editor/src/components/editor/one-shot-insertion-strategies/insert-as-absolute-strategy.tsx b/editor/src/components/editor/one-shot-insertion-strategies/insert-as-absolute-strategy.tsx
index db58c7c4a590..4358eeae2143 100644
--- a/editor/src/components/editor/one-shot-insertion-strategies/insert-as-absolute-strategy.tsx
+++ b/editor/src/components/editor/one-shot-insertion-strategies/insert-as-absolute-strategy.tsx
@@ -72,6 +72,7 @@ export const insertAsAbsoluteStrategy = (
               metadata,
               state.projectContents,
               'force-pins',
+              'dont-add-contain-layout',
             ),
             setProperty('always', result.newPath, PP.create('style', 'position'), 'absolute'),
           ],
diff --git a/editor/src/components/editor/one-shot-unwrap-strategies/reparent-to-unwrap-as-absolute-strategy.tsx b/editor/src/components/editor/one-shot-unwrap-strategies/reparent-to-unwrap-as-absolute-strategy.tsx
index f6fa75be2874..1734b52a4b1d 100644
--- a/editor/src/components/editor/one-shot-unwrap-strategies/reparent-to-unwrap-as-absolute-strategy.tsx
+++ b/editor/src/components/editor/one-shot-unwrap-strategies/reparent-to-unwrap-as-absolute-strategy.tsx
@@ -48,6 +48,7 @@ export const reparentToUnwrapAsAbsoluteStrategy = (
       projectContents,
       nodeModules,
       'do-not-force-pins',
+      'dont-add-contain-layout',
     )
 
     if (result == null) {
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index decc614de98c..e06101e7d485 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -1245,7 +1245,7 @@ export function setParentToFixedIfHugCommands(
     return []
   }
 
-  const globalFrame = MetadataUtils.getLocalFrame(parentPath, metadata)
+  const globalFrame = MetadataUtils.getLocalFrame(parentPath, metadata, null)
   if (globalFrame == null || isInfinityRectangle(globalFrame)) {
     return []
   }
@@ -1458,7 +1458,7 @@ export function getConvertIndividualElementToAbsoluteCommandsFromMetadata(
   jsxMetadata: ElementInstanceMetadataMap,
   elementPathTree: ElementPathTrees,
 ): Array<CanvasCommand> {
-  const localFrame = MetadataUtils.getLocalFrame(target, jsxMetadata)
+  const localFrame = MetadataUtils.getLocalFrame(target, jsxMetadata, null)
   if (localFrame == null || isInfinityRectangle(localFrame)) {
     return []
   }
diff --git a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.spec.browser2.tsx b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.spec.browser2.tsx
index 3321e3df30c6..4ae0d9813c11 100644
--- a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.spec.browser2.tsx
+++ b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.spec.browser2.tsx
@@ -142,6 +142,7 @@ describe('Frame updating layout section', () => {
         const actualLocalFrame = MetadataUtils.getLocalFrame(
           metadataForElement.elementPath,
           metadataMap,
+          null,
         )
         expect(actualLocalFrame).toEqual(expectedFrame)
       }
diff --git a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
index 92d1aaa6f306..d5187fa60c8e 100644
--- a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
+++ b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
@@ -36,7 +36,12 @@ import {
 import { InspectorContextMenuWrapper } from '../../../../context-menu-wrapper'
 import { useDispatch } from '../../../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../../../editor/store/store-hook'
-import { metadataSelector, selectedViewsSelector } from '../../../../inspector/inpector-selectors'
+import {
+  allElementPropsSelector,
+  metadataSelector,
+  pathTreesSelector,
+  selectedViewsSelector,
+} from '../../../../inspector/inpector-selectors'
 import { unsetPropertyMenuItem } from '../../../common/context-menu-items'
 import {
   cssNumber,
@@ -93,6 +98,8 @@ interface LTWHPixelValues {
 export const FrameUpdatingLayoutSection = React.memo(() => {
   const dispatch = useDispatch()
   const metadataRef = useRefEditorState(metadataSelector)
+  const allElementPropsRef = useRefEditorState(allElementPropsSelector)
+  const elementPathTreesRef = useRefEditorState(pathTreesSelector)
   const selectedViewsRef = useRefEditorState(selectedViewsSelector)
   const projectContentsRef = useRefEditorState((store) => store.editor.projectContents)
   const originalGlobalFrame: CanvasRectangle = useEditorState(
@@ -182,6 +189,7 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
         const maybeInfinityLocalFrame = MetadataUtils.getLocalFrame(
           selectedView,
           store.editor.jsxMetadata,
+          null,
         )
         if (maybeInfinityLocalFrame == null || isInfinityRectangle(maybeInfinityLocalFrame)) {
           result.left.push(0)
@@ -217,6 +225,8 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
               [
                 moveInspectorStrategy(
                   metadataRef.current,
+                  allElementPropsRef.current,
+                  elementPathTreesRef.current,
                   selectedViewsRef.current,
                   projectContentsRef.current,
                   frameUpdate.edgeMovement,
@@ -252,6 +262,8 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
               [
                 directMoveInspectorStrategy(
                   metadataRef.current,
+                  allElementPropsRef.current,
+                  elementPathTreesRef.current,
                   selectedViewsRef.current,
                   projectContentsRef.current,
                   leftOrTop,
@@ -282,7 +294,15 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
           assertNever(frameUpdate)
       }
     },
-    [dispatch, metadataRef, originalGlobalFrame, projectContentsRef, selectedViewsRef],
+    [
+      allElementPropsRef,
+      dispatch,
+      elementPathTreesRef,
+      metadataRef,
+      originalGlobalFrame,
+      projectContentsRef,
+      selectedViewsRef,
+    ],
   )
 
   const disableXYControls = React.useMemo(() => {
diff --git a/editor/src/components/text-editor/text-handling.ts b/editor/src/components/text-editor/text-handling.ts
index 45797293ed43..bf953188a747 100644
--- a/editor/src/components/text-editor/text-handling.ts
+++ b/editor/src/components/text-editor/text-handling.ts
@@ -280,7 +280,7 @@ export function getLocalRectangleWithFixedWidthHandlingText(
   pathTrees: ElementPathTrees,
   elementPath: ElementPath,
 ): MaybeInfinityLocalRectangle | null {
-  const localFrame = MetadataUtils.getLocalFrame(elementPath, metadata)
+  const localFrame = MetadataUtils.getLocalFrame(elementPath, metadata, null)
 
   if (
     localFrame == null ||
diff --git a/editor/src/core/layout/layout-utils.ts b/editor/src/core/layout/layout-utils.ts
index 940ce6a8e875..f3730d112d5e 100644
--- a/editor/src/core/layout/layout-utils.ts
+++ b/editor/src/core/layout/layout-utils.ts
@@ -148,7 +148,7 @@ export function switchPinnedChildToFlex(
   newParentMainAxis: 'horizontal' | 'vertical' | null,
   propertyTarget: ReadonlyArray<string>,
 ): SwitchLayoutTypeResult {
-  const currentFrame = MetadataUtils.getLocalFrame(target, targetOriginalContextMetadata)
+  const currentFrame = MetadataUtils.getLocalFrame(target, targetOriginalContextMetadata, null)
   const newParent = findJSXElementAtPath(newParentPath, components)
   const element = findJSXElementAtPath(target, components)
 
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index f5f4fc0aca1f..0c5ece97bed1 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -1342,7 +1342,7 @@ export const MetadataUtils = {
     Utils.fastForEach(targets, (target) => {
       const instance = MetadataUtils.findElementByElementPath(metadata, target)
       if (instance != null && this.isImg(instance)) {
-        const componentFrame = MetadataUtils.getLocalFrame(target, metadata)
+        const componentFrame = MetadataUtils.getLocalFrame(target, metadata, null)
         if (componentFrame != null && isFiniteRectangle(componentFrame)) {
           const imageSize = getImageSize(allElementProps, instance)
           const widthMultiplier = imageSize.width / componentFrame.width
@@ -1535,6 +1535,7 @@ export const MetadataUtils = {
   getLocalFrame(
     path: ElementPath,
     metadata: ElementInstanceMetadataMap,
+    parentToTarget: ElementPath | null,
   ): MaybeInfinityLocalRectangle | null {
     function getNonRootParent(parentOf: ElementPath): ElementPath {
       // If the target is the root element of an instance (`a/b/c:root`), then we want to instead
@@ -1553,7 +1554,7 @@ export const MetadataUtils = {
     }
 
     const targetGlobalFrame = MetadataUtils.getFrameInCanvasCoords(path, metadata)
-    const parentPath = getNonRootParent(path)
+    const parentPath = parentToTarget ?? getNonRootParent(path)
     const parentGlobalFrame = MetadataUtils.getFrameInCanvasCoords(parentPath, metadata)
     if (targetGlobalFrame == null || parentGlobalFrame == null) {
       return null
@@ -1619,7 +1620,7 @@ export const MetadataUtils = {
     return aabb
   },
   getFrameOrZeroRect(path: ElementPath, metadata: ElementInstanceMetadataMap): LocalRectangle {
-    const frame = MetadataUtils.getLocalFrame(path, metadata)
+    const frame = MetadataUtils.getLocalFrame(path, metadata, null)
     return zeroRectIfNullOrInfinity(frame)
   },
   getFrameRelativeTo(
@@ -1632,7 +1633,7 @@ export const MetadataUtils = {
     } else {
       const paths = EP.allPathsForLastPart(parent)
       const parentFrames: Array<MaybeInfinityLocalRectangle> = Utils.stripNulls(
-        paths.map((path) => this.getLocalFrame(path, metadata)),
+        paths.map((path) => this.getLocalFrame(path, metadata, null)),
       )
       return parentFrames.reduce<LocalRectangle>((working, next) => {
         if (isInfinityRectangle(next)) {
@@ -2846,7 +2847,7 @@ export function propertyHasSimpleValue(
 }
 
 // This function creates a fake metadata for the given element
-// Useful when metadata is needed before the real on is created.
+// Useful when metadata is needed before the real one is created.
 export function createFakeMetadataForElement(
   path: ElementPath,
   element: JSXElementChild,

From 45649c6a73f3b9dac826d60099317a11803baa03 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Fri, 25 Oct 2024 16:16:05 +0100
Subject: [PATCH 180/272] fix(canvas) Increment/Decrement Fractional Grid
 Tracks (#6588)

- Added `isFR` utility function.
- Modified `GridExpressionInput.onKeyDown` to handle arrow up and down
but only for fractional values.
---
 .../components/inspector/common/css-utils.ts  |  4 +
 .../uuiui/inputs/grid-expression-input.tsx    | 75 +++++++++++++------
 2 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index 0e982adcfddb..a275e06c50ec 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -574,6 +574,10 @@ const CSSNumberUnits: Array<CSSNumberUnit> = [
   '%',
 ]
 
+export function isFR(unit: CSSNumberUnit): unit is 'fr' {
+  return unit === 'fr'
+}
+
 export interface CSSNumber {
   value: number
   unit: CSSNumberUnit | null
diff --git a/editor/src/uuiui/inputs/grid-expression-input.tsx b/editor/src/uuiui/inputs/grid-expression-input.tsx
index f86e841fd60f..12a8cbaddcb1 100644
--- a/editor/src/uuiui/inputs/grid-expression-input.tsx
+++ b/editor/src/uuiui/inputs/grid-expression-input.tsx
@@ -3,9 +3,11 @@
 import { jsx } from '@emotion/react'
 import type { CSSProperties } from 'react'
 import React from 'react'
+import type { CSSNumberUnit } from '../../components/inspector/common/css-utils'
 import {
   cssKeyword,
   gridDimensionsAreEqual,
+  isFR,
   isGridCSSNumber,
   isValidGridDimensionKeyword,
   parseCSSNumber,
@@ -28,6 +30,9 @@ import { Icons, SmallerIcons } from '../icons'
 import { NO_OP } from '../../core/shared/utils'
 import { unless } from '../../utils/react-conditionals'
 import { useColorTheme, UtopiaTheme } from '../styles/theme'
+import type { Optic } from '../../core/shared/optics/optics'
+import { fromField, fromTypeGuard, notNull } from '../../core/shared/optics/optic-creators'
+import { exists, modify } from '../../core/shared/optics/optic-utilities'
 
 interface GridExpressionInputProps {
   testId: string
@@ -43,6 +48,8 @@ interface GridExpressionInputProps {
 
 const DropdownWidth = 25
 
+const ArrowKeyFractionalIncrement = 0.1
+
 export const GridExpressionInput = React.memo(
   ({
     testId,
@@ -66,32 +73,56 @@ export const GridExpressionInput = React.memo(
 
     const onKeyDown = React.useCallback(
       (e: React.KeyboardEvent) => {
-        if (e.key !== 'Enter') {
-          return
-        }
-        if (isValidGridDimensionKeyword(printValue)) {
-          return onUpdateNumberOrKeyword(cssKeyword(printValue))
-        }
+        switch (e.key) {
+          case 'Enter':
+            if (isValidGridDimensionKeyword(printValue)) {
+              return onUpdateNumberOrKeyword(cssKeyword(printValue))
+            }
 
-        const defaultUnit = isGridCSSNumber(value) ? value.value.unit : 'px'
-        const maybeNumber = parseCSSNumber(printValue, 'AnyValid', defaultUnit)
-        if (isRight(maybeNumber)) {
-          return onUpdateNumberOrKeyword(maybeNumber.value)
-        }
+            const defaultUnit = isGridCSSNumber(value) ? value.value.unit : 'px'
+            const maybeNumber = parseCSSNumber(printValue, 'AnyValid', defaultUnit)
+            if (isRight(maybeNumber)) {
+              return onUpdateNumberOrKeyword(maybeNumber.value)
+            }
 
-        const maybeMinmax = parseGridCSSMinmaxOrRepeat(printValue)
-        if (maybeMinmax != null) {
-          return onUpdateDimension({
-            ...maybeMinmax,
-            lineName: value.lineName,
-          } as GridDimension)
-        }
+            const maybeMinmax = parseGridCSSMinmaxOrRepeat(printValue)
+            if (maybeMinmax != null) {
+              return onUpdateDimension({
+                ...maybeMinmax,
+                lineName: value.lineName,
+              } as GridDimension)
+            }
 
-        if (printValue === '') {
-          return onUpdateNumberOrKeyword(cssKeyword('auto'))
-        }
+            if (printValue === '') {
+              return onUpdateNumberOrKeyword(cssKeyword('auto'))
+            }
 
-        setPrintValue(stringifyGridDimension(value))
+            setPrintValue(stringifyGridDimension(value))
+            break
+          case 'ArrowUp':
+          case 'ArrowDown':
+            e.preventDefault()
+            const gridNumberValueOptic: Optic<GridDimension, CSSNumber> = fromTypeGuard(
+              isGridCSSNumber,
+            ).compose(fromField('value'))
+            const valueUnitOptic: Optic<GridDimension, 'fr'> = gridNumberValueOptic
+              .compose(fromField('unit'))
+              .compose(notNull())
+              .compose(fromTypeGuard(isFR))
+            const gridNumberNumberOptic: Optic<GridDimension, number> =
+              gridNumberValueOptic.compose(fromField('value'))
+            if (exists(valueUnitOptic, value)) {
+              function updateFractional(fractionalValue: number): number {
+                return (
+                  fractionalValue +
+                  (e.key === 'ArrowUp' ? ArrowKeyFractionalIncrement : -ArrowKeyFractionalIncrement)
+                )
+              }
+              const updatedDimension = modify(gridNumberNumberOptic, updateFractional, value)
+              onUpdateDimension(updatedDimension)
+            }
+            break
+        }
       },
       [printValue, onUpdateNumberOrKeyword, onUpdateDimension, value],
     )

From ac18c511b9ece57fcb2ce1e1c26b9baa6251031a Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Fri, 25 Oct 2024 21:25:00 +0200
Subject: [PATCH 181/272] Make grid rearrange work in grid components (#6589)

**Problem:**
Grid rearrange does not work when the grid is a root element of a
component.

**Fix:**
The problem is that we assume that the parent element of a grid item is
the grid itself. However, when the grid is in a component, the parent
element is the component instance, and not the grid element inside it.
This is a problem because we can not find the grid measurement helper
from the parent element path.

The solution is that all necessary grid related measurement data should
be available in the metadata of the grid items themselves.

- Added new fields to specialSizeMeasurements about the parent grid
- Rewrote grid rearrange strategies and helpers to rely on the
specialSizeMeasurements of the item, and not of the parent.

Still unsolved:
- Grid strategies set the props of the grid controls (e.g. to show which
is the highlighted cell). These still assume that the control is on the
parent, which is true in cases when the grid is root element of a
component. Solving the problem for more problematic cases is out of
scope for this PR.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../ui-jsx-canvas-bugs.spec.tsx.snap          |   30 +
 .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 4991 +++++++++++++++--
 .../strategies/grid-cell-bounds.ts            |    8 +-
 .../strategies/grid-helpers.ts                |   67 +-
 .../grid-rearrange-keyboard-strategy.ts       |   19 +-
 .../grid-rearrange-move-duplicate-strategy.ts |   27 +-
 ...-rearrange-move-strategy.spec.browser2.tsx |  119 +
 .../grid-rearrange-move-strategy.ts           |   27 +-
 .../strategies/grid-reparent-strategy.tsx     |   34 +-
 .../canvas/controls/grid-controls.tsx         |    6 +-
 editor/src/components/canvas/dom-walker.ts    |   91 +-
 .../store-deep-equality-instances-3.spec.ts   |  105 +
 .../store/store-deep-equality-instances.ts    |   24 +-
 editor/src/core/shared/element-template.ts    |   36 +-
 14 files changed, 4875 insertions(+), 709 deletions(-)

diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
index d01c0243995a..df7eef693210 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
@@ -232,8 +232,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -383,8 +398,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
index 1300f2829a97..be17ed60714a 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
@@ -273,8 +273,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -447,8 +462,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -916,8 +946,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -1234,8 +1279,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -1407,8 +1467,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -1580,8 +1655,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -1753,8 +1843,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -2031,8 +2136,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -2205,8 +2325,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -2485,8 +2620,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -2762,8 +2912,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -2936,8 +3101,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -3090,8 +3270,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -3385,8 +3580,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -3559,8 +3769,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -3940,8 +4165,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -4287,8 +4527,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -4489,8 +4744,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -4657,8 +4927,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -4859,8 +5144,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -5027,8 +5327,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -5229,8 +5544,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -5397,8 +5727,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -5743,8 +6088,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -5917,8 +6277,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -6519,8 +6894,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -7087,8 +7477,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -7495,8 +7900,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -7869,8 +8289,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -8091,8 +8526,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -8279,8 +8729,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -8501,8 +8966,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -8689,8 +9169,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -8911,8 +9406,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -9099,8 +9609,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -9507,8 +10032,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -9881,8 +10421,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -10103,8 +10658,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -10291,8 +10861,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -10513,8 +11098,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -10701,8 +11301,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -10923,8 +11538,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -11111,8 +11741,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -11519,8 +12164,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -11893,8 +12553,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -12115,8 +12790,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -12303,8 +12993,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -12525,8 +13230,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -12713,8 +13433,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -12935,8 +13670,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -13123,8 +13873,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -13412,8 +14177,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -13586,8 +14366,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -13801,163 +14596,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
-      "parentFlexDirection": null,
-      "parentFlexGap": 0,
-      "parentHugsOnMainAxis": false,
-      "parentJustifyContent": null,
-      "parentLayoutSystem": "flow",
-      "parentPadding": Object {},
-      "parentTextDirection": "ltr",
-      "position": null,
-      "providesBoundsForAbsoluteChildren": false,
-      "renderedChildrenCount": 0,
-      "rowGap": null,
-      "textBounds": null,
-      "textDecorationLine": null,
-      "usesParentBounds": false,
-    },
-    "textContent": null,
-  },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/aaa": Object {
-    "assignedToProp": null,
-    "attributeMetadata": Object {},
-    "componentInstance": true,
-    "computedStyle": Object {},
-    "conditionValue": "not-a-conditional",
-    "earlyReturn": null,
-    "element": Object {
-      "type": "RIGHT",
-      "value": Object {
-        "children": Array [],
-        "name": Object {
-          "baseVariable": "Thing",
-          "propertyPath": Object {
-            "propertyElements": Array [],
-          },
-        },
-        "props": Array [
-          Object {
-            "comments": Object {
-              "leadingComments": Array [],
-              "trailingComments": Array [],
-            },
-            "key": "data-uid",
-            "type": "JSX_ATTRIBUTES_ENTRY",
-            "value": Object {
-              "comments": Object {
-                "leadingComments": Array [],
-                "trailingComments": Array [],
-              },
-              "type": "ATTRIBUTE_VALUE",
-              "uid": "",
-              "value": "aaa",
-            },
-          },
-        ],
-        "type": "JSX_ELEMENT",
-        "uid": "",
-      },
-    },
-    "elementPath": Object {
-      "parts": Array [
-        Array [
-          "utopia-storyboard-uid",
-          "scene-aaa",
-          "app-entity",
-        ],
-        Array [
-          "zzz",
-          "aaa",
-        ],
-      ],
-      "type": "elementpath",
-    },
-    "globalFrame": null,
-    "importInfo": Object {
-      "filePath": "test.js",
-      "type": "SAME_FILE_ORIGIN",
-      "variableName": "Thing",
-    },
-    "isEmotionOrStyledComponent": false,
-    "label": null,
-    "nonRoundedGlobalFrame": null,
-    "specialSizeMeasurements": Object {
-      "alignContent": null,
-      "alignItems": null,
-      "alignSelf": null,
-      "borderRadius": null,
-      "clientHeight": 0,
-      "clientWidth": 0,
-      "closestOffsetParentPath": Object {
-        "parts": Array [],
-        "type": "elementpath",
-      },
-      "columnGap": null,
-      "computedHugProperty": Object {
-        "height": null,
-        "width": null,
-      },
-      "containerGridProperties": Object {
+      "parentContainerGridProperties": Object {
         "gridAutoColumns": null,
         "gridAutoFlow": null,
         "gridAutoRows": null,
         "gridTemplateColumns": null,
         "gridTemplateRows": null,
       },
-      "containerGridPropertiesFromProps": Object {
+      "parentContainerGridPropertiesFromProps": Object {
         "gridAutoColumns": null,
         "gridAutoFlow": null,
         "gridAutoRows": null,
         "gridTemplateColumns": null,
         "gridTemplateRows": null,
       },
-      "coordinateSystemBounds": null,
-      "display": "initial",
-      "elementGridProperties": Object {
-        "gridColumnEnd": null,
-        "gridColumnStart": null,
-        "gridRowEnd": null,
-        "gridRowStart": null,
-      },
-      "elementGridPropertiesFromProps": Object {
-        "gridColumnEnd": null,
-        "gridColumnStart": null,
-        "gridRowEnd": null,
-        "gridRowStart": null,
-      },
-      "flexDirection": null,
-      "float": "none",
-      "fontSize": null,
-      "fontStyle": null,
-      "fontWeight": null,
-      "gap": null,
-      "globalContentBoxForChildren": null,
-      "globalFrameWithTextContent": null,
-      "gridCellGlobalFrames": null,
-      "hasPositionOffset": false,
-      "hasTransform": false,
-      "htmlElementName": "div",
-      "immediateParentBounds": Object {
-        "height": 0,
-        "width": 0,
-        "x": 0,
-        "y": 0,
-      },
-      "immediateParentProvidesLayout": true,
-      "justifyContent": null,
-      "justifySelf": null,
-      "layoutSystemForChildren": null,
-      "layoutSystemForChildrenInherited": false,
-      "margin": Object {},
-      "naturalHeight": null,
-      "naturalWidth": null,
-      "offset": Object {
-        "x": 0,
-        "y": 0,
-      },
-      "padding": Object {},
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -13973,7 +14628,7 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/bbb": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/aaa": Object {
     "assignedToProp": null,
     "attributeMetadata": Object {},
     "componentInstance": true,
@@ -14005,7 +14660,7 @@ Object {
               },
               "type": "ATTRIBUTE_VALUE",
               "uid": "",
-              "value": "bbb",
+              "value": "aaa",
             },
           },
         ],
@@ -14022,7 +14677,7 @@ Object {
         ],
         Array [
           "zzz",
-          "bbb",
+          "aaa",
         ],
       ],
       "type": "elementpath",
@@ -14111,8 +14766,193 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
+      "parentHugsOnMainAxis": false,
+      "parentJustifyContent": null,
+      "parentLayoutSystem": "flow",
+      "parentPadding": Object {},
+      "parentTextDirection": "ltr",
+      "position": null,
+      "providesBoundsForAbsoluteChildren": false,
+      "renderedChildrenCount": 0,
+      "rowGap": null,
+      "textBounds": null,
+      "textDecorationLine": null,
+      "usesParentBounds": false,
+    },
+    "textContent": null,
+  },
+  "utopia-storyboard-uid/scene-aaa/app-entity:zzz/bbb": Object {
+    "assignedToProp": null,
+    "attributeMetadata": Object {},
+    "componentInstance": true,
+    "computedStyle": Object {},
+    "conditionValue": "not-a-conditional",
+    "earlyReturn": null,
+    "element": Object {
+      "type": "RIGHT",
+      "value": Object {
+        "children": Array [],
+        "name": Object {
+          "baseVariable": "Thing",
+          "propertyPath": Object {
+            "propertyElements": Array [],
+          },
+        },
+        "props": Array [
+          Object {
+            "comments": Object {
+              "leadingComments": Array [],
+              "trailingComments": Array [],
+            },
+            "key": "data-uid",
+            "type": "JSX_ATTRIBUTES_ENTRY",
+            "value": Object {
+              "comments": Object {
+                "leadingComments": Array [],
+                "trailingComments": Array [],
+              },
+              "type": "ATTRIBUTE_VALUE",
+              "uid": "",
+              "value": "bbb",
+            },
+          },
+        ],
+        "type": "JSX_ELEMENT",
+        "uid": "",
+      },
+    },
+    "elementPath": Object {
+      "parts": Array [
+        Array [
+          "utopia-storyboard-uid",
+          "scene-aaa",
+          "app-entity",
+        ],
+        Array [
+          "zzz",
+          "bbb",
+        ],
+      ],
+      "type": "elementpath",
+    },
+    "globalFrame": null,
+    "importInfo": Object {
+      "filePath": "test.js",
+      "type": "SAME_FILE_ORIGIN",
+      "variableName": "Thing",
+    },
+    "isEmotionOrStyledComponent": false,
+    "label": null,
+    "nonRoundedGlobalFrame": null,
+    "specialSizeMeasurements": Object {
+      "alignContent": null,
+      "alignItems": null,
+      "alignSelf": null,
+      "borderRadius": null,
+      "clientHeight": 0,
+      "clientWidth": 0,
+      "closestOffsetParentPath": Object {
+        "parts": Array [],
+        "type": "elementpath",
+      },
+      "columnGap": null,
+      "computedHugProperty": Object {
+        "height": null,
+        "width": null,
+      },
+      "containerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "containerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "coordinateSystemBounds": null,
+      "display": "initial",
+      "elementGridProperties": Object {
+        "gridColumnEnd": null,
+        "gridColumnStart": null,
+        "gridRowEnd": null,
+        "gridRowStart": null,
+      },
+      "elementGridPropertiesFromProps": Object {
+        "gridColumnEnd": null,
+        "gridColumnStart": null,
+        "gridRowEnd": null,
+        "gridRowStart": null,
+      },
+      "flexDirection": null,
+      "float": "none",
+      "fontSize": null,
+      "fontStyle": null,
+      "fontWeight": null,
+      "gap": null,
+      "globalContentBoxForChildren": null,
+      "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
+      "hasPositionOffset": false,
+      "hasTransform": false,
+      "htmlElementName": "div",
+      "immediateParentBounds": Object {
+        "height": 0,
+        "width": 0,
+        "x": 0,
+        "y": 0,
+      },
+      "immediateParentProvidesLayout": true,
+      "justifyContent": null,
+      "justifySelf": null,
+      "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
+      "margin": Object {},
+      "naturalHeight": null,
+      "naturalWidth": null,
+      "offset": Object {
+        "x": 0,
+        "y": 0,
+      },
+      "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentFlexDirection": null,
+      "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -14388,8 +15228,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -14562,8 +15417,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -14829,8 +15699,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -15124,8 +16009,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -15298,8 +16198,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -15696,8 +16611,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -16059,8 +16989,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -16281,8 +17226,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -16503,8 +17463,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -16725,8 +17700,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -17020,8 +18010,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -17194,8 +18199,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -17592,8 +18612,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -17955,8 +18990,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -18177,8 +19227,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -18399,8 +19464,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -18621,8 +19701,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -18910,8 +20005,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -19084,8 +20194,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -19299,8 +20424,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -19454,8 +20594,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -19609,8 +20764,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -19898,8 +21068,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -20072,8 +21257,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -20392,8 +21592,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -20678,8 +21893,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -20834,8 +22064,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -20990,8 +22235,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -21295,8 +22555,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -21484,8 +22759,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -21952,8 +23242,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -22239,8 +23544,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -22543,8 +23863,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -22732,8 +24067,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -23200,8 +24550,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -23487,8 +24852,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -23792,8 +25172,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -23981,8 +25376,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -24500,8 +25910,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -24838,8 +26263,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -25143,8 +26583,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -25332,8 +26787,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -25851,8 +27321,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -26189,8 +27674,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -26465,8 +27965,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -26639,8 +28154,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -26793,8 +28323,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -27192,8 +28737,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -27366,8 +28926,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -29298,8 +30873,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -30776,8 +32366,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -32220,8 +33825,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -32846,8 +34466,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -33200,8 +34835,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -33826,8 +35476,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -34180,8 +35845,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -34806,8 +36486,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -35160,8 +36855,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -35824,8 +37534,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -36220,8 +37945,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -36884,8 +38624,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -37280,8 +39035,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -37944,8 +39714,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -38340,8 +40125,23 @@ export var storyboard = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -38639,8 +40439,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -38813,8 +40628,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -39062,8 +40892,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -39234,8 +41079,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -39406,8 +41266,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -39684,8 +41559,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -39858,8 +41748,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -40079,8 +41984,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -40356,8 +42276,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -40530,8 +42465,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -40855,8 +42805,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -41178,8 +43143,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -41352,8 +43332,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -41634,8 +43629,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -41865,8 +43875,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -42045,8 +44070,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -42350,8 +44390,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -42539,8 +44594,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -42898,8 +44968,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -43079,8 +45164,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -43537,8 +45637,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -43726,8 +45841,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -44087,8 +46217,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -44268,8 +46413,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -44657,8 +46817,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -44830,8 +47005,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -45628,8 +47818,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -45784,8 +47989,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -45940,8 +48160,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -46096,8 +48331,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -46254,8 +48504,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -46410,8 +48675,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -46566,8 +48846,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -46722,8 +49017,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -46946,8 +49256,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -47131,8 +49456,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -47289,8 +49629,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -47445,8 +49800,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -47601,8 +49971,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -47757,8 +50142,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -47913,8 +50313,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -48069,8 +50484,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -48225,8 +50655,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -48381,8 +50826,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -48537,8 +50997,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -48693,8 +51168,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -48849,8 +51339,23 @@ export var App = (props) => {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -49144,8 +51649,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -49318,8 +51838,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -49716,8 +52251,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -50079,8 +52629,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -50301,8 +52866,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -50523,8 +53103,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -50745,8 +53340,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -51040,8 +53650,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -51214,8 +53839,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -51611,8 +54251,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -51973,230 +54628,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
-      "parentFlexDirection": null,
-      "parentFlexGap": 0,
-      "parentHugsOnMainAxis": false,
-      "parentJustifyContent": null,
-      "parentLayoutSystem": "flow",
-      "parentPadding": Object {},
-      "parentTextDirection": "ltr",
-      "position": null,
-      "providesBoundsForAbsoluteChildren": false,
-      "renderedChildrenCount": 0,
-      "rowGap": null,
-      "textBounds": null,
-      "textDecorationLine": null,
-      "usesParentBounds": false,
-    },
-    "textContent": null,
-  },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/fc8/bbb~~~1": Object {
-    "assignedToProp": null,
-    "attributeMetadata": Object {},
-    "componentInstance": true,
-    "computedStyle": Object {},
-    "conditionValue": "not-a-conditional",
-    "earlyReturn": null,
-    "element": Object {
-      "type": "RIGHT",
-      "value": Object {
-        "children": Array [],
-        "name": Object {
-          "baseVariable": "MyCard",
-          "propertyPath": Object {
-            "propertyElements": Array [],
-          },
-        },
-        "props": Array [
-          Object {
-            "comments": Object {
-              "leadingComments": Array [],
-              "trailingComments": Array [],
-            },
-            "key": "data-uid",
-            "type": "JSX_ATTRIBUTES_ENTRY",
-            "value": Object {
-              "comments": Object {
-                "leadingComments": Array [],
-                "trailingComments": Array [],
-              },
-              "type": "ATTRIBUTE_VALUE",
-              "uid": "",
-              "value": "bbb~~~1",
-            },
-          },
-          Object {
-            "comments": Object {
-              "leadingComments": Array [],
-              "trailingComments": Array [],
-            },
-            "key": "title",
-            "type": "JSX_ATTRIBUTES_ENTRY",
-            "value": Object {
-              "comments": Object {
-                "leadingComments": Array [],
-                "trailingComments": Array [],
-              },
-              "definedElsewhere": Array [
-                "div",
-              ],
-              "elementsWithin": Object {},
-              "javascriptWithUIDs": "'n' + div;",
-              "originalJavascript": "'n' + div",
-              "params": Array [],
-              "sourceMap": Object {
-                "file": "code.tsx",
-                "mappings": "OAQ+CA,MAADC,GAACD",
-                "names": Array [
-                  "n",
-                  "'",
-                ],
-                "sources": Array [
-                  "code.tsx",
-                ],
-                "sourcesContent": Array [
-                  "
-      import * as React from \\"react\\"
-      import { View, Storyboard, Scene } from 'utopia-api'
-
-       const MyCard = (props) => <div data-uid={'xxx'}>{props.title} </div>
-       export var App = props => {
-         return <View data-uid={'aaa'}>
-           {[1,2,3].map(div => (
-             <MyCard data-uid={'bbb'} title={'n' + div} />
-           ))}
-         </View>
-       }
-       export var storyboard = (props) => {
-        return (
-          <Storyboard data-uid={'utopia-storyboard-uid'}>
-            <Scene
-              style={{ position: 'absolute', left: 0, top: 0, width: 400, height: 400 }}
-              data-uid={'scene-aaa'}
-            >
-              <App
-                data-uid='app-entity'
-                style={{ position: 'absolute', bottom: 0, left: 0, right: 0, top: 0 }}
-              />
-            </Scene>
-          </Storyboard>
-        )
-      }
-       ",
-                ],
-                "version": 3,
-              },
-              "transpiledJavascript": "return 'n' + div;",
-              "type": "ATTRIBUTE_OTHER_JAVASCRIPT",
-              "uid": "",
-            },
-          },
-        ],
-        "type": "JSX_ELEMENT",
-        "uid": "",
-      },
-    },
-    "elementPath": Object {
-      "parts": Array [
-        Array [
-          "utopia-storyboard-uid",
-          "scene-aaa",
-          "app-entity",
-        ],
-        Array [
-          "aaa",
-          "fc8",
-          "bbb~~~1",
-        ],
-      ],
-      "type": "elementpath",
-    },
-    "globalFrame": null,
-    "importInfo": Object {
-      "filePath": "test.js",
-      "type": "SAME_FILE_ORIGIN",
-      "variableName": "MyCard",
-    },
-    "isEmotionOrStyledComponent": false,
-    "label": null,
-    "nonRoundedGlobalFrame": null,
-    "specialSizeMeasurements": Object {
-      "alignContent": null,
-      "alignItems": null,
-      "alignSelf": null,
-      "borderRadius": null,
-      "clientHeight": 0,
-      "clientWidth": 0,
-      "closestOffsetParentPath": Object {
-        "parts": Array [],
-        "type": "elementpath",
-      },
-      "columnGap": null,
-      "computedHugProperty": Object {
-        "height": null,
-        "width": null,
-      },
-      "containerGridProperties": Object {
+      "parentContainerGridProperties": Object {
         "gridAutoColumns": null,
         "gridAutoFlow": null,
         "gridAutoRows": null,
         "gridTemplateColumns": null,
         "gridTemplateRows": null,
       },
-      "containerGridPropertiesFromProps": Object {
+      "parentContainerGridPropertiesFromProps": Object {
         "gridAutoColumns": null,
         "gridAutoFlow": null,
         "gridAutoRows": null,
         "gridTemplateColumns": null,
         "gridTemplateRows": null,
       },
-      "coordinateSystemBounds": null,
-      "display": "initial",
-      "elementGridProperties": Object {
-        "gridColumnEnd": null,
-        "gridColumnStart": null,
-        "gridRowEnd": null,
-        "gridRowStart": null,
-      },
-      "elementGridPropertiesFromProps": Object {
-        "gridColumnEnd": null,
-        "gridColumnStart": null,
-        "gridRowEnd": null,
-        "gridRowStart": null,
-      },
-      "flexDirection": null,
-      "float": "none",
-      "fontSize": null,
-      "fontStyle": null,
-      "fontWeight": null,
-      "gap": null,
-      "globalContentBoxForChildren": null,
-      "globalFrameWithTextContent": null,
-      "gridCellGlobalFrames": null,
-      "hasPositionOffset": false,
-      "hasTransform": false,
-      "htmlElementName": "div",
-      "immediateParentBounds": Object {
-        "height": 0,
-        "width": 0,
-        "x": 0,
-        "y": 0,
-      },
-      "immediateParentProvidesLayout": true,
-      "justifyContent": null,
-      "justifySelf": null,
-      "layoutSystemForChildren": null,
-      "layoutSystemForChildrenInherited": false,
-      "margin": Object {},
-      "naturalHeight": null,
-      "naturalWidth": null,
-      "offset": Object {
-        "x": 0,
-        "y": 0,
-      },
-      "padding": Object {},
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -52212,7 +54660,244 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/fc8/bbb~~~2": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/fc8/bbb~~~1": Object {
+    "assignedToProp": null,
+    "attributeMetadata": Object {},
+    "componentInstance": true,
+    "computedStyle": Object {},
+    "conditionValue": "not-a-conditional",
+    "earlyReturn": null,
+    "element": Object {
+      "type": "RIGHT",
+      "value": Object {
+        "children": Array [],
+        "name": Object {
+          "baseVariable": "MyCard",
+          "propertyPath": Object {
+            "propertyElements": Array [],
+          },
+        },
+        "props": Array [
+          Object {
+            "comments": Object {
+              "leadingComments": Array [],
+              "trailingComments": Array [],
+            },
+            "key": "data-uid",
+            "type": "JSX_ATTRIBUTES_ENTRY",
+            "value": Object {
+              "comments": Object {
+                "leadingComments": Array [],
+                "trailingComments": Array [],
+              },
+              "type": "ATTRIBUTE_VALUE",
+              "uid": "",
+              "value": "bbb~~~1",
+            },
+          },
+          Object {
+            "comments": Object {
+              "leadingComments": Array [],
+              "trailingComments": Array [],
+            },
+            "key": "title",
+            "type": "JSX_ATTRIBUTES_ENTRY",
+            "value": Object {
+              "comments": Object {
+                "leadingComments": Array [],
+                "trailingComments": Array [],
+              },
+              "definedElsewhere": Array [
+                "div",
+              ],
+              "elementsWithin": Object {},
+              "javascriptWithUIDs": "'n' + div;",
+              "originalJavascript": "'n' + div",
+              "params": Array [],
+              "sourceMap": Object {
+                "file": "code.tsx",
+                "mappings": "OAQ+CA,MAADC,GAACD",
+                "names": Array [
+                  "n",
+                  "'",
+                ],
+                "sources": Array [
+                  "code.tsx",
+                ],
+                "sourcesContent": Array [
+                  "
+      import * as React from \\"react\\"
+      import { View, Storyboard, Scene } from 'utopia-api'
+
+       const MyCard = (props) => <div data-uid={'xxx'}>{props.title} </div>
+       export var App = props => {
+         return <View data-uid={'aaa'}>
+           {[1,2,3].map(div => (
+             <MyCard data-uid={'bbb'} title={'n' + div} />
+           ))}
+         </View>
+       }
+       export var storyboard = (props) => {
+        return (
+          <Storyboard data-uid={'utopia-storyboard-uid'}>
+            <Scene
+              style={{ position: 'absolute', left: 0, top: 0, width: 400, height: 400 }}
+              data-uid={'scene-aaa'}
+            >
+              <App
+                data-uid='app-entity'
+                style={{ position: 'absolute', bottom: 0, left: 0, right: 0, top: 0 }}
+              />
+            </Scene>
+          </Storyboard>
+        )
+      }
+       ",
+                ],
+                "version": 3,
+              },
+              "transpiledJavascript": "return 'n' + div;",
+              "type": "ATTRIBUTE_OTHER_JAVASCRIPT",
+              "uid": "",
+            },
+          },
+        ],
+        "type": "JSX_ELEMENT",
+        "uid": "",
+      },
+    },
+    "elementPath": Object {
+      "parts": Array [
+        Array [
+          "utopia-storyboard-uid",
+          "scene-aaa",
+          "app-entity",
+        ],
+        Array [
+          "aaa",
+          "fc8",
+          "bbb~~~1",
+        ],
+      ],
+      "type": "elementpath",
+    },
+    "globalFrame": null,
+    "importInfo": Object {
+      "filePath": "test.js",
+      "type": "SAME_FILE_ORIGIN",
+      "variableName": "MyCard",
+    },
+    "isEmotionOrStyledComponent": false,
+    "label": null,
+    "nonRoundedGlobalFrame": null,
+    "specialSizeMeasurements": Object {
+      "alignContent": null,
+      "alignItems": null,
+      "alignSelf": null,
+      "borderRadius": null,
+      "clientHeight": 0,
+      "clientWidth": 0,
+      "closestOffsetParentPath": Object {
+        "parts": Array [],
+        "type": "elementpath",
+      },
+      "columnGap": null,
+      "computedHugProperty": Object {
+        "height": null,
+        "width": null,
+      },
+      "containerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "containerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "coordinateSystemBounds": null,
+      "display": "initial",
+      "elementGridProperties": Object {
+        "gridColumnEnd": null,
+        "gridColumnStart": null,
+        "gridRowEnd": null,
+        "gridRowStart": null,
+      },
+      "elementGridPropertiesFromProps": Object {
+        "gridColumnEnd": null,
+        "gridColumnStart": null,
+        "gridRowEnd": null,
+        "gridRowStart": null,
+      },
+      "flexDirection": null,
+      "float": "none",
+      "fontSize": null,
+      "fontStyle": null,
+      "fontWeight": null,
+      "gap": null,
+      "globalContentBoxForChildren": null,
+      "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
+      "hasPositionOffset": false,
+      "hasTransform": false,
+      "htmlElementName": "div",
+      "immediateParentBounds": Object {
+        "height": 0,
+        "width": 0,
+        "x": 0,
+        "y": 0,
+      },
+      "immediateParentProvidesLayout": true,
+      "justifyContent": null,
+      "justifySelf": null,
+      "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
+      "margin": Object {},
+      "naturalHeight": null,
+      "naturalWidth": null,
+      "offset": Object {
+        "x": 0,
+        "y": 0,
+      },
+      "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentFlexDirection": null,
+      "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
+      "parentHugsOnMainAxis": false,
+      "parentJustifyContent": null,
+      "parentLayoutSystem": "flow",
+      "parentPadding": Object {},
+      "parentTextDirection": "ltr",
+      "position": null,
+      "providesBoundsForAbsoluteChildren": false,
+      "renderedChildrenCount": 0,
+      "rowGap": null,
+      "textBounds": null,
+      "textDecorationLine": null,
+      "usesParentBounds": false,
+    },
+    "textContent": null,
+  },
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/fc8/bbb~~~2": Object {
     "assignedToProp": null,
     "attributeMetadata": Object {},
     "componentInstance": true,
@@ -52417,8 +55102,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -52639,8 +55339,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -52934,8 +55649,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -53108,8 +55838,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -53549,8 +56294,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -53955,8 +56715,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -54177,230 +56952,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
-      "parentFlexDirection": null,
-      "parentFlexGap": 0,
-      "parentHugsOnMainAxis": false,
-      "parentJustifyContent": null,
-      "parentLayoutSystem": "flow",
-      "parentPadding": Object {},
-      "parentTextDirection": "ltr",
-      "position": null,
-      "providesBoundsForAbsoluteChildren": false,
-      "renderedChildrenCount": 0,
-      "rowGap": null,
-      "textBounds": null,
-      "textDecorationLine": null,
-      "usesParentBounds": false,
-    },
-    "textContent": null,
-  },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/032/bbb~~~2": Object {
-    "assignedToProp": null,
-    "attributeMetadata": Object {},
-    "componentInstance": true,
-    "computedStyle": Object {},
-    "conditionValue": "not-a-conditional",
-    "earlyReturn": null,
-    "element": Object {
-      "type": "RIGHT",
-      "value": Object {
-        "children": Array [],
-        "name": Object {
-          "baseVariable": "MyCard",
-          "propertyPath": Object {
-            "propertyElements": Array [],
-          },
-        },
-        "props": Array [
-          Object {
-            "comments": Object {
-              "leadingComments": Array [],
-              "trailingComments": Array [],
-            },
-            "key": "data-uid",
-            "type": "JSX_ATTRIBUTES_ENTRY",
-            "value": Object {
-              "comments": Object {
-                "leadingComments": Array [],
-                "trailingComments": Array [],
-              },
-              "type": "ATTRIBUTE_VALUE",
-              "uid": "",
-              "value": "bbb~~~2",
-            },
-          },
-          Object {
-            "comments": Object {
-              "leadingComments": Array [],
-              "trailingComments": Array [],
-            },
-            "key": "title",
-            "type": "JSX_ATTRIBUTES_ENTRY",
-            "value": Object {
-              "comments": Object {
-                "leadingComments": Array [],
-                "trailingComments": Array [],
-              },
-              "definedElsewhere": Array [
-                "n",
-              ],
-              "elementsWithin": Object {},
-              "javascriptWithUIDs": "'n' + n;",
-              "originalJavascript": "'n' + n",
-              "params": Array [],
-              "sourceMap": Object {
-                "file": "code.tsx",
-                "mappings": "OAS+CA,MAADC,CAACD",
-                "names": Array [
-                  "n",
-                  "'",
-                ],
-                "sources": Array [
-                  "code.tsx",
-                ],
-                "sourcesContent": Array [
-                  "
-      import * as React from \\"react\\"
-      import { View, Storyboard, Scene } from 'utopia-api'
-
-       const MyCard = (props) => <div data-uid={'xxx'}>{props.title} </div>
-       export var App = props => {
-         const nestedThings = [ {a: { b: { c: [ 1 ] } } }, {a: { b: { c: [ 2 ] } } }, {a: { b: { c: [ 3 ] } } } ]
-         return <View data-uid={'aaa'}>
-           {nestedThings.map(({ a: { b: { c: [ n ] } } }) => (
-             <MyCard data-uid={'bbb'} title={'n' + n} />
-           ))}
-         </View>
-       }
-       export var storyboard = (props) => {
-        return (
-          <Storyboard data-uid={'utopia-storyboard-uid'}>
-            <Scene
-              style={{ position: 'absolute', left: 0, top: 0, width: 400, height: 400 }}
-              data-uid={'scene-aaa'}
-            >
-              <App
-                data-uid='app-entity'
-                style={{ position: 'absolute', bottom: 0, left: 0, right: 0, top: 0 }}
-              />
-            </Scene>
-          </Storyboard>
-        )
-      }",
-                ],
-                "version": 3,
-              },
-              "transpiledJavascript": "return 'n' + n;",
-              "type": "ATTRIBUTE_OTHER_JAVASCRIPT",
-              "uid": "",
-            },
-          },
-        ],
-        "type": "JSX_ELEMENT",
-        "uid": "",
-      },
-    },
-    "elementPath": Object {
-      "parts": Array [
-        Array [
-          "utopia-storyboard-uid",
-          "scene-aaa",
-          "app-entity",
-        ],
-        Array [
-          "aaa",
-          "032",
-          "bbb~~~2",
-        ],
-      ],
-      "type": "elementpath",
-    },
-    "globalFrame": null,
-    "importInfo": Object {
-      "filePath": "test.js",
-      "type": "SAME_FILE_ORIGIN",
-      "variableName": "MyCard",
-    },
-    "isEmotionOrStyledComponent": false,
-    "label": null,
-    "nonRoundedGlobalFrame": null,
-    "specialSizeMeasurements": Object {
-      "alignContent": null,
-      "alignItems": null,
-      "alignSelf": null,
-      "borderRadius": null,
-      "clientHeight": 0,
-      "clientWidth": 0,
-      "closestOffsetParentPath": Object {
-        "parts": Array [],
-        "type": "elementpath",
-      },
-      "columnGap": null,
-      "computedHugProperty": Object {
-        "height": null,
-        "width": null,
-      },
-      "containerGridProperties": Object {
+      "parentContainerGridProperties": Object {
         "gridAutoColumns": null,
         "gridAutoFlow": null,
         "gridAutoRows": null,
         "gridTemplateColumns": null,
         "gridTemplateRows": null,
       },
-      "containerGridPropertiesFromProps": Object {
+      "parentContainerGridPropertiesFromProps": Object {
         "gridAutoColumns": null,
         "gridAutoFlow": null,
         "gridAutoRows": null,
         "gridTemplateColumns": null,
         "gridTemplateRows": null,
       },
-      "coordinateSystemBounds": null,
-      "display": "initial",
-      "elementGridProperties": Object {
-        "gridColumnEnd": null,
-        "gridColumnStart": null,
-        "gridRowEnd": null,
-        "gridRowStart": null,
-      },
-      "elementGridPropertiesFromProps": Object {
-        "gridColumnEnd": null,
-        "gridColumnStart": null,
-        "gridRowEnd": null,
-        "gridRowStart": null,
-      },
-      "flexDirection": null,
-      "float": "none",
-      "fontSize": null,
-      "fontStyle": null,
-      "fontWeight": null,
-      "gap": null,
-      "globalContentBoxForChildren": null,
-      "globalFrameWithTextContent": null,
-      "gridCellGlobalFrames": null,
-      "hasPositionOffset": false,
-      "hasTransform": false,
-      "htmlElementName": "div",
-      "immediateParentBounds": Object {
-        "height": 0,
-        "width": 0,
-        "x": 0,
-        "y": 0,
-      },
-      "immediateParentProvidesLayout": true,
-      "justifyContent": null,
-      "justifySelf": null,
-      "layoutSystemForChildren": null,
-      "layoutSystemForChildrenInherited": false,
-      "margin": Object {},
-      "naturalHeight": null,
-      "naturalWidth": null,
-      "offset": Object {
-        "x": 0,
-        "y": 0,
-      },
-      "padding": Object {},
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -54416,7 +56984,244 @@ Object {
     },
     "textContent": null,
   },
-  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/032/bbb~~~3": Object {
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/032/bbb~~~2": Object {
+    "assignedToProp": null,
+    "attributeMetadata": Object {},
+    "componentInstance": true,
+    "computedStyle": Object {},
+    "conditionValue": "not-a-conditional",
+    "earlyReturn": null,
+    "element": Object {
+      "type": "RIGHT",
+      "value": Object {
+        "children": Array [],
+        "name": Object {
+          "baseVariable": "MyCard",
+          "propertyPath": Object {
+            "propertyElements": Array [],
+          },
+        },
+        "props": Array [
+          Object {
+            "comments": Object {
+              "leadingComments": Array [],
+              "trailingComments": Array [],
+            },
+            "key": "data-uid",
+            "type": "JSX_ATTRIBUTES_ENTRY",
+            "value": Object {
+              "comments": Object {
+                "leadingComments": Array [],
+                "trailingComments": Array [],
+              },
+              "type": "ATTRIBUTE_VALUE",
+              "uid": "",
+              "value": "bbb~~~2",
+            },
+          },
+          Object {
+            "comments": Object {
+              "leadingComments": Array [],
+              "trailingComments": Array [],
+            },
+            "key": "title",
+            "type": "JSX_ATTRIBUTES_ENTRY",
+            "value": Object {
+              "comments": Object {
+                "leadingComments": Array [],
+                "trailingComments": Array [],
+              },
+              "definedElsewhere": Array [
+                "n",
+              ],
+              "elementsWithin": Object {},
+              "javascriptWithUIDs": "'n' + n;",
+              "originalJavascript": "'n' + n",
+              "params": Array [],
+              "sourceMap": Object {
+                "file": "code.tsx",
+                "mappings": "OAS+CA,MAADC,CAACD",
+                "names": Array [
+                  "n",
+                  "'",
+                ],
+                "sources": Array [
+                  "code.tsx",
+                ],
+                "sourcesContent": Array [
+                  "
+      import * as React from \\"react\\"
+      import { View, Storyboard, Scene } from 'utopia-api'
+
+       const MyCard = (props) => <div data-uid={'xxx'}>{props.title} </div>
+       export var App = props => {
+         const nestedThings = [ {a: { b: { c: [ 1 ] } } }, {a: { b: { c: [ 2 ] } } }, {a: { b: { c: [ 3 ] } } } ]
+         return <View data-uid={'aaa'}>
+           {nestedThings.map(({ a: { b: { c: [ n ] } } }) => (
+             <MyCard data-uid={'bbb'} title={'n' + n} />
+           ))}
+         </View>
+       }
+       export var storyboard = (props) => {
+        return (
+          <Storyboard data-uid={'utopia-storyboard-uid'}>
+            <Scene
+              style={{ position: 'absolute', left: 0, top: 0, width: 400, height: 400 }}
+              data-uid={'scene-aaa'}
+            >
+              <App
+                data-uid='app-entity'
+                style={{ position: 'absolute', bottom: 0, left: 0, right: 0, top: 0 }}
+              />
+            </Scene>
+          </Storyboard>
+        )
+      }",
+                ],
+                "version": 3,
+              },
+              "transpiledJavascript": "return 'n' + n;",
+              "type": "ATTRIBUTE_OTHER_JAVASCRIPT",
+              "uid": "",
+            },
+          },
+        ],
+        "type": "JSX_ELEMENT",
+        "uid": "",
+      },
+    },
+    "elementPath": Object {
+      "parts": Array [
+        Array [
+          "utopia-storyboard-uid",
+          "scene-aaa",
+          "app-entity",
+        ],
+        Array [
+          "aaa",
+          "032",
+          "bbb~~~2",
+        ],
+      ],
+      "type": "elementpath",
+    },
+    "globalFrame": null,
+    "importInfo": Object {
+      "filePath": "test.js",
+      "type": "SAME_FILE_ORIGIN",
+      "variableName": "MyCard",
+    },
+    "isEmotionOrStyledComponent": false,
+    "label": null,
+    "nonRoundedGlobalFrame": null,
+    "specialSizeMeasurements": Object {
+      "alignContent": null,
+      "alignItems": null,
+      "alignSelf": null,
+      "borderRadius": null,
+      "clientHeight": 0,
+      "clientWidth": 0,
+      "closestOffsetParentPath": Object {
+        "parts": Array [],
+        "type": "elementpath",
+      },
+      "columnGap": null,
+      "computedHugProperty": Object {
+        "height": null,
+        "width": null,
+      },
+      "containerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "containerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "coordinateSystemBounds": null,
+      "display": "initial",
+      "elementGridProperties": Object {
+        "gridColumnEnd": null,
+        "gridColumnStart": null,
+        "gridRowEnd": null,
+        "gridRowStart": null,
+      },
+      "elementGridPropertiesFromProps": Object {
+        "gridColumnEnd": null,
+        "gridColumnStart": null,
+        "gridRowEnd": null,
+        "gridRowStart": null,
+      },
+      "flexDirection": null,
+      "float": "none",
+      "fontSize": null,
+      "fontStyle": null,
+      "fontWeight": null,
+      "gap": null,
+      "globalContentBoxForChildren": null,
+      "globalFrameWithTextContent": null,
+      "gridCellGlobalFrames": null,
+      "hasPositionOffset": false,
+      "hasTransform": false,
+      "htmlElementName": "div",
+      "immediateParentBounds": Object {
+        "height": 0,
+        "width": 0,
+        "x": 0,
+        "y": 0,
+      },
+      "immediateParentProvidesLayout": true,
+      "justifyContent": null,
+      "justifySelf": null,
+      "layoutSystemForChildren": null,
+      "layoutSystemForChildrenInherited": false,
+      "margin": Object {},
+      "naturalHeight": null,
+      "naturalWidth": null,
+      "offset": Object {
+        "x": 0,
+        "y": 0,
+      },
+      "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentFlexDirection": null,
+      "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
+      "parentHugsOnMainAxis": false,
+      "parentJustifyContent": null,
+      "parentLayoutSystem": "flow",
+      "parentPadding": Object {},
+      "parentTextDirection": "ltr",
+      "position": null,
+      "providesBoundsForAbsoluteChildren": false,
+      "renderedChildrenCount": 0,
+      "rowGap": null,
+      "textBounds": null,
+      "textDecorationLine": null,
+      "usesParentBounds": false,
+    },
+    "textContent": null,
+  },
+  "utopia-storyboard-uid/scene-aaa/app-entity:aaa/032/bbb~~~3": Object {
     "assignedToProp": null,
     "attributeMetadata": Object {},
     "componentInstance": true,
@@ -54621,8 +57426,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -54922,8 +57742,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -55111,8 +57946,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -55379,8 +58229,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -55560,8 +58425,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -55839,8 +58719,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -55990,8 +58885,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -56189,8 +59099,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -56350,8 +59275,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -56511,8 +59451,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -56777,8 +59732,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -56928,8 +59898,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -57185,8 +60170,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -57384,8 +60384,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -57546,8 +60561,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -57800,8 +60830,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -57951,8 +60996,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -58218,8 +61278,23 @@ export var storyboard = (
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -58394,8 +61469,23 @@ export var storyboard = (
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -58648,8 +61738,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -58799,8 +61904,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -58953,8 +62073,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -59215,8 +62350,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -59366,8 +62516,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -59598,8 +62763,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -59779,8 +62959,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -60035,8 +63230,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -60186,8 +63396,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -60515,8 +63740,23 @@ export var storyboard = (
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -60710,8 +63950,23 @@ export var storyboard = (
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -60905,8 +64160,23 @@ export var storyboard = (
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -61160,8 +64430,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -61311,8 +64596,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -61482,8 +64782,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -61782,8 +65097,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -61956,8 +65286,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -62467,8 +65812,23 @@ export var storyboard = (
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -62628,8 +65988,23 @@ export var storyboard = (
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -62903,8 +66278,23 @@ export var storyboard = (
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -63176,8 +66566,23 @@ export var storyboard = (
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -63373,8 +66778,23 @@ export var storyboard = (
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -63568,8 +66988,23 @@ export var storyboard = (
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -63850,8 +67285,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -64024,8 +67474,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -64227,8 +67692,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -64399,8 +67879,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -64679,8 +68174,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -64853,8 +68363,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -65007,8 +68532,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -65317,8 +68857,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -65491,8 +69046,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -65914,8 +69484,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -66302,8 +69887,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -66538,8 +70138,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -66744,8 +70359,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -66916,8 +70546,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -67152,8 +70797,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -67358,8 +71018,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -67530,8 +71205,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -67766,8 +71456,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -67972,8 +71677,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -68144,8 +71864,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -68423,8 +72158,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -68597,8 +72347,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -68751,8 +72516,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -69040,8 +72820,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -69214,8 +73009,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -69436,8 +73246,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -69628,8 +73453,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -69790,8 +73630,23 @@ Object {
         "y": 0,
       },
       "padding": Object {},
+      "parentContainerGridProperties": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
+      "parentContainerGridPropertiesFromProps": Object {
+        "gridAutoColumns": null,
+        "gridAutoFlow": null,
+        "gridAutoRows": null,
+        "gridTemplateColumns": null,
+        "gridTemplateRows": null,
+      },
       "parentFlexDirection": null,
       "parentFlexGap": 0,
+      "parentGridCellGlobalFrames": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
index ea07d028e61d..a4378542506f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -95,14 +95,14 @@ export function getClosestGridCellToPoint(
 
 export function getGridChildCellCoordBoundsFromCanvas(
   child: ElementInstanceMetadata,
-  grid: ElementInstanceMetadata,
+  gridCellGlobalFrames: GridCellGlobalFrames,
 ) {
   const cellFrame = child.globalFrame
-  if (cellFrame == null || isInfinityRectangle(cellFrame)) {
+  if (cellFrame == null || isInfinityRectangle(cellFrame) || gridCellGlobalFrames == null) {
     return null
   }
 
-  const cellOrigin = getClosestGridCellToPointFromMetadata(grid, cellFrame)
+  const cellOrigin = getClosestGridCellToPoint(gridCellGlobalFrames, cellFrame)
   if (cellOrigin == null) {
     return null
   }
@@ -114,7 +114,7 @@ export function getGridChildCellCoordBoundsFromCanvas(
       y: cellFrame.height,
     }),
   )
-  const cellEnd = getClosestGridCellToPointFromMetadata(grid, cellEndPoint)
+  const cellEnd = getClosestGridCellToPoint(gridCellGlobalFrames, cellEndPoint)
   if (cellEnd == null) {
     return null
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 079a12531a0c..77a6260c8856 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -34,7 +34,6 @@ import { deleteProperties } from '../../commands/delete-properties-command'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { setCssLengthProperty } from '../../commands/set-css-length-command'
 import { setProperty } from '../../commands/set-property-command'
-import type { CustomStrategyState } from '../canvas-strategy-types'
 import type { DragInteractionData } from '../interaction-state'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 import {
@@ -51,21 +50,21 @@ export function runGridRearrangeMove(
   selectedElement: ElementPath,
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
-  grid: ElementInstanceMetadata,
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  gridTemplate: GridContainerProperties,
   newPathAfterReparent?: ElementPath,
 ): CanvasCommand[] {
   if (interactionData.drag == null) {
     return []
   }
 
-  const isReparent = newPathAfterReparent != null
-
-  const { gridCellGlobalFrames, containerGridProperties: gridTemplate } =
-    grid.specialSizeMeasurements
-  if (gridCellGlobalFrames == null) {
+  const originalElement = MetadataUtils.findElementByElementPath(jsxMetadata, selectedElement)
+  if (originalElement == null) {
     return []
   }
 
+  const isReparent = newPathAfterReparent != null
+
   const mousePos = offsetPoint(interactionData.dragStart, interactionData.drag)
   const targetCellData = getClosestGridCellToPoint(gridCellGlobalFrames, mousePos)
   const targetCellCoords = targetCellData?.gridCellCoordinates
@@ -75,23 +74,15 @@ export function runGridRearrangeMove(
 
   const originalElementGridConfiguration = isReparent
     ? {
-        originalElementMetadata: null,
         originalCellBounds: { width: 1, height: 1 }, //when reparenting, we just put it in a single cell
         mouseCellPosInOriginalElement: { row: 0, column: 0 },
       }
-    : getOriginalElementGridConfiguration(
-        gridCellGlobalFrames,
-        interactionData,
-        jsxMetadata,
-        selectedElement,
-        grid,
-      )
+    : getOriginalElementGridConfiguration(gridCellGlobalFrames, interactionData, originalElement)
   if (originalElementGridConfiguration == null) {
     return []
   }
 
-  const { originalElementMetadata, originalCellBounds, mouseCellPosInOriginalElement } =
-    originalElementGridConfiguration
+  const { originalCellBounds, mouseCellPosInOriginalElement } = originalElementGridConfiguration
 
   // get the new adjusted row
   const row = Math.max(targetCellCoords.row - mouseCellPosInOriginalElement.row, 1)
@@ -99,6 +90,7 @@ export function runGridRearrangeMove(
   const column = Math.max(targetCellCoords.column - mouseCellPosInOriginalElement.column, 1)
 
   const pathForCommands = newPathAfterReparent ?? targetElement // when reparenting, we want to use the new path for commands
+  const gridPath = EP.parentPath(pathForCommands)
 
   const gridCellMoveCommands = setGridPropsCommands(pathForCommands, gridTemplate, {
     gridColumnStart: gridPositionValue(column),
@@ -120,7 +112,7 @@ export function runGridRearrangeMove(
   })
 
   // The siblings of the grid element being moved
-  const siblings = MetadataUtils.getChildrenUnordered(jsxMetadata, grid.elementPath)
+  const siblings = MetadataUtils.getChildrenUnordered(jsxMetadata, gridPath)
     .filter((s) => !EP.pathsEqual(s.elementPath, selectedElement))
     .map(
       (s, index): SortableGridElementProperties => ({
@@ -152,14 +144,15 @@ export function runGridRearrangeMove(
 
   const moveType = getGridMoveType({
     elementPath: targetElement,
-    originalElementMetadata: originalElementMetadata,
+    originalElementMetadata: originalElement,
     possiblyReorderIndex: possiblyReorderIndex,
     cellsSortedByPosition: cellsSortedByPosition,
+    isReparent: isReparent,
   })
 
   const updateGridControlsCommand = showGridControls(
     'mid-interaction',
-    grid.elementPath,
+    gridPath,
     targetCellData?.gridCellCoordinates ?? null,
     gridCellCoordinates(row, column),
   )
@@ -171,14 +164,14 @@ export function runGridRearrangeMove(
       }
       const absoluteMoveCommands = gridChildAbsoluteMoveCommands(
         MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
-        MetadataUtils.getFrameOrZeroRectInCanvasCoords(grid.elementPath, jsxMetadata),
+        MetadataUtils.getFrameOrZeroRectInCanvasCoords(gridPath, jsxMetadata),
         interactionData,
       )
       return [...absoluteMoveCommands, updateGridControlsCommand]
     }
     case 'rearrange': {
       const targetRootCell = gridCellCoordinates(row, column)
-      const canvasRect = getGlobalFrameOfGridCell(grid, targetRootCell)
+      const canvasRect = getGlobalFrameOfGridCell(gridCellGlobalFrames, targetRootCell)
       const absoluteMoveCommands =
         canvasRect == null || isReparent
           ? []
@@ -459,9 +452,11 @@ function getGridMoveType(params: {
   originalElementMetadata: ElementInstanceMetadata | null
   possiblyReorderIndex: number
   cellsSortedByPosition: SortableGridElementProperties[]
+  isReparent: boolean
 }): GridMoveType {
   const specialSizeMeasurements = params.originalElementMetadata?.specialSizeMeasurements
   if (
+    !params.isReparent &&
     specialSizeMeasurements != null &&
     MetadataUtils.isPositionAbsolute(params.originalElementMetadata)
   ) {
@@ -530,7 +525,7 @@ function getGridPositionIndex(props: {
 
 export type GridCellGlobalFrames = Array<Array<CanvasRectangle>>
 
-export function getGlobalFrameOfGridCell(
+export function getGlobalFrameOfGridCellFromMetadata(
   grid: ElementInstanceMetadata,
   coords: GridCellCoordinates,
 ): CanvasRectangle | null {
@@ -539,6 +534,13 @@ export function getGlobalFrameOfGridCell(
     return null
   }
 
+  return getGlobalFrameOfGridCell(gridCellGlobalFrames, coords)
+}
+
+export function getGlobalFrameOfGridCell(
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  coords: GridCellCoordinates,
+): CanvasRectangle | null {
   return gridCellGlobalFrames[coords.row - 1]?.[coords.column - 1] ?? null
 }
 
@@ -719,9 +721,7 @@ export function getGridRelatedIndexes(params: {
 function getOriginalElementGridConfiguration(
   gridCellGlobalFrames: GridCellGlobalFrames,
   interactionData: DragInteractionData,
-  jsxMetadata: ElementInstanceMetadataMap,
-  selectedElement: ElementPath,
-  grid: ElementInstanceMetadata,
+  originalElement: ElementInstanceMetadata,
 ) {
   const draggingFromCellCoords = getClosestGridCellToPoint(
     gridCellGlobalFrames,
@@ -731,23 +731,15 @@ function getOriginalElementGridConfiguration(
     return null
   }
 
-  const originalElementMetadata = MetadataUtils.findElementByElementPath(
-    jsxMetadata,
-    selectedElement,
-  )
-  if (originalElementMetadata == null) {
-    return null
-  }
-
   // measured cell coord bounds on the canvas, this is the default when the cell position is not explicitly set
   const originalElementCellCoordsOnCanvas = getGridChildCellCoordBoundsFromCanvas(
-    originalElementMetadata,
-    grid,
+    originalElement,
+    gridCellGlobalFrames,
   )
 
   // get the bounds from the props, or the canvas, or just default to the cell of the starting mouse position
   const originalCellBounds = getGridChildCellCoordBoundsFromProps(
-    originalElementMetadata,
+    originalElement,
     originalElementCellCoordsOnCanvas ?? draggingFromCellCoords,
   )
 
@@ -758,7 +750,6 @@ function getOriginalElementGridConfiguration(
   )
 
   return {
-    originalElementMetadata,
     originalCellBounds,
     mouseCellPosInOriginalElement,
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
index e6e33673de48..8952cee616b8 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
@@ -3,11 +3,7 @@ import * as EP from '../../../../core/shared/element-path'
 import type { GridPositionValue } from '../../../../core/shared/element-template'
 import { gridPositionValue } from '../../../../core/shared/element-template'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
-import type {
-  CanvasStrategy,
-  CustomStrategyState,
-  InteractionCanvasState,
-} from '../canvas-strategy-types'
+import type { CanvasStrategy, InteractionCanvasState } from '../canvas-strategy-types'
 import {
   emptyStrategyApplicationResult,
   getTargetPathsFromInteractionTarget,
@@ -21,7 +17,6 @@ import { accumulatePresses } from './shared-keyboard-strategy-helpers'
 export function gridRearrangeResizeKeyboardStrategy(
   canvasState: InteractionCanvasState,
   interactionSession: InteractionSession | null,
-  customState: CustomStrategyState,
 ): CanvasStrategy | null {
   if (
     interactionSession?.activeControl.type !== 'KEYBOARD_CATCHER_CONTROL' ||
@@ -48,13 +43,13 @@ export function gridRearrangeResizeKeyboardStrategy(
 
   const parentGridPath = EP.parentPath(target)
 
-  const grid = MetadataUtils.findElementByElementPath(canvasState.startingMetadata, parentGridPath)
-  if (grid == null) {
-    return null
-  }
-  const gridTemplate = grid.specialSizeMeasurements.containerGridProperties
+  const gridTemplate = cell.specialSizeMeasurements.parentContainerGridProperties
+  const gridCellGlobalFrames = cell.specialSizeMeasurements.parentGridCellGlobalFrames
 
-  const initialCellBounds = getGridChildCellCoordBoundsFromCanvas(cell, grid)
+  const initialCellBounds =
+    gridCellGlobalFrames != null
+      ? getGridChildCellCoordBoundsFromCanvas(cell, gridCellGlobalFrames)
+      : null
   if (initialCellBounds == null) {
     return null
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
index 255426c99f09..91d3e60875ee 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
@@ -72,21 +72,28 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
 
       const targetElement = EP.appendToPath(EP.parentPath(selectedElement), newUid)
 
-      const grid = MetadataUtils.findElementByElementPath(
+      const selectedElementMetadata = MetadataUtils.findElementByElementPath(
         canvasState.startingMetadata,
-        EP.parentPath(selectedElement),
+        selectedElement,
       )
-      if (grid == null) {
+      if (selectedElementMetadata == null) {
         return emptyStrategyApplicationResult
       }
 
-      const moveCommands = runGridRearrangeMove(
-        targetElement,
-        selectedElement,
-        canvasState.startingMetadata,
-        interactionSession.interactionData,
-        grid,
-      )
+      const { parentGridCellGlobalFrames, parentContainerGridProperties } =
+        selectedElementMetadata.specialSizeMeasurements
+
+      const moveCommands =
+        parentGridCellGlobalFrames != null
+          ? runGridRearrangeMove(
+              targetElement,
+              selectedElement,
+              canvasState.startingMetadata,
+              interactionSession.interactionData,
+              parentGridCellGlobalFrames,
+              parentContainerGridProperties,
+            )
+          : []
       if (moveCommands.length === 0) {
         return emptyStrategyApplicationResult
       }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
index 31d979dd8cc7..e293d4cd572d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
@@ -36,6 +36,26 @@ describe('grid rearrange move strategy', () => {
     })
   })
 
+  it('can rearrange elements in a grid component', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeGridComponent,
+      'await-first-dom-report',
+    )
+
+    const testId = 'aaa'
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
+      scale: 1,
+      pathString: `sb/scene/grid/${testId}`,
+      testId: testId,
+    })
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '7',
+      gridColumnStart: '3',
+      gridRowEnd: '4',
+      gridRowStart: '2',
+    })
+  })
+
   it('can not rearrange multicell element out of the grid', async () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
@@ -908,6 +928,105 @@ export var storyboard = (
 )
 `
 
+const ProjectCodeGridComponent = `import * as React from 'react'
+import { Scene, Storyboard, Placeholder } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 847,
+        height: 895,
+        position: 'absolute',
+        left: 46,
+        top: 131,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <Grid
+        style={{
+          display: 'grid',
+          gridTemplateRows: '75px 75px 75px 75px',
+          gridTemplateColumns:
+            '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
+          gridGap: 16,
+          height: 482,
+          width: 786,
+          position: 'absolute',
+          left: 31,
+          top: 0,
+        }}
+        data-uid='grid'
+      >
+        <div
+          style={{
+            minHeight: 0,
+            backgroundColor: '#f3785f',
+            gridColumnEnd: 5,
+            gridColumnStart: 1,
+            gridRowEnd: 3,
+            gridRowStart: 1,
+          }}
+          data-uid='aaa'
+          data-testid='aaa'
+        />
+        <div
+          style={{
+            minHeight: 0,
+            backgroundColor: '#23565b',
+          }}
+          data-uid='bbb'
+          data-testid='bbb'
+        />
+        <Placeholder
+          style={{
+            minHeight: 0,
+            gridColumnEnd: 5,
+            gridRowEnd: 4,
+            gridColumnStart: 1,
+            gridRowStart: 3,
+            backgroundColor: '#0074ff',
+          }}
+          data-uid='ccc'
+        />
+        <Placeholder
+          style={{
+            minHeight: 0,
+            gridColumnEnd: 9,
+            gridRowEnd: 4,
+            gridColumnStart: 5,
+            gridRowStart: 3,
+          }}
+          data-uid='ddd'
+        />
+      </Grid>
+    </Scene>
+  </Storyboard>
+)
+
+export function Grid(props) {
+  return (
+    <div
+      {...props}
+      style={{
+        ...props.style,
+        display: 'grid',
+        gridTemplateRows: '75px 75px 75px 75px',
+        gridTemplateColumns:
+          '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
+        gridGap: 16,
+      }}
+      data-uid='f84914f31dbc6c5d9b44c11ae54139ef'
+    >
+      {props.children}
+    </div>
+  )
+}
+`
+
 const ProjectCodeReorder = `import * as React from 'react'
 import { Scene, Storyboard } from 'utopia-api'
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
index d798a5d4ee05..430007657cc5 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
@@ -145,21 +145,28 @@ function getCommandsAndPatchForGridRearrange(
     return { commands: [], elementsToRerender: [] }
   }
 
-  const grid = MetadataUtils.findElementByElementPath(
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
     canvasState.startingMetadata,
-    EP.parentPath(selectedElement),
+    selectedElement,
   )
-  if (grid == null) {
+  if (selectedElementMetadata == null) {
     return { commands: [], elementsToRerender: [] }
   }
 
-  const commands = runGridRearrangeMove(
-    selectedElement,
-    selectedElement,
-    canvasState.startingMetadata,
-    interactionData,
-    grid,
-  )
+  const { parentGridCellGlobalFrames, parentContainerGridProperties } =
+    selectedElementMetadata.specialSizeMeasurements
+
+  const commands =
+    parentGridCellGlobalFrames != null
+      ? runGridRearrangeMove(
+          selectedElement,
+          selectedElement,
+          canvasState.startingMetadata,
+          interactionData,
+          parentGridCellGlobalFrames,
+          parentContainerGridProperties,
+        )
+      : []
 
   return {
     commands: commands,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 50aed2f5ed0d..2f8ee083020b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -163,15 +163,6 @@ export function applyGridReparent(
           return emptyStrategyApplicationResult
         }
 
-        const grid = MetadataUtils.findElementByElementPath(
-          canvasState.startingMetadata,
-          newParent.intendedParentPath,
-        )
-
-        if (grid == null) {
-          return strategyApplicationResult([], [newParent.intendedParentPath])
-        }
-
         const allowedToReparent = selectedElements.every((selectedElement) => {
           return isAllowedToReparent(
             canvasState.projectContents,
@@ -197,7 +188,6 @@ export function applyGridReparent(
               selectedElement,
               newParent,
               interactionData,
-              grid,
             ),
           selectedElements,
         )
@@ -254,7 +244,6 @@ function gridReparentCommands(
   target: ElementPath,
   newParent: InsertionPath,
   interactionData: DragInteractionData,
-  grid: ElementInstanceMetadata,
 ) {
   const reparentResult = getReparentOutcome(
     jsxMetadata,
@@ -275,14 +264,25 @@ function gridReparentCommands(
 
   const { commands: reparentCommands, newPath } = reparentResult
 
-  const gridPropsCommands = runGridRearrangeMove(
-    target,
-    target,
+  const targetParent = MetadataUtils.findElementByElementPath(
     jsxMetadata,
-    interactionData,
-    grid,
-    newPath,
+    newParent.intendedParentPath,
   )
+  const gridCellGlobalFrames = targetParent?.specialSizeMeasurements.gridCellGlobalFrames ?? null
+  const gridTemplate = targetParent?.specialSizeMeasurements.containerGridProperties ?? null
+
+  const gridPropsCommands =
+    gridCellGlobalFrames != null && gridTemplate != null
+      ? runGridRearrangeMove(
+          target,
+          target,
+          jsxMetadata,
+          interactionData,
+          gridCellGlobalFrames,
+          gridTemplate,
+          newPath,
+        )
+      : []
 
   const removeAbsolutePositioningPropsCommands = removeAbsolutePositioningProps('always', newPath)
 
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 91ae616bf5ae..2cb226ce961e 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -63,7 +63,7 @@ import {
 import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
 import { gridCellTargetId } from '../canvas-strategies/strategies/grid-cell-bounds'
 import {
-  getGlobalFrameOfGridCell,
+  getGlobalFrameOfGridCellFromMetadata,
   getGridRelatedIndexes,
 } from '../canvas-strategies/strategies/grid-helpers'
 import { canResizeGridTemplate } from '../canvas-strategies/strategies/resize-grid-strategy'
@@ -1153,7 +1153,7 @@ const AbsoluteDistanceIndicators = React.memo(
       if (gridMetadata == null || props.targetRootCell == null) {
         return null
       }
-      return getGlobalFrameOfGridCell(gridMetadata, props.targetRootCell)
+      return getGlobalFrameOfGridCellFromMetadata(gridMetadata, props.targetRootCell)
     }, [props.targetRootCell, gridMetadata])
 
     const distanceTop =
@@ -1460,7 +1460,7 @@ function useCellAnimation(params: {
       return null
     }
 
-    return getGlobalFrameOfGridCell(gridMetadata, targetRootCell)
+    return getGlobalFrameOfGridCellFromMetadata(gridMetadata, targetRootCell)
   }, [gridMetadata, targetRootCell])
 
   React.useEffect(() => {
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 60f3d3c5f1ab..05c167799c1d 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -64,7 +64,7 @@ import {
 } from '../../core/model/utopia-constants'
 import { emptySet } from '../../core/shared/set-utils'
 import { getDeepestPathOnDomElement, getPathStringsOnDomElement } from '../../core/shared/uid-utils'
-import { forceNotNull } from '../../core/shared/optional-utils'
+import { forceNotNull, optionalMap } from '../../core/shared/optional-utils'
 import { fastForEach } from '../../core/shared/utils'
 import type { EditorState, EditorStorePatched } from '../editor/store/editor-state'
 import { shallowEqual } from '../../core/shared/equality-utils'
@@ -921,10 +921,25 @@ function getSpecialMeasurements(
     ? padding.value
     : sides(undefined, undefined, undefined, undefined)
 
+  const pathStr = element.getAttribute(UTOPIA_PATH_KEY)
+  const path = optionalMap(EP.fromString, pathStr)
+
   const gridCellGlobalFrames =
-    layoutSystemForChildren === 'grid'
+    path != null && layoutSystemForChildren === 'grid'
       ? measureGlobalFramesOfGridCellsFromControl(
-          element,
+          path,
+          scale,
+          containerRectLazy,
+          elementCanvasRectangleCache,
+        )
+      : null
+
+  const parentGridCellGlobalFrames =
+    element.parentElement != null &&
+    elementLayoutSystem(parentElementStyle) === 'grid' &&
+    path != null
+      ? measureGlobalFramesOfGridCellsFromControl(
+          EP.parentPath(path),
           scale,
           containerRectLazy,
           elementCanvasRectangleCache,
@@ -932,6 +947,7 @@ function getSpecialMeasurements(
       : null
 
   const containerGridPropertiesFromProps = getGridContainerProperties(element.style)
+  const parentContainerGridPropertiesFromProps = getGridContainerProperties(parentElementStyle)
   const containerGridProperties = getGridContainerProperties(elementStyle, {
     dynamicCols: isDynamicGridTemplate(containerGridPropertiesFromProps.gridTemplateColumns),
     dynamicRows: isDynamicGridTemplate(containerGridPropertiesFromProps.gridTemplateRows),
@@ -993,12 +1009,15 @@ function getSpecialMeasurements(
     textBounds,
     computedHugProperty,
     containerGridProperties,
+    parentContainerGridProperties,
     containerElementProperties,
     containerGridPropertiesFromProps,
+    parentContainerGridPropertiesFromProps,
     containerElementPropertiesFromProps,
     rowGap,
     columnGap,
     gridCellGlobalFrames,
+    parentGridCellGlobalFrames,
     justifySelf,
     alignSelf,
   )
@@ -1063,46 +1082,42 @@ function getClosestOffsetParent(element: HTMLElement): Element | null {
 }
 
 function measureGlobalFramesOfGridCellsFromControl(
-  grid: HTMLElement,
+  gridPath: ElementPath,
   scale: number,
   containerRectLazy: CanvasPoint | (() => CanvasPoint),
   elementCanvasRectangleCache: ElementCanvasRectangleCache,
 ): GridCellGlobalFrames | null {
-  const path = grid.getAttribute(UTOPIA_PATH_KEY)
-  let gridCellGlobalFrames: Array<Array<CanvasRectangle>> | null = null
-  if (path != null) {
-    const gridControlElement = document.getElementById(
-      GridMeasurementHelperKey(EP.fromString(path)),
-    )
-    if (gridControlElement != null) {
-      gridCellGlobalFrames = []
-      for (const cell of gridControlElement.children) {
-        if (!(cell instanceof HTMLElement)) {
-          continue
-        }
-        const rowIndexAttr = cell.getAttribute('data-grid-row')
-        const columnIndexAttr = cell.getAttribute('data-grid-column')
-        if (rowIndexAttr == null || columnIndexAttr == null) {
-          continue
-        }
-        const rowIndex = parseInt(rowIndexAttr)
-        const columnIndex = parseInt(columnIndexAttr)
-        if (!isFinite(rowIndex) || !isFinite(columnIndex)) {
-          continue
-        }
-        const row = gridCellGlobalFrames[rowIndex - 1]
-        if (row == null) {
-          gridCellGlobalFrames[rowIndex - 1] = []
-        }
-        gridCellGlobalFrames[rowIndex - 1][columnIndex - 1] = globalFrameForElement(
-          cell,
-          scale,
-          containerRectLazy,
-          'without-text-content',
-          'nearest-half',
-          elementCanvasRectangleCache,
-        )
+  const path = EP.toString(gridPath)
+  let gridCellGlobalFrames: GridCellGlobalFrames | null = null
+  const gridControlElement = document.getElementById(GridMeasurementHelperKey(EP.fromString(path)))
+  if (gridControlElement != null) {
+    gridCellGlobalFrames = []
+    for (const cell of gridControlElement.children) {
+      if (!(cell instanceof HTMLElement)) {
+        continue
+      }
+      const rowIndexAttr = cell.getAttribute('data-grid-row')
+      const columnIndexAttr = cell.getAttribute('data-grid-column')
+      if (rowIndexAttr == null || columnIndexAttr == null) {
+        continue
       }
+      const rowIndex = parseInt(rowIndexAttr)
+      const columnIndex = parseInt(columnIndexAttr)
+      if (!isFinite(rowIndex) || !isFinite(columnIndex)) {
+        continue
+      }
+      const row = gridCellGlobalFrames[rowIndex - 1]
+      if (row == null) {
+        gridCellGlobalFrames[rowIndex - 1] = []
+      }
+      gridCellGlobalFrames[rowIndex - 1][columnIndex - 1] = globalFrameForElement(
+        cell,
+        scale,
+        containerRectLazy,
+        'without-text-content',
+        'nearest-half',
+        elementCanvasRectangleCache,
+      )
     }
   }
   return gridCellGlobalFrames
diff --git a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
index 3efbf85ed95b..d4b0f00ce07c 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
@@ -302,6 +302,13 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
       gridAutoRows: null,
       gridAutoFlow: null,
     },
+    parentContainerGridProperties: {
+      gridTemplateColumns: null,
+      gridTemplateRows: null,
+      gridAutoColumns: null,
+      gridAutoRows: null,
+      gridAutoFlow: null,
+    },
     elementGridProperties: {
       gridColumnStart: null,
       gridColumnEnd: null,
@@ -315,6 +322,13 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
       gridAutoRows: null,
       gridAutoFlow: null,
     },
+    parentContainerGridPropertiesFromProps: {
+      gridTemplateColumns: null,
+      gridTemplateRows: null,
+      gridAutoColumns: null,
+      gridAutoRows: null,
+      gridAutoFlow: null,
+    },
     elementGridPropertiesFromProps: {
       gridColumnStart: null,
       gridColumnEnd: null,
@@ -324,6 +338,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     rowGap: null,
     columnGap: null,
     gridCellGlobalFrames: null,
+    parentGridCellGlobalFrames: null,
     justifySelf: null,
     alignSelf: null,
   }
@@ -425,6 +440,13 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
       gridAutoRows: null,
       gridAutoFlow: null,
     },
+    parentContainerGridProperties: {
+      gridTemplateColumns: null,
+      gridTemplateRows: null,
+      gridAutoColumns: null,
+      gridAutoRows: null,
+      gridAutoFlow: null,
+    },
     elementGridProperties: {
       gridColumnStart: null,
       gridColumnEnd: null,
@@ -438,6 +460,13 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
       gridAutoRows: null,
       gridAutoFlow: null,
     },
+    parentContainerGridPropertiesFromProps: {
+      gridTemplateColumns: null,
+      gridTemplateRows: null,
+      gridAutoColumns: null,
+      gridAutoRows: null,
+      gridAutoFlow: null,
+    },
     elementGridPropertiesFromProps: {
       gridColumnStart: null,
       gridColumnEnd: null,
@@ -447,6 +476,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     rowGap: null,
     columnGap: null,
     gridCellGlobalFrames: null,
+    parentGridCellGlobalFrames: null,
     justifySelf: null,
     alignSelf: null,
   }
@@ -603,6 +633,13 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
         gridAutoRows: null,
         gridAutoFlow: null,
       },
+      parentContainerGridProperties: {
+        gridTemplateColumns: null,
+        gridTemplateRows: null,
+        gridAutoColumns: null,
+        gridAutoRows: null,
+        gridAutoFlow: null,
+      },
       elementGridProperties: {
         gridColumnStart: null,
         gridColumnEnd: null,
@@ -616,6 +653,13 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
         gridAutoRows: null,
         gridAutoFlow: null,
       },
+      parentContainerGridPropertiesFromProps: {
+        gridTemplateColumns: null,
+        gridTemplateRows: null,
+        gridAutoColumns: null,
+        gridAutoRows: null,
+        gridAutoFlow: null,
+      },
       elementGridPropertiesFromProps: {
         gridColumnStart: null,
         gridColumnEnd: null,
@@ -625,6 +669,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       rowGap: null,
       columnGap: null,
       gridCellGlobalFrames: null,
+      parentGridCellGlobalFrames: null,
       justifySelf: null,
       alignSelf: null,
     },
@@ -758,6 +803,13 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
         gridAutoRows: null,
         gridAutoFlow: null,
       },
+      parentContainerGridProperties: {
+        gridTemplateColumns: null,
+        gridTemplateRows: null,
+        gridAutoColumns: null,
+        gridAutoRows: null,
+        gridAutoFlow: null,
+      },
       elementGridProperties: {
         gridColumnStart: null,
         gridColumnEnd: null,
@@ -771,6 +823,13 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
         gridAutoRows: null,
         gridAutoFlow: null,
       },
+      parentContainerGridPropertiesFromProps: {
+        gridTemplateColumns: null,
+        gridTemplateRows: null,
+        gridAutoColumns: null,
+        gridAutoRows: null,
+        gridAutoFlow: null,
+      },
       elementGridPropertiesFromProps: {
         gridColumnStart: null,
         gridColumnEnd: null,
@@ -780,6 +839,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       rowGap: null,
       columnGap: null,
       gridCellGlobalFrames: null,
+      parentGridCellGlobalFrames: null,
       justifySelf: null,
       alignSelf: null,
     },
@@ -938,6 +998,13 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
           gridAutoRows: null,
           gridAutoFlow: null,
         },
+        parentContainerGridProperties: {
+          gridTemplateColumns: null,
+          gridTemplateRows: null,
+          gridAutoColumns: null,
+          gridAutoRows: null,
+          gridAutoFlow: null,
+        },
         elementGridProperties: {
           gridColumnStart: null,
           gridColumnEnd: null,
@@ -951,6 +1018,13 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
           gridAutoRows: null,
           gridAutoFlow: null,
         },
+        parentContainerGridPropertiesFromProps: {
+          gridTemplateColumns: null,
+          gridTemplateRows: null,
+          gridAutoColumns: null,
+          gridAutoRows: null,
+          gridAutoFlow: null,
+        },
         elementGridPropertiesFromProps: {
           gridColumnStart: null,
           gridColumnEnd: null,
@@ -960,6 +1034,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         rowGap: null,
         columnGap: null,
         gridCellGlobalFrames: null,
+        parentGridCellGlobalFrames: null,
         justifySelf: null,
         alignSelf: null,
       },
@@ -1095,6 +1170,13 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
           gridAutoRows: null,
           gridAutoFlow: null,
         },
+        parentContainerGridProperties: {
+          gridTemplateColumns: null,
+          gridTemplateRows: null,
+          gridAutoColumns: null,
+          gridAutoRows: null,
+          gridAutoFlow: null,
+        },
         elementGridProperties: {
           gridColumnStart: null,
           gridColumnEnd: null,
@@ -1108,6 +1190,13 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
           gridAutoRows: null,
           gridAutoFlow: null,
         },
+        parentContainerGridPropertiesFromProps: {
+          gridTemplateColumns: null,
+          gridTemplateRows: null,
+          gridAutoColumns: null,
+          gridAutoRows: null,
+          gridAutoFlow: null,
+        },
         elementGridPropertiesFromProps: {
           gridColumnStart: null,
           gridColumnEnd: null,
@@ -1117,6 +1206,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         rowGap: null,
         columnGap: null,
         gridCellGlobalFrames: null,
+        parentGridCellGlobalFrames: null,
         justifySelf: null,
         alignSelf: null,
       },
@@ -1252,6 +1342,13 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
           gridAutoRows: null,
           gridAutoFlow: null,
         },
+        parentContainerGridProperties: {
+          gridTemplateColumns: null,
+          gridTemplateRows: null,
+          gridAutoColumns: null,
+          gridAutoRows: null,
+          gridAutoFlow: null,
+        },
         elementGridProperties: {
           gridColumnStart: null,
           gridColumnEnd: null,
@@ -1265,6 +1362,13 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
           gridAutoRows: null,
           gridAutoFlow: null,
         },
+        parentContainerGridPropertiesFromProps: {
+          gridTemplateColumns: null,
+          gridTemplateRows: null,
+          gridAutoColumns: null,
+          gridAutoRows: null,
+          gridAutoFlow: null,
+        },
         elementGridPropertiesFromProps: {
           gridColumnStart: null,
           gridColumnEnd: null,
@@ -1274,6 +1378,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         rowGap: null,
         columnGap: null,
         gridCellGlobalFrames: null,
+        parentGridCellGlobalFrames: null,
         justifySelf: null,
         alignSelf: null,
       },
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 872d6b86b085..64722a41ff12 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -2247,6 +2247,10 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
       oldSize.containerGridProperties,
       newSize.containerGridProperties,
     ).areEqual
+    const parentGridContainerPropertiesEqual = GridContainerPropertiesKeepDeepEquality()(
+      oldSize.parentContainerGridProperties,
+      newSize.parentContainerGridProperties,
+    ).areEqual
     const gridElementPropertiesEqual = GridElementPropertiesKeepDeepEquality()(
       oldSize.elementGridProperties,
       newSize.elementGridProperties,
@@ -2256,6 +2260,10 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
       oldSize.containerGridPropertiesFromProps,
       newSize.containerGridPropertiesFromProps,
     ).areEqual
+    const parentGridContainerPropertiesFromPropsEqual = GridContainerPropertiesKeepDeepEquality()(
+      oldSize.parentContainerGridPropertiesFromProps,
+      newSize.parentContainerGridPropertiesFromProps,
+    ).areEqual
     const gridElementPropertiesFromPropsEqual = GridElementPropertiesKeepDeepEquality()(
       oldSize.elementGridPropertiesFromProps,
       newSize.elementGridPropertiesFromProps,
@@ -2270,6 +2278,13 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
     const justifySelfEquals = oldSize.justifySelf === newSize.justifySelf
     const alignSelfEquals = oldSize.alignSelf === newSize.alignSelf
 
+    const gridCellGlobalFramesEqual = nullableDeepEquality(
+      arrayDeepEquality(arrayDeepEquality(CanvasRectangleKeepDeepEquality)),
+    )(oldSize.gridCellGlobalFrames, newSize.gridCellGlobalFrames).areEqual
+    const parentGridCellGlobalFramesEqual = nullableDeepEquality(
+      arrayDeepEquality(arrayDeepEquality(CanvasRectangleKeepDeepEquality)),
+    )(oldSize.gridCellGlobalFrames, newSize.gridCellGlobalFrames).areEqual
+
     const areEqual =
       offsetResult.areEqual &&
       coordinateSystemBoundsResult.areEqual &&
@@ -2314,13 +2329,17 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
       textBoundsEqual &&
       computedHugPropertyEqual &&
       gridContainerPropertiesEqual &&
+      parentGridContainerPropertiesEqual &&
       gridElementPropertiesEqual &&
       gridContainerPropertiesFromPropsEqual &&
+      parentGridContainerPropertiesFromPropsEqual &&
       gridElementPropertiesFromPropsEqual &&
       rowGapEquals &&
       columnGapEquals &&
       justifySelfEquals &&
-      alignSelfEquals
+      alignSelfEquals &&
+      gridCellGlobalFramesEqual &&
+      parentGridCellGlobalFramesEqual
     if (areEqual) {
       return keepDeepEqualityResult(oldSize, true)
     } else {
@@ -2369,12 +2388,15 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
         newSize.textBounds,
         newSize.computedHugProperty,
         newSize.containerGridProperties,
+        newSize.parentContainerGridProperties,
         newSize.elementGridProperties,
         newSize.containerGridPropertiesFromProps,
+        newSize.parentContainerGridPropertiesFromProps,
         newSize.elementGridPropertiesFromProps,
         newSize.rowGap,
         newSize.columnGap,
         newSize.gridCellGlobalFrames,
+        newSize.parentGridCellGlobalFrames,
         newSize.justifySelf,
         newSize.alignSelf,
       )
diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts
index f7b204760872..24cdf8dea6ce 100644
--- a/editor/src/core/shared/element-template.ts
+++ b/editor/src/core/shared/element-template.ts
@@ -4,12 +4,7 @@ import type {
   StaticElementPathPart,
   ElementPath,
 } from './project-file-types'
-import type {
-  CanvasRectangle,
-  LocalPoint,
-  MaybeInfinityCanvasRectangle,
-  MaybeInfinityLocalRectangle,
-} from './math-utils'
+import type { CanvasRectangle, LocalPoint, MaybeInfinityCanvasRectangle } from './math-utils'
 import { zeroCanvasRect } from './math-utils'
 import type { Either } from './either'
 import { flatMapEither, isRight, left, mapEither, right } from './either'
@@ -212,6 +207,7 @@ import {
   emptyAttributeMetadata,
   simpleFunctionWrap,
 } from 'utopia-shared/src/types/element-template'
+import type { GridCellGlobalFrames } from '../../components/canvas/canvas-strategies/strategies/grid-helpers'
 export { emptyComments, emptyComputedStyle, emptyAttributeMetadata }
 
 export function isParsedCommentsEmpty(comments: ParsedComments): boolean {
@@ -2834,12 +2830,15 @@ export interface SpecialSizeMeasurements {
   textDecorationLine: string | null
   computedHugProperty: HugPropertyWidthHeight
   containerGridProperties: GridContainerProperties
+  parentContainerGridProperties: GridContainerProperties
   elementGridProperties: GridElementProperties
   containerGridPropertiesFromProps: GridContainerProperties
+  parentContainerGridPropertiesFromProps: GridContainerProperties
   elementGridPropertiesFromProps: GridElementProperties
   rowGap: number | null
   columnGap: number | null
-  gridCellGlobalFrames: Array<Array<CanvasRectangle>> | null
+  gridCellGlobalFrames: GridCellGlobalFrames | null
+  parentGridCellGlobalFrames: GridCellGlobalFrames | null
 }
 
 export function specialSizeMeasurements(
@@ -2887,12 +2886,15 @@ export function specialSizeMeasurements(
   textBounds: CanvasRectangle | null,
   computedHugProperty: HugPropertyWidthHeight,
   containerGridProperties: GridContainerProperties,
+  parentContainerGridProperties: GridContainerProperties,
   elementGridProperties: GridElementProperties,
   containerGridPropertiesFromProps: GridContainerProperties,
+  parentContainerGridPropertiesFromProps: GridContainerProperties,
   elementGridPropertiesFromProps: GridElementProperties,
   rowGap: number | null,
   columnGap: number | null,
-  gridCellGlobalFrames: Array<Array<CanvasRectangle>> | null,
+  gridCellGlobalFrames: GridCellGlobalFrames | null,
+  parentGridCellGlobalFrames: GridCellGlobalFrames | null,
   justifySelf: SelfAlignment | null,
   alignSelf: SelfAlignment | null,
 ): SpecialSizeMeasurements {
@@ -2941,12 +2943,15 @@ export function specialSizeMeasurements(
     textDecorationLine,
     computedHugProperty,
     containerGridProperties,
+    parentContainerGridProperties,
     elementGridProperties,
     containerGridPropertiesFromProps,
+    parentContainerGridPropertiesFromProps,
     elementGridPropertiesFromProps,
     rowGap,
     columnGap,
     gridCellGlobalFrames,
+    parentGridCellGlobalFrames,
     justifySelf,
     alignSelf,
   }
@@ -3006,6 +3011,13 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements(
     gridAutoRows: null,
     gridAutoFlow: null,
   },
+  {
+    gridTemplateColumns: null,
+    gridTemplateRows: null,
+    gridAutoColumns: null,
+    gridAutoRows: null,
+    gridAutoFlow: null,
+  },
   {
     gridColumnStart: null,
     gridColumnEnd: null,
@@ -3019,6 +3031,13 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements(
     gridAutoRows: null,
     gridAutoFlow: null,
   },
+  {
+    gridTemplateColumns: null,
+    gridTemplateRows: null,
+    gridAutoColumns: null,
+    gridAutoRows: null,
+    gridAutoFlow: null,
+  },
   {
     gridColumnStart: null,
     gridColumnEnd: null,
@@ -3030,6 +3049,7 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements(
   null,
   null,
   null,
+  null,
 )
 
 export function walkElement(

From 55ab42136605fee26a821ea37d6a51fff948c41c Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Mon, 28 Oct 2024 15:35:48 +0000
Subject: [PATCH 182/272] Correct Grid Column Gap Indicator Position (#6592)

- Apply the same positioning for column gaps as was implemented for row
gaps.
---
 .../grid-gap-control-component.tsx            | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
index ae1e6a05d8ce..c17bc5716353 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
@@ -421,26 +421,21 @@ export function GridGapHandle({
     [onHandleHoverStartInner, index],
   )
 
-  const rowGapStyles =
-    axis === 'row'
-      ? ({
-          left: '50%',
-          top: '50%',
-          transform: 'translate(-50%, -50%)',
-          position: 'absolute',
-          gridArea: `1/${index + 1}/2/${index + 2}`,
-        } as const)
-      : {}
   return (
     <div
-      data-testid={`${GridGapControlHandleTestId}-${gapId}`}
+      data-testid={`${GridGapControlHandleTestId}-${gapId}-${index}`}
       style={{
         visibility: shouldShowHandle ? 'visible' : 'hidden',
         pointerEvents: 'all',
         padding: hitAreaPadding,
         cursor: axis === 'row' ? CSSCursor.GapNS : CSSCursor.GapEW,
         opacity: handleOpacity,
-        ...rowGapStyles,
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        position: 'absolute',
+        gridArea:
+          axis === 'row' ? `1/${index + 1}/2/${index + 2}` : `${index + 1}/1/${index + 2}/2`,
       }}
       onMouseDown={onMouseDown}
       onMouseEnter={onHandleHoverStart}

From bcbd2e58b94574fb330ffcfe278f46e186aae981 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 29 Oct 2024 10:44:32 +0100
Subject: [PATCH 183/272] Prevent click outside for radix select inside
 inspector modal (#6591)

**Problem:**

`RadixSelect` components inside inspector modals don't actually respect
their click outside handling, causing the _modal_ to close down, moving
focus back to whatever is behind, e.g. the canvas.

**Fix:**

The problem is that this happens because RadixSelects are rendered in
their own portal, which interferes with the one created by the inspector
modal.
I tried multiple ways, e.g. setting the `onPointerDownOutside` prop of
the Radix component itself, but it does not work. The _only_ thing that
seems to be working is adding an overlay div in the component's content
itself, which will handle closing the select gracefully (see the
recording please).

| Before | After |
|----------|---------|
| ![Kapture 2024-10-25 at 16 05
24](https://github.com/user-attachments/assets/3fb3a149-31e6-4ba4-85fc-673544d82f46)
| ![Kapture 2024-10-25 at 16 04
21](https://github.com/user-attachments/assets/50bf89d0-02a3-4deb-909b-6872897e2c57)
|

Fixes #6590
---
 editor/src/uuiui/radix-components.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx
index 77feb64fe1db..db93aa8df623 100644
--- a/editor/src/uuiui/radix-components.tsx
+++ b/editor/src/uuiui/radix-components.tsx
@@ -343,11 +343,21 @@ export const RadixSelect = React.memo(
       return fullOptions
     }, [props.options, props.value, props.allowedValues])
 
+    const onMouseDownOutside = React.useCallback(
+      (e: React.MouseEvent) => {
+        e.stopPropagation()
+        e.preventDefault()
+        onOpenChange(false)
+      },
+      [onOpenChange],
+    )
+
     return (
       <Select.Root
         value={props.value?.value}
         onValueChange={props.onValueChange}
         onOpenChange={onOpenChange}
+        open={isOpen}
       >
         <Select.Trigger
           style={{
@@ -390,6 +400,17 @@ export const RadixSelect = React.memo(
               ...(props.contentStyle ?? {}),
             }}
           >
+            <div
+              style={{
+                backgroundColor: 'transparent',
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+              }}
+              onMouseDown={onMouseDownOutside}
+            />
             <Select.ScrollUpButton>
               <Icons.ExpansionArrow color='on-highlight-main' />
             </Select.ScrollUpButton>

From 764f2588df8cb0c57e3d9ebb12cd5d10535a20c9 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Tue, 29 Oct 2024 11:51:40 +0000
Subject: [PATCH 184/272] fix(canvas) Correct Pin Outline Positioning (#6595)

- Shift pin outlines up and to the left by 0.5, scaled to the scale.
---
 .../components/canvas/controls/position-outline.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/editor/src/components/canvas/controls/position-outline.tsx b/editor/src/components/canvas/controls/position-outline.tsx
index 8de8bb92a96c..a9601dc2f32b 100644
--- a/editor/src/components/canvas/controls/position-outline.tsx
+++ b/editor/src/components/canvas/controls/position-outline.tsx
@@ -191,22 +191,27 @@ interface PinOutlineProps {
   scale: number
 }
 
+const PinOutlineUnscaledSize = 1
+
 const PinOutline = React.memo((props: PinOutlineProps): JSX.Element => {
   const colorTheme = useColorTheme()
   const width = props.isHorizontalLine ? props.size : 0
   const height = props.isHorizontalLine ? 0 : props.size
   const borderTop = props.isHorizontalLine
-    ? `${1 / props.scale}px dashed ${colorTheme.primary.value}`
+    ? `${PinOutlineUnscaledSize / props.scale}px dashed ${colorTheme.primary.value}`
     : 'none'
   const borderLeft = props.isHorizontalLine
     ? 'none'
-    : `${1 / props.scale}px dashed ${colorTheme.primary.value}`
+    : `${PinOutlineUnscaledSize / props.scale}px dashed ${colorTheme.primary.value}`
+  const lineLeft = props.startX - PinOutlineUnscaledSize / 2 / props.scale
+  const lineTop = props.startY - PinOutlineUnscaledSize / 2 / props.scale
+
   return (
     <div
       style={{
         position: 'absolute',
-        left: props.startX,
-        top: props.startY,
+        left: lineLeft,
+        top: lineTop,
         width: width,
         height: height,
         borderTop: borderTop,

From 914b7bca5e26ef69c3baf383641bdc1f278f01b8 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Tue, 29 Oct 2024 08:06:21 -0400
Subject: [PATCH 185/272] feat(import): github import wizard (#6507)

This PR adds a Github import wizard, tracking the progress of importing
a project from Github, showing errors or warnings. The design is still
preliminary, but it is hidden behind a feature switch so that the logic
can be reviewed and merges, in order not to create a long living PR.
<video
src="https://github.com/user-attachments/assets/65c484b2-815a-4c07-8fb2-2346f06a466e"></video>

It supports error/warning states:
<img width="1362" alt="image"
src="https://github.com/user-attachments/assets/cc999476-f2d8-43bb-b7aa-4999fe15f589">

## PR Includes:
1. Adding three actions
    - `SetImportWizardOpen` - controlling the wizard UI
- `UpdateImportOperations` - updating the results of individual import
operations (desc. to follow).
- `UpdateProjectRequirements` - updating the results of checking and
fixing Utopia specific requirements
2. Utilities to start/end tracking of import operations, their results
and timings.
3. Tracked import operations - tracking hooks are being called at
appropriate places in the code.
    - Loading the code from Github
    - Parsing the files
    - Checking specific Utopia requirements
    - Loading dependencies
4. Utopia checks:
    - storyboard file (created if not present)
    - `utopia` entry in package.json
    - project composition (JS/TS)
5. Not tracked in this PR but will in subsequent ones (can be added
modularily):
    - React version - currently a placeholder
    - Server side packages - mainly Node builtins
    - Style frameworks
6. The wizard UI itself - showing progress and results (still
preliminary)

**Note for reviewers:** there are a lot of changed files due to adding
new actions and passing down the `dispatch` parameter, but the main
logic is contained in the new services and the wizard React components.

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 editor/src/components/editor/action-types.ts  |  24 ++
 .../editor/actions/action-creators.ts         |  35 ++
 .../components/editor/actions/action-utils.ts |   3 +
 .../editor/actions/actions.spec.tsx           |   2 +
 .../src/components/editor/actions/actions.tsx |  82 ++++-
 .../components/editor/editor-component.tsx    |  12 +-
 .../editor/import-wizard/components.tsx       | 320 ++++++++++++++++++
 .../editor/import-wizard/import-wizard.tsx    | 232 +++++++++++++
 .../src/components/editor/store/dispatch.tsx  |   2 +-
 .../components/editor/store/editor-state.ts   |  20 ++
 .../components/editor/store/editor-update.tsx |   8 +-
 .../store/store-deep-equality-instances.ts    |  69 ++++
 .../store/store-hook-substore-helpers.ts      |   6 +-
 .../editor/store/store-hook-substore-types.ts |   8 +-
 .../components/navigator/dependency-list.tsx  |  35 +-
 .../package-manager/fetch-packages.ts         | 113 ++++---
 .../package-manager/package-manager.spec.ts   |   8 +
 editor/src/core/shared/dependencies.ts        |  34 +-
 .../shared/github/operations/load-branch.ts   |  34 +-
 .../shared/import/import-operation-service.ts | 149 ++++++++
 .../shared/import/import-operation-types.ts   |  84 +++++
 .../check-utopia-requirements.ts              | 154 +++++++++
 .../utopia-requirements-service.ts            | 134 ++++++++
 .../utopia-requirements-types.ts              |  76 +++++
 editor/src/utils/feature-switches.ts          |   3 +
 25 files changed, 1569 insertions(+), 78 deletions(-)
 create mode 100644 editor/src/components/editor/import-wizard/components.tsx
 create mode 100644 editor/src/components/editor/import-wizard/import-wizard.tsx
 create mode 100644 editor/src/core/shared/import/import-operation-service.ts
 create mode 100644 editor/src/core/shared/import/import-operation-types.ts
 create mode 100644 editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
 create mode 100644 editor/src/core/shared/import/proejct-health-check/utopia-requirements-service.ts
 create mode 100644 editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts

diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts
index f841a7836ecd..97d9ed588648 100644
--- a/editor/src/components/editor/action-types.ts
+++ b/editor/src/components/editor/action-types.ts
@@ -87,6 +87,11 @@ import type { Optic } from '../../core/shared/optics/optics'
 import { makeOptic } from '../../core/shared/optics/optics'
 import type { ElementPathTrees } from '../../core/shared/element-path-tree'
 import { assertNever } from '../../core/shared/utils'
+import type {
+  ImportOperation,
+  ImportOperationAction,
+} from '../../core/shared/import/import-operation-types'
+import type { ProjectRequirements } from '../../core/shared/import/proejct-health-check/utopia-requirements-types'
 export { isLoggedIn, loggedInUser, notLoggedIn } from '../../common/user'
 export type { LoginState, UserDetails } from '../../common/user'
 
@@ -997,6 +1002,22 @@ export interface UpdateGithubOperations {
   type: GithubOperationType
 }
 
+export interface UpdateImportOperations {
+  action: 'UPDATE_IMPORT_OPERATIONS'
+  operations: ImportOperation[]
+  type: ImportOperationAction
+}
+
+export interface UpdateProjectRequirements {
+  action: 'UPDATE_PROJECT_REQUIREMENTS'
+  requirements: Partial<ProjectRequirements>
+}
+
+export interface SetImportWizardOpen {
+  action: 'SET_IMPORT_WIZARD_OPEN'
+  open: boolean
+}
+
 export interface SetRefreshingDependencies {
   action: 'SET_REFRESHING_DEPENDENCIES'
   value: boolean
@@ -1354,6 +1375,9 @@ export type EditorAction =
   | UpdateAgainstGithub
   | SetImageDragSessionState
   | UpdateGithubOperations
+  | UpdateImportOperations
+  | UpdateProjectRequirements
+  | SetImportWizardOpen
   | UpdateBranchContents
   | SetRefreshingDependencies
   | ApplyCommandsAction
diff --git a/editor/src/components/editor/actions/action-creators.ts b/editor/src/components/editor/actions/action-creators.ts
index 5061e880e8aa..0f6acf5df9d3 100644
--- a/editor/src/components/editor/actions/action-creators.ts
+++ b/editor/src/components/editor/actions/action-creators.ts
@@ -237,6 +237,9 @@ import type {
   ToggleDataCanCondense,
   UpdateMetadataInEditorState,
   SetErrorBoundaryHandling,
+  SetImportWizardOpen,
+  UpdateImportOperations,
+  UpdateProjectRequirements,
 } from '../action-types'
 import type { InsertionSubjectWrapper, Mode } from '../editor-modes'
 import { EditorModes, insertionSubject } from '../editor-modes'
@@ -268,6 +271,11 @@ import type { Collaborator } from '../../../core/shared/multiplayer'
 import type { PageTemplate } from '../../canvas/remix/remix-utils'
 import type { Bounds } from 'utopia-vscode-common'
 import type { ElementPathTrees } from '../../../core/shared/element-path-tree'
+import type {
+  ImportOperation,
+  ImportOperationAction,
+} from '../../../core/shared/import/import-operation-types'
+import type { ProjectRequirements } from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
 
 export function clearSelection(): EditorAction {
   return {
@@ -1591,6 +1599,33 @@ export function resetCanvas(): ResetCanvas {
   }
 }
 
+export function updateImportOperations(
+  operations: ImportOperation[],
+  type: ImportOperationAction,
+): UpdateImportOperations {
+  return {
+    action: 'UPDATE_IMPORT_OPERATIONS',
+    operations: operations,
+    type: type,
+  }
+}
+
+export function updateProjectRequirements(
+  requirements: Partial<ProjectRequirements>,
+): UpdateProjectRequirements {
+  return {
+    action: 'UPDATE_PROJECT_REQUIREMENTS',
+    requirements: requirements,
+  }
+}
+
+export function setImportWizardOpen(open: boolean): SetImportWizardOpen {
+  return {
+    action: 'SET_IMPORT_WIZARD_OPEN',
+    open: open,
+  }
+}
+
 export function setFilebrowserDropTarget(target: string | null): SetFilebrowserDropTarget {
   return {
     action: 'SET_FILEBROWSER_DROPTARGET',
diff --git a/editor/src/components/editor/actions/action-utils.ts b/editor/src/components/editor/actions/action-utils.ts
index 2cba7eaa684a..21bf6e0852ba 100644
--- a/editor/src/components/editor/actions/action-utils.ts
+++ b/editor/src/components/editor/actions/action-utils.ts
@@ -139,6 +139,9 @@ export function isTransientAction(action: EditorAction): boolean {
     case 'RESET_ONLINE_STATE':
     case 'INCREASE_ONLINE_STATE_FAILURE_COUNT':
     case 'SET_ERROR_BOUNDARY_HANDLING':
+    case 'SET_IMPORT_WIZARD_OPEN':
+    case 'UPDATE_IMPORT_OPERATIONS':
+    case 'UPDATE_PROJECT_REQUIREMENTS':
       return true
 
     case 'TRUE_UP_ELEMENTS':
diff --git a/editor/src/components/editor/actions/actions.spec.tsx b/editor/src/components/editor/actions/actions.spec.tsx
index d30e9ff2d7c2..037c806da975 100644
--- a/editor/src/components/editor/actions/actions.spec.tsx
+++ b/editor/src/components/editor/actions/actions.spec.tsx
@@ -1133,6 +1133,7 @@ describe('UPDATE_FROM_WORKER', () => {
       updateToCheck,
       startingEditorState,
       defaultUserState,
+      NO_OP,
     )
 
     // Check that the model hasn't changed, because of the stale revised time.
@@ -1180,6 +1181,7 @@ describe('UPDATE_FROM_WORKER', () => {
       updateToCheck,
       startingEditorState,
       defaultUserState,
+      NO_OP,
     )
 
     // Get the same values that we started with but from the updated editor state.
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index 9f5793794639..090d109b6898 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -352,6 +352,9 @@ import type {
   ToggleDataCanCondense,
   UpdateMetadataInEditorState,
   SetErrorBoundaryHandling,
+  SetImportWizardOpen,
+  UpdateImportOperations,
+  UpdateProjectRequirements,
 } from '../action-types'
 import { isAlignment, isLoggedIn } from '../action-types'
 import type { Mode } from '../editor-modes'
@@ -626,6 +629,13 @@ import { canCondenseJSXElementChild } from '../../../utils/can-condense'
 import { getNavigatorTargetsFromEditorState } from '../../navigator/navigator-utils'
 import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 import { styleP } from '../../inspector/inspector-common'
+import { getUpdateOperationResult } from '../../../core/shared/import/import-operation-service'
+import {
+  notifyCheckingRequirement,
+  notifyResolveRequirement,
+  updateRequirements,
+} from '../../../core/shared/import/proejct-health-check/utopia-requirements-service'
+import { RequirementResolutionResult } from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
 import { applyValuesAtPath, deleteValuesAtPath } from '../../canvas/commands/utils/property-utils'
 
 export const MIN_CODE_PANE_REOPEN_WIDTH = 100
@@ -1030,6 +1040,9 @@ export function restoreEditorState(
     githubSettings: currentEditor.githubSettings,
     imageDragSessionState: currentEditor.imageDragSessionState,
     githubOperations: currentEditor.githubOperations,
+    importOperations: currentEditor.importOperations,
+    projectRequirements: currentEditor.projectRequirements,
+    importWizardOpen: currentEditor.importWizardOpen,
     branchOriginContents: currentEditor.branchOriginContents,
     githubData: currentEditor.githubData,
     refreshingDependencies: currentEditor.refreshingDependencies,
@@ -1627,19 +1640,44 @@ function createStoryboardFileWithPlaceholderContents(
 }
 
 export function createStoryboardFileIfNecessary(
+  dispatch: EditorDispatch,
   projectContents: ProjectContentTreeRoot,
   createPlaceholder: 'create-placeholder' | 'skip-creating-placeholder',
 ): ProjectContentTreeRoot {
+  notifyCheckingRequirement(dispatch, 'storyboard', 'Checking for storyboard.js')
   const storyboardFile = getProjectFileByFilePath(projectContents, StoryboardFilePath)
   if (storyboardFile != null) {
+    notifyResolveRequirement(
+      dispatch,
+      'storyboard',
+      RequirementResolutionResult.Found,
+      'Storyboard.js found',
+    )
     return projectContents
   }
 
-  return (
+  const result =
     createStoryboardFileIfRemixProject(projectContents) ??
     createStoryboardFileIfMainComponentPresent(projectContents) ??
     createStoryboardFileWithPlaceholderContents(projectContents, createPlaceholder)
-  )
+
+  if (result == projectContents) {
+    notifyResolveRequirement(
+      dispatch,
+      'storyboard',
+      RequirementResolutionResult.Partial,
+      'Storyboard.js skipped',
+    )
+  } else {
+    notifyResolveRequirement(
+      dispatch,
+      'storyboard',
+      RequirementResolutionResult.Fixed,
+      'Storyboard.js created',
+    )
+  }
+
+  return result
 }
 
 // JS Editor Actions:
@@ -2229,6 +2267,34 @@ export const UPDATE_FNS = {
       githubOperations: operations,
     }
   },
+  UPDATE_IMPORT_OPERATIONS: (action: UpdateImportOperations, editor: EditorModel): EditorModel => {
+    const resultImportOperations = getUpdateOperationResult(
+      editor.importOperations,
+      action.operations,
+      action.type,
+    )
+    return {
+      ...editor,
+      importOperations: resultImportOperations,
+    }
+  },
+  UPDATE_PROJECT_REQUIREMENTS: (
+    action: UpdateProjectRequirements,
+    editor: EditorModel,
+    dispatch: EditorDispatch,
+  ): EditorModel => {
+    const result = updateRequirements(dispatch, editor.projectRequirements, action.requirements)
+    return {
+      ...editor,
+      projectRequirements: result,
+    }
+  },
+  SET_IMPORT_WIZARD_OPEN: (action: SetImportWizardOpen, editor: EditorModel): EditorModel => {
+    return {
+      ...editor,
+      importWizardOpen: action.open,
+    }
+  },
   SET_REFRESHING_DEPENDENCIES: (
     action: SetRefreshingDependencies,
     editor: EditorModel,
@@ -3947,6 +4013,7 @@ export const UPDATE_FNS = {
     action: UpdateFromWorker,
     editor: EditorModel,
     userState: UserState,
+    dispatch: EditorDispatch,
   ): EditorModel => {
     let workingProjectContents: ProjectContentTreeRoot = editor.projectContents
     let anyParsedUpdates: boolean = false
@@ -3983,6 +4050,7 @@ export const UPDATE_FNS = {
     return {
       ...editor,
       projectContents: createStoryboardFileIfNecessary(
+        dispatch,
         workingProjectContents,
         // If we are in the process of cloning a Github repository, do not create placeholder Storyboard
         userState.githubState.gitRepoToLoad != null
@@ -4808,7 +4876,11 @@ export const UPDATE_FNS = {
       propertyControlsInfo: action.propertyControlsInfo,
     }
   },
-  UPDATE_TEXT: (action: UpdateText, editorStore: EditorStoreUnpatched): EditorStoreUnpatched => {
+  UPDATE_TEXT: (
+    action: UpdateText,
+    editorStore: EditorStoreUnpatched,
+    dispatch: EditorDispatch,
+  ): EditorStoreUnpatched => {
     const { textProp } = action
     // This flag is useful when editing conditional expressions:
     // if the edited element is a js expression AND the content is still between curly brackets after editing,
@@ -5006,6 +5078,7 @@ export const UPDATE_FNS = {
       updateFromWorker(workerUpdates),
       withFileChanges.unpatchedEditor,
       withFileChanges.userState,
+      dispatch,
     )
     return {
       ...withFileChanges,
@@ -5621,7 +5694,7 @@ export const UPDATE_FNS = {
               requestedNpmDependency('tailwindcss', tailwindVersion.version),
               requestedNpmDependency('postcss', postcssVersion.version),
             ]
-            void fetchNodeModules(updatedNpmDeps, builtInDependencies).then(
+            void fetchNodeModules(dispatch, updatedNpmDeps, builtInDependencies).then(
               (fetchNodeModulesResult) => {
                 const loadedPackagesStatus = createLoadedPackageStatusMapFromDependencies(
                   updatedNpmDeps,
@@ -6331,6 +6404,7 @@ export async function load(
   const migratedModel = applyMigrations(model)
   const npmDependencies = dependenciesWithEditorRequirements(migratedModel.projectContents)
   const fetchNodeModulesResult = await fetchNodeModules(
+    dispatch,
     npmDependencies,
     builtInDependencies,
     retryFetchNodeModules,
diff --git a/editor/src/components/editor/editor-component.tsx b/editor/src/components/editor/editor-component.tsx
index e4d1cfacfe0b..c7bcd6d1cbe1 100644
--- a/editor/src/components/editor/editor-component.tsx
+++ b/editor/src/components/editor/editor-component.tsx
@@ -96,6 +96,7 @@ import {
   navigatorTargetsSelector,
   navigatorTargetsSelectorNavigatorTargets,
 } from '../navigator/navigator-utils'
+import { ImportWizard } from './import-wizard/import-wizard'
 
 const liveModeToastId = 'play-mode-toast'
 
@@ -520,6 +521,7 @@ export const EditorComponentInner = React.memo((props: EditorProps) => {
         <ProjectForkFlow />
         <LockedOverlay />
         <SharingDialog />
+        <ImportWizard />
       </SimpleFlexRow>
       {portalTarget != null
         ? ReactDOM.createPortal(<ComponentPickerContextMenu />, portalTarget)
@@ -683,6 +685,12 @@ const LockedOverlay = React.memo(() => {
     'LockedOverlay refreshingDependencies',
   )
 
+  const importWizardOpen = useEditorState(
+    Substores.restOfEditor,
+    (store) => store.editor.importWizardOpen,
+    'LockedOverlay importWizardOpen',
+  )
+
   const forking = useEditorState(
     Substores.restOfEditor,
     (store) => store.editor.forking,
@@ -699,8 +707,8 @@ const LockedOverlay = React.memo(() => {
   `
 
   const locked = React.useMemo(() => {
-    return editorLocked || refreshingDependencies || forking
-  }, [editorLocked, refreshingDependencies, forking])
+    return (editorLocked || refreshingDependencies || forking) && !importWizardOpen
+  }, [editorLocked, refreshingDependencies, forking, importWizardOpen])
 
   const dialogContent = React.useMemo((): string | null => {
     if (refreshingDependencies) {
diff --git a/editor/src/components/editor/import-wizard/components.tsx b/editor/src/components/editor/import-wizard/components.tsx
new file mode 100644
index 000000000000..b21b9956e78d
--- /dev/null
+++ b/editor/src/components/editor/import-wizard/components.tsx
@@ -0,0 +1,320 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import React from 'react'
+import type {
+  ImportCheckRequirementAndFix,
+  ImportFetchDependency,
+  ImportOperation,
+} from '../../../core/shared/import/import-operation-types'
+import { ImportOperationResult } from '../../../core/shared/import/import-operation-types'
+import { assertNever } from '../../../core/shared/utils'
+import { Icons } from '../../../uuiui'
+import { GithubSpinner } from '../../../components/navigator/left-pane/github-pane/github-spinner'
+import { RequirementResolutionResult } from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
+
+export function OperationLine({ operation }: { operation: ImportOperation }) {
+  const operationRunningStatus = React.useMemo(() => {
+    return operation.timeStarted == null
+      ? 'waiting'
+      : operation.timeDone == null
+      ? 'running'
+      : 'done'
+  }, [operation.timeStarted, operation.timeDone])
+
+  const textColor = React.useMemo(
+    () => getTextColor(operationRunningStatus, operation),
+    [operationRunningStatus, operation],
+  )
+
+  const [childrenShown, serChildrenShown] = React.useState(false)
+  const shouldShowChildren = React.useMemo(
+    () => childrenShown || operation.timeDone == null,
+    [childrenShown, operation.timeDone],
+  )
+  const hasChildren = React.useMemo(
+    () => operation.children != null && operation.children.length > 0,
+    [operation.children],
+  )
+  const toggleShowChildren = React.useCallback(() => {
+    if (hasChildren) {
+      serChildrenShown((shown) => !shown)
+    }
+  }, [hasChildren])
+
+  return (
+    <OperationLineWrapper
+      className={operationRunningStatus == 'done' ? 'operation-done' : 'operation-pending'}
+      onClick={toggleShowChildren}
+    >
+      <OperationLineContent textColor={textColor}>
+        <OperationIcon runningStatus={operationRunningStatus} result={operation.result} />
+        <div>{getImportOperationText(operation)}</div>
+        <div>
+          <TimeFromInSeconds operation={operation} runningStatus={operationRunningStatus} />
+        </div>
+        {hasChildren ? (
+          <div>
+            {shouldShowChildren ? <Icons.ExpansionArrowDown /> : <Icons.ExpansionArrowRight />}
+          </div>
+        ) : null}
+      </OperationLineContent>
+      {shouldShowChildren && hasChildren ? <OperationChildrenList operation={operation} /> : null}
+    </OperationLineWrapper>
+  )
+}
+
+function OperationChildrenList({ operation }: { operation: ImportOperation }) {
+  if (operation.children == null || operation.children.length === 0) {
+    return null
+  }
+  return (
+    <div
+      className='import-wizard-operation-children'
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+      }}
+    >
+      {operation.type === 'refreshDependencies' ? (
+        <AggregatedChildrenStatus
+          childOperations={operation.children as ImportFetchDependency[]}
+          successFn={dependenciesSuccessFn}
+          successTextFn={dependenciesSuccessTextFn}
+        />
+      ) : operation.type === 'checkRequirements' ? (
+        operation.children.map((childOperation) => (
+          <OperationLine
+            key={childOperation.id ?? childOperation.type}
+            operation={childOperation}
+          />
+        ))
+      ) : null}
+    </div>
+  )
+}
+const dependenciesSuccessFn = (op: ImportFetchDependency) =>
+  op.result === ImportOperationResult.Success
+const dependenciesSuccessTextFn = (successCount: number) =>
+  `${successCount} dependencies fetched successfully`
+const requirementsSuccessFn = (op: ImportCheckRequirementAndFix) =>
+  op.resolution === RequirementResolutionResult.Found
+const requirementsSuccessTextFn = (successCount: number) => `${successCount} requirements met`
+
+function AggregatedChildrenStatus<T extends ImportOperation>({
+  childOperations,
+  successFn,
+  successTextFn,
+}: {
+  childOperations: T[]
+  successFn: (operation: T) => boolean
+  successTextFn: (successCount: number) => string
+}) {
+  const doneDependencies = childOperations.filter(successFn)
+  const restOfDependencies = childOperations.filter((op) => !successFn(op))
+  return (
+    <React.Fragment>
+      {doneDependencies.length > 0 ? (
+        <OperationLineWrapper className='operation-done'>
+          <OperationLineContent textColor='black'>
+            <Icons.Checkmark style={getIconColorStyle(ImportOperationResult.Success)} />
+            <div>{successTextFn(doneDependencies.length)}</div>
+          </OperationLineContent>
+        </OperationLineWrapper>
+      ) : null}
+      {restOfDependencies.map((operation) => (
+        <OperationLine key={operation.id ?? operation.type} operation={operation} />
+      ))}
+    </React.Fragment>
+  )
+}
+
+function OperationIcon({
+  runningStatus,
+  result,
+}: {
+  runningStatus: 'waiting' | 'running' | 'done'
+  result?: ImportOperationResult
+}) {
+  const iconColorStyle = React.useMemo(
+    () => (result != null ? getIconColorStyle(result) : {}),
+    [result],
+  )
+  if (runningStatus === 'running') {
+    return <GithubSpinner />
+  } else if (runningStatus === 'done' && result === 'success') {
+    return <Icons.Checkmark style={iconColorStyle} />
+  } else if (runningStatus === 'done' && result === 'warn') {
+    return <Icons.WarningTriangle style={iconColorStyle} />
+  } else if (runningStatus === 'waiting') {
+    return <Icons.Dot />
+  } else {
+    return <Icons.Cross style={iconColorStyle} />
+  }
+}
+
+function TimeFromInSeconds({
+  operation,
+  runningStatus,
+}: {
+  operation: ImportOperation
+  runningStatus: 'waiting' | 'running' | 'done'
+}) {
+  const [currentTime, setCurrentTime] = React.useState(Date.now())
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(Date.now())
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [])
+  const operationTime = React.useMemo(() => {
+    if (operation.timeStarted == null) {
+      return 0
+    }
+    if (operation.timeDone == null) {
+      return currentTime - operation.timeStarted
+    }
+    return operation.timeDone - operation.timeStarted
+  }, [operation.timeStarted, operation.timeDone, currentTime])
+  const timeInSeconds =
+    operation.timeDone != null
+      ? (operationTime / 1000).toFixed(2)
+      : Math.max(Math.floor(operationTime / 1000), 0)
+  return operation.timeStarted == null ? null : (
+    <div
+      data-short-time={operationTime < 100}
+      style={{
+        color: runningStatus === 'running' ? 'black' : 'gray',
+        fontSize: runningStatus === 'running' ? undefined : 12,
+      }}
+    >
+      {timeInSeconds}s
+    </div>
+  )
+}
+
+function OperationLineWrapper({
+  children,
+  className,
+  onClick,
+}: {
+  children: React.ReactNode
+  className: string
+  onClick?: () => void
+}) {
+  return (
+    <div
+      className={`import-wizard-operation-line ${className}`}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+      }}
+      css={{
+        '.import-wizard-operation-children > &': {
+          paddingLeft: 26,
+          fontSize: 12,
+          img: {
+            width: 12,
+            height: 12,
+          },
+        },
+        '.import-wizard-operation-children .operation-done [data-short-time=true]': {
+          visibility: 'hidden',
+        },
+      }}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  )
+}
+
+function OperationLineContent({
+  children,
+  textColor,
+}: {
+  children: React.ReactNode
+  textColor: string
+}) {
+  return (
+    <div
+      className='import-wizard-operation-line-content'
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '15px max-content 1fr 14px',
+        gap: 10,
+        alignItems: 'center',
+        color: textColor,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function getImportOperationText(operation: ImportOperation): React.ReactNode {
+  if (operation.text != null) {
+    return operation.text
+  }
+  switch (operation.type) {
+    case 'loadBranch':
+      return (
+        <span>
+          Loading branch{' '}
+          <strong>
+            {operation.githubRepo?.owner}/{operation.githubRepo?.repository}@{operation.branchName}
+          </strong>
+        </span>
+      )
+    case 'fetchDependency':
+      return `Fetching ${operation.dependencyName}@${operation.dependencyVersion}`
+    case 'parseFiles':
+      return 'Parsing files'
+    case 'refreshDependencies':
+      return 'Fetching dependencies'
+    case 'checkRequirements':
+      return 'Checking Utopia requirements'
+    case 'checkRequirementAndFix':
+      return operation.text
+    default:
+      assertNever(operation)
+  }
+}
+
+function getTextColor(
+  operationRunningStatus: 'waiting' | 'running' | 'done',
+  operation: ImportOperation,
+) {
+  if (operationRunningStatus === 'waiting') {
+    return 'gray'
+  } else {
+    return 'black'
+  }
+}
+
+function getIconColorStyle(result: ImportOperationResult) {
+  // temp solution since we currently only have black icons
+  // https://codepen.io/sosuke/pen/Pjoqqp
+  if (result === ImportOperationResult.Error) {
+    return {
+      // our error red
+      filter:
+        'invert(14%) sepia(99%) saturate(4041%) hue-rotate(328deg) brightness(101%) contrast(115%)',
+    }
+  } else if (result === ImportOperationResult.Warn) {
+    return {
+      // orange
+      filter:
+        'invert(72%) sepia(90%) saturate(3088%) hue-rotate(1deg) brightness(105%) contrast(104%)',
+    }
+  } else if (result === ImportOperationResult.Success) {
+    return {
+      // green
+      filter:
+        'invert(72%) sepia(60%) saturate(3628%) hue-rotate(126deg) brightness(104%) contrast(76%)',
+    }
+  }
+  return {}
+}
diff --git a/editor/src/components/editor/import-wizard/import-wizard.tsx b/editor/src/components/editor/import-wizard/import-wizard.tsx
new file mode 100644
index 000000000000..ca6282300b4d
--- /dev/null
+++ b/editor/src/components/editor/import-wizard/import-wizard.tsx
@@ -0,0 +1,232 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import React from 'react'
+import { jsx } from '@emotion/react'
+import { getProjectID } from '../../../common/env-vars'
+import { Button, FlexRow, Icons, useColorTheme, UtopiaStyles } from '../../../uuiui'
+import { useEditorState, Substores } from '../store/store-hook'
+import { when } from '../../../utils/react-conditionals'
+import { hideImportWizard } from '../../../core/shared/import/import-operation-service'
+import { OperationLine } from './components'
+import { ImportOperationResult } from '../../../core/shared/import/import-operation-types'
+import { assertNever } from '../../../core/shared/utils'
+import { useDispatch } from '../store/dispatch-context'
+
+export const ImportWizard = React.memo(() => {
+  const colorTheme = useColorTheme()
+  const projectId = getProjectID()
+
+  const importWizardOpen: boolean = useEditorState(
+    Substores.restOfEditor,
+    (store) => store.editor.importWizardOpen,
+    'ImportWizard importWizardOpen',
+  )
+
+  const operations = useEditorState(
+    Substores.github,
+    (store) => store.editor.importOperations,
+    'ImportWizard operations',
+  )
+
+  const dispatch = useDispatch()
+
+  const handleDismiss = React.useCallback(() => {
+    hideImportWizard(dispatch)
+  }, [dispatch])
+
+  const stopPropagation = React.useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+  }, [])
+
+  const totalImportResult: ImportOperationResult | null = React.useMemo(() => {
+    let result: ImportOperationResult = ImportOperationResult.Success
+    for (const operation of operations) {
+      // if one of the operations is still running, we don't know the total result yet
+      if (operation.timeDone == null || operation.result == null) {
+        return null
+      }
+      // if any operation is an error, the total result is an error
+      if (operation.result == ImportOperationResult.Error) {
+        return ImportOperationResult.Error
+      }
+      // if any operation is at least a warn, the total result is a warn,
+      // but we also need to check if there are any errors
+      if (operation.result == ImportOperationResult.Warn) {
+        result = ImportOperationResult.Warn
+      }
+    }
+    return result
+  }, [operations])
+
+  if (projectId == null) {
+    return null
+  }
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        pointerEvents: importWizardOpen ? 'all' : 'none',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: importWizardOpen ? '#00000033' : 'transparent',
+      }}
+    >
+      {when(
+        importWizardOpen,
+        <div
+          style={{
+            background: colorTheme.bg0.value,
+            boxShadow: UtopiaStyles.popup.boxShadow,
+            borderRadius: 10,
+            width: 600,
+            height: 500,
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            fontSize: '14px',
+            lineHeight: 'normal',
+            letterSpacing: 'normal',
+            padding: 20,
+            overflow: 'hidden',
+          }}
+          onClick={stopPropagation}
+        >
+          <FlexRow
+            className='import-wizard-header'
+            css={{
+              justifyContent: 'space-between',
+              width: '100%',
+            }}
+          >
+            <div css={{ fontSize: 16, fontWeight: 400 }}>Project Import</div>
+            {when(
+              totalImportResult != null,
+              <Button
+                highlight
+                style={{
+                  width: 22,
+                  height: 22,
+                }}
+                onClick={handleDismiss}
+              >
+                <Icons.Cross />
+              </Button>,
+            )}
+          </FlexRow>
+          <div
+            className='import-wizard-body'
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 15,
+              overflow: 'scroll',
+              height: '100%',
+              width: '100%',
+              // padding: 20,
+              marginTop: 20,
+            }}
+          >
+            {operations.map((operation) => (
+              <OperationLine key={operation.id ?? operation.type} operation={operation} />
+            ))}
+          </div>
+          <div
+            className='import-wizard-footer'
+            css={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              width: '100%',
+              marginTop: 20,
+            }}
+          >
+            <ActionButtons importResult={totalImportResult} />
+          </div>
+        </div>,
+      )}
+    </div>
+  )
+})
+ImportWizard.displayName = 'ImportWizard'
+
+function ActionButtons({ importResult }: { importResult: ImportOperationResult | null }) {
+  const textColor = React.useMemo(() => {
+    switch (importResult) {
+      case ImportOperationResult.Success:
+        return 'green'
+      case ImportOperationResult.Warn:
+        return 'orange'
+      case ImportOperationResult.Error:
+        return 'var(--utopitheme-githubIndicatorFailed)'
+      case null:
+        return 'black'
+      default:
+        assertNever(importResult)
+    }
+  }, [importResult])
+  const buttonColor = React.useMemo(() => {
+    switch (importResult) {
+      case ImportOperationResult.Success:
+        return 'var(--utopitheme-green)'
+      case ImportOperationResult.Warn:
+        return 'var(--utopitheme-githubMUDModified)'
+      case ImportOperationResult.Error:
+        return 'var(--utopitheme-githubIndicatorFailed)'
+      case null:
+        return 'black'
+      default:
+        assertNever(importResult)
+    }
+  }, [importResult])
+  const textStyle = {
+    color: textColor,
+    fontSize: 16,
+  }
+  const buttonStyle = {
+    backgroundColor: buttonColor,
+    color: 'white',
+    padding: 20,
+    fontSize: 14,
+    cursor: 'pointer',
+  }
+  const dispatch = useDispatch()
+  const hideWizard = React.useCallback(() => {
+    hideImportWizard(dispatch)
+  }, [dispatch])
+  if (importResult == ImportOperationResult.Success) {
+    return (
+      <React.Fragment>
+        <div style={textStyle}>Project Imported Successfully</div>
+        <Button onClick={hideWizard} style={buttonStyle}>
+          Continue To Editor
+        </Button>
+      </React.Fragment>
+    )
+  }
+  if (importResult == ImportOperationResult.Warn) {
+    return (
+      <React.Fragment>
+        <div style={textStyle}>Project Imported With Warnings</div>
+        <Button onClick={hideWizard} style={buttonStyle}>
+          Continue
+        </Button>
+      </React.Fragment>
+    )
+  }
+  if (importResult == ImportOperationResult.Error) {
+    return (
+      <React.Fragment>
+        <div style={textStyle}>Error Importing Project</div>
+        <Button style={buttonStyle}>Import A Different Project</Button>
+      </React.Fragment>
+    )
+  }
+  return null
+}
diff --git a/editor/src/components/editor/store/dispatch.tsx b/editor/src/components/editor/store/dispatch.tsx
index f014fcbd20d6..83633b5b5bbe 100644
--- a/editor/src/components/editor/store/dispatch.tsx
+++ b/editor/src/components/editor/store/dispatch.tsx
@@ -189,7 +189,7 @@ function processAction(
       }
 
       if (action.action === 'UPDATE_TEXT') {
-        working = UPDATE_FNS.UPDATE_TEXT(action, working)
+        working = UPDATE_FNS.UPDATE_TEXT(action, working, dispatchEvent)
       }
 
       if (action.action === 'TRUNCATE_HISTORY') {
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index 800ae1ae55a3..bce7097d5f49 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -189,6 +189,11 @@ import type { OnlineState } from '../online-status'
 import type { NavigatorRow } from '../../navigator/navigator-row'
 import type { FancyError } from '../../../core/shared/code-exec-utils'
 import type { GridCellCoordinates } from '../../canvas/canvas-strategies/strategies/grid-cell-bounds'
+import type { ImportOperation } from '../../../core/shared/import/import-operation-types'
+import {
+  emptyProjectRequirements,
+  type ProjectRequirements,
+} from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
 
 const ObjectPathImmutable: any = OPI
 
@@ -1452,6 +1457,9 @@ export interface EditorState {
   githubSettings: ProjectGithubSettings
   imageDragSessionState: ImageDragSessionState
   githubOperations: Array<GithubOperation>
+  importOperations: Array<ImportOperation>
+  projectRequirements: ProjectRequirements
+  importWizardOpen: boolean
   githubData: GithubData
   refreshingDependencies: boolean
   colorSwatches: Array<ColorSwatch>
@@ -1535,6 +1543,9 @@ export function editorState(
   githubSettings: ProjectGithubSettings,
   imageDragSessionState: ImageDragSessionState,
   githubOperations: Array<GithubOperation>,
+  importOperations: Array<ImportOperation>,
+  importWizardOpen: boolean,
+  projectRequirements: ProjectRequirements,
   branchOriginContents: ProjectContentTreeRoot | null,
   githubData: GithubData,
   refreshingDependencies: boolean,
@@ -1619,6 +1630,9 @@ export function editorState(
     githubSettings: githubSettings,
     imageDragSessionState: imageDragSessionState,
     githubOperations: githubOperations,
+    importOperations: importOperations,
+    importWizardOpen: importWizardOpen,
+    projectRequirements: projectRequirements,
     githubData: githubData,
     refreshingDependencies: refreshingDependencies,
     colorSwatches: colorSwatches,
@@ -2696,6 +2710,9 @@ export function createEditorState(dispatch: EditorDispatch): EditorState {
     githubSettings: emptyGithubSettings(),
     imageDragSessionState: notDragging(),
     githubOperations: [],
+    importOperations: [],
+    importWizardOpen: false,
+    projectRequirements: emptyProjectRequirements(),
     branchOriginContents: null,
     githubData: emptyGithubData(),
     refreshingDependencies: false,
@@ -3063,6 +3080,9 @@ export function editorModelFromPersistentModel(
     githubSettings: persistentModel.githubSettings,
     imageDragSessionState: notDragging(),
     githubOperations: [],
+    importOperations: [],
+    importWizardOpen: false,
+    projectRequirements: emptyProjectRequirements(),
     refreshingDependencies: false,
     branchOriginContents: null,
     githubData: emptyGithubData(),
diff --git a/editor/src/components/editor/store/editor-update.tsx b/editor/src/components/editor/store/editor-update.tsx
index e663daa121e8..2c7ded3d89bc 100644
--- a/editor/src/components/editor/store/editor-update.tsx
+++ b/editor/src/components/editor/store/editor-update.tsx
@@ -220,6 +220,12 @@ export function runSimpleLocalEditorAction(
       return UPDATE_FNS.SET_REFRESHING_DEPENDENCIES(action, state)
     case 'UPDATE_GITHUB_OPERATIONS':
       return UPDATE_FNS.UPDATE_GITHUB_OPERATIONS(action, state)
+    case 'UPDATE_IMPORT_OPERATIONS':
+      return UPDATE_FNS.UPDATE_IMPORT_OPERATIONS(action, state)
+    case 'SET_IMPORT_WIZARD_OPEN':
+      return UPDATE_FNS.SET_IMPORT_WIZARD_OPEN(action, state)
+    case 'UPDATE_PROJECT_REQUIREMENTS':
+      return UPDATE_FNS.UPDATE_PROJECT_REQUIREMENTS(action, state, dispatch)
     case 'REMOVE_TOAST':
       return UPDATE_FNS.REMOVE_TOAST(action, state)
     case 'SET_HIGHLIGHTED_VIEWS':
@@ -287,7 +293,7 @@ export function runSimpleLocalEditorAction(
     case 'REMOVE_FILE_CONFLICT':
       return UPDATE_FNS.REMOVE_FILE_CONFLICT(action, state)
     case 'UPDATE_FROM_WORKER':
-      return UPDATE_FNS.UPDATE_FROM_WORKER(action, state, userState)
+      return UPDATE_FNS.UPDATE_FROM_WORKER(action, state, userState, dispatch)
     case 'UPDATE_FROM_CODE_EDITOR':
       return UPDATE_FNS.UPDATE_FROM_CODE_EDITOR(
         action,
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 64722a41ff12..912ab4eb153c 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -643,6 +643,15 @@ import type {
 } from '../../../core/property-controls/component-descriptor-parser'
 import type { Axis } from '../../../components/canvas/gap-utils'
 import type { GridCellCoordinates } from '../../canvas/canvas-strategies/strategies/grid-cell-bounds'
+import type { ImportOperation } from '../../../core/shared/import/import-operation-types'
+import type {
+  ProjectRequirements,
+  RequirementResolution,
+} from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
+import {
+  newProjectRequirements,
+  requirementResolution,
+} from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
 
 export function ElementPropertyPathKeepDeepEquality(): KeepDeepEqualityCall<ElementPropertyPath> {
   return combine2EqualityCalls(
@@ -4781,6 +4790,45 @@ export const ProjectGithubSettingsKeepDeepEquality: KeepDeepEqualityCall<Project
     projectGithubSettings,
   )
 
+export const ProjectRequirementResolutionKeepDeepEquality: KeepDeepEqualityCall<RequirementResolution> =
+  combine3EqualityCalls(
+    (resolution) => resolution.status,
+    createCallWithTripleEquals(),
+    (resolution) => resolution.value,
+    createCallWithTripleEquals(),
+    (resolution) => resolution.resolution,
+    createCallWithTripleEquals(),
+    requirementResolution,
+  )
+
+export const ProjectRequirementsKeepDeepEquality: KeepDeepEqualityCall<ProjectRequirements> =
+  combine4EqualityCalls(
+    (requirements) => requirements.storyboard,
+    ProjectRequirementResolutionKeepDeepEquality,
+    (requirements) => requirements.packageJsonEntries,
+    ProjectRequirementResolutionKeepDeepEquality,
+    (requirements) => requirements.language,
+    ProjectRequirementResolutionKeepDeepEquality,
+    (requirements) => requirements.reactVersion,
+    ProjectRequirementResolutionKeepDeepEquality,
+    newProjectRequirements,
+  )
+
+export const ImportOperationKeepDeepEquality: KeepDeepEqualityCall<ImportOperation> = (
+  oldValue,
+  newValue,
+) => {
+  if (oldValue.type !== newValue.type) {
+    return keepDeepEqualityResult(newValue, false)
+  } else if (oldValue.id !== newValue.id) {
+    return keepDeepEqualityResult(newValue, false)
+  }
+  return keepDeepEqualityResult(oldValue, true)
+}
+
+export const ImportOperationsKeepDeepEquality: KeepDeepEqualityCall<Array<ImportOperation>> =
+  arrayDeepEquality(ImportOperationKeepDeepEquality)
+
 export const GithubFileChangesKeepDeepEquality: KeepDeepEqualityCall<GithubFileChanges> =
   combine3EqualityCalls(
     (settings) => settings.modified,
@@ -5384,6 +5432,21 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
     newValue.githubOperations,
   )
 
+  const importOperationsResults = arrayDeepEquality(ImportOperationKeepDeepEquality)(
+    oldValue.importOperations,
+    newValue.importOperations,
+  )
+
+  const importWizardOpenResults = BooleanKeepDeepEquality(
+    oldValue.importWizardOpen,
+    newValue.importWizardOpen,
+  )
+
+  const projectRequirementsResults = ProjectRequirementsKeepDeepEquality(
+    oldValue.projectRequirements,
+    newValue.projectRequirements,
+  )
+
   const branchContentsResults = nullableDeepEquality(ProjectContentTreeRootKeepDeepEquality())(
     oldValue.branchOriginContents,
     newValue.branchOriginContents,
@@ -5505,6 +5568,9 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
     githubSettingsResults.areEqual &&
     imageDragSessionStateEqual.areEqual &&
     githubOperationsResults.areEqual &&
+    importOperationsResults.areEqual &&
+    importWizardOpenResults.areEqual &&
+    projectRequirementsResults.areEqual &&
     branchContentsResults.areEqual &&
     githubDataResults.areEqual &&
     refreshingDependenciesResults.areEqual &&
@@ -5591,6 +5657,9 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
       githubSettingsResults.value,
       imageDragSessionStateEqual.value,
       githubOperationsResults.value,
+      importOperationsResults.value,
+      importWizardOpenResults.value,
+      projectRequirementsResults.value,
       branchContentsResults.value,
       githubDataResults.value,
       refreshingDependenciesResults.value,
diff --git a/editor/src/components/editor/store/store-hook-substore-helpers.ts b/editor/src/components/editor/store/store-hook-substore-helpers.ts
index 61e8565823a4..90a8cd6c7d7b 100644
--- a/editor/src/components/editor/store/store-hook-substore-helpers.ts
+++ b/editor/src/components/editor/store/store-hook-substore-helpers.ts
@@ -1,4 +1,5 @@
-import type { EditorState } from './editor-state'
+import { type EditorState } from './editor-state'
+import { emptyProjectRequirements } from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
 
 export const EmptyEditorStateForKeysOnly: EditorState = {
   id: null,
@@ -157,6 +158,9 @@ export const EmptyEditorStateForKeysOnly: EditorState = {
   githubSettings: null as any,
   imageDragSessionState: null as any,
   githubOperations: [],
+  importOperations: [],
+  importWizardOpen: false,
+  projectRequirements: emptyProjectRequirements(),
   branchOriginContents: null,
   githubData: null as any,
   refreshingDependencies: false,
diff --git a/editor/src/components/editor/store/store-hook-substore-types.ts b/editor/src/components/editor/store/store-hook-substore-types.ts
index c6a0fd468326..b08ce4a6da76 100644
--- a/editor/src/components/editor/store/store-hook-substore-types.ts
+++ b/editor/src/components/editor/store/store-hook-substore-types.ts
@@ -174,7 +174,13 @@ export interface ThemeSubstate {
 }
 
 // GithubSubstate
-export const githubSubstateKeys = ['githubSettings', 'githubOperations', 'githubData'] as const
+export const githubSubstateKeys = [
+  'githubSettings',
+  'githubOperations',
+  'githubData',
+  'importOperations',
+  'projectRequirements',
+] as const
 export const emptyGithubSubstate = {
   editor: pick(githubSubstateKeys, EmptyEditorStateForKeysOnly),
 } as const
diff --git a/editor/src/components/navigator/dependency-list.tsx b/editor/src/components/navigator/dependency-list.tsx
index b17107b3c26a..0460ec7a355c 100644
--- a/editor/src/components/navigator/dependency-list.tsx
+++ b/editor/src/components/navigator/dependency-list.tsx
@@ -194,22 +194,24 @@ class DependencyListInner extends React.PureComponent<DependencyListProps, Depen
 
       this.props.editorDispatch([EditorActions.updatePackageJson(npmDependencies)])
 
-      void fetchNodeModules(npmDependencies, this.props.builtInDependencies).then(
-        (fetchNodeModulesResult) => {
-          if (fetchNodeModulesResult.dependenciesWithError.length > 0) {
-            this.packagesUpdateFailed(
-              `Failed to download the following dependencies: ${JSON.stringify(
-                fetchNodeModulesResult.dependenciesWithError.map((d) => d.name),
-              )}`,
-              fetchNodeModulesResult.dependenciesWithError[0]?.name,
-            )
-          }
-          this.setState({ dependencyLoadingStatus: 'not-loading' })
-          this.props.editorDispatch([
-            EditorActions.updateNodeModulesContents(fetchNodeModulesResult.nodeModules),
-          ])
-        },
-      )
+      void fetchNodeModules(
+        this.props.editorDispatch,
+        npmDependencies,
+        this.props.builtInDependencies,
+      ).then((fetchNodeModulesResult) => {
+        if (fetchNodeModulesResult.dependenciesWithError.length > 0) {
+          this.packagesUpdateFailed(
+            `Failed to download the following dependencies: ${JSON.stringify(
+              fetchNodeModulesResult.dependenciesWithError.map((d) => d.name),
+            )}`,
+            fetchNodeModulesResult.dependenciesWithError[0]?.name,
+          )
+        }
+        this.setState({ dependencyLoadingStatus: 'not-loading' })
+        this.props.editorDispatch([
+          EditorActions.updateNodeModulesContents(fetchNodeModulesResult.nodeModules),
+        ])
+      })
 
       this.setState({ dependencyLoadingStatus: 'removing' })
     }
@@ -358,6 +360,7 @@ class DependencyListInner extends React.PureComponent<DependencyListProps, Depen
                 EditorActions.updatePackageJson(updatedNpmDeps),
               ])
               fetchNodeModules(
+                this.props.editorDispatch,
                 [requestedNpmDependency(editedPackageName, editedPackageVersion!)],
                 this.props.builtInDependencies,
               )
diff --git a/editor/src/core/es-modules/package-manager/fetch-packages.ts b/editor/src/core/es-modules/package-manager/fetch-packages.ts
index 59c33a1d2480..147ad99655dd 100644
--- a/editor/src/core/es-modules/package-manager/fetch-packages.ts
+++ b/editor/src/core/es-modules/package-manager/fetch-packages.ts
@@ -47,6 +47,12 @@ import { isBuiltInDependency } from './built-in-dependencies'
 import type { BuiltInDependencies } from './built-in-dependencies-list'
 import { mangleNodeModulePaths, mergeNodeModules } from './merge-modules'
 import { getJsDelivrFileUrl, getPackagerUrl } from './packager-url'
+import {
+  notifyOperationFinished,
+  notifyOperationStarted,
+} from '../../shared/import/import-operation-service'
+import { ImportOperationResult } from '../../shared/import/import-operation-types'
+import type { EditorDispatch } from '../../../components/editor/action-types'
 
 let depPackagerCache: { [key: string]: PackagerServerResponse } = {}
 
@@ -276,7 +282,51 @@ function failError(dependency: RequestedNpmDependency): DependencyFetchError {
   }
 }
 
+export async function fetchNodeModule(
+  dep: RequestedNpmDependency,
+  shouldRetry: boolean = true,
+): Promise<Either<DependencyFetchError, NodeModules>> {
+  try {
+    const matchingVersionResponse = await findMatchingVersion(dep.name, dep.version, 'skipFetch')
+    if (isPackageNotFound(matchingVersionResponse)) {
+      return left(failNotFound(dep))
+    }
+
+    const fetchResolvedDependency = shouldRetry
+      ? fetchPackagerResponseWithRetry
+      : fetchPackagerResponse
+
+    const packagerResponse = await fetchResolvedDependency(dep, matchingVersionResponse.version)
+
+    if (packagerResponse != null) {
+      /**
+       * to avoid clashing transitive dependencies,
+       * we "move" all transitive dependencies into a subfolder at
+       * /node_modules/<main_package>/node_modules/<transitive_dep>/
+       *
+       * the module resolution won't mind this, the only downside to this approach is
+       * that if two main dependencies share the exact same version of a transitive
+       * dependency, they will not share that transitive dependency in memory,
+       * so this is wasting a bit of memory.
+       *
+       * but it avoids two of the same transitive dependencies with different versions from
+       * overwriting each other.
+       *
+       * the real nice solution would be to apply npm's module resolution logic that
+       * pulls up shared transitive dependencies to the main /node_modules/ folder.
+       */
+      return right(mangleNodeModulePaths(dep.name, packagerResponse))
+    } else {
+      return left(failError(dep))
+    }
+  } catch (e) {
+    // TODO: proper error handling, now we don't show error for a missing package. The error will be visible when you try to import
+    return left(failError(dep))
+  }
+}
+
 export async function fetchNodeModules(
+  dispatch: EditorDispatch,
   newDeps: Array<RequestedNpmDependency>,
   builtInDependencies: BuiltInDependencies,
   shouldRetry: boolean = true,
@@ -285,54 +335,21 @@ export async function fetchNodeModules(
     (d) => !isBuiltInDependency(builtInDependencies, d.name),
   )
   const nodeModulesArr = await Promise.all(
-    dependenciesToDownload.map(
-      async (newDep): Promise<Either<DependencyFetchError, NodeModules>> => {
-        try {
-          const matchingVersionResponse = await findMatchingVersion(
-            newDep.name,
-            newDep.version,
-            'skipFetch',
-          )
-          if (isPackageNotFound(matchingVersionResponse)) {
-            return left(failNotFound(newDep))
-          }
-
-          const fetchResolvedDependency = shouldRetry
-            ? fetchPackagerResponseWithRetry
-            : fetchPackagerResponse
-
-          const packagerResponse = await fetchResolvedDependency(
-            newDep,
-            matchingVersionResponse.version,
-          )
-
-          if (packagerResponse != null) {
-            /**
-             * to avoid clashing transitive dependencies,
-             * we "move" all transitive dependencies into a subfolder at
-             * /node_modules/<main_package>/node_modules/<transitive_dep>/
-             *
-             * the module resolution won't mind this, the only downside to this approach is
-             * that if two main dependencies share the exact same version of a transitive
-             * dependency, they will not share that transitive dependency in memory,
-             * so this is wasting a bit of memory.
-             *
-             * but it avoids two of the same transitive dependencies with different versions from
-             * overwriting each other.
-             *
-             * the real nice solution would be to apply npm's module resolution logic that
-             * pulls up shared transitive dependencies to the main /node_modules/ folder.
-             */
-            return right(mangleNodeModulePaths(newDep.name, packagerResponse))
-          } else {
-            return left(failError(newDep))
-          }
-        } catch (e) {
-          // TODO: proper error handling, now we don't show error for a missing package. The error will be visible when you try to import
-          return left(failError(newDep))
-        }
-      },
-    ),
+    dependenciesToDownload.map(async (dep) => {
+      const fetchDependencyOperation = {
+        type: 'fetchDependency',
+        id: `${dep.name}@${dep.version}`,
+        dependencyName: dep.name,
+        dependencyVersion: dep.version,
+      } as const
+      notifyOperationStarted(dispatch, fetchDependencyOperation)
+      const fetchResult = await fetchNodeModule(dep, shouldRetry)
+      const fetchStatus = isLeft(fetchResult)
+        ? ImportOperationResult.Error
+        : ImportOperationResult.Success
+      notifyOperationFinished(dispatch, fetchDependencyOperation, fetchStatus)
+      return fetchResult
+    }),
   )
   const errors = nodeModulesArr
     .filter(isLeft)
diff --git a/editor/src/core/es-modules/package-manager/package-manager.spec.ts b/editor/src/core/es-modules/package-manager/package-manager.spec.ts
index a587ebe1619d..b8a1b9ccfb4c 100644
--- a/editor/src/core/es-modules/package-manager/package-manager.spec.ts
+++ b/editor/src/core/es-modules/package-manager/package-manager.spec.ts
@@ -174,6 +174,7 @@ describe('ES Dependency Manager — Real-life packages', () => {
       },
     )
     const fetchNodeModulesResult = await fetchNodeModules(
+      NO_OP,
       [requestedNpmDependency('react-spring', '8.0.27')],
       createBuiltInDependenciesList(null),
     )
@@ -209,6 +210,7 @@ describe('ES Dependency Manager — Real-life packages', () => {
       },
     )
     void fetchNodeModules(
+      NO_OP,
       [requestedNpmDependency('antd', '4.2.5')],
       createBuiltInDependenciesList(null),
     ).then((fetchNodeModulesResult) => {
@@ -280,6 +282,7 @@ describe('ES Dependency Manager', () => {
       },
     )
     const fetchNodeModulesResult = await fetchNodeModules(
+      NO_OP,
       [requestedNpmDependency('broken', '1.0.0')],
       createBuiltInDependenciesList(null),
     )
@@ -315,6 +318,7 @@ describe('ES Dependency Manager — d.ts', () => {
     )
 
     const fetchNodeModulesResult = await fetchNodeModules(
+      NO_OP,
       [requestedNpmDependency('react-spring', '8.0.27')],
       createBuiltInDependenciesList(null),
     )
@@ -350,6 +354,7 @@ describe('ES Dependency Manager — Downloads extra files as-needed', () => {
       },
     )
     void fetchNodeModules(
+      NO_OP,
       [requestedNpmDependency('mypackage', '0.0.1')],
       createBuiltInDependenciesList(null),
     ).then((fetchNodeModulesResult) => {
@@ -416,6 +421,7 @@ describe('ES Dependency manager - retry behavior', () => {
     )
 
     void fetchNodeModules(
+      NO_OP,
       [requestedNpmDependency('react-spring', '8.0.27')],
       createBuiltInDependenciesList(null),
     ).then((fetchNodeModulesResult) => {
@@ -438,6 +444,7 @@ describe('ES Dependency manager - retry behavior', () => {
     )
 
     void fetchNodeModules(
+      NO_OP,
       [requestedNpmDependency('react-spring', '8.0.27')],
       createBuiltInDependenciesList(null),
     ).then((fetchNodeModulesResult) => {
@@ -466,6 +473,7 @@ describe('ES Dependency manager - retry behavior', () => {
     )
 
     void fetchNodeModules(
+      NO_OP,
       [requestedNpmDependency('react-spring', '8.0.27')],
       createBuiltInDependenciesList(null),
       false,
diff --git a/editor/src/core/shared/dependencies.ts b/editor/src/core/shared/dependencies.ts
index 345315ab1dba..ff6c48ed11a2 100644
--- a/editor/src/core/shared/dependencies.ts
+++ b/editor/src/core/shared/dependencies.ts
@@ -13,11 +13,17 @@ import {
 import type { EditorStorePatched } from '../../components/editor/store/editor-state'
 import type { BuiltInDependencies } from '../es-modules/package-manager/built-in-dependencies-list'
 import { fetchNodeModules } from '../es-modules/package-manager/fetch-packages'
-import type { RequestedNpmDependency } from './npm-dependency-types'
+import type {
+  PackageDetails,
+  PackageStatusMap,
+  RequestedNpmDependency,
+} from './npm-dependency-types'
 import { objectFilter } from './object-utils'
 import type { NodeModules } from './project-file-types'
 import { isTextFile } from './project-file-types'
 import { fastForEach } from './utils'
+import { notifyOperationFinished } from './import/import-operation-service'
+import { ImportOperationResult } from './import/import-operation-types'
 
 export function removeModulesFromNodeModules(
   modulesToRemove: Array<string>,
@@ -76,7 +82,11 @@ export async function refreshDependencies(
 
     const depsToFetch = newDeps.concat(updatedDeps)
 
-    const fetchNodeModulesResult = await fetchNodeModules(depsToFetch, builtInDependencies)
+    const fetchNodeModulesResult = await fetchNodeModules(
+      dispatch,
+      depsToFetch,
+      builtInDependencies,
+    )
 
     const loadedPackagesStatus = createLoadedPackageStatusMapFromDependencies(
       deps,
@@ -91,6 +101,12 @@ export async function refreshDependencies(
       updateNodeModulesContents(fetchNodeModulesResult.nodeModules),
     ])
 
+    notifyOperationFinished(
+      dispatch,
+      { type: 'refreshDependencies' },
+      getDependenciesStatus(loadedPackagesStatus),
+    )
+
     return updatedNodeModulesFiles
   }
 
@@ -100,6 +116,20 @@ export async function refreshDependencies(
   })
 }
 
+function isPackageMissing(status: PackageDetails): boolean {
+  return status.status === 'error' || status.status === 'not-found'
+}
+
+function getDependenciesStatus(loadedPackagesStatus: PackageStatusMap): ImportOperationResult {
+  if (Object.values(loadedPackagesStatus).every(isPackageMissing)) {
+    return ImportOperationResult.Error
+  }
+  if (Object.values(loadedPackagesStatus).some(isPackageMissing)) {
+    return ImportOperationResult.Warn
+  }
+  return ImportOperationResult.Success
+}
+
 export const projectDependenciesSelector = createSelector(
   (store: EditorStorePatched) => store.editor.projectContents,
   (projectContents): Array<RequestedNpmDependency> => {
diff --git a/editor/src/core/shared/github/operations/load-branch.ts b/editor/src/core/shared/github/operations/load-branch.ts
index 88c4f2d2d8e4..36a63a7d74fc 100644
--- a/editor/src/core/shared/github/operations/load-branch.ts
+++ b/editor/src/core/shared/github/operations/load-branch.ts
@@ -39,6 +39,14 @@ import type { ExistingAsset } from '../../../../components/editor/server'
 import { GithubOperations } from '.'
 import { assertNever } from '../../utils'
 import { updateProjectContentsWithParseResults } from '../../parser-projectcontents-utils'
+import {
+  notifyOperationFinished,
+  notifyOperationStarted,
+  startImportProcess,
+} from '../../import/import-operation-service'
+import { resetRequirementsResolutions } from '../../import/proejct-health-check/utopia-requirements-service'
+import { checkAndFixUtopiaRequirements } from '../../import/proejct-health-check/check-utopia-requirements'
+import { ImportOperationResult } from '../../import/import-operation-types'
 
 export const saveAssetsToProject =
   (operationContext: GithubOperationContext) =>
@@ -115,6 +123,12 @@ export const updateProjectWithBranchContent =
     currentProjectContents: ProjectContentTreeRoot,
     initiator: GithubOperationSource,
   ): Promise<void> => {
+    startImportProcess(dispatch)
+    notifyOperationStarted(dispatch, {
+      type: 'loadBranch',
+      branchName: branchName,
+      githubRepo: githubRepo,
+    })
     await runGithubOperation(
       {
         name: 'loadBranch',
@@ -147,14 +161,29 @@ export const updateProjectWithBranchContent =
             if (resetBranches) {
               newGithubData.branches = null
             }
+            notifyOperationFinished(dispatch, { type: 'loadBranch' }, ImportOperationResult.Success)
 
+            notifyOperationStarted(dispatch, { type: 'parseFiles' })
             // Push any code through the parser so that the representations we end up with are in a state of `BOTH_MATCH`.
             // So that it will override any existing files that might already exist in the project when sending them to VS Code.
-            const parsedProjectContents = createStoryboardFileIfNecessary(
-              await updateProjectContentsWithParseResults(workers, responseBody.branch.content),
+            const parseResults = await updateProjectContentsWithParseResults(
+              workers,
+              responseBody.branch.content,
+            )
+            notifyOperationFinished(dispatch, { type: 'parseFiles' }, ImportOperationResult.Success)
+
+            resetRequirementsResolutions(dispatch)
+            const parsedProjectContentsInitial = createStoryboardFileIfNecessary(
+              dispatch,
+              parseResults,
               'create-placeholder',
             )
 
+            const parsedProjectContents = checkAndFixUtopiaRequirements(
+              dispatch,
+              parsedProjectContentsInitial,
+            )
+
             // Update the editor with everything so that if anything else fails past this point
             // there's no loss of data from the user's perspective.
             dispatch(
@@ -180,6 +209,7 @@ export const updateProjectWithBranchContent =
             let dependenciesPromise: Promise<void> = Promise.resolve()
             const packageJson = packageJsonFileFromProjectContents(parsedProjectContents)
             if (packageJson != null && isTextFile(packageJson)) {
+              notifyOperationStarted(dispatch, { type: 'refreshDependencies' })
               dependenciesPromise = refreshDependencies(
                 dispatch,
                 packageJson.fileContents.code,
diff --git a/editor/src/core/shared/import/import-operation-service.ts b/editor/src/core/shared/import/import-operation-service.ts
new file mode 100644
index 000000000000..e04b0cb10103
--- /dev/null
+++ b/editor/src/core/shared/import/import-operation-service.ts
@@ -0,0 +1,149 @@
+import { assertNever } from '../utils'
+import type { EditorAction, EditorDispatch } from '../../../components/editor/action-types'
+import {
+  setImportWizardOpen,
+  updateImportOperations,
+} from '../../../components/editor/actions/action-creators'
+import { ImportOperationAction } from './import-operation-types'
+import type {
+  ImportOperation,
+  ImportOperationResult,
+  ImportOperationType,
+} from './import-operation-types'
+import { isFeatureEnabled } from '../../../utils/feature-switches'
+
+export function startImportProcess(dispatch: EditorDispatch) {
+  const actions: EditorAction[] = [
+    updateImportOperations(
+      [
+        { type: 'loadBranch' },
+        { type: 'parseFiles' },
+        { type: 'checkRequirements' },
+        { type: 'refreshDependencies' },
+      ],
+      ImportOperationAction.Replace,
+    ),
+  ]
+  if (isFeatureEnabled('Import Wizard')) {
+    actions.push(setImportWizardOpen(true))
+  }
+  dispatch(actions)
+}
+
+export function hideImportWizard(dispatch: EditorDispatch) {
+  dispatch([setImportWizardOpen(false)])
+}
+
+export function notifyOperationStarted(dispatch: EditorDispatch, operation: ImportOperation) {
+  const operationWithTime = {
+    ...operation,
+    timeStarted: Date.now(),
+    timeDone: null,
+  }
+  if (!isFeatureEnabled('Import Wizard')) {
+    return
+  }
+  setTimeout(() => {
+    dispatch([updateImportOperations([operationWithTime], ImportOperationAction.Update)])
+  }, 0)
+}
+
+export function notifyOperationFinished(
+  dispatch: EditorDispatch,
+  operation: ImportOperation,
+  result: ImportOperationResult,
+) {
+  const timeDone = Date.now()
+  const operationWithTime = {
+    ...operation,
+    timeDone: timeDone,
+    result: result,
+  }
+  if (!isFeatureEnabled('Import Wizard')) {
+    return
+  }
+  setTimeout(() => {
+    dispatch([updateImportOperations([operationWithTime], ImportOperationAction.Update)])
+  }, 0)
+}
+
+export function areSameOperation(existing: ImportOperation, incoming: ImportOperation): boolean {
+  if (existing.id == null || incoming.id == null) {
+    return existing.type === incoming.type
+  }
+  return existing.id === incoming.id
+}
+
+export const defaultParentTypes: Partial<Record<ImportOperationType, ImportOperationType>> = {
+  checkRequirementAndFix: 'checkRequirements',
+  fetchDependency: 'refreshDependencies',
+} as const
+
+function getParentArray(root: ImportOperation[], operation: ImportOperation): ImportOperation[] {
+  const parentOperationType = defaultParentTypes[operation.type]
+  if (parentOperationType == null) {
+    return root
+  }
+  const parentIndex = root.findIndex((op) => op.type === parentOperationType)
+  if (parentIndex === -1) {
+    return root
+  }
+  const parent = root[parentIndex]
+  if (parent.children == null) {
+    root[parentIndex] = {
+      ...parent,
+      children: [],
+    }
+  }
+  return root[parentIndex].children ?? []
+}
+
+export function getUpdateOperationResult(
+  existingOperations: ImportOperation[],
+  incomingOperations: ImportOperation[],
+  type: ImportOperationAction,
+): ImportOperation[] {
+  let operations: ImportOperation[] = existingOperations.map((operation) => ({
+    ...operation,
+    children: [...(operation.children ?? [])],
+  }))
+  switch (type) {
+    case ImportOperationAction.Add:
+      incomingOperations.forEach((operation) => {
+        const parent = getParentArray(operations, operation)
+        parent.push(operation)
+      })
+      break
+    case ImportOperationAction.Remove:
+      incomingOperations.forEach((operation) => {
+        const parent = getParentArray(operations, operation)
+        const idx = parent.findIndex((op) => areSameOperation(op, operation))
+        if (idx >= 0) {
+          parent.splice(idx, 1)
+        }
+      })
+      break
+    case ImportOperationAction.Update:
+      incomingOperations.forEach((operation) => {
+        const parent = getParentArray(operations, operation)
+        const idx = parent.findIndex((op) => areSameOperation(op, operation))
+        if (idx >= 0) {
+          parent[idx] = {
+            ...parent[idx],
+            ...operation,
+          }
+        }
+        // if not found, add it
+        if (idx === -1) {
+          parent.push(operation)
+        }
+      })
+      break
+    case ImportOperationAction.Replace:
+      operations = [...incomingOperations]
+      break
+    default:
+      assertNever(type)
+  }
+  return operations
+}
diff --git a/editor/src/core/shared/import/import-operation-types.ts b/editor/src/core/shared/import/import-operation-types.ts
new file mode 100644
index 000000000000..4a8fccb83539
--- /dev/null
+++ b/editor/src/core/shared/import/import-operation-types.ts
@@ -0,0 +1,84 @@
+import type { GithubRepo } from '../../../components/editor/store/editor-state'
+import type { RequirementResolutionResult } from './proejct-health-check/utopia-requirements-types'
+
+type ImportOperationData = {
+  text?: string
+  id?: string | null
+  timeStarted?: number | null
+  timeDone?: number | null
+  result?: ImportOperationResult
+  error?: string
+  children?: ImportOperation[]
+}
+
+export const ImportOperationResult = {
+  Success: 'success',
+  Error: 'error',
+  Warn: 'warn',
+} as const
+
+export type ImportOperationResult =
+  (typeof ImportOperationResult)[keyof typeof ImportOperationResult]
+
+type ImportLoadBranch = {
+  type: 'loadBranch'
+  branchName?: string
+  githubRepo?: GithubRepo
+} & ImportOperationData
+
+type ImportRefreshDependencies = ImportOperationData & {
+  type: 'refreshDependencies'
+}
+
+export type ImportFetchDependency = ImportOperationData & {
+  type: 'fetchDependency'
+  dependencyName: string
+  dependencyVersion: string
+  id: string
+}
+
+type ImportParseFiles = {
+  type: 'parseFiles'
+} & ImportOperationData
+
+export type ImportCheckRequirementAndFix = ImportOperationData & {
+  type: 'checkRequirementAndFix'
+  resolution?: RequirementResolutionResult
+  text: string
+  id: string
+}
+
+export function importCheckRequirementAndFix(
+  id: string,
+  text: string,
+): ImportCheckRequirementAndFix {
+  return {
+    type: 'checkRequirementAndFix',
+    text: text,
+    id: id,
+  }
+}
+
+type ImportCheckRequirements = ImportOperationData & {
+  type: 'checkRequirements'
+}
+
+export type ImportOperation =
+  | ImportLoadBranch
+  | ImportRefreshDependencies
+  | ImportParseFiles
+  | ImportFetchDependency
+  | ImportCheckRequirementAndFix
+  | ImportCheckRequirements
+
+export type ImportOperationType = ImportOperation['type']
+
+export const ImportOperationAction = {
+  Add: 'add',
+  Remove: 'remove',
+  Update: 'update',
+  Replace: 'replace',
+} as const
+
+export type ImportOperationAction =
+  (typeof ImportOperationAction)[keyof typeof ImportOperationAction]
diff --git a/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts b/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
new file mode 100644
index 000000000000..ec78bdcb05e6
--- /dev/null
+++ b/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
@@ -0,0 +1,154 @@
+import {
+  addFileToProjectContents,
+  packageJsonFileFromProjectContents,
+} from '../../../../components/assets'
+import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
+import { codeFile, isTextFile, RevisionsState } from '../../project-file-types'
+import { notifyCheckingRequirement, notifyResolveRequirement } from './utopia-requirements-service'
+import { RequirementResolutionResult } from './utopia-requirements-types'
+import { applyToAllUIJSFiles } from '../../../../core/model/project-file-utils'
+import type { EditorDispatch } from '../../../../components/editor/action-types'
+
+export function checkAndFixUtopiaRequirements(
+  dispatch: EditorDispatch,
+  parsedProjectContents: ProjectContentTreeRoot,
+): ProjectContentTreeRoot {
+  let projectContents = parsedProjectContents
+  // check and fix package.json
+  projectContents = checkAndFixPackageJson(dispatch, projectContents)
+  // check language
+  checkProjectLanguage(dispatch, projectContents)
+  // check react version
+  checkReactVersion(dispatch, projectContents)
+  return projectContents
+}
+
+function getPackageJson(
+  projectContents: ProjectContentTreeRoot,
+): { utopia?: Record<string, string>; dependencies?: Record<string, string> } | null {
+  const packageJson = packageJsonFileFromProjectContents(projectContents)
+  if (packageJson != null && isTextFile(packageJson)) {
+    return JSON.parse(packageJson.fileContents.code)
+  }
+  return null
+}
+
+function checkAndFixPackageJson(
+  dispatch: EditorDispatch,
+  projectContents: ProjectContentTreeRoot,
+): ProjectContentTreeRoot {
+  notifyCheckingRequirement(dispatch, 'packageJsonEntries', 'Checking package.json')
+  const parsedPackageJson = getPackageJson(projectContents)
+  if (parsedPackageJson == null) {
+    notifyResolveRequirement(
+      dispatch,
+      'packageJsonEntries',
+      RequirementResolutionResult.Critical,
+      'The file package.json was not found',
+    )
+    return projectContents
+  }
+  if (parsedPackageJson.utopia == null) {
+    parsedPackageJson.utopia = {
+      'main-ui': 'utopia/storyboard.js',
+    }
+    const result = addFileToProjectContents(
+      projectContents,
+      '/package.json',
+      codeFile(
+        JSON.stringify(parsedPackageJson, null, 2),
+        null,
+        0,
+        RevisionsState.CodeAheadButPleaseTellVSCodeAboutIt,
+      ),
+    )
+    notifyResolveRequirement(
+      dispatch,
+      'packageJsonEntries',
+      RequirementResolutionResult.Fixed,
+      'Fixed utopia entry in package.json',
+    )
+    return result
+  } else {
+    notifyResolveRequirement(
+      dispatch,
+      'packageJsonEntries',
+      RequirementResolutionResult.Found,
+      'Valid package.json found',
+    )
+  }
+
+  return projectContents
+}
+
+function checkProjectLanguage(
+  dispatch: EditorDispatch,
+  projectContents: ProjectContentTreeRoot,
+): void {
+  notifyCheckingRequirement(dispatch, 'language', 'Checking project language')
+  let jsCount = 0
+  let tsCount = 0
+  applyToAllUIJSFiles(projectContents, (filename, uiJSFile) => {
+    if ((filename.endsWith('.ts') || filename.endsWith('.tsx')) && !filename.endsWith('.d.ts')) {
+      tsCount++
+    } else if (filename.endsWith('.js') || filename.endsWith('.jsx')) {
+      jsCount++
+    }
+    return uiJSFile
+  })
+  if (tsCount > 0) {
+    notifyResolveRequirement(
+      dispatch,
+      'language',
+      RequirementResolutionResult.Critical,
+      'There are Typescript files in the project',
+      'typescript',
+    )
+  } else if (jsCount == 0) {
+    // in case it's a .coffee project, python, etc
+    notifyResolveRequirement(
+      dispatch,
+      'language',
+      RequirementResolutionResult.Critical,
+      'No JS/JSX files found',
+      'javascript',
+    )
+  } else {
+    notifyResolveRequirement(
+      dispatch,
+      'language',
+      RequirementResolutionResult.Found,
+      'Project uses JS/JSX',
+      'javascript',
+    )
+  }
+}
+
+function checkReactVersion(
+  dispatch: EditorDispatch,
+  projectContents: ProjectContentTreeRoot,
+): void {
+  notifyCheckingRequirement(dispatch, 'reactVersion', 'Checking React version')
+  const parsedPackageJson = getPackageJson(projectContents)
+  if (
+    parsedPackageJson == null ||
+    parsedPackageJson.dependencies == null ||
+    parsedPackageJson.dependencies.react == null
+  ) {
+    return notifyResolveRequirement(
+      dispatch,
+      'reactVersion',
+      RequirementResolutionResult.Critical,
+      'React is not in dependencies',
+    )
+  }
+  const reactVersion = parsedPackageJson.dependencies.react
+  // TODO: check react version
+  return notifyResolveRequirement(
+    dispatch,
+    'reactVersion',
+    RequirementResolutionResult.Found,
+    'React version is ok',
+    reactVersion,
+  )
+}
diff --git a/editor/src/core/shared/import/proejct-health-check/utopia-requirements-service.ts b/editor/src/core/shared/import/proejct-health-check/utopia-requirements-service.ts
new file mode 100644
index 000000000000..eb0d17b0dda8
--- /dev/null
+++ b/editor/src/core/shared/import/proejct-health-check/utopia-requirements-service.ts
@@ -0,0 +1,134 @@
+import { importCheckRequirementAndFix, ImportOperationResult } from '../import-operation-types'
+import { notifyOperationFinished, notifyOperationStarted } from '../import-operation-service'
+import type { EditorDispatch } from '../../../../components/editor/action-types'
+import { updateProjectRequirements } from '../../../../components/editor/actions/action-creators'
+import type { ProjectRequirement, ProjectRequirements } from './utopia-requirements-types'
+import {
+  emptyProjectRequirements,
+  RequirementResolutionResult,
+  RequirementResolutionStatus,
+} from './utopia-requirements-types'
+import { isFeatureEnabled } from '../../../../utils/feature-switches'
+
+const initialTexts: Record<ProjectRequirement, string> = {
+  storyboard: 'Checking storyboard.js',
+  packageJsonEntries: 'Checking package.json',
+  language: 'Checking project language',
+  reactVersion: 'Checking React version',
+}
+
+export function updateProjectRequirementsStatus(
+  dispatch: EditorDispatch,
+  projectRequirements: Partial<ProjectRequirements>,
+) {
+  if (!isFeatureEnabled('Import Wizard')) {
+    return
+  }
+  setTimeout(() => {
+    dispatch([updateProjectRequirements(projectRequirements)])
+  }, 0)
+}
+
+export function resetRequirementsResolutions(dispatch: EditorDispatch) {
+  let projectRequirements = emptyProjectRequirements()
+  updateProjectRequirementsStatus(dispatch, projectRequirements)
+  notifyOperationStarted(dispatch, {
+    type: 'checkRequirements',
+    children: Object.keys(projectRequirements).map((key) =>
+      importCheckRequirementAndFix(
+        key as ProjectRequirement,
+        initialTexts[key as ProjectRequirement],
+      ),
+    ),
+  })
+}
+
+export function notifyCheckingRequirement(
+  dispatch: EditorDispatch,
+  requirement: ProjectRequirement,
+  text: string,
+) {
+  updateProjectRequirementsStatus(dispatch, {
+    [requirement]: {
+      status: RequirementResolutionStatus.Pending,
+    },
+  })
+  notifyOperationStarted(dispatch, {
+    type: 'checkRequirementAndFix',
+    id: requirement,
+    text: text,
+  })
+}
+
+export function notifyResolveRequirement(
+  dispatch: EditorDispatch,
+  requirementName: ProjectRequirement,
+  resolution: RequirementResolutionResult,
+  text: string,
+  value?: string,
+) {
+  updateProjectRequirementsStatus(dispatch, {
+    [requirementName]: {
+      status: RequirementResolutionStatus.Done,
+      resolution: resolution,
+      value: value,
+    },
+  })
+  const result =
+    resolution === RequirementResolutionResult.Found ||
+    resolution === RequirementResolutionResult.Fixed
+      ? ImportOperationResult.Success
+      : resolution === RequirementResolutionResult.Partial
+      ? ImportOperationResult.Warn
+      : ImportOperationResult.Error
+  notifyOperationFinished(
+    dispatch,
+    {
+      type: 'checkRequirementAndFix',
+      id: requirementName,
+      text: text,
+      resolution: resolution,
+    },
+    result,
+  )
+}
+
+export function updateRequirements(
+  dispatch: EditorDispatch,
+  existingRequirements: ProjectRequirements,
+  incomingRequirements: Partial<ProjectRequirements>,
+): ProjectRequirements {
+  let result = { ...existingRequirements }
+  for (const incomingRequirement of Object.keys(incomingRequirements)) {
+    const incomingRequirementName = incomingRequirement as ProjectRequirement
+    result[incomingRequirementName] = {
+      ...result[incomingRequirementName],
+      ...incomingRequirements[incomingRequirementName],
+    }
+  }
+
+  const aggregatedDoneStatus = getAggregatedStatus(result)
+  if (aggregatedDoneStatus != null) {
+    notifyOperationFinished(dispatch, { type: 'checkRequirements' }, aggregatedDoneStatus)
+  }
+
+  return result
+}
+
+function getAggregatedStatus(
+  requirementsResolutions: ProjectRequirements,
+): ImportOperationResult | null {
+  for (const resolution of Object.values(requirementsResolutions)) {
+    if (resolution.status != RequirementResolutionStatus.Done) {
+      return null
+    }
+    if (resolution.resolution == RequirementResolutionResult.Critical) {
+      return ImportOperationResult.Error
+    }
+    if (resolution.resolution == RequirementResolutionResult.Partial) {
+      return ImportOperationResult.Warn
+    }
+  }
+  return ImportOperationResult.Success
+}
+export { RequirementResolutionResult }
diff --git a/editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts b/editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts
new file mode 100644
index 000000000000..6af5548346f4
--- /dev/null
+++ b/editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts
@@ -0,0 +1,76 @@
+export const RequirementResolutionResult = {
+  Found: 'found',
+  Fixed: 'fixed',
+  Partial: 'partial',
+  Critical: 'critical',
+} as const
+
+export type RequirementResolutionResult =
+  (typeof RequirementResolutionResult)[keyof typeof RequirementResolutionResult]
+
+export const RequirementResolutionStatus = {
+  NotStarted: 'not-started',
+  Pending: 'pending',
+  Done: 'done',
+}
+
+export type RequirementResolutionStatus =
+  (typeof RequirementResolutionStatus)[keyof typeof RequirementResolutionStatus]
+
+export function emptyRequirementResolution(): RequirementResolution {
+  return {
+    status: RequirementResolutionStatus.NotStarted,
+    value: null,
+    resolution: null,
+  }
+}
+
+export function emptyProjectRequirements(): ProjectRequirements {
+  return newProjectRequirements(
+    emptyRequirementResolution(),
+    emptyRequirementResolution(),
+    emptyRequirementResolution(),
+    emptyRequirementResolution(),
+  )
+}
+
+export interface RequirementResolution {
+  status: RequirementResolutionStatus
+  value?: string | null
+  resolution?: RequirementResolutionResult | null
+}
+
+export function requirementResolution(
+  status: RequirementResolutionStatus,
+  value?: string | null,
+  resolution?: RequirementResolutionResult | null,
+): RequirementResolution {
+  return {
+    status,
+    value,
+    resolution,
+  }
+}
+
+export interface ProjectRequirements {
+  storyboard: RequirementResolution
+  packageJsonEntries: RequirementResolution
+  language: RequirementResolution
+  reactVersion: RequirementResolution
+}
+
+export type ProjectRequirement = keyof ProjectRequirements
+
+export function newProjectRequirements(
+  storyboard: RequirementResolution,
+  packageJsonEntries: RequirementResolution,
+  language: RequirementResolution,
+  reactVersion: RequirementResolution,
+): ProjectRequirements {
+  return {
+    storyboard,
+    packageJsonEntries,
+    language,
+    reactVersion,
+  }
+}
diff --git a/editor/src/utils/feature-switches.ts b/editor/src/utils/feature-switches.ts
index 4f996e50e1df..0044642a5ccf 100644
--- a/editor/src/utils/feature-switches.ts
+++ b/editor/src/utils/feature-switches.ts
@@ -22,6 +22,7 @@ export type FeatureName =
   | 'Debug - Arbitrary Code Cache'
   | 'Canvas Fast Selection Hack'
   | 'Tailwind'
+  | 'Import Wizard'
   | 'Show Debug Features'
 
 export const AllFeatureNames: FeatureName[] = [
@@ -46,6 +47,7 @@ export const AllFeatureNames: FeatureName[] = [
   'Condensed Navigator Entries',
   'Canvas Fast Selection Hack',
   'Tailwind',
+  'Import Wizard',
 ]
 
 let FeatureSwitches: { [feature in FeatureName]: boolean } = {
@@ -68,6 +70,7 @@ let FeatureSwitches: { [feature in FeatureName]: boolean } = {
   'Condensed Navigator Entries': !IS_TEST_ENVIRONMENT,
   'Use Parsing Cache': false,
   'Canvas Fast Selection Hack': true,
+  'Import Wizard': false,
   'Show Debug Features': false,
 }
 

From 2ff7ab68e00f0896f170210f79004436f923ce8c Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Tue, 29 Oct 2024 12:26:32 -0400
Subject: [PATCH 186/272] refactor(editor): separate requirements checks
 (#6596)

This PR is mainly a refactor one, separating requirements check so it
will be easy to add more.
- move every requirement check to its own file (**no logic change**,
just separating them)
- move the storyboard check and creation from `actions.tsx` to its own
file (**no logic change**)
- add tests for checks
- (small) use semver for React check

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 .../src/components/editor/actions/actions.tsx | 162 +--------------
 .../shared/github/operations/load-branch.ts   |  12 +-
 .../check-utopia-requirements.ts              | 176 ++++------------
 .../requirements/requirement-language.ts      |  44 ++++
 .../requirements/requirement-package-json.ts  |  47 +++++
 .../requirements/requirement-react.ts         |  40 ++++
 .../requirements/requirement-storyboard.ts    | 154 ++++++++++++++
 .../requirements/requirements.spec.ts         | 191 ++++++++++++++++++
 .../utopia-requirements-types.ts              |  14 ++
 .../sample-projects/sample-project-utils.ts   |   4 +-
 10 files changed, 543 insertions(+), 301 deletions(-)
 create mode 100644 editor/src/core/shared/import/proejct-health-check/requirements/requirement-language.ts
 create mode 100644 editor/src/core/shared/import/proejct-health-check/requirements/requirement-package-json.ts
 create mode 100644 editor/src/core/shared/import/proejct-health-check/requirements/requirement-react.ts
 create mode 100644 editor/src/core/shared/import/proejct-health-check/requirements/requirement-storyboard.ts
 create mode 100644 editor/src/core/shared/import/proejct-health-check/requirements/requirements.spec.ts

diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index 090d109b6898..c9ed2f8801ff 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -398,7 +398,6 @@ import {
   trueUpChildrenOfGroupChanged,
   trueUpHuggingElement,
   trueUpGroupElementChanged,
-  getPackageJsonFromProjectContents,
   modifyUnderlyingTargetJSXElement,
   getAllComponentDescriptorErrors,
   updatePackageJsonInEditorState,
@@ -441,7 +440,6 @@ import { reorderElement } from '../../../components/canvas/commands/reorder-elem
 import type { BuiltInDependencies } from '../../../core/es-modules/package-manager/built-in-dependencies-list'
 import { fetchNodeModules } from '../../../core/es-modules/package-manager/fetch-packages'
 import { resolveModule } from '../../../core/es-modules/package-manager/module-resolution'
-import { addStoryboardFileToProject } from '../../../core/model/storyboard-utils'
 import { UTOPIA_UID_KEY } from '../../../core/model/utopia-constants'
 import { mapDropNulls, uniqBy } from '../../../core/shared/array-utils'
 import type { TreeConflicts } from '../../../core/shared/github/helpers'
@@ -630,13 +628,9 @@ import { getNavigatorTargetsFromEditorState } from '../../navigator/navigator-ut
 import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 import { styleP } from '../../inspector/inspector-common'
 import { getUpdateOperationResult } from '../../../core/shared/import/import-operation-service'
-import {
-  notifyCheckingRequirement,
-  notifyResolveRequirement,
-  updateRequirements,
-} from '../../../core/shared/import/proejct-health-check/utopia-requirements-service'
-import { RequirementResolutionResult } from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
+import { updateRequirements } from '../../../core/shared/import/proejct-health-check/utopia-requirements-service'
 import { applyValuesAtPath, deleteValuesAtPath } from '../../canvas/commands/utils/property-utils'
+import { createStoryboardFileIfNecessary } from '../../../core/shared/import/proejct-health-check/requirements/requirement-storyboard'
 
 export const MIN_CODE_PANE_REOPEN_WIDTH = 100
 
@@ -1595,91 +1589,6 @@ function updateCodeEditorVisibility(editor: EditorModel, codePaneVisible: boolea
   }
 }
 
-function createStoryboardFileIfRemixProject(
-  projectContents: ProjectContentTreeRoot,
-): ProjectContentTreeRoot | null {
-  const packageJsonContents = defaultEither(
-    null,
-    getPackageJsonFromProjectContents(projectContents),
-  )
-  if (packageJsonContents == null) {
-    return null
-  }
-  const remixNotIncluded = packageJsonContents['dependencies']?.['@remix-run/react'] == null
-  if (remixNotIncluded) {
-    return null
-  }
-
-  const updatedProjectContents = addFileToProjectContents(
-    projectContents,
-    StoryboardFilePath,
-    codeFile(DefaultStoryboardWithRemix, null, 1),
-  )
-  return updatedProjectContents
-}
-
-function createStoryboardFileIfMainComponentPresent(
-  projectContents: ProjectContentTreeRoot,
-): ProjectContentTreeRoot | null {
-  return addStoryboardFileToProject(projectContents)
-}
-
-function createStoryboardFileWithPlaceholderContents(
-  projectContents: ProjectContentTreeRoot,
-  createPlaceholder: 'create-placeholder' | 'skip-creating-placeholder',
-): ProjectContentTreeRoot {
-  if (createPlaceholder === 'skip-creating-placeholder') {
-    return projectContents
-  }
-  const updatedProjectContents = addFileToProjectContents(
-    projectContents,
-    StoryboardFilePath,
-    codeFile(DefaultStoryboardContents, null, 1),
-  )
-  return updatedProjectContents
-}
-
-export function createStoryboardFileIfNecessary(
-  dispatch: EditorDispatch,
-  projectContents: ProjectContentTreeRoot,
-  createPlaceholder: 'create-placeholder' | 'skip-creating-placeholder',
-): ProjectContentTreeRoot {
-  notifyCheckingRequirement(dispatch, 'storyboard', 'Checking for storyboard.js')
-  const storyboardFile = getProjectFileByFilePath(projectContents, StoryboardFilePath)
-  if (storyboardFile != null) {
-    notifyResolveRequirement(
-      dispatch,
-      'storyboard',
-      RequirementResolutionResult.Found,
-      'Storyboard.js found',
-    )
-    return projectContents
-  }
-
-  const result =
-    createStoryboardFileIfRemixProject(projectContents) ??
-    createStoryboardFileIfMainComponentPresent(projectContents) ??
-    createStoryboardFileWithPlaceholderContents(projectContents, createPlaceholder)
-
-  if (result == projectContents) {
-    notifyResolveRequirement(
-      dispatch,
-      'storyboard',
-      RequirementResolutionResult.Partial,
-      'Storyboard.js skipped',
-    )
-  } else {
-    notifyResolveRequirement(
-      dispatch,
-      'storyboard',
-      RequirementResolutionResult.Fixed,
-      'Storyboard.js created',
-    )
-  }
-
-  return result
-}
-
 // JS Editor Actions:
 export const UPDATE_FNS = {
   NEW: (
@@ -4049,14 +3958,12 @@ export const UPDATE_FNS = {
     }
     return {
       ...editor,
-      projectContents: createStoryboardFileIfNecessary(
-        dispatch,
-        workingProjectContents,
-        // If we are in the process of cloning a Github repository, do not create placeholder Storyboard
+      projectContents:
+        // If we are in the process of cloning a Github repository, do not create storyboard
+        // it will be created in the requirements check phase
         userState.githubState.gitRepoToLoad != null
-          ? 'skip-creating-placeholder'
-          : 'create-placeholder',
-      ),
+          ? workingProjectContents
+          : createStoryboardFileIfNecessary(workingProjectContents),
       canvas: {
         ...editor.canvas,
         canvasContentInvalidateCount: anyParsedUpdates
@@ -6462,61 +6369,6 @@ function saveFileInProjectContents(
   }
 }
 
-const DefaultStoryboardWithRemix = `import * as React from 'react'
-import { Storyboard, RemixScene } from 'utopia-api'
-
-export var storyboard = (
-  <Storyboard>
-    <RemixScene
-      style={{
-        position: 'absolute',
-        width: 644,
-        height: 750,
-        left: 200,
-        top: 30,
-        overflow: 'hidden',
-      }}
-      data-label='Mood Board'
-    />
-  </Storyboard>
-)
-`
-
-const DefaultStoryboardContents = `import * as React from 'react'
-import { Scene, Storyboard } from 'utopia-api'
-
-export var storyboard = (
-  <Storyboard>
-    <Scene
-      style={{
-        width: 603,
-        height: 794,
-        position: 'absolute',
-        left: 212,
-        top: 128,
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '253px 101px',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <span
-        style={{
-          wordBreak: 'break-word',
-          fontSize: '25px',
-          width: 257,
-          height: 130,
-        }}
-      >
-        Open the insert menu or press the + button in the
-        toolbar to insert components
-      </span>
-    </Scene>
-  </Storyboard>
-  )
-`
-
 function addTextFile(
   editor: EditorState,
   parentPath: string,
diff --git a/editor/src/core/shared/github/operations/load-branch.ts b/editor/src/core/shared/github/operations/load-branch.ts
index 36a63a7d74fc..8ff8ef7c9feb 100644
--- a/editor/src/core/shared/github/operations/load-branch.ts
+++ b/editor/src/core/shared/github/operations/load-branch.ts
@@ -33,9 +33,7 @@ import {
   saveGithubAsset,
 } from '../helpers'
 import type { GithubOperationContext } from './github-operation-context'
-import { createStoryboardFileIfNecessary } from '../../../../components/editor/actions/actions'
 import { getAllComponentDescriptorFilePaths } from '../../../property-controls/property-controls-local'
-import type { ExistingAsset } from '../../../../components/editor/server'
 import { GithubOperations } from '.'
 import { assertNever } from '../../utils'
 import { updateProjectContentsWithParseResults } from '../../parser-projectcontents-utils'
@@ -173,16 +171,8 @@ export const updateProjectWithBranchContent =
             notifyOperationFinished(dispatch, { type: 'parseFiles' }, ImportOperationResult.Success)
 
             resetRequirementsResolutions(dispatch)
-            const parsedProjectContentsInitial = createStoryboardFileIfNecessary(
-              dispatch,
-              parseResults,
-              'create-placeholder',
-            )
 
-            const parsedProjectContents = checkAndFixUtopiaRequirements(
-              dispatch,
-              parsedProjectContentsInitial,
-            )
+            const parsedProjectContents = checkAndFixUtopiaRequirements(dispatch, parseResults)
 
             // Update the editor with everything so that if anything else fails past this point
             // there's no loss of data from the user's perspective.
diff --git a/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts b/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
index ec78bdcb05e6..c5e1dc0c520f 100644
--- a/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
+++ b/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
@@ -1,154 +1,64 @@
-import {
-  addFileToProjectContents,
-  packageJsonFileFromProjectContents,
-} from '../../../../components/assets'
+import { getProjectFileByFilePath } from '../../../../components/assets'
 import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
-import { codeFile, isTextFile, RevisionsState } from '../../project-file-types'
-import { notifyCheckingRequirement, notifyResolveRequirement } from './utopia-requirements-service'
-import { RequirementResolutionResult } from './utopia-requirements-types'
-import { applyToAllUIJSFiles } from '../../../../core/model/project-file-utils'
+import { isTextFile } from '../../project-file-types'
 import type { EditorDispatch } from '../../../../components/editor/action-types'
+import CheckPackageJson from './requirements/requirement-package-json'
+import CheckLanguage from './requirements/requirement-language'
+import CheckReactVersion from './requirements/requirement-react'
+import type { ProjectRequirement, RequirementCheck } from './utopia-requirements-types'
+import { notifyCheckingRequirement, notifyResolveRequirement } from './utopia-requirements-service'
+import CheckStoryboard from './requirements/requirement-storyboard'
 
 export function checkAndFixUtopiaRequirements(
   dispatch: EditorDispatch,
   parsedProjectContents: ProjectContentTreeRoot,
 ): ProjectContentTreeRoot {
-  let projectContents = parsedProjectContents
-  // check and fix package.json
-  projectContents = checkAndFixPackageJson(dispatch, projectContents)
-  // check language
-  checkProjectLanguage(dispatch, projectContents)
-  // check react version
-  checkReactVersion(dispatch, projectContents)
-  return projectContents
-}
-
-function getPackageJson(
-  projectContents: ProjectContentTreeRoot,
-): { utopia?: Record<string, string>; dependencies?: Record<string, string> } | null {
-  const packageJson = packageJsonFileFromProjectContents(projectContents)
-  if (packageJson != null && isTextFile(packageJson)) {
-    return JSON.parse(packageJson.fileContents.code)
+  const checks: Record<ProjectRequirement, RequirementCheck> = {
+    storyboard: new CheckStoryboard(),
+    packageJsonEntries: new CheckPackageJson(),
+    language: new CheckLanguage(),
+    reactVersion: new CheckReactVersion(),
   }
-  return null
-}
-
-function checkAndFixPackageJson(
-  dispatch: EditorDispatch,
-  projectContents: ProjectContentTreeRoot,
-): ProjectContentTreeRoot {
-  notifyCheckingRequirement(dispatch, 'packageJsonEntries', 'Checking package.json')
-  const parsedPackageJson = getPackageJson(projectContents)
-  if (parsedPackageJson == null) {
-    notifyResolveRequirement(
-      dispatch,
-      'packageJsonEntries',
-      RequirementResolutionResult.Critical,
-      'The file package.json was not found',
-    )
-    return projectContents
-  }
-  if (parsedPackageJson.utopia == null) {
-    parsedPackageJson.utopia = {
-      'main-ui': 'utopia/storyboard.js',
-    }
-    const result = addFileToProjectContents(
-      projectContents,
-      '/package.json',
-      codeFile(
-        JSON.stringify(parsedPackageJson, null, 2),
-        null,
-        0,
-        RevisionsState.CodeAheadButPleaseTellVSCodeAboutIt,
-      ),
-    )
-    notifyResolveRequirement(
-      dispatch,
-      'packageJsonEntries',
-      RequirementResolutionResult.Fixed,
-      'Fixed utopia entry in package.json',
-    )
-    return result
-  } else {
+  let projectContents = parsedProjectContents
+  // iterate over all checks, updating the project contents as we go
+  for (const [name, check] of Object.entries(checks)) {
+    const checkName = name as ProjectRequirement
+    notifyCheckingRequirement(dispatch, checkName, check.getStartText())
+    const checkResult = check.check(projectContents)
     notifyResolveRequirement(
       dispatch,
-      'packageJsonEntries',
-      RequirementResolutionResult.Found,
-      'Valid package.json found',
+      checkName,
+      checkResult.resolution,
+      checkResult.resultText,
+      checkResult.resultValue,
     )
+    projectContents = checkResult.newProjectContents ?? projectContents
   }
-
   return projectContents
 }
 
-function checkProjectLanguage(
-  dispatch: EditorDispatch,
+export function getPackageJson(
   projectContents: ProjectContentTreeRoot,
-): void {
-  notifyCheckingRequirement(dispatch, 'language', 'Checking project language')
-  let jsCount = 0
-  let tsCount = 0
-  applyToAllUIJSFiles(projectContents, (filename, uiJSFile) => {
-    if ((filename.endsWith('.ts') || filename.endsWith('.tsx')) && !filename.endsWith('.d.ts')) {
-      tsCount++
-    } else if (filename.endsWith('.js') || filename.endsWith('.jsx')) {
-      jsCount++
-    }
-    return uiJSFile
-  })
-  if (tsCount > 0) {
-    notifyResolveRequirement(
-      dispatch,
-      'language',
-      RequirementResolutionResult.Critical,
-      'There are Typescript files in the project',
-      'typescript',
-    )
-  } else if (jsCount == 0) {
-    // in case it's a .coffee project, python, etc
-    notifyResolveRequirement(
-      dispatch,
-      'language',
-      RequirementResolutionResult.Critical,
-      'No JS/JSX files found',
-      'javascript',
-    )
-  } else {
-    notifyResolveRequirement(
-      dispatch,
-      'language',
-      RequirementResolutionResult.Found,
-      'Project uses JS/JSX',
-      'javascript',
-    )
-  }
+): { utopia?: Record<string, string>; dependencies?: Record<string, string> } | null {
+  return getJsonFile<{ utopia?: Record<string, string>; dependencies?: Record<string, string> }>(
+    projectContents,
+    '/package.json',
+  )
 }
 
-function checkReactVersion(
-  dispatch: EditorDispatch,
+export function getPackageLockJson(
   projectContents: ProjectContentTreeRoot,
-): void {
-  notifyCheckingRequirement(dispatch, 'reactVersion', 'Checking React version')
-  const parsedPackageJson = getPackageJson(projectContents)
-  if (
-    parsedPackageJson == null ||
-    parsedPackageJson.dependencies == null ||
-    parsedPackageJson.dependencies.react == null
-  ) {
-    return notifyResolveRequirement(
-      dispatch,
-      'reactVersion',
-      RequirementResolutionResult.Critical,
-      'React is not in dependencies',
-    )
-  }
-  const reactVersion = parsedPackageJson.dependencies.react
-  // TODO: check react version
-  return notifyResolveRequirement(
-    dispatch,
-    'reactVersion',
-    RequirementResolutionResult.Found,
-    'React version is ok',
-    reactVersion,
+): { dependencies?: Record<string, string> } | null {
+  return getJsonFile<{ dependencies?: Record<string, string> }>(
+    projectContents,
+    '/package-lock.json',
   )
 }
+
+function getJsonFile<T>(projectContents: ProjectContentTreeRoot, fileName: string): T | null {
+  const file = getProjectFileByFilePath(projectContents, fileName)
+  if (file != null && isTextFile(file)) {
+    return JSON.parse(file.fileContents.code) as T
+  }
+  return null
+}
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-language.ts b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-language.ts
new file mode 100644
index 000000000000..6367869a2434
--- /dev/null
+++ b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-language.ts
@@ -0,0 +1,44 @@
+import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
+import {
+  RequirementResolutionResult,
+  type RequirementCheck,
+  type RequirementCheckResult,
+} from '../utopia-requirements-types'
+import { applyToAllUIJSFiles } from '../../../../model/project-file-utils'
+
+export default class CheckProjectLanguage implements RequirementCheck {
+  getStartText(): string {
+    return 'Checking project language'
+  }
+  check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
+    let jsCount = 0
+    let tsCount = 0
+    applyToAllUIJSFiles(projectContents, (filename, uiJSFile) => {
+      if ((filename.endsWith('.ts') || filename.endsWith('.tsx')) && !filename.endsWith('.d.ts')) {
+        tsCount++
+      } else if (filename.endsWith('.js') || filename.endsWith('.jsx')) {
+        jsCount++
+      }
+      return uiJSFile
+    })
+    if (tsCount > 0) {
+      return {
+        resolution: RequirementResolutionResult.Critical,
+        resultText: 'There are Typescript files in the project',
+        resultValue: 'typescript',
+      }
+    } else if (jsCount == 0) {
+      // in case it's a .coffee project, python, etc
+      return {
+        resolution: RequirementResolutionResult.Critical,
+        resultText: 'No JS/JSX files found',
+      }
+    } else {
+      return {
+        resolution: RequirementResolutionResult.Found,
+        resultText: 'Project uses JS/JSX',
+        resultValue: 'javascript',
+      }
+    }
+  }
+}
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-package-json.ts b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-package-json.ts
new file mode 100644
index 000000000000..7b2233c8e96e
--- /dev/null
+++ b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-package-json.ts
@@ -0,0 +1,47 @@
+import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
+import { RevisionsState } from 'utopia-shared/src/types'
+import { getPackageJson } from '../check-utopia-requirements'
+import type { RequirementCheck, RequirementCheckResult } from '../utopia-requirements-types'
+import { RequirementResolutionResult } from '../utopia-requirements-types'
+import { addFileToProjectContents } from '../../../../../components/assets'
+import { codeFile } from '../../../../../core/shared/project-file-types'
+
+export default class PackageJsonCheckAndFix implements RequirementCheck {
+  getStartText(): string {
+    return 'Checking package.json'
+  }
+  check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
+    const parsedPackageJson = getPackageJson(projectContents)
+    if (parsedPackageJson == null) {
+      return {
+        resolution: RequirementResolutionResult.Critical,
+        resultText: 'The file package.json was not found',
+      }
+    }
+    if (parsedPackageJson.utopia == null) {
+      parsedPackageJson.utopia = {
+        'main-ui': 'utopia/storyboard.js',
+      }
+      const result = addFileToProjectContents(
+        projectContents,
+        '/package.json',
+        codeFile(
+          JSON.stringify(parsedPackageJson, null, 2),
+          null,
+          0,
+          RevisionsState.CodeAheadButPleaseTellVSCodeAboutIt,
+        ),
+      )
+      return {
+        resolution: RequirementResolutionResult.Fixed,
+        resultText: 'Added utopia entry to package.json',
+        newProjectContents: result,
+      }
+    } else {
+      return {
+        resolution: RequirementResolutionResult.Found,
+        resultText: 'Valid package.json found',
+      }
+    }
+  }
+}
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-react.ts b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-react.ts
new file mode 100644
index 000000000000..5502a2e9eaf6
--- /dev/null
+++ b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-react.ts
@@ -0,0 +1,40 @@
+import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
+import {
+  RequirementResolutionResult,
+  type RequirementCheck,
+  type RequirementCheckResult,
+} from '../utopia-requirements-types'
+import { getPackageJson, getPackageLockJson } from '../check-utopia-requirements'
+import Semver from 'semver'
+
+const SUPPORTED_REACT_VERSION_RANGE = '16.8.0 - 18.x'
+
+export default class CheckReactRequirement implements RequirementCheck {
+  getStartText(): string {
+    return 'Checking React version'
+  }
+  check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
+    const parsedPackageLockJson = getPackageLockJson(projectContents)
+    // check package-lock.json first
+    let reactVersion = parsedPackageLockJson?.dependencies?.react
+    if (reactVersion == null) {
+      const parsedPackageJson = getPackageJson(projectContents)
+      // then check package.json
+      reactVersion = parsedPackageJson?.dependencies?.react
+    }
+    if (reactVersion == null) {
+      return {
+        resolution: RequirementResolutionResult.Critical,
+        resultText: 'React is not in dependencies',
+      }
+    }
+    const isMatching = Semver.intersects(reactVersion, SUPPORTED_REACT_VERSION_RANGE)
+    return {
+      resolution: isMatching
+        ? RequirementResolutionResult.Found
+        : RequirementResolutionResult.Critical,
+      resultText: isMatching ? 'React version is ok' : 'React version is not in supported range',
+      resultValue: reactVersion,
+    }
+  }
+}
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-storyboard.ts b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-storyboard.ts
new file mode 100644
index 000000000000..808c9dae39e1
--- /dev/null
+++ b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-storyboard.ts
@@ -0,0 +1,154 @@
+import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
+import type { RequirementCheckResult } from '../utopia-requirements-types'
+import { RequirementResolutionResult } from '../utopia-requirements-types'
+import type { RequirementCheck } from '../utopia-requirements-types'
+import { defaultEither } from '../../../../../core/shared/either'
+import { StoryboardFilePath } from '../../../../../components/editor/store/editor-state'
+import { getPackageJsonFromProjectContents } from '../../../../../components/editor/store/editor-state'
+import {
+  addFileToProjectContents,
+  getProjectFileByFilePath,
+} from '../../../../../components/assets'
+import { codeFile } from '../../../../../core/shared/project-file-types'
+import { addStoryboardFileToProject } from '../../../../../core/model/storyboard-utils'
+
+export default class CheckStoryboard implements RequirementCheck {
+  getStartText(): string {
+    return 'Checking for storyboard.js'
+  }
+  check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
+    return createStoryboardFileIfNecessaryInner(projectContents)
+  }
+}
+
+export function createStoryboardFileIfNecessary(
+  projectContents: ProjectContentTreeRoot,
+): ProjectContentTreeRoot {
+  const result = createStoryboardFileIfNecessaryInner(projectContents)
+  return result.newProjectContents ?? projectContents
+}
+
+function createStoryboardFileIfNecessaryInner(
+  projectContents: ProjectContentTreeRoot,
+): RequirementCheckResult {
+  const storyboardFile = getProjectFileByFilePath(projectContents, StoryboardFilePath)
+  if (storyboardFile != null) {
+    return {
+      resolution: RequirementResolutionResult.Found,
+      resultText: 'Storyboard.js found',
+    }
+  }
+
+  const result =
+    createStoryboardFileIfRemixProject(projectContents) ??
+    createStoryboardFileIfMainComponentPresent(projectContents) ??
+    createStoryboardFileWithPlaceholderContents(projectContents)
+
+  if (result == projectContents) {
+    return {
+      resolution: RequirementResolutionResult.Partial,
+      resultText: 'Storyboard.js skipped',
+    }
+  } else {
+    return {
+      resolution: RequirementResolutionResult.Fixed,
+      resultText: 'Storyboard.js created',
+      newProjectContents: result,
+    }
+  }
+}
+
+function createStoryboardFileIfRemixProject(
+  projectContents: ProjectContentTreeRoot,
+): ProjectContentTreeRoot | null {
+  const packageJsonContents = defaultEither(
+    null,
+    getPackageJsonFromProjectContents(projectContents),
+  )
+  if (packageJsonContents == null) {
+    return null
+  }
+  const remixNotIncluded = packageJsonContents['dependencies']?.['@remix-run/react'] == null
+  if (remixNotIncluded) {
+    return null
+  }
+
+  const updatedProjectContents = addFileToProjectContents(
+    projectContents,
+    StoryboardFilePath,
+    codeFile(DefaultStoryboardWithRemix, null, 1),
+  )
+  return updatedProjectContents
+}
+
+function createStoryboardFileIfMainComponentPresent(
+  projectContents: ProjectContentTreeRoot,
+): ProjectContentTreeRoot | null {
+  return addStoryboardFileToProject(projectContents)
+}
+
+function createStoryboardFileWithPlaceholderContents(
+  projectContents: ProjectContentTreeRoot,
+): ProjectContentTreeRoot {
+  const updatedProjectContents = addFileToProjectContents(
+    projectContents,
+    StoryboardFilePath,
+    codeFile(DefaultStoryboardContents, null, 1),
+  )
+  return updatedProjectContents
+}
+
+const DefaultStoryboardWithRemix = `import * as React from 'react'
+import { Storyboard, RemixScene } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard>
+    <RemixScene
+      style={{
+        position: 'absolute',
+        width: 644,
+        height: 750,
+        left: 200,
+        top: 30,
+        overflow: 'hidden',
+      }}
+      data-label='Mood Board'
+    />
+  </Storyboard>
+)
+`
+
+const DefaultStoryboardContents = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard>
+    <Scene
+      style={{
+        width: 603,
+        height: 794,
+        position: 'absolute',
+        left: 212,
+        top: 128,
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '253px 101px',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <span
+        style={{
+          wordBreak: 'break-word',
+          fontSize: '25px',
+          width: 257,
+          height: 130,
+        }}
+      >
+        Open the insert menu or press the + button in the
+        toolbar to insert components
+      </span>
+    </Scene>
+  </Storyboard>
+  )
+`
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirements.spec.ts b/editor/src/core/shared/import/proejct-health-check/requirements/requirements.spec.ts
new file mode 100644
index 000000000000..311769ad7cd0
--- /dev/null
+++ b/editor/src/core/shared/import/proejct-health-check/requirements/requirements.spec.ts
@@ -0,0 +1,191 @@
+import { simpleDefaultProject } from '../../../../../sample-projects/sample-project-utils'
+import { RequirementResolutionResult } from '../utopia-requirements-types'
+import CheckProjectLanguage from './requirement-language'
+import CheckPackageJson from './requirement-package-json'
+import CheckReactVersion from './requirement-react'
+import { codeFile, textFile, textFileContents } from '../../../../../core/shared/project-file-types'
+import { RevisionsState } from '../../../../../core/shared/project-file-types'
+import { unparsed } from '../../../../../core/shared/project-file-types'
+import { contentsToTree } from '../../../../../components/assets'
+import { DefaultPackageJson } from '../../../../../components/editor/store/editor-state'
+import { getPackageJson } from '../check-utopia-requirements'
+import CheckStoryboard from './requirement-storyboard'
+
+describe('requirements checks', () => {
+  describe('project language', () => {
+    it('should return success for a project with only js files', () => {
+      const check = new CheckProjectLanguage()
+      const project = simpleDefaultProject()
+      const projectContents = project.projectContents
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Found)
+    })
+
+    it('should return failure for a project with ts files', () => {
+      const check = new CheckProjectLanguage()
+      const project = simpleDefaultProject({
+        additionalFiles: {
+          '/src/app.ts': codeFile(``, null),
+        },
+      })
+      const projectContents = project.projectContents
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Critical)
+    })
+    it('should not fail for a project with .d.ts files', () => {
+      const check = new CheckProjectLanguage()
+      const project = simpleDefaultProject({
+        additionalFiles: {
+          '/src/app.d.ts': codeFile(``, null),
+        },
+      })
+      const projectContents = project.projectContents
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Found)
+    })
+    it('should fail for a project with no js files', () => {
+      const check = new CheckProjectLanguage()
+      const projectContents = contentsToTree({
+        '/src/app.python': codeFile(``, null),
+      })
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Critical)
+    })
+  })
+
+  describe('package json', () => {
+    it('should return success for a project with a package.json and a utopia entry', () => {
+      const check = new CheckPackageJson()
+      const project = simpleDefaultProject()
+      const projectContents = project.projectContents
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Found)
+    })
+    it('should return failure for a project without a package.json', () => {
+      const check = new CheckPackageJson()
+      const project = simpleDefaultProject()
+      const projectContents = project.projectContents
+      delete projectContents['package.json']
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Critical)
+    })
+
+    it('should add a utopia entry if there is no utopia entry', () => {
+      const { utopia, ...packageJson } = DefaultPackageJson
+      const check = new CheckPackageJson()
+      const project = simpleDefaultProject({
+        additionalFiles: {
+          '/package.json': textFile(
+            textFileContents(
+              JSON.stringify(packageJson, null, 2),
+              unparsed,
+              RevisionsState.CodeAhead,
+            ),
+            null,
+            null,
+            0,
+          ),
+        },
+      })
+      const projectContents = project.projectContents
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Fixed)
+      expect(result.newProjectContents).not.toBeNull()
+      const newPackageJson = getPackageJson(result.newProjectContents!)
+      expect(newPackageJson).not.toBeNull()
+      expect(newPackageJson!.utopia?.['main-ui']).not.toBeUndefined()
+    })
+  })
+
+  describe('react version', () => {
+    it('should return success for a project with a react version 16.8 - 18.x', () => {
+      const check = new CheckReactVersion()
+      const project = simpleDefaultProject()
+      const projectContents = project.projectContents
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Found)
+    })
+    it('should return failure for a project with a react version less than 16.8', () => {
+      const check = new CheckReactVersion()
+      const project = simpleDefaultProject({
+        additionalFiles: {
+          '/package.json': textFile(
+            textFileContents(
+              JSON.stringify(
+                {
+                  ...DefaultPackageJson,
+                  dependencies: {
+                    ...DefaultPackageJson.dependencies,
+                    react: '16.7.0',
+                  },
+                },
+                null,
+                2,
+              ),
+              unparsed,
+              RevisionsState.CodeAhead,
+            ),
+            null,
+            null,
+            0,
+          ),
+        },
+      })
+      const projectContents = project.projectContents
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Critical)
+    })
+    it('should return a failure for react version 19', () => {
+      const check = new CheckReactVersion()
+      const project = simpleDefaultProject({
+        additionalFiles: {
+          '/package.json': textFile(
+            textFileContents(
+              JSON.stringify(
+                {
+                  ...DefaultPackageJson,
+                  dependencies: {
+                    ...DefaultPackageJson.dependencies,
+                    react: '19.0.0',
+                  },
+                },
+                null,
+                2,
+              ),
+              unparsed,
+              RevisionsState.CodeAhead,
+            ),
+            null,
+            null,
+            0,
+          ),
+        },
+      })
+      const projectContents = project.projectContents
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Critical)
+    })
+  })
+
+  describe('storyboard', () => {
+    it('should return success for a project with a storyboard', () => {
+      const check = new CheckStoryboard()
+      const project = simpleDefaultProject()
+      const projectContents = project.projectContents
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Found)
+    })
+    it('should create a storyboard if there is no storyboard', () => {
+      const check = new CheckStoryboard()
+      const project = simpleDefaultProject({
+        storyboardFile: null,
+      })
+      const projectContents = project.projectContents
+      delete projectContents['utopia/storyboard.js']
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Fixed)
+      expect(result.newProjectContents).not.toBeNull()
+      expect(result.newProjectContents!['utopia/storyboard.js']).not.toBeNull()
+    })
+  })
+})
diff --git a/editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts b/editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts
index 6af5548346f4..c58632a999ef 100644
--- a/editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts
+++ b/editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts
@@ -1,3 +1,5 @@
+import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
+
 export const RequirementResolutionResult = {
   Found: 'found',
   Fixed: 'fixed',
@@ -74,3 +76,15 @@ export function newProjectRequirements(
     reactVersion,
   }
 }
+
+export interface RequirementCheckResult {
+  resolution: RequirementResolutionResult
+  resultText: string
+  resultValue?: string
+  newProjectContents?: ProjectContentTreeRoot | null
+}
+
+export interface RequirementCheck {
+  check: (projectContents: ProjectContentTreeRoot) => RequirementCheckResult
+  getStartText: () => string
+}
diff --git a/editor/src/sample-projects/sample-project-utils.ts b/editor/src/sample-projects/sample-project-utils.ts
index ae8cc933e299..8b45b8350e37 100644
--- a/editor/src/sample-projects/sample-project-utils.ts
+++ b/editor/src/sample-projects/sample-project-utils.ts
@@ -45,7 +45,7 @@ export function simpleDefaultProject({
   storyboardFile = getDefaultUIJsFile(),
   additionalFiles = {},
 }: {
-  storyboardFile?: TextFile
+  storyboardFile?: TextFile | null
   additionalFiles?: { [path: string]: TextFile }
 } = {}): PersistentModel {
   const projectContents: ProjectContents = {
@@ -61,12 +61,12 @@ export function simpleDefaultProject({
     ),
     '/src': directory(),
     '/src/app.js': appJSFile(),
-    [StoryboardFilePath]: storyboardFile,
     '/assets': directory(),
     '/public': directory(),
     '/src/index.js': getSamplePreviewFile(),
     '/public/index.html': getSamplePreviewHTMLFile(),
     ...additionalFiles,
+    ...(storyboardFile == null ? {} : { [StoryboardFilePath]: storyboardFile }),
   }
 
   let persistentModel = persistentModelForProjectContents(contentsToTree(projectContents))

From e2ab2cac1478bc8922407f8abbfa8eb985a0fe8d Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 30 Oct 2024 12:40:23 +0100
Subject: [PATCH 187/272] Fix grid element resize in grid components (#6597)

**Problem:**
Fix grid-element-resize strategy in grid components.

**Fix:**
Similarly to https://github.com/concrete-utopia/utopia/pull/6589 , use
the specialSizeMeasurements of the grid item to get the grid properties
(and not the parent element)

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 ...-resize-element-strategy.spec.browser2.tsx | 349 ++++++++++++++++++
 .../grid-resize-element-strategy.ts           |  22 +-
 2 files changed, 360 insertions(+), 11 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 94ec2157177d..7b37b16fa49b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -125,6 +125,50 @@ describe('grid resize element strategy', () => {
         gridRowStart: '2',
       })
     })
+
+    it('can enlarge element in grid component', async () => {
+      const editor = await renderTestEditorWithCode(
+        ProjectCodeGridComponent,
+        'await-first-dom-report',
+      )
+
+      await runCellResizeTest(
+        editor,
+        'column-end',
+        gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 10),
+      )
+
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+        editor.renderedDOM.getByTestId('grid-child').style
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '11',
+        gridColumnStart: '7',
+        gridRowStart: '2',
+        gridRowEnd: 'auto',
+      })
+    })
+
+    it('can shrink element in grid component', async () => {
+      const editor = await renderTestEditorWithCode(
+        ProjectCodeGridComponent,
+        'await-first-dom-report',
+      )
+
+      await runCellResizeTest(
+        editor,
+        'column-end',
+        gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 8),
+      )
+
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+        editor.renderedDOM.getByTestId('grid-child').style
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '9',
+        gridColumnStart: '7',
+        gridRowEnd: 'auto',
+        gridRowStart: '2',
+      })
+    })
   })
 
   describe('column-start', () => {
@@ -165,6 +209,50 @@ describe('grid resize element strategy', () => {
         gridRowStart: '2',
       })
     })
+
+    it('can enlarge element in grid component', async () => {
+      const editor = await renderTestEditorWithCode(
+        ProjectCodeGridComponent,
+        'await-first-dom-report',
+      )
+
+      await runCellResizeTest(
+        editor,
+        'column-start',
+        gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 6),
+      )
+
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+        editor.renderedDOM.getByTestId('grid-child').style
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '10',
+        gridColumnStart: '6',
+        gridRowEnd: 'auto',
+        gridRowStart: '2',
+      })
+    })
+
+    it('can shrink element in grid component', async () => {
+      const editor = await renderTestEditorWithCode(
+        ProjectCodeGridComponent,
+        'await-first-dom-report',
+      )
+
+      await runCellResizeTest(
+        editor,
+        'column-start',
+        gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 8),
+      )
+
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+        editor.renderedDOM.getByTestId('grid-child').style
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '10',
+        gridColumnStart: '8',
+        gridRowEnd: 'auto',
+        gridRowStart: '2',
+      })
+    })
   })
 
   describe('row-end', () => {
@@ -203,6 +291,45 @@ describe('grid resize element strategy', () => {
         })
       }
     })
+
+    it('can resize element in grid component', async () => {
+      const editor = await renderTestEditorWithCode(
+        ProjectCodeGridComponent,
+        'await-first-dom-report',
+      )
+
+      await runCellResizeTest(
+        editor,
+        'row-end',
+        gridCellTargetId(EP.fromString('sb/scene/grid'), 3, 6),
+      )
+      {
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('grid-child').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: '10',
+          gridColumnStart: '7',
+          gridRowEnd: '4',
+          gridRowStart: '2',
+        })
+      }
+
+      await runCellResizeTest(
+        editor,
+        'row-end',
+        gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 8),
+      )
+      {
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('grid-child').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: '10',
+          gridColumnStart: '7',
+          gridRowEnd: 'auto',
+          gridRowStart: '2',
+        })
+      }
+    })
   })
 
   describe('row-start', () => {
@@ -243,6 +370,47 @@ describe('grid resize element strategy', () => {
         })
       }
     })
+
+    it('can resize element in grid component', async () => {
+      const editor = await renderTestEditorWithCode(
+        ProjectCodeGridComponent,
+        'await-first-dom-report',
+      )
+
+      await runCellResizeTest(
+        editor,
+        'row-start',
+        gridCellTargetId(EP.fromString('sb/scene/grid'), 1, 6),
+      )
+
+      {
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('grid-child').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: '10',
+          gridColumnStart: '7',
+          gridRowEnd: '3',
+          gridRowStart: '1',
+        })
+      }
+
+      {
+        await runCellResizeTest(
+          editor,
+          'row-start',
+          gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 8),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('grid-child').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: '10',
+          gridColumnStart: '7',
+          gridRowEnd: 'auto',
+          gridRowStart: '2',
+        })
+      }
+    })
   })
 
   it('can resize element with mouse move outside of grid cells', async () => {
@@ -286,6 +454,50 @@ describe('grid resize element strategy', () => {
     }
   })
 
+  it('can resize element with mouse move outside of grid cells in grid component', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeGridComponent,
+      'await-first-dom-report',
+    )
+    await runCellResizeTest(
+      editor,
+      'column-end',
+      gridCellTargetId(EP.fromString('sb/scene/grid'), 1, 8),
+    )
+
+    {
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+        editor.renderedDOM.getByTestId('grid-child').style
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '9',
+        gridColumnStart: '7',
+        gridRowEnd: 'auto',
+        gridRowStart: '2',
+      })
+    }
+
+    {
+      // moving a 2 cell wide element in the middle, over the gap between 2 cells
+      await runCellResizeTestWithDragVector(
+        editor,
+        'row-start',
+        localPoint({
+          x: 0,
+          y: -50,
+        }),
+      )
+
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+        editor.renderedDOM.getByTestId('grid-child').style
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '9',
+        gridColumnStart: '7',
+        gridRowEnd: '3',
+        gridRowStart: '1',
+      })
+    }
+  })
+
   it('removes the grid-area prop on resize', async () => {
     const editor = await renderTestEditorWithCode(ProjectCodeWithGridArea, 'await-first-dom-report')
 
@@ -434,6 +646,29 @@ export var storyboard = (
       gridRowEnd: 'auto',
     })
   })
+
+  it('also works for stretching cells in grid component', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeGridComponent,
+      'await-first-dom-report',
+    )
+
+    await runCellResizeTest(
+      editor,
+      'column-end',
+      gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 10),
+      EP.fromString('sb/scene/grid/eee'),
+    )
+
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+      editor.renderedDOM.getByTestId('grid-child-stretch').style
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '11',
+      gridColumnStart: '4',
+      gridRowStart: '4',
+      gridRowEnd: 'auto',
+    })
+  })
 })
 
 const ProjectCode = `import * as React from 'react'
@@ -536,6 +771,120 @@ export var storyboard = (
 )
 `
 
+const ProjectCodeGridComponent = `import * as React from 'react'
+import { Scene, Storyboard, Placeholder } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 847,
+        height: 895,
+        position: 'absolute',
+        left: 46,
+        top: 131,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <Grid
+        style={{
+          height: 482,
+          width: 786,
+          position: 'absolute',
+          left: 31,
+          top: 0,
+        }}
+        data-uid='grid'
+      >
+        <div
+          style={{
+            minHeight: 0,
+            backgroundColor: '#f3785f',
+            gridColumnEnd: 5,
+            gridColumnStart: 1,
+            gridRowEnd: 3,
+            gridRowStart: 1,
+          }}
+          data-uid='aaa'
+        />
+        <Placeholder
+          style={{
+            minHeight: 0,
+            backgroundColor: '#23565b',
+            gridColumnStart: 11,
+            gridColumnEnd: 13,
+            gridRowStart: 1,
+            gridRowEnd: 2,
+          }}
+          data-uid='bbb'
+        />
+        <Placeholder
+          style={{
+            minHeight: 0,
+            gridColumnEnd: 5,
+            gridRowEnd: 4,
+            gridColumnStart: 1,
+            gridRowStart: 3,
+            backgroundColor: '#0074ff',
+            width: 25,
+            height: 30,
+          }}
+          data-uid='grid-child-not-filling'
+          data-testid='grid-child-not-filling'
+        />
+        <div
+          style={{
+            minHeight: 0,
+            gridColumnEnd: 10,
+            gridRowEnd: 3,
+            gridColumnStart: 7,
+            gridRowStart: 2,
+            backgroundColor: '#db48f6',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='ddd'
+          data-testid='grid-child'
+        />
+        <div
+          style={{
+            backgroundColor: '#9f0',
+            alignSelf: 'stretch',
+            justifySelf: 'stretch',
+            gridColumn: 4,
+            gridRow: 4,
+          }}
+          data-uid='eee'
+          data-testid='grid-child-stretch'
+        />
+      </Grid>
+    </Scene>
+  </Storyboard>
+)
+
+export function Grid(props) {
+  return (
+    <div
+      {...props}
+      style={{
+        ...props.style,
+        display: 'grid',
+        gridTemplateRows: '75px 75px 75px 75px',
+        gridTemplateColumns:
+          '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
+        gridGap: 16,
+      }}
+      data-uid='f84914f31dbc6c5d9b44c11ae54139ef'
+    >
+      {props.children}
+    </div>
+  )
+}
+`
+
 const ProjectCodeWithGridArea = `import * as React from 'react'
 import { Scene, Storyboard, Placeholder } from 'utopia-api'
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index f8b520bfe55f..d315bbadc7d6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -33,6 +33,13 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    selectedElement,
+  )
+  if (selectedElementMetadata == null) {
+    return null
+  }
   const isElementInsideGrid = MetadataUtils.isGridCell(
     canvasState.startingMetadata,
     selectedElement,
@@ -83,16 +90,8 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
-      const container = MetadataUtils.findElementByElementPath(
-        canvasState.startingMetadata,
-        EP.parentPath(selectedElement),
-      )
-
-      if (container == null) {
-        return emptyStrategyApplicationResult
-      }
-
-      const allCellBounds = container.specialSizeMeasurements.gridCellGlobalFrames
+      const allCellBounds =
+        selectedElementMetadata.specialSizeMeasurements.parentGridCellGlobalFrames
 
       if (allCellBounds == null) {
         return emptyStrategyApplicationResult
@@ -112,7 +111,8 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
-      const gridTemplate = container.specialSizeMeasurements.containerGridProperties
+      const gridTemplate =
+        selectedElementMetadata.specialSizeMeasurements.parentContainerGridProperties
 
       return strategyApplicationResult(
         setGridPropsCommands(selectedElement, gridTemplate, gridProps),

From 6ea288280ff0340fd93a01f521fc6476330712be Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 30 Oct 2024 15:29:34 +0100
Subject: [PATCH 188/272] Remove grid element placement props (#6601)

**Problem:**

There should be a cross button to the side of the Grid Placement
inspector subsection to clear those props when set.

**Fix:**

Add that button, shown unless all values are defaults.

![Kapture 2024-10-30 at 15 13
27](https://github.com/user-attachments/assets/0402ce1d-dc34-4cb0-9e7b-561d3fc18539)


Fixes #6600
---
 .../rearrange-grid-swap-strategy.ts           |  2 +-
 .../grid-cell-subsection.tsx                  | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
index 00429caaba56..ffaebb2d3f6b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
@@ -126,7 +126,7 @@ export const rearrangeGridSwapStrategy: CanvasStrategyFactory = (
   }
 }
 
-const GridPositioningProps: Array<keyof React.CSSProperties> = [
+export const GridPositioningProps: Array<keyof React.CSSProperties> = [
   'gridColumn',
   'gridRow',
   'gridColumnStart',
diff --git a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
index 6cfcc258cb5e..3f206d40aab6 100644
--- a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
+++ b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
@@ -38,6 +38,9 @@ import {
   isEmptyInputValue,
 } from '../../../common/css-utils'
 import { UIGridRow } from '../../../widgets/ui-grid-row'
+import { deleteProperties } from '../../../../canvas/commands/delete-properties-command'
+import { GridPositioningProps } from '../../../../canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy'
+import { styleP } from '../../../inspector-common'
 
 type CellAdjustMode = 'dimensions' | 'boundaries'
 
@@ -100,6 +103,18 @@ export const GridPlacementSubsection = React.memo(() => {
     dispatch([applyCommandsAction(commands)])
   }, [dispatch, cell, gridTemplate])
 
+  const removePlacementProps = React.useCallback(() => {
+    if (cell == null) {
+      return
+    }
+
+    dispatch([
+      applyCommandsAction([
+        deleteProperties('always', cell.elementPath, GridPositioningProps.map(styleP)),
+      ]),
+    ])
+  }, [dispatch, cell])
+
   if (cell == null || gridTemplate == null) {
     return null
   }
@@ -122,6 +137,12 @@ export const GridPlacementSubsection = React.memo(() => {
             <Icons.SmallPlus />
           </SquareButton>,
         )}
+        {unless(
+          isAllDefaults,
+          <SquareButton highlight onClick={removePlacementProps}>
+            <Icons.SmallCross />
+          </SquareButton>,
+        )}
       </InspectorSubsectionHeader>
       {unless(
         isAllDefaults,

From 8ff284f7070577b45c7b5b8585e7ab4bcafbd4c7 Mon Sep 17 00:00:00 2001
From: McKayla Lankau <lankaukk@yahoo.com>
Date: Wed, 30 Oct 2024 14:30:51 -0400
Subject: [PATCH 189/272] new colors of icons for the loading dialog (#6605)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="507" alt="Screenshot 2024-10-30 at 2 12 39 PM"
src="https://github.com/user-attachments/assets/f2459364-fd36-47fc-862e-48a022dc6ca0">
---
 .../warningtriangle-lightorange-16x16@2x.png      | Bin 0 -> 927 bytes
 .../warningtriangle-orange-16x16@2x.png           | Bin 0 -> 953 bytes
 .../light/semantic/checkmark-green-16x16@2x.png   | Bin 0 -> 644 bytes
 .../semantic/checkmark-lightgreen-16x16@2x.png    | Bin 0 -> 636 bytes
 .../light/semantic/cross-lightred-12x12@2x.png    | Bin 0 -> 646 bytes
 .../icons/light/semantic/cross-red-16x16@2x.png   | Bin 0 -> 687 bytes
 6 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 editor/resources/editor/icons/light/navigator-element/warningtriangle-lightorange-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/navigator-element/warningtriangle-orange-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/semantic/checkmark-green-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/semantic/checkmark-lightgreen-16x16@2x.png
 create mode 100644 editor/resources/editor/icons/light/semantic/cross-lightred-12x12@2x.png
 create mode 100644 editor/resources/editor/icons/light/semantic/cross-red-16x16@2x.png

diff --git a/editor/resources/editor/icons/light/navigator-element/warningtriangle-lightorange-16x16@2x.png b/editor/resources/editor/icons/light/navigator-element/warningtriangle-lightorange-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e1d7841b9470ee24cfb4e002871926c817ec6ca
GIT binary patch
literal 927
zcmV;Q17Q4#P)<h;3K|Lk000e1NJLTq001BW001Ef1^@s6xF)Gl00009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0o+MMK~#7F?Ul<>0znXl|3(iU31P_qGgvQ{ctWbI
z@~9E05vUQU5r7G}b5SfVVgwSxhQJLDvTaY#fCU1(gI4Kbzp8!Aqo;ei|JemfN=i!p
z7{Uf{w;73PTV7+oOb5trs9{nBvW<<PSGh%BZ9bJg+ulPU6$B!?KlRR2Y1Q0i-x2e3
z>jHrUmB6Ro@1D-6@!0YGvGx;&7;%k`%&_R1VHu#xm3Q8mI@j)o>C2-JMio1iTLe%z
z0PY>v!M4_x>_+=uS_yYsZ9n5oGa!0!8TsV^F!@NlBUL*m&8h^{bOO{Yq+q&tbEsW(
z*+K!xE`92eilb|F;p&{aU3<pa9h@K|vAHg?c5VPFJYuJA=F7Q3qJh+XFl%a1QVMPG
zxfAUV15n{vaarLV8nZC^CjAd{)2$$hjJL@x#o7S$%v<4Unw{|G7-bzvyZLUIUHa0*
zd4kNz0A1-L<K>^(9eUSm(aO#h8{cYg6aYUp>zE4f(A*&qwQ*SxL7qei4M0Ymx(QW1
za?6}Fk{ZUmyKHPufLr6G_HOw#aQDc5c4N4sl_CT}U4=*(&_S}hYFf_U&>pGTpD#iP
ztatf5`(ue!aTZytCwiEmiV(Iiq<u3$NlD3n=MxO7wNFbX1`7ZH002ovPDHLkV1oKE
Bq|X2V

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/navigator-element/warningtriangle-orange-16x16@2x.png b/editor/resources/editor/icons/light/navigator-element/warningtriangle-orange-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..48809192df54af4279c70aa2dd25413f7308ec9e
GIT binary patch
literal 953
zcmV;q14jIbP)<h;3K|Lk000e1NJLTq001BW001Ef1^@s6xF)Gl00009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0rp8mK~#7F?UheX+fWe3zrjuyZ5KX*a|5_RDg~)a
zjzCV(dI6{_$g1ieDf9$MPe7KaK_Wc?If9Si4c%a8Iy27(0wM7OBv|+-+47tB@AJ&(
zXP}{>q2YxgJOUnkjFIO<Fgh04pb>(gPswQtPeMF~tKwYl@pXI7yWm{gAK=LbJmK%#
zyK;{uc`1spZI?bvHuzijGd%Gsfu-Kw-URe$e=@T8k8Vc<XjU?`-nS_kXLZ-~%Ro^a
zmYa{N%@x`^o64(9<uO8WIe-VX1xV^Qt=1+a=(||=gnw=iEtZEp5s~Q_%gA#J5Kf#D
z^y$lK%7acMt({7g#xTb(H-?6F7p)~g-l$4_N(X00wqY{O%zRq+iZ}VOi*YQ5JgT$y
zS^;J}z`2_#xzjt7w9l%Ri6ZW~20oQ@pC-VJ$6_uu-oc;oLLcF;i2A({QbPhdF0#Yw
zDFW=9*BYz2O5-gM<|F)jH@+`AOl*#x4QmX!E(3>lpF88->%D4S;O*tb-Ee70CwPq^
z9~5Ap-Hq{%;fc-BET|#Bc4GJnkd&A1=7<M7(b7%!Cv7Rg*0R0@0|u?7^KA{RK<any
z{&@0f5vTBD)67dWqrJ)2LxWcT4fS*j%Cnzu{r&2q$8#R^Ru8Fx`GGis4@{YqXoiM{
bhS$!29Wu$Ed)67^00000NkvXXu0mjfoVU8G

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/semantic/checkmark-green-16x16@2x.png b/editor/resources/editor/icons/light/semantic/checkmark-green-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2714b4914c0d86aa9eef0ae8b900376d1673745
GIT binary patch
literal 644
zcmV-~0(<?5P)<h;3K|Lk000e1NJLTq001BW001Ef1^@s6xF)Gl00009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0KrK_K~#7F?UKz6f<O>PzrjdMyifuqU?&?BJZmLF
z2bSQ?h>6+(B}fU@frb&hiGPE;T+F=l?!1@D0E(h0iqZqa%tZcfx|F;nIHr*^D6a<x
z08cKnWAW*|2Zyxei*ND<XB&7SUrYXpHZacO2tCL}0shvQ64%qaqq32U0=x=EJ^akf
zNjt(;-XOYx(Z+<;fN};xB1+15pSqBX1KJTFTGbnw+sZoyJVo5GlXnhyjNsH({xiYB
e1W*)3`4?_Tj%JVMg-_G~0000<MNUMnLSTZQOB-PT

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/semantic/checkmark-lightgreen-16x16@2x.png b/editor/resources/editor/icons/light/semantic/checkmark-lightgreen-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..df239c446525efbb079e268fa973937b4fda2ae4
GIT binary patch
literal 636
zcmV-?0)zdDP)<h;3K|Lk000e1NJLTq001BW001Ef1^@s6xF)Gl00009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0J%v-K~#7F?UKC>!Y~j<KWBoBkP$+MEFm!hBfubt
zix52{unApS7=b-N9JW$n@pIwq2HmSH%l3P+4H$-D7)Aj+Q|o!Vk*sydOq7RXk6~B?
zJn0>sKdrA&PQLmkk7T=n7xIH-pXdfW?^+a)ivng$3*dHo_o*~;QNR_5?|1?3ltyUf
z5z!x*GBwp8YC<#hZr$aOiv!XK2e)VNQY#-7kVXtMI{D~;=Lqh!@}HSA)i4ah_!l1X
WR#=vZ`hEET0000<MNUMnLSTX#sS`;6

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/semantic/cross-lightred-12x12@2x.png b/editor/resources/editor/icons/light/semantic/cross-lightred-12x12@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..dacc9d4278b058e1b094c4f7795dce1514d18595
GIT binary patch
literal 646
zcmV;10(t$3P)<h;3K|Lk000e1NJLTq001BW001Ef1^@s6xF)Gl00009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0K-W{K~#7F?Ud0C!ypVqO($WLW~6Mu1|6ZJunL<{
zOe`g-?8<gq<;PD-goMK#IRiit1VL~yNn6;<qmFkTpDd}YO{f|3@SF>mbx|w}H_(%}
zr&khU#5<b2Q>_Y%fw801I1{@#&dnOt?h$nayAV(m&@c{~If+XVeQkg@F>#5z3@|3Z
zD~?!t;N6BWw&9H6lsO!G;;#{W==SP0VY!I1)a~5q(3&vxfPB<we7GmJ+wjK*@Mp>0
g&X@>-AP7{v09AKram!@!(*OVf07*qoM6N<$g4MSi^Z)<=

literal 0
HcmV?d00001

diff --git a/editor/resources/editor/icons/light/semantic/cross-red-16x16@2x.png b/editor/resources/editor/icons/light/semantic/cross-red-16x16@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5cb79e4c30e96c7622ccbd6f220193c6f0b4652
GIT binary patch
literal 687
zcmV;g0#N;lP)<h;3K|Lk000e1NJLTq001BW001Ef1^@s6xF)Gl00009a7bBm000&x
z000&x0ZCFM@Bjb-X=y`4P(*2SaBN|DAW$;^0C=2rkiAR8P!z>at5VQ9hz=bbGKoXf
z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I`
zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df
zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua
zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q
zKaMSOS71;sj{+>pL`e}7vc&Vyp<xm-aR@=`khpW}eh;nt$!%@#6_{;s&M(^9LIXIR
zp_A3y+IR#Q8USwUOf^(T>Y?`La=`luFqi^{?<lij=E5O&dw&e*d*S?J4DcNSc9rw5
zBhKv_g`a^d{RbB*YP>NiPd)$u0PIObK~#7F?UYRl!Y~kp(+I&U)K!jRZy~tpQgGu@
z+z9UKM(8bim8|R)q=m#pQ9_uMNu+c$-=g#<%zK@@31b975X8b1*oBY%u`|X<E<{z{
z&I(%7*9U3FRpahA_e+JT%NZ6cZm&`gL)X_Q35pNgncSMsS`=slh1QjAmx4_E#O*ix
zsJIrWzkk<d3G_QF#62P5gq|!EFI#wv{x$%aa0PP3vkU+xSgyDOA3~os^4%N;!obCX
zIg0@(?Nif%0i6Lz{JZDSbi@v;5OfEoMy+hG%I}03#|B$BH3QMK`zBIOLV_R&;sp~S
Vq7)#<oJIfu002ovPDHLkV1kRRE?)ou

literal 0
HcmV?d00001


From 8f9354e0222025df75e45e17363a0f65c82a67a1 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Thu, 31 Oct 2024 11:35:25 +0100
Subject: [PATCH 190/272] Inserting/reparenting into a grid component (#6602)

**Problem:**
Inserting/reparenting into a grid component doesn't work.

**Root cause:**
The problem is the following:
- We collect the global frames of grid cells using the measurement
helper components (which render an invisible clone of the grid with
placeholders in each cell, so they are measurable html elements)
- getSpecialSizeMeasurements needs to find the appropriate measurement
helper in the dom
- Measurement helpers are identifiable because they have an id which
includes the element path of the grid they refer to. This a path which
is coming from the metadata of the element.
- getSpecialSizeMeasurements uses the element path from the data-path
attribute of the measured grid element to find the measurement helper
- When the grid is a component, the rendered grid layouted div's
data-path contains the element path of the root element of the component
and not the path of the component itself (e.g. foo/bar/grid:root instead
of foo/bar/grid). But the measurement helper's id includes the element
path of the component (e.g. foo/bar/grid). Because of this,
getSpecialMeasurements does not find the measurement helper for this
grid, and it does not store the grid cell global frames in
specialSizeMeasurements

**Fix:**
- Instead of using the data-path of the measured element, use the paths
coming from `getPathsOnDomElement`, which lists all the possible utopia
element paths connected to this rendered html element. Try to find the
measurement helper using these paths (it is enough to use the first one
which is found).
- For the measurement of parentGridCellGlobalFrames, just do the same
thing on the parent element in the dom.
- I renamed `measureGlobalFramesOfGridCellsFromControl` because it
doesn't use the grid control anymore (but the measurement helper).

This change fixes all draw-to-insert/click-to-insert/reparent
functionalities.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 ...grid-reparent-strategies.spec.browser2.tsx | 432 ++++++++++--------
 editor/src/components/canvas/dom-walker.ts    |  49 +-
 2 files changed, 269 insertions(+), 212 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
index 368d72977fb0..313c9b8deee0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
@@ -23,12 +23,18 @@ import {
   renderTestEditorWithCode,
 } from '../../ui-jsx.test-utils'
 
+const testConfigs = [
+  { label: 'element', projectFunction: makeTestProjectCode },
+  { label: 'component', projectFunction: makeTestProjectCodeWithComponent },
+]
+
 describe('grid reparent strategies', () => {
-  describe('reparent into a grid', () => {
-    it('from the storyboard', async () => {
-      const editor = await renderTestEditorWithCode(
-        makeTestProjectCode({
-          extraCode: `
+  testConfigs.forEach((config) => {
+    describe(`reparent into a grid ${config.label}`, () => {
+      it('from the storyboard', async () => {
+        const editor = await renderTestEditorWithCode(
+          config.projectFunction({
+            extraCode: `
       <div
         style={{
           backgroundColor: '#f0f',
@@ -42,18 +48,18 @@ describe('grid reparent strategies', () => {
         data-testid='dragme'
       />
     `,
-        }),
-        'await-first-dom-report',
-      )
+          }),
+          'await-first-dom-report',
+        )
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/dragme')])
+        await selectComponentsForTest(editor, [EP.fromString('sb/dragme')])
 
-      await dragElement(editor, 'dragme', windowPoint({ x: -200, y: -200 }), cmdModifier)
+        await dragElement(editor, 'dragme', windowPoint({ x: -200, y: -200 }), cmdModifier)
 
-      expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        formatTestProjectCode(
-          makeTestProjectCode({
-            insideGrid: `
+        expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+          formatTestProjectCode(
+            config.projectFunction({
+              insideGrid: `
         <div
           style={{
             backgroundColor: '#f0f',
@@ -66,14 +72,14 @@ describe('grid reparent strategies', () => {
           data-testid='dragme'
         />
       `,
-          }),
-        ),
-      )
-    })
-    it('from a flex container', async () => {
-      const editor = await renderTestEditorWithCode(
-        makeTestProjectCode({
-          extraCode: `
+            }),
+          ),
+        )
+      })
+      it('from a flex container', async () => {
+        const editor = await renderTestEditorWithCode(
+          config.projectFunction({
+            extraCode: `
       <div
         style={{
           backgroundColor: '#aaaaaa33',
@@ -115,18 +121,18 @@ describe('grid reparent strategies', () => {
         />
       </div>
     `,
-        }),
-        'await-first-dom-report',
-      )
+          }),
+          'await-first-dom-report',
+        )
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/flex/dragme')])
+        await selectComponentsForTest(editor, [EP.fromString('sb/flex/dragme')])
 
-      await dragElement(editor, 'dragme', windowPoint({ x: -200, y: -200 }), cmdModifier)
+        await dragElement(editor, 'dragme', windowPoint({ x: -200, y: -200 }), cmdModifier)
 
-      expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        formatTestProjectCode(
-          makeTestProjectCode({
-            extraCode: `
+        expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+          formatTestProjectCode(
+            config.projectFunction({
+              extraCode: `
       <div
         style={{
           backgroundColor: '#aaaaaa33',
@@ -159,7 +165,7 @@ describe('grid reparent strategies', () => {
         />
       </div>
       `,
-            insideGrid: `
+              insideGrid: `
         <div
           style={{
             backgroundColor: '#f0f',
@@ -172,14 +178,14 @@ describe('grid reparent strategies', () => {
           data-testid='dragme'
         />
       `,
-          }),
-        ),
-      )
-    })
-    it('from a flow element', async () => {
-      const editor = await renderTestEditorWithCode(
-        makeTestProjectCode({
-          extraCode: `
+            }),
+          ),
+        )
+      })
+      it('from a flow element', async () => {
+        const editor = await renderTestEditorWithCode(
+          config.projectFunction({
+            extraCode: `
       <div
         style={{
           backgroundColor: '#aaaaaa33',
@@ -218,18 +224,18 @@ describe('grid reparent strategies', () => {
         />
       </div>
     `,
-        }),
-        'await-first-dom-report',
-      )
+          }),
+          'await-first-dom-report',
+        )
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/flow/dragme')])
+        await selectComponentsForTest(editor, [EP.fromString('sb/flow/dragme')])
 
-      await dragElement(editor, 'dragme', windowPoint({ x: -200, y: -200 }), cmdModifier)
+        await dragElement(editor, 'dragme', windowPoint({ x: -200, y: -200 }), cmdModifier)
 
-      expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        formatTestProjectCode(
-          makeTestProjectCode({
-            extraCode: `
+        expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+          formatTestProjectCode(
+            config.projectFunction({
+              extraCode: `
       <div
         style={{
           backgroundColor: '#aaaaaa33',
@@ -259,7 +265,7 @@ describe('grid reparent strategies', () => {
         />
       </div>
       `,
-            insideGrid: `
+              insideGrid: `
         <div
           style={{
             backgroundColor: '#f0f',
@@ -272,16 +278,16 @@ describe('grid reparent strategies', () => {
           data-testid='dragme'
         />
       `,
-          }),
-        ),
-      )
+            }),
+          ),
+        )
+      })
     })
-  })
-  describe('reparent out of a grid', () => {
-    it('into the storyboard', async () => {
-      const editor = await renderTestEditorWithCode(
-        makeTestProjectCode({
-          insideGrid: `
+    describe(`reparent out of a grid ${config.label}`, () => {
+      it('into the storyboard', async () => {
+        const editor = await renderTestEditorWithCode(
+          config.projectFunction({
+            insideGrid: `
         <div
           style={{
             backgroundColor: '#f0f',
@@ -294,18 +300,18 @@ describe('grid reparent strategies', () => {
           data-testid='dragme'
         />
       `,
-        }),
-        'await-first-dom-report',
-      )
+          }),
+          'await-first-dom-report',
+        )
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
+        await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
+        await dragOut(editor, EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
 
-      expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        formatTestProjectCode(
-          makeTestProjectCode({
-            extraCode: `
+        expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+          formatTestProjectCode(
+            config.projectFunction({
+              extraCode: `
         <div
           style={{
             backgroundColor: '#f0f',
@@ -319,14 +325,14 @@ describe('grid reparent strategies', () => {
           data-testid='dragme'
         />
       `,
-          }),
-        ),
-      )
-    })
-    it('into a flex container', async () => {
-      const editor = await renderTestEditorWithCode(
-        makeTestProjectCode({
-          insideGrid: `
+            }),
+          ),
+        )
+      })
+      it('into a flex container', async () => {
+        const editor = await renderTestEditorWithCode(
+          config.projectFunction({
+            insideGrid: `
         <div
           style={{
             backgroundColor: '#f0f',
@@ -339,7 +345,7 @@ describe('grid reparent strategies', () => {
           data-testid='dragme'
         />
       `,
-          extraCode: `
+            extraCode: `
       <div
         style={{
           backgroundColor: '#aaaaaa33',
@@ -380,25 +386,25 @@ describe('grid reparent strategies', () => {
         />
       </div>
     `,
-        }),
-        'await-first-dom-report',
-      )
+          }),
+          'await-first-dom-report',
+        )
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
+        await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      const barElement = editor.renderedDOM.getByTestId('bar')
-      const barRect = barElement.getBoundingClientRect()
-      const endPoint = {
-        x: barRect.x - 10,
-        y: barRect.y + barRect.height / 2,
-      }
+        const barElement = editor.renderedDOM.getByTestId('bar')
+        const barRect = barElement.getBoundingClientRect()
+        const endPoint = {
+          x: barRect.x - 10,
+          y: barRect.y + barRect.height / 2,
+        }
 
-      await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint)
+        await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint)
 
-      expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        formatTestProjectCode(
-          makeTestProjectCode({
-            extraCode: `
+        expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+          formatTestProjectCode(
+            config.projectFunction({
+              extraCode: `
         <div
           style={{
             backgroundColor: '#aaaaaa33',
@@ -448,14 +454,14 @@ describe('grid reparent strategies', () => {
           />
         </div>
       `,
-          }),
-        ),
-      )
-    })
-    it('into a flow element with flow strategy selected', async () => {
-      const editor = await renderTestEditorWithCode(
-        makeTestProjectCode({
-          insideGrid: `
+            }),
+          ),
+        )
+      })
+      it('into a flow element with flow strategy selected', async () => {
+        const editor = await renderTestEditorWithCode(
+          config.projectFunction({
+            insideGrid: `
         <div
           style={{
             backgroundColor: '#f0f',
@@ -468,7 +474,7 @@ describe('grid reparent strategies', () => {
           data-testid='dragme'
         />
       `,
-          extraCode: `
+            extraCode: `
       <div
         style={{
           backgroundColor: '#aaaaaa33',
@@ -507,27 +513,27 @@ describe('grid reparent strategies', () => {
         />
       </div>
     `,
-        }),
-        'await-first-dom-report',
-      )
+          }),
+          'await-first-dom-report',
+        )
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
+        await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      const fooElement = editor.renderedDOM.getByTestId('foo')
-      const fooRect = fooElement.getBoundingClientRect()
-      const endPoint = {
-        x: fooRect.x + fooRect.width / 2,
-        y: fooRect.y + fooRect.height / 2,
-      }
+        const fooElement = editor.renderedDOM.getByTestId('foo')
+        const fooRect = fooElement.getBoundingClientRect()
+        const endPoint = {
+          x: fooRect.x + fooRect.width / 2,
+          y: fooRect.y + fooRect.height / 2,
+        }
 
-      await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint, async () => {
-        await pressKey('3', { modifiers: cmdModifier }) // this should select the Reparent (Flow) strategy
-      })
+        await dragOut(editor, EP.fromString('sb/grid/dragme'), endPoint, async () => {
+          await pressKey('3', { modifiers: cmdModifier }) // this should select the Reparent (Flow) strategy
+        })
 
-      expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        formatTestProjectCode(
-          makeTestProjectCode({
-            extraCode: `
+        expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+          formatTestProjectCode(
+            config.projectFunction({
+              extraCode: `
         <div
           style={{
             backgroundColor: '#aaaaaa33',
@@ -576,14 +582,14 @@ describe('grid reparent strategies', () => {
           />
         </div>
       `,
-          }),
-        ),
-      )
-    })
-    it('into a grid container', async () => {
-      const editor = await renderTestEditorWithCode(
-        makeTestProjectCode({
-          insideGrid: `
+            }),
+          ),
+        )
+      })
+      it('into a grid container', async () => {
+        const editor = await renderTestEditorWithCode(
+          config.projectFunction({
+            insideGrid: `
         <div
           style={{
             backgroundColor: '#f0f',
@@ -596,7 +602,7 @@ describe('grid reparent strategies', () => {
           data-testid='dragme'
         />
       `,
-          extraCode: `
+            extraCode: `
       <div
         style={{
           backgroundColor: '#aaaaaa33',
@@ -646,25 +652,25 @@ describe('grid reparent strategies', () => {
         />
       </div>
     `,
-        }),
-        'await-first-dom-report',
-      )
+          }),
+          'await-first-dom-report',
+        )
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
+        await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOutToAnotherGrid(
-        editor,
-        'another-grid',
-        {
-          x: 10,
-          y: 180,
-        },
-        EP.fromString('sb/grid/dragme'),
-      )
-      expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        formatTestProjectCode(
-          makeTestProjectCode({
-            extraCode: `
+        await dragOutToAnotherGrid(
+          editor,
+          'another-grid',
+          {
+            x: 10,
+            y: 180,
+          },
+          EP.fromString('sb/grid/dragme'),
+        )
+        expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+          formatTestProjectCode(
+            config.projectFunction({
+              extraCode: `
     <div
       style={{
         backgroundColor: '#aaaaaa33',
@@ -725,14 +731,14 @@ describe('grid reparent strategies', () => {
       />
     </div>
       `,
-          }),
-        ),
-      )
-    })
-    it('into a grid container with reorder (no explicit gridRow/gridColumn props', async () => {
-      const editor = await renderTestEditorWithCode(
-        makeTestProjectCode({
-          insideGrid: `
+            }),
+          ),
+        )
+      })
+      it('into a grid container with reorder (no explicit gridRow/gridColumn props', async () => {
+        const editor = await renderTestEditorWithCode(
+          config.projectFunction({
+            insideGrid: `
         <div
           style={{
             backgroundColor: '#f0f',
@@ -745,7 +751,7 @@ describe('grid reparent strategies', () => {
           data-testid='dragme'
         />
       `,
-          extraCode: `
+            extraCode: `
      <div
       style={{
         backgroundColor: '#aaaaaa33',
@@ -782,26 +788,26 @@ describe('grid reparent strategies', () => {
       />
     </div>
     `,
-        }),
-        'await-first-dom-report',
-      )
+          }),
+          'await-first-dom-report',
+        )
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
+        await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOutToAnotherGrid(
-        editor,
-        'another-grid',
-        {
-          x: 300,
-          y: 20,
-        },
-        EP.fromString('sb/grid/dragme'),
-      )
+        await dragOutToAnotherGrid(
+          editor,
+          'another-grid',
+          {
+            x: 300,
+            y: 20,
+          },
+          EP.fromString('sb/grid/dragme'),
+        )
 
-      expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        formatTestProjectCode(
-          makeTestProjectCode({
-            extraCode: `
+        expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+          formatTestProjectCode(
+            config.projectFunction({
+              extraCode: `
         <div
       style={{
         backgroundColor: '#aaaaaa33',
@@ -847,14 +853,14 @@ describe('grid reparent strategies', () => {
       />
     </div>
       `,
-          }),
-        ),
-      )
-    })
-    it('when the cell has no explicit size', async () => {
-      const editor = await renderTestEditorWithCode(
-        makeTestProjectCode({
-          insideGrid: `
+            }),
+          ),
+        )
+      })
+      it('when the cell has no explicit size', async () => {
+        const editor = await renderTestEditorWithCode(
+          config.projectFunction({
+            insideGrid: `
         <div
           style={{
             backgroundColor: '#f0f',
@@ -865,18 +871,18 @@ describe('grid reparent strategies', () => {
           data-testid='dragme'
         />
       `,
-        }),
-        'await-first-dom-report',
-      )
+          }),
+          'await-first-dom-report',
+        )
 
-      await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
+        await selectComponentsForTest(editor, [EP.fromString('sb/grid/dragme')])
 
-      await dragOut(editor, EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
+        await dragOut(editor, EP.fromString('sb/grid/dragme'), { x: 2000, y: 1000 })
 
-      expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        formatTestProjectCode(
-          makeTestProjectCode({
-            extraCode: `
+        expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+          formatTestProjectCode(
+            config.projectFunction({
+              extraCode: `
         <div
           style={{
             backgroundColor: '#f0f',
@@ -890,9 +896,10 @@ describe('grid reparent strategies', () => {
           data-testid='dragme'
         />
       `,
-          }),
-        ),
-      )
+            }),
+          ),
+        )
+      })
     })
   })
 })
@@ -929,6 +936,51 @@ export var storyboard = (
 `
 }
 
+function makeTestProjectCodeWithComponent(params: { extraCode?: string; insideGrid?: string }) {
+  const insideGrid = params.insideGrid?.trim()
+  const extraCode = params.extraCode?.trim()
+  return `
+import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb' data-testid='sb'>
+    <Grid
+      style={{
+        backgroundColor: '#aaaaaa33',
+        position: 'absolute',
+        left: 100,
+        top: 100,
+        width: 300,
+        height: 300,      
+        padding: 10,
+      }}
+      data-uid='grid'
+      data-testid='grid'
+    ${insideGrid == null ? '/>' : `>${insideGrid}</Grid>`}
+    ${extraCode ?? ''}
+  </Storyboard>
+)
+
+export function Grid(props) {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr 1fr',
+        gridTemplateRows: '1fr 1fr',
+        gridGap: 10,
+        ...props.style,
+      }}
+      data-uid='59069a6cd70fcd33ce17f5ff0be43a07'
+    >
+      {props.children}
+    </div>
+  )
+}
+`
+}
+
 async function dragElement(
   renderResult: EditorRenderResult,
   targetTestId: string,
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 05c167799c1d..0cabbbfb19f6 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -57,14 +57,14 @@ import {
   isDynamicGridRepeat,
 } from '../inspector/common/css-utils'
 import type { UtopiaStoreAPI } from '../editor/store/store-hook'
-import {
-  UTOPIA_PATH_KEY,
-  UTOPIA_SCENE_ID_KEY,
-  UTOPIA_UID_KEY,
-} from '../../core/model/utopia-constants'
+import { UTOPIA_SCENE_ID_KEY, UTOPIA_UID_KEY } from '../../core/model/utopia-constants'
 import { emptySet } from '../../core/shared/set-utils'
-import { getDeepestPathOnDomElement, getPathStringsOnDomElement } from '../../core/shared/uid-utils'
-import { forceNotNull, optionalMap } from '../../core/shared/optional-utils'
+import {
+  getDeepestPathOnDomElement,
+  getPathsOnDomElement,
+  getPathStringsOnDomElement,
+} from '../../core/shared/uid-utils'
+import { forceNotNull } from '../../core/shared/optional-utils'
 import { fastForEach } from '../../core/shared/utils'
 import type { EditorState, EditorStorePatched } from '../editor/store/editor-state'
 import { shallowEqual } from '../../core/shared/equality-utils'
@@ -921,13 +921,10 @@ function getSpecialMeasurements(
     ? padding.value
     : sides(undefined, undefined, undefined, undefined)
 
-  const pathStr = element.getAttribute(UTOPIA_PATH_KEY)
-  const path = optionalMap(EP.fromString, pathStr)
-
   const gridCellGlobalFrames =
-    path != null && layoutSystemForChildren === 'grid'
-      ? measureGlobalFramesOfGridCellsFromControl(
-          path,
+    layoutSystemForChildren === 'grid'
+      ? measureGlobalFramesOfGridCells(
+          element,
           scale,
           containerRectLazy,
           elementCanvasRectangleCache,
@@ -935,11 +932,9 @@ function getSpecialMeasurements(
       : null
 
   const parentGridCellGlobalFrames =
-    element.parentElement != null &&
-    elementLayoutSystem(parentElementStyle) === 'grid' &&
-    path != null
-      ? measureGlobalFramesOfGridCellsFromControl(
-          EP.parentPath(path),
+    element.parentElement != null && elementLayoutSystem(parentElementStyle) === 'grid'
+      ? measureGlobalFramesOfGridCells(
+          element.parentElement,
           scale,
           containerRectLazy,
           elementCanvasRectangleCache,
@@ -1081,15 +1076,25 @@ function getClosestOffsetParent(element: HTMLElement): Element | null {
   return null
 }
 
-function measureGlobalFramesOfGridCellsFromControl(
-  gridPath: ElementPath,
+function measureGlobalFramesOfGridCells(
+  element: HTMLElement,
   scale: number,
   containerRectLazy: CanvasPoint | (() => CanvasPoint),
   elementCanvasRectangleCache: ElementCanvasRectangleCache,
 ): GridCellGlobalFrames | null {
-  const path = EP.toString(gridPath)
+  const paths = getPathsOnDomElement(element)
+
   let gridCellGlobalFrames: GridCellGlobalFrames | null = null
-  const gridControlElement = document.getElementById(GridMeasurementHelperKey(EP.fromString(path)))
+  const gridControlElement = (() => {
+    for (let p of paths) {
+      const maybeGridControlElement = document.getElementById(GridMeasurementHelperKey(p))
+      if (maybeGridControlElement != null) {
+        return maybeGridControlElement
+      }
+    }
+    return null
+  })()
+
   if (gridControlElement != null) {
     gridCellGlobalFrames = []
     for (const cell of gridControlElement.children) {

From 36213b92f44a77eb14c66ffefbea1b2b13e0fa6e Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Thu, 31 Oct 2024 15:44:10 +0200
Subject: [PATCH 191/272] feat(import): early break on error (#6604)

This PR breaks early when there is a requirement check error (for
example a TS project) - without fetching dependencies or dispatching the
results to the project.
For example a Next TS project - note the dependencies are not fetched
and the project contents are not updated:
<video
src="https://github.com/user-attachments/assets/6ef4e75a-1659-4219-b7e0-d94471a88f57"></video>

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 .../editor/import-wizard/components.tsx       |  7 +++++--
 .../shared/github/operations/load-branch.ts   | 19 +++++++++++++------
 .../check-utopia-requirements.ts              |  9 +++++++--
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/editor/src/components/editor/import-wizard/components.tsx b/editor/src/components/editor/import-wizard/components.tsx
index b21b9956e78d..432c0745d865 100644
--- a/editor/src/components/editor/import-wizard/components.tsx
+++ b/editor/src/components/editor/import-wizard/components.tsx
@@ -29,8 +29,11 @@ export function OperationLine({ operation }: { operation: ImportOperation }) {
 
   const [childrenShown, serChildrenShown] = React.useState(false)
   const shouldShowChildren = React.useMemo(
-    () => childrenShown || operation.timeDone == null,
-    [childrenShown, operation.timeDone],
+    () =>
+      childrenShown ||
+      operation.timeDone == null ||
+      operation.result == ImportOperationResult.Error,
+    [childrenShown, operation.timeDone, operation.result],
   )
   const hasChildren = React.useMemo(
     () => operation.children != null && operation.children.length > 0,
diff --git a/editor/src/core/shared/github/operations/load-branch.ts b/editor/src/core/shared/github/operations/load-branch.ts
index 8ff8ef7c9feb..ae9e0b82f267 100644
--- a/editor/src/core/shared/github/operations/load-branch.ts
+++ b/editor/src/core/shared/github/operations/load-branch.ts
@@ -42,7 +42,10 @@ import {
   notifyOperationStarted,
   startImportProcess,
 } from '../../import/import-operation-service'
-import { resetRequirementsResolutions } from '../../import/proejct-health-check/utopia-requirements-service'
+import {
+  RequirementResolutionResult,
+  resetRequirementsResolutions,
+} from '../../import/proejct-health-check/utopia-requirements-service'
 import { checkAndFixUtopiaRequirements } from '../../import/proejct-health-check/check-utopia-requirements'
 import { ImportOperationResult } from '../../import/import-operation-types'
 
@@ -171,8 +174,12 @@ export const updateProjectWithBranchContent =
             notifyOperationFinished(dispatch, { type: 'parseFiles' }, ImportOperationResult.Success)
 
             resetRequirementsResolutions(dispatch)
+            const { fixedProjectContents, result: requirementResolutionResult } =
+              checkAndFixUtopiaRequirements(dispatch, parseResults)
 
-            const parsedProjectContents = checkAndFixUtopiaRequirements(dispatch, parseResults)
+            if (requirementResolutionResult === RequirementResolutionResult.Critical) {
+              return []
+            }
 
             // Update the editor with everything so that if anything else fails past this point
             // there's no loss of data from the user's perspective.
@@ -185,19 +192,19 @@ export const updateProjectWithBranchContent =
                   branchName,
                   true,
                 ),
-                updateProjectContents(parsedProjectContents),
-                updateBranchContents(parsedProjectContents),
+                updateProjectContents(fixedProjectContents),
+                updateBranchContents(fixedProjectContents),
                 truncateHistory(),
               ],
               'everyone',
             )
 
             const componentDescriptorFiles =
-              getAllComponentDescriptorFilePaths(parsedProjectContents)
+              getAllComponentDescriptorFilePaths(fixedProjectContents)
 
             // If there's a package.json file, then attempt to load the dependencies for it.
             let dependenciesPromise: Promise<void> = Promise.resolve()
-            const packageJson = packageJsonFileFromProjectContents(parsedProjectContents)
+            const packageJson = packageJsonFileFromProjectContents(fixedProjectContents)
             if (packageJson != null && isTextFile(packageJson)) {
               notifyOperationStarted(dispatch, { type: 'refreshDependencies' })
               dependenciesPromise = refreshDependencies(
diff --git a/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts b/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
index c5e1dc0c520f..b78362c7146c 100644
--- a/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
+++ b/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
@@ -5,6 +5,7 @@ import type { EditorDispatch } from '../../../../components/editor/action-types'
 import CheckPackageJson from './requirements/requirement-package-json'
 import CheckLanguage from './requirements/requirement-language'
 import CheckReactVersion from './requirements/requirement-react'
+import { RequirementResolutionResult } from './utopia-requirements-types'
 import type { ProjectRequirement, RequirementCheck } from './utopia-requirements-types'
 import { notifyCheckingRequirement, notifyResolveRequirement } from './utopia-requirements-service'
 import CheckStoryboard from './requirements/requirement-storyboard'
@@ -12,7 +13,7 @@ import CheckStoryboard from './requirements/requirement-storyboard'
 export function checkAndFixUtopiaRequirements(
   dispatch: EditorDispatch,
   parsedProjectContents: ProjectContentTreeRoot,
-): ProjectContentTreeRoot {
+): { result: RequirementResolutionResult; fixedProjectContents: ProjectContentTreeRoot } {
   const checks: Record<ProjectRequirement, RequirementCheck> = {
     storyboard: new CheckStoryboard(),
     packageJsonEntries: new CheckPackageJson(),
@@ -20,11 +21,15 @@ export function checkAndFixUtopiaRequirements(
     reactVersion: new CheckReactVersion(),
   }
   let projectContents = parsedProjectContents
+  let result: RequirementResolutionResult = RequirementResolutionResult.Found
   // iterate over all checks, updating the project contents as we go
   for (const [name, check] of Object.entries(checks)) {
     const checkName = name as ProjectRequirement
     notifyCheckingRequirement(dispatch, checkName, check.getStartText())
     const checkResult = check.check(projectContents)
+    if (checkResult.resolution === RequirementResolutionResult.Critical) {
+      result = RequirementResolutionResult.Critical
+    }
     notifyResolveRequirement(
       dispatch,
       checkName,
@@ -34,7 +39,7 @@ export function checkAndFixUtopiaRequirements(
     )
     projectContents = checkResult.newProjectContents ?? projectContents
   }
-  return projectContents
+  return { result: result, fixedProjectContents: projectContents }
 }
 
 export function getPackageJson(

From 8a5b3ee3e5375289f1081153314d3cc91a38a06d Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Thu, 31 Oct 2024 15:44:41 +0200
Subject: [PATCH 192/272] feat(import): check for server dependencies (#6603)

**Note for reviewers:**
Other than refactors, tests and name changes, the **actual logic** is
only in
[requirement-server-packages.ts](https://github.com/concrete-utopia/utopia/compare/feat/check-server-dependencies?expand=1#diff-a2a88b7fd33ba102c98948e8efcb2c1771061df92f39e2b99af55560a1aceffc).
(I had to change the resolution name from `'Found'` to `'Passed'` since
here a passing check means that server packages weren't actually found)

**PR details:**
This PR adds a check for server dependencies to the import process -
currently a very closed list, to be added more incrementally.
For example when importing a Next project:
<video
src="https://github.com/user-attachments/assets/4db242d8-bb51-46e0-892c-d0a84d4c5231"></video>

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 editor/src/components/assets.spec.ts          | 45 ++++++++++++++++++-
 editor/src/components/assets.ts               | 33 ++++++++++++++
 .../editor/import-wizard/components.tsx       |  2 +-
 .../store/store-deep-equality-instances.ts    |  4 +-
 .../check-utopia-requirements.ts              | 38 ++++------------
 .../requirements/requirement-language.ts      |  5 +--
 .../requirements/requirement-package-json.ts  |  7 +--
 .../requirements/requirement-react.ts         | 17 ++-----
 .../requirement-server-packages.ts            | 29 ++++++++++++
 .../requirements/requirement-storyboard.ts    |  5 +--
 .../requirements/requirements.spec.ts         | 44 +++++++++++++++---
 .../utopia-requirements-service.ts            |  7 +--
 .../utopia-requirements-types.ts              | 11 ++++-
 13 files changed, 177 insertions(+), 70 deletions(-)
 create mode 100644 editor/src/core/shared/import/proejct-health-check/requirements/requirement-server-packages.ts

diff --git a/editor/src/components/assets.spec.ts b/editor/src/components/assets.spec.ts
index a1927e9f873f..1a71f481a02c 100644
--- a/editor/src/components/assets.spec.ts
+++ b/editor/src/components/assets.spec.ts
@@ -1,16 +1,25 @@
 import * as FastCheck from 'fast-check'
 import fastDeepEquals from 'fast-deep-equal'
 import type { ProjectContents } from '../core/shared/project-file-types'
-import { directory, isDirectory } from '../core/shared/project-file-types'
+import {
+  directory,
+  isDirectory,
+  RevisionsState,
+  textFile,
+  textFileContents,
+  unparsed,
+} from '../core/shared/project-file-types'
 import { codeFile } from '../core/shared/project-file-types'
 import type { ProjectContentTreeRoot } from './assets'
 import {
   contentsToTree,
+  getProjectDependencies,
   projectContentDirectory,
   projectContentFile,
   treeToContents,
 } from './assets'
 import { projectContentsArbitrary } from './assets.test-utils'
+import { simpleDefaultProject } from '../sample-projects/sample-project-utils'
 
 function checkContentsToTree(contents: ProjectContents): boolean {
   const result = treeToContents(contentsToTree(contents))
@@ -51,3 +60,37 @@ describe('contentsToTree', () => {
     expect(contentsToTree(contents)).toEqual(expectedResult)
   })
 })
+
+describe('getProjectDependencies', () => {
+  it('should merge the dependencies from package.json and package-lock.json', () => {
+    const project = simpleDefaultProject({
+      additionalFiles: {
+        '/package-lock.json': textFile(
+          textFileContents(
+            JSON.stringify(
+              {
+                dependencies: {
+                  react: {
+                    version: '1.0.0',
+                  },
+                },
+              },
+              null,
+              2,
+            ),
+            unparsed,
+            RevisionsState.CodeAhead,
+          ),
+          null,
+          null,
+          0,
+        ),
+      },
+    })
+    const dependencies = getProjectDependencies(project.projectContents)
+    // from package.json
+    expect(dependencies?.['react-dom']).toEqual('16.13.1')
+    // from package-lock.json
+    expect(dependencies?.react).toEqual('1.0.0')
+  })
+})
diff --git a/editor/src/components/assets.ts b/editor/src/components/assets.ts
index 1d57845374fb..43328b2e050c 100644
--- a/editor/src/components/assets.ts
+++ b/editor/src/components/assets.ts
@@ -761,3 +761,36 @@ export function ensureDirectoriesExist(projectContents: ProjectContents): Projec
     return result
   }
 }
+
+function getFileAsJson<T>(projectContents: ProjectContentTreeRoot, fileName: string): T | null {
+  const file = getProjectFileByFilePath(projectContents, fileName)
+  if (file != null && isTextFile(file)) {
+    return JSON.parse(file.fileContents.code) as T
+  }
+  return null
+}
+
+type PackageJson = { utopia?: Record<string, string>; dependencies?: Record<string, string> }
+export function getPackageJson(projectContents: ProjectContentTreeRoot): PackageJson | null {
+  return getFileAsJson<PackageJson>(projectContents, '/package.json')
+}
+
+type PackageLockJson = { dependencies?: Record<string, { version?: string }> }
+export function getPackageLockJson(
+  projectContents: ProjectContentTreeRoot,
+): PackageLockJson | null {
+  return getFileAsJson<PackageLockJson>(projectContents, '/package-lock.json')
+}
+
+export function getProjectDependencies(
+  projectContents: ProjectContentTreeRoot,
+): Record<string, string> | null {
+  const packageJsonDependencies = getPackageJson(projectContents)?.dependencies ?? {}
+  const packageLockJsonDependencies = getPackageLockJson(projectContents)?.dependencies ?? {}
+  for (const packageName of Object.keys(packageJsonDependencies)) {
+    if (packageLockJsonDependencies[packageName]?.version != null) {
+      packageJsonDependencies[packageName] = packageLockJsonDependencies[packageName].version
+    }
+  }
+  return packageJsonDependencies
+}
diff --git a/editor/src/components/editor/import-wizard/components.tsx b/editor/src/components/editor/import-wizard/components.tsx
index 432c0745d865..8c3cfc71cb7a 100644
--- a/editor/src/components/editor/import-wizard/components.tsx
+++ b/editor/src/components/editor/import-wizard/components.tsx
@@ -102,7 +102,7 @@ const dependenciesSuccessFn = (op: ImportFetchDependency) =>
 const dependenciesSuccessTextFn = (successCount: number) =>
   `${successCount} dependencies fetched successfully`
 const requirementsSuccessFn = (op: ImportCheckRequirementAndFix) =>
-  op.resolution === RequirementResolutionResult.Found
+  op.resolution === RequirementResolutionResult.Passed
 const requirementsSuccessTextFn = (successCount: number) => `${successCount} requirements met`
 
 function AggregatedChildrenStatus<T extends ImportOperation>({
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 912ab4eb153c..a8f4c5955c8f 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -4802,7 +4802,7 @@ export const ProjectRequirementResolutionKeepDeepEquality: KeepDeepEqualityCall<
   )
 
 export const ProjectRequirementsKeepDeepEquality: KeepDeepEqualityCall<ProjectRequirements> =
-  combine4EqualityCalls(
+  combine5EqualityCalls(
     (requirements) => requirements.storyboard,
     ProjectRequirementResolutionKeepDeepEquality,
     (requirements) => requirements.packageJsonEntries,
@@ -4811,6 +4811,8 @@ export const ProjectRequirementsKeepDeepEquality: KeepDeepEqualityCall<ProjectRe
     ProjectRequirementResolutionKeepDeepEquality,
     (requirements) => requirements.reactVersion,
     ProjectRequirementResolutionKeepDeepEquality,
+    (requirements) => requirements.serverPackages,
+    ProjectRequirementResolutionKeepDeepEquality,
     newProjectRequirements,
   )
 
diff --git a/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts b/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
index b78362c7146c..94f0b1f23cbb 100644
--- a/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
+++ b/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
@@ -1,14 +1,17 @@
-import { getProjectFileByFilePath } from '../../../../components/assets'
 import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
-import { isTextFile } from '../../project-file-types'
 import type { EditorDispatch } from '../../../../components/editor/action-types'
 import CheckPackageJson from './requirements/requirement-package-json'
 import CheckLanguage from './requirements/requirement-language'
 import CheckReactVersion from './requirements/requirement-react'
 import { RequirementResolutionResult } from './utopia-requirements-types'
 import type { ProjectRequirement, RequirementCheck } from './utopia-requirements-types'
-import { notifyCheckingRequirement, notifyResolveRequirement } from './utopia-requirements-service'
+import {
+  initialTexts,
+  notifyCheckingRequirement,
+  notifyResolveRequirement,
+} from './utopia-requirements-service'
 import CheckStoryboard from './requirements/requirement-storyboard'
+import CheckServerPackages from './requirements/requirement-server-packages'
 
 export function checkAndFixUtopiaRequirements(
   dispatch: EditorDispatch,
@@ -19,13 +22,14 @@ export function checkAndFixUtopiaRequirements(
     packageJsonEntries: new CheckPackageJson(),
     language: new CheckLanguage(),
     reactVersion: new CheckReactVersion(),
+    serverPackages: new CheckServerPackages(),
   }
   let projectContents = parsedProjectContents
   let result: RequirementResolutionResult = RequirementResolutionResult.Found
   // iterate over all checks, updating the project contents as we go
   for (const [name, check] of Object.entries(checks)) {
     const checkName = name as ProjectRequirement
-    notifyCheckingRequirement(dispatch, checkName, check.getStartText())
+    notifyCheckingRequirement(dispatch, checkName, initialTexts[checkName])
     const checkResult = check.check(projectContents)
     if (checkResult.resolution === RequirementResolutionResult.Critical) {
       result = RequirementResolutionResult.Critical
@@ -41,29 +45,3 @@ export function checkAndFixUtopiaRequirements(
   }
   return { result: result, fixedProjectContents: projectContents }
 }
-
-export function getPackageJson(
-  projectContents: ProjectContentTreeRoot,
-): { utopia?: Record<string, string>; dependencies?: Record<string, string> } | null {
-  return getJsonFile<{ utopia?: Record<string, string>; dependencies?: Record<string, string> }>(
-    projectContents,
-    '/package.json',
-  )
-}
-
-export function getPackageLockJson(
-  projectContents: ProjectContentTreeRoot,
-): { dependencies?: Record<string, string> } | null {
-  return getJsonFile<{ dependencies?: Record<string, string> }>(
-    projectContents,
-    '/package-lock.json',
-  )
-}
-
-function getJsonFile<T>(projectContents: ProjectContentTreeRoot, fileName: string): T | null {
-  const file = getProjectFileByFilePath(projectContents, fileName)
-  if (file != null && isTextFile(file)) {
-    return JSON.parse(file.fileContents.code) as T
-  }
-  return null
-}
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-language.ts b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-language.ts
index 6367869a2434..0d9024032e26 100644
--- a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-language.ts
+++ b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-language.ts
@@ -7,9 +7,6 @@ import {
 import { applyToAllUIJSFiles } from '../../../../model/project-file-utils'
 
 export default class CheckProjectLanguage implements RequirementCheck {
-  getStartText(): string {
-    return 'Checking project language'
-  }
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
     let jsCount = 0
     let tsCount = 0
@@ -35,7 +32,7 @@ export default class CheckProjectLanguage implements RequirementCheck {
       }
     } else {
       return {
-        resolution: RequirementResolutionResult.Found,
+        resolution: RequirementResolutionResult.Passed,
         resultText: 'Project uses JS/JSX',
         resultValue: 'javascript',
       }
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-package-json.ts b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-package-json.ts
index 7b2233c8e96e..006747800867 100644
--- a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-package-json.ts
+++ b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-package-json.ts
@@ -1,15 +1,12 @@
 import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
 import { RevisionsState } from 'utopia-shared/src/types'
-import { getPackageJson } from '../check-utopia-requirements'
+import { getPackageJson } from '../../../../../components/assets'
 import type { RequirementCheck, RequirementCheckResult } from '../utopia-requirements-types'
 import { RequirementResolutionResult } from '../utopia-requirements-types'
 import { addFileToProjectContents } from '../../../../../components/assets'
 import { codeFile } from '../../../../../core/shared/project-file-types'
 
 export default class PackageJsonCheckAndFix implements RequirementCheck {
-  getStartText(): string {
-    return 'Checking package.json'
-  }
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
     const parsedPackageJson = getPackageJson(projectContents)
     if (parsedPackageJson == null) {
@@ -39,7 +36,7 @@ export default class PackageJsonCheckAndFix implements RequirementCheck {
       }
     } else {
       return {
-        resolution: RequirementResolutionResult.Found,
+        resolution: RequirementResolutionResult.Passed,
         resultText: 'Valid package.json found',
       }
     }
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-react.ts b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-react.ts
index 5502a2e9eaf6..7198949d3ee7 100644
--- a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-react.ts
+++ b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-react.ts
@@ -4,24 +4,15 @@ import {
   type RequirementCheck,
   type RequirementCheckResult,
 } from '../utopia-requirements-types'
-import { getPackageJson, getPackageLockJson } from '../check-utopia-requirements'
 import Semver from 'semver'
+import { getProjectDependencies } from '../../../../../components/assets'
 
 const SUPPORTED_REACT_VERSION_RANGE = '16.8.0 - 18.x'
 
 export default class CheckReactRequirement implements RequirementCheck {
-  getStartText(): string {
-    return 'Checking React version'
-  }
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
-    const parsedPackageLockJson = getPackageLockJson(projectContents)
-    // check package-lock.json first
-    let reactVersion = parsedPackageLockJson?.dependencies?.react
-    if (reactVersion == null) {
-      const parsedPackageJson = getPackageJson(projectContents)
-      // then check package.json
-      reactVersion = parsedPackageJson?.dependencies?.react
-    }
+    const projectDependencies = getProjectDependencies(projectContents)
+    const reactVersion = projectDependencies?.react
     if (reactVersion == null) {
       return {
         resolution: RequirementResolutionResult.Critical,
@@ -31,7 +22,7 @@ export default class CheckReactRequirement implements RequirementCheck {
     const isMatching = Semver.intersects(reactVersion, SUPPORTED_REACT_VERSION_RANGE)
     return {
       resolution: isMatching
-        ? RequirementResolutionResult.Found
+        ? RequirementResolutionResult.Passed
         : RequirementResolutionResult.Critical,
       resultText: isMatching ? 'React version is ok' : 'React version is not in supported range',
       resultValue: reactVersion,
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-server-packages.ts b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-server-packages.ts
new file mode 100644
index 000000000000..7b18d7cf4f03
--- /dev/null
+++ b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-server-packages.ts
@@ -0,0 +1,29 @@
+import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
+import {
+  RequirementResolutionResult,
+  type RequirementCheck,
+  type RequirementCheckResult,
+} from '../utopia-requirements-types'
+import { getProjectDependencies } from '../../../../../components/assets'
+
+const serverPackagesRestrictionList: RegExp[] = [/^next/, /^remix/, /^astro/, /^svelte/]
+
+export default class CheckServerPackages implements RequirementCheck {
+  check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
+    const projectDependencies = getProjectDependencies(projectContents) ?? {}
+    const serverPackages = Object.keys(projectDependencies).filter((packageName) =>
+      serverPackagesRestrictionList.some((restriction) => restriction.test(packageName)),
+    )
+    if (serverPackages.length > 0) {
+      return {
+        resolution: RequirementResolutionResult.Critical,
+        resultText: 'Server packages found',
+        resultValue: serverPackages.join(', '),
+      }
+    }
+    return {
+      resolution: RequirementResolutionResult.Passed,
+      resultText: 'No server packages found',
+    }
+  }
+}
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-storyboard.ts b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-storyboard.ts
index 808c9dae39e1..35ceeca6e1ce 100644
--- a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-storyboard.ts
+++ b/editor/src/core/shared/import/proejct-health-check/requirements/requirement-storyboard.ts
@@ -13,9 +13,6 @@ import { codeFile } from '../../../../../core/shared/project-file-types'
 import { addStoryboardFileToProject } from '../../../../../core/model/storyboard-utils'
 
 export default class CheckStoryboard implements RequirementCheck {
-  getStartText(): string {
-    return 'Checking for storyboard.js'
-  }
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
     return createStoryboardFileIfNecessaryInner(projectContents)
   }
@@ -34,7 +31,7 @@ function createStoryboardFileIfNecessaryInner(
   const storyboardFile = getProjectFileByFilePath(projectContents, StoryboardFilePath)
   if (storyboardFile != null) {
     return {
-      resolution: RequirementResolutionResult.Found,
+      resolution: RequirementResolutionResult.Passed,
       resultText: 'Storyboard.js found',
     }
   }
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirements.spec.ts b/editor/src/core/shared/import/proejct-health-check/requirements/requirements.spec.ts
index 311769ad7cd0..7ad7c0e6dfa1 100644
--- a/editor/src/core/shared/import/proejct-health-check/requirements/requirements.spec.ts
+++ b/editor/src/core/shared/import/proejct-health-check/requirements/requirements.spec.ts
@@ -8,8 +8,9 @@ import { RevisionsState } from '../../../../../core/shared/project-file-types'
 import { unparsed } from '../../../../../core/shared/project-file-types'
 import { contentsToTree } from '../../../../../components/assets'
 import { DefaultPackageJson } from '../../../../../components/editor/store/editor-state'
-import { getPackageJson } from '../check-utopia-requirements'
+import { getPackageJson } from '../../../../../components/assets'
 import CheckStoryboard from './requirement-storyboard'
+import CheckServerPackages from './requirement-server-packages'
 
 describe('requirements checks', () => {
   describe('project language', () => {
@@ -18,7 +19,7 @@ describe('requirements checks', () => {
       const project = simpleDefaultProject()
       const projectContents = project.projectContents
       const result = check.check(projectContents)
-      expect(result.resolution).toBe(RequirementResolutionResult.Found)
+      expect(result.resolution).toBe(RequirementResolutionResult.Passed)
     })
 
     it('should return failure for a project with ts files', () => {
@@ -41,7 +42,7 @@ describe('requirements checks', () => {
       })
       const projectContents = project.projectContents
       const result = check.check(projectContents)
-      expect(result.resolution).toBe(RequirementResolutionResult.Found)
+      expect(result.resolution).toBe(RequirementResolutionResult.Passed)
     })
     it('should fail for a project with no js files', () => {
       const check = new CheckProjectLanguage()
@@ -59,7 +60,7 @@ describe('requirements checks', () => {
       const project = simpleDefaultProject()
       const projectContents = project.projectContents
       const result = check.check(projectContents)
-      expect(result.resolution).toBe(RequirementResolutionResult.Found)
+      expect(result.resolution).toBe(RequirementResolutionResult.Passed)
     })
     it('should return failure for a project without a package.json', () => {
       const check = new CheckPackageJson()
@@ -103,7 +104,7 @@ describe('requirements checks', () => {
       const project = simpleDefaultProject()
       const projectContents = project.projectContents
       const result = check.check(projectContents)
-      expect(result.resolution).toBe(RequirementResolutionResult.Found)
+      expect(result.resolution).toBe(RequirementResolutionResult.Passed)
     })
     it('should return failure for a project with a react version less than 16.8', () => {
       const check = new CheckReactVersion()
@@ -173,7 +174,7 @@ describe('requirements checks', () => {
       const project = simpleDefaultProject()
       const projectContents = project.projectContents
       const result = check.check(projectContents)
-      expect(result.resolution).toBe(RequirementResolutionResult.Found)
+      expect(result.resolution).toBe(RequirementResolutionResult.Passed)
     })
     it('should create a storyboard if there is no storyboard', () => {
       const check = new CheckStoryboard()
@@ -188,4 +189,35 @@ describe('requirements checks', () => {
       expect(result.newProjectContents!['utopia/storyboard.js']).not.toBeNull()
     })
   })
+
+  describe('server packages', () => {
+    it('should return success for a project with no server packages', () => {
+      const check = new CheckServerPackages()
+      const project = simpleDefaultProject()
+      const projectContents = project.projectContents
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Passed)
+    })
+
+    it('should return failure for a project with server packages', () => {
+      const check = new CheckServerPackages()
+      const project = simpleDefaultProject({
+        additionalFiles: {
+          '/package.json': textFile(
+            textFileContents(
+              JSON.stringify({ dependencies: { next: '14.2.5' } }, null, 2),
+              unparsed,
+              RevisionsState.CodeAhead,
+            ),
+            null,
+            null,
+            0,
+          ),
+        },
+      })
+      const projectContents = project.projectContents
+      const result = check.check(projectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Critical)
+    })
+  })
 })
diff --git a/editor/src/core/shared/import/proejct-health-check/utopia-requirements-service.ts b/editor/src/core/shared/import/proejct-health-check/utopia-requirements-service.ts
index eb0d17b0dda8..82aa36895c5a 100644
--- a/editor/src/core/shared/import/proejct-health-check/utopia-requirements-service.ts
+++ b/editor/src/core/shared/import/proejct-health-check/utopia-requirements-service.ts
@@ -10,11 +10,12 @@ import {
 } from './utopia-requirements-types'
 import { isFeatureEnabled } from '../../../../utils/feature-switches'
 
-const initialTexts: Record<ProjectRequirement, string> = {
+export const initialTexts: Record<ProjectRequirement, string> = {
   storyboard: 'Checking storyboard.js',
-  packageJsonEntries: 'Checking package.json',
+  packageJsonEntries: 'Checking for a valid package.json',
   language: 'Checking project language',
   reactVersion: 'Checking React version',
+  serverPackages: 'Checking for server packages',
 }
 
 export function updateProjectRequirementsStatus(
@@ -75,7 +76,7 @@ export function notifyResolveRequirement(
     },
   })
   const result =
-    resolution === RequirementResolutionResult.Found ||
+    resolution === RequirementResolutionResult.Passed ||
     resolution === RequirementResolutionResult.Fixed
       ? ImportOperationResult.Success
       : resolution === RequirementResolutionResult.Partial
diff --git a/editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts b/editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts
index c58632a999ef..665824133d5e 100644
--- a/editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts
+++ b/editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts
@@ -1,9 +1,13 @@
 import type { ProjectContentTreeRoot } from 'utopia-shared/src/types'
 
 export const RequirementResolutionResult = {
-  Found: 'found',
+  // the requirement was passed without any fixes
+  Passed: 'passed',
+  // the requirement was found to be missing, but was fixed
   Fixed: 'fixed',
+  // the requirement was found to be missing, but it's not critical
   Partial: 'partial',
+  // the requirement was found to be missing and we cannot continue with the project
   Critical: 'critical',
 } as const
 
@@ -33,6 +37,7 @@ export function emptyProjectRequirements(): ProjectRequirements {
     emptyRequirementResolution(),
     emptyRequirementResolution(),
     emptyRequirementResolution(),
+    emptyRequirementResolution(),
   )
 }
 
@@ -59,6 +64,7 @@ export interface ProjectRequirements {
   packageJsonEntries: RequirementResolution
   language: RequirementResolution
   reactVersion: RequirementResolution
+  serverPackages: RequirementResolution
 }
 
 export type ProjectRequirement = keyof ProjectRequirements
@@ -68,12 +74,14 @@ export function newProjectRequirements(
   packageJsonEntries: RequirementResolution,
   language: RequirementResolution,
   reactVersion: RequirementResolution,
+  serverPackages: RequirementResolution,
 ): ProjectRequirements {
   return {
     storyboard,
     packageJsonEntries,
     language,
     reactVersion,
+    serverPackages,
   }
 }
 
@@ -86,5 +94,4 @@ export interface RequirementCheckResult {
 
 export interface RequirementCheck {
   check: (projectContents: ProjectContentTreeRoot) => RequirementCheckResult
-  getStartText: () => string
 }

From 277abcef73eafd8c5383ce0ae3966a5697d3c185 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Thu, 31 Oct 2024 16:33:21 +0200
Subject: [PATCH 193/272] fix(typo): fix typo in folder name (#6608)

Fix a small typo in a folder name (+ a conflict resolution)

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 editor/src/components/editor/action-types.ts                  | 2 +-
 editor/src/components/editor/actions/action-creators.ts       | 2 +-
 editor/src/components/editor/actions/actions.tsx              | 4 ++--
 editor/src/components/editor/import-wizard/components.tsx     | 2 +-
 editor/src/components/editor/store/editor-state.ts            | 2 +-
 .../components/editor/store/store-deep-equality-instances.ts  | 4 ++--
 .../components/editor/store/store-hook-substore-helpers.ts    | 2 +-
 editor/src/core/shared/github/operations/load-branch.ts       | 4 ++--
 editor/src/core/shared/import/import-operation-types.ts       | 2 +-
 .../check-utopia-requirements.ts                              | 2 +-
 .../requirements/requirement-language.ts                      | 0
 .../requirements/requirement-package-json.ts                  | 0
 .../requirements/requirement-react.ts                         | 0
 .../requirements/requirement-server-packages.ts               | 0
 .../requirements/requirement-storyboard.ts                    | 0
 .../requirements/requirements.spec.ts                         | 0
 .../utopia-requirements-service.ts                            | 0
 .../utopia-requirements-types.ts                              | 0
 18 files changed, 13 insertions(+), 13 deletions(-)
 rename editor/src/core/shared/import/{proejct-health-check => project-health-check}/check-utopia-requirements.ts (99%)
 rename editor/src/core/shared/import/{proejct-health-check => project-health-check}/requirements/requirement-language.ts (100%)
 rename editor/src/core/shared/import/{proejct-health-check => project-health-check}/requirements/requirement-package-json.ts (100%)
 rename editor/src/core/shared/import/{proejct-health-check => project-health-check}/requirements/requirement-react.ts (100%)
 rename editor/src/core/shared/import/{proejct-health-check => project-health-check}/requirements/requirement-server-packages.ts (100%)
 rename editor/src/core/shared/import/{proejct-health-check => project-health-check}/requirements/requirement-storyboard.ts (100%)
 rename editor/src/core/shared/import/{proejct-health-check => project-health-check}/requirements/requirements.spec.ts (100%)
 rename editor/src/core/shared/import/{proejct-health-check => project-health-check}/utopia-requirements-service.ts (100%)
 rename editor/src/core/shared/import/{proejct-health-check => project-health-check}/utopia-requirements-types.ts (100%)

diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts
index 97d9ed588648..b00f6ce2d31b 100644
--- a/editor/src/components/editor/action-types.ts
+++ b/editor/src/components/editor/action-types.ts
@@ -91,7 +91,7 @@ import type {
   ImportOperation,
   ImportOperationAction,
 } from '../../core/shared/import/import-operation-types'
-import type { ProjectRequirements } from '../../core/shared/import/proejct-health-check/utopia-requirements-types'
+import type { ProjectRequirements } from '../../core/shared/import/project-health-check/utopia-requirements-types'
 export { isLoggedIn, loggedInUser, notLoggedIn } from '../../common/user'
 export type { LoginState, UserDetails } from '../../common/user'
 
diff --git a/editor/src/components/editor/actions/action-creators.ts b/editor/src/components/editor/actions/action-creators.ts
index 0f6acf5df9d3..31db2ce322e9 100644
--- a/editor/src/components/editor/actions/action-creators.ts
+++ b/editor/src/components/editor/actions/action-creators.ts
@@ -275,7 +275,7 @@ import type {
   ImportOperation,
   ImportOperationAction,
 } from '../../../core/shared/import/import-operation-types'
-import type { ProjectRequirements } from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
+import type { ProjectRequirements } from '../../../core/shared/import/project-health-check/utopia-requirements-types'
 
 export function clearSelection(): EditorAction {
   return {
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index c9ed2f8801ff..5b2d20b462bf 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -628,9 +628,9 @@ import { getNavigatorTargetsFromEditorState } from '../../navigator/navigator-ut
 import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 import { styleP } from '../../inspector/inspector-common'
 import { getUpdateOperationResult } from '../../../core/shared/import/import-operation-service'
-import { updateRequirements } from '../../../core/shared/import/proejct-health-check/utopia-requirements-service'
+import { updateRequirements } from '../../../core/shared/import/project-health-check/utopia-requirements-service'
 import { applyValuesAtPath, deleteValuesAtPath } from '../../canvas/commands/utils/property-utils'
-import { createStoryboardFileIfNecessary } from '../../../core/shared/import/proejct-health-check/requirements/requirement-storyboard'
+import { createStoryboardFileIfNecessary } from '../../../core/shared/import/project-health-check/requirements/requirement-storyboard'
 
 export const MIN_CODE_PANE_REOPEN_WIDTH = 100
 
diff --git a/editor/src/components/editor/import-wizard/components.tsx b/editor/src/components/editor/import-wizard/components.tsx
index 8c3cfc71cb7a..792cc44f4eaa 100644
--- a/editor/src/components/editor/import-wizard/components.tsx
+++ b/editor/src/components/editor/import-wizard/components.tsx
@@ -11,7 +11,7 @@ import { ImportOperationResult } from '../../../core/shared/import/import-operat
 import { assertNever } from '../../../core/shared/utils'
 import { Icons } from '../../../uuiui'
 import { GithubSpinner } from '../../../components/navigator/left-pane/github-pane/github-spinner'
-import { RequirementResolutionResult } from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
+import { RequirementResolutionResult } from '../../../core/shared/import/project-health-check/utopia-requirements-types'
 
 export function OperationLine({ operation }: { operation: ImportOperation }) {
   const operationRunningStatus = React.useMemo(() => {
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index bce7097d5f49..233bf98cf6d4 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -193,7 +193,7 @@ import type { ImportOperation } from '../../../core/shared/import/import-operati
 import {
   emptyProjectRequirements,
   type ProjectRequirements,
-} from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
+} from '../../../core/shared/import/project-health-check/utopia-requirements-types'
 
 const ObjectPathImmutable: any = OPI
 
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index a8f4c5955c8f..8db911028e77 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -647,11 +647,11 @@ import type { ImportOperation } from '../../../core/shared/import/import-operati
 import type {
   ProjectRequirements,
   RequirementResolution,
-} from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
+} from '../../../core/shared/import/project-health-check/utopia-requirements-types'
 import {
   newProjectRequirements,
   requirementResolution,
-} from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
+} from '../../../core/shared/import/project-health-check/utopia-requirements-types'
 
 export function ElementPropertyPathKeepDeepEquality(): KeepDeepEqualityCall<ElementPropertyPath> {
   return combine2EqualityCalls(
diff --git a/editor/src/components/editor/store/store-hook-substore-helpers.ts b/editor/src/components/editor/store/store-hook-substore-helpers.ts
index 90a8cd6c7d7b..8d985eccca1d 100644
--- a/editor/src/components/editor/store/store-hook-substore-helpers.ts
+++ b/editor/src/components/editor/store/store-hook-substore-helpers.ts
@@ -1,5 +1,5 @@
 import { type EditorState } from './editor-state'
-import { emptyProjectRequirements } from '../../../core/shared/import/proejct-health-check/utopia-requirements-types'
+import { emptyProjectRequirements } from '../../../core/shared/import/project-health-check/utopia-requirements-types'
 
 export const EmptyEditorStateForKeysOnly: EditorState = {
   id: null,
diff --git a/editor/src/core/shared/github/operations/load-branch.ts b/editor/src/core/shared/github/operations/load-branch.ts
index ae9e0b82f267..8182198dfb15 100644
--- a/editor/src/core/shared/github/operations/load-branch.ts
+++ b/editor/src/core/shared/github/operations/load-branch.ts
@@ -45,8 +45,8 @@ import {
 import {
   RequirementResolutionResult,
   resetRequirementsResolutions,
-} from '../../import/proejct-health-check/utopia-requirements-service'
-import { checkAndFixUtopiaRequirements } from '../../import/proejct-health-check/check-utopia-requirements'
+} from '../../import/project-health-check/utopia-requirements-service'
+import { checkAndFixUtopiaRequirements } from '../../import/project-health-check/check-utopia-requirements'
 import { ImportOperationResult } from '../../import/import-operation-types'
 
 export const saveAssetsToProject =
diff --git a/editor/src/core/shared/import/import-operation-types.ts b/editor/src/core/shared/import/import-operation-types.ts
index 4a8fccb83539..08fa2ea2ed05 100644
--- a/editor/src/core/shared/import/import-operation-types.ts
+++ b/editor/src/core/shared/import/import-operation-types.ts
@@ -1,5 +1,5 @@
 import type { GithubRepo } from '../../../components/editor/store/editor-state'
-import type { RequirementResolutionResult } from './proejct-health-check/utopia-requirements-types'
+import type { RequirementResolutionResult } from './project-health-check/utopia-requirements-types'
 
 type ImportOperationData = {
   text?: string
diff --git a/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts b/editor/src/core/shared/import/project-health-check/check-utopia-requirements.ts
similarity index 99%
rename from editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
rename to editor/src/core/shared/import/project-health-check/check-utopia-requirements.ts
index 94f0b1f23cbb..edc9d9902185 100644
--- a/editor/src/core/shared/import/proejct-health-check/check-utopia-requirements.ts
+++ b/editor/src/core/shared/import/project-health-check/check-utopia-requirements.ts
@@ -25,7 +25,7 @@ export function checkAndFixUtopiaRequirements(
     serverPackages: new CheckServerPackages(),
   }
   let projectContents = parsedProjectContents
-  let result: RequirementResolutionResult = RequirementResolutionResult.Found
+  let result: RequirementResolutionResult = RequirementResolutionResult.Passed
   // iterate over all checks, updating the project contents as we go
   for (const [name, check] of Object.entries(checks)) {
     const checkName = name as ProjectRequirement
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-language.ts b/editor/src/core/shared/import/project-health-check/requirements/requirement-language.ts
similarity index 100%
rename from editor/src/core/shared/import/proejct-health-check/requirements/requirement-language.ts
rename to editor/src/core/shared/import/project-health-check/requirements/requirement-language.ts
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-package-json.ts b/editor/src/core/shared/import/project-health-check/requirements/requirement-package-json.ts
similarity index 100%
rename from editor/src/core/shared/import/proejct-health-check/requirements/requirement-package-json.ts
rename to editor/src/core/shared/import/project-health-check/requirements/requirement-package-json.ts
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-react.ts b/editor/src/core/shared/import/project-health-check/requirements/requirement-react.ts
similarity index 100%
rename from editor/src/core/shared/import/proejct-health-check/requirements/requirement-react.ts
rename to editor/src/core/shared/import/project-health-check/requirements/requirement-react.ts
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-server-packages.ts b/editor/src/core/shared/import/project-health-check/requirements/requirement-server-packages.ts
similarity index 100%
rename from editor/src/core/shared/import/proejct-health-check/requirements/requirement-server-packages.ts
rename to editor/src/core/shared/import/project-health-check/requirements/requirement-server-packages.ts
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirement-storyboard.ts b/editor/src/core/shared/import/project-health-check/requirements/requirement-storyboard.ts
similarity index 100%
rename from editor/src/core/shared/import/proejct-health-check/requirements/requirement-storyboard.ts
rename to editor/src/core/shared/import/project-health-check/requirements/requirement-storyboard.ts
diff --git a/editor/src/core/shared/import/proejct-health-check/requirements/requirements.spec.ts b/editor/src/core/shared/import/project-health-check/requirements/requirements.spec.ts
similarity index 100%
rename from editor/src/core/shared/import/proejct-health-check/requirements/requirements.spec.ts
rename to editor/src/core/shared/import/project-health-check/requirements/requirements.spec.ts
diff --git a/editor/src/core/shared/import/proejct-health-check/utopia-requirements-service.ts b/editor/src/core/shared/import/project-health-check/utopia-requirements-service.ts
similarity index 100%
rename from editor/src/core/shared/import/proejct-health-check/utopia-requirements-service.ts
rename to editor/src/core/shared/import/project-health-check/utopia-requirements-service.ts
diff --git a/editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts b/editor/src/core/shared/import/project-health-check/utopia-requirements-types.ts
similarity index 100%
rename from editor/src/core/shared/import/proejct-health-check/utopia-requirements-types.ts
rename to editor/src/core/shared/import/project-health-check/utopia-requirements-types.ts

From 71e3817fbc2efc838979c062f86eb2fd4ca2b936 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Thu, 31 Oct 2024 17:56:12 +0100
Subject: [PATCH 194/272] Disable grid control strategies for components which
 don't support style props (#6610)

**Problem:**
Now it is possible to use the gap and the grid resize controls on
components which do not support style props.

**Fix:**
We somehow have to decide whether a component supports style props or
not. I implemented the following heuristics, but we can improve that
later if necessary:
1. If a component has a descriptor and it allows 'layout-system' section
to be shown then it supports style props.
2. If it doesn't have a descriptor then we check if the component
implementation takes the necessary style props (similarly to the already
existing `targetSupportsPropsSize` function). This returns true when the
component implementation can not be found (if it is an external
component)

Note: When the component does not support the necessary style props:
- I don't show the gap control, but it is just misleading if it is there
- I show the grid resize controls, because they show information
(row/column size), which is meaningful even if the control is not
interactive.
These are just draft solution, so a followup task is necessary to
design/implement the the non-interactive state of the controls

**Commit Details:** (< vv pls delete this section if's not relevant)

-`targetRegisteredStyleControlsOrHonoursStyleProps` is the main function
which decides whether a component supports style props for the actual
control. You can give an inspector section to check (if that is enabled
from the annotation, it returns true), and a list of props (if they are
referred inside the component we return true).

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../strategies/resize-grid-strategy.ts        | 21 +++++-
 .../strategies/set-grid-gap-strategy.tsx      | 26 ++++---
 .../src/components/custom-code/code-file.ts   |  6 +-
 .../store/store-deep-equality-instances.ts    |  4 +-
 .../src/core/model/element-metadata-utils.ts  | 67 ++++++++++++++++++-
 .../src/core/model/element-template-utils.ts  | 40 +++++++++++
 .../property-controls-local.ts                |  4 +-
 7 files changed, 151 insertions(+), 17 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index e3242fdd3f97..4c58e3d97ad9 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -48,6 +48,7 @@ import { setCursorCommand } from '../../commands/set-cursor-command'
 import { CSSCursor } from '../../canvas-types'
 import type { CanvasCommand } from '../../commands/commands'
 import type { Axis } from '../../gap-utils'
+import { getComponentDescriptorForTarget } from '../../../../core/property-controls/property-controls-utils'
 
 export const resizeGridStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -59,6 +60,22 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    selectedElement,
+  )
+  if (selectedElementMetadata == null) {
+    return null
+  }
+
+  const supportsStyleProp = MetadataUtils.targetRegisteredStyleControlsOrHonoursStyleProps(
+    canvasState.projectContents,
+    selectedElementMetadata,
+    canvasState.propertyControlsInfo,
+    'layout-system',
+    ['gridTemplateColumns', 'gridTemplateRows'],
+    'some',
+  )
 
   const isGridCell = MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)
   const isGrid = MetadataUtils.isGridLayoutedContainer(
@@ -94,7 +111,9 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       },
       controlsForGridPlaceholders(gridPath),
     ],
-    fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_AXIS_HANDLE', 1),
+    fitness: supportsStyleProp
+      ? onlyFitWhenDraggingThisControl(interactionSession, 'GRID_AXIS_HANDLE', 1)
+      : 0,
     apply: () => {
       if (
         interactionSession == null ||
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
index efcba9317cb9..742839522e89 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
@@ -44,6 +44,7 @@ import type { GridGapControlProps } from '../../controls/select-mode/grid-gap-co
 import { GridGapControl } from '../../controls/select-mode/grid-gap-control'
 import type { GridControlsProps } from '../../controls/grid-controls-for-strategies'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import { getComponentDescriptorForTarget } from '../../../../core/property-controls/property-controls-utils'
 
 const SetGridGapStrategyId = 'SET_GRID_GAP_STRATEGY'
 
@@ -63,22 +64,31 @@ export const setGridGapStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    selectedElement,
+  )
   if (
-    !MetadataUtils.isGridLayoutedContainer(
-      MetadataUtils.findElementByElementPath(canvasState.startingMetadata, selectedElement),
-    )
+    selectedElementMetadata == null ||
+    !MetadataUtils.isGridLayoutedContainer(selectedElementMetadata)
   ) {
     return null
   }
 
-  const children = recurseIntoChildrenOfMapOrFragment(
-    canvasState.startingMetadata,
-    canvasState.startingAllElementProps,
-    canvasState.startingElementPathTree,
-    selectedElement,
+  const supportsStyleProp = MetadataUtils.targetRegisteredStyleControlsOrHonoursStyleProps(
+    canvasState.projectContents,
+    selectedElementMetadata,
+    canvasState.propertyControlsInfo,
+    'layout-system',
+    ['gap', 'rowGap', 'columnGap'],
+    'some',
   )
+  if (!supportsStyleProp) {
+    return null
+  }
 
   const gridGap = maybeGridGapData(canvasState.startingMetadata, selectedElement)
+
   if (gridGap == null) {
     return null
   }
diff --git a/editor/src/components/custom-code/code-file.ts b/editor/src/components/custom-code/code-file.ts
index db71fa3fa70c..22fda15045d8 100644
--- a/editor/src/components/custom-code/code-file.ts
+++ b/editor/src/components/custom-code/code-file.ts
@@ -154,7 +154,7 @@ export interface ShownInspectorSpec {
   sections: Styling[]
 }
 
-export type TypedInpsectorSpec = { type: 'hidden' } | ShownInspectorSpec
+export type TypedInspectorSpec = { type: 'hidden' } | ShownInspectorSpec
 
 export interface ComponentDescriptor {
   properties: PropertyControls
@@ -163,7 +163,7 @@ export interface ComponentDescriptor {
   variants: ComponentInfo[]
   source: ComponentDescriptorSource
   focus: Focus
-  inspector: TypedInpsectorSpec
+  inspector: TypedInspectorSpec
   emphasis: Emphasis
   icon: Icon
   label: string | null
@@ -187,7 +187,7 @@ export function componentDescriptor(
   preferredChildComponents: Array<PreferredChildComponentDescriptor>,
   source: ComponentDescriptorSource,
   focus: Focus,
-  inspector: TypedInpsectorSpec,
+  inspector: TypedInspectorSpec,
   emphasis: Emphasis,
   icon: Icon,
   label: string | null,
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 8db911028e77..b1b7f7816a3c 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -491,7 +491,7 @@ import type {
   CurriedUtopiaRequireFn,
   PropertyControlsInfo,
   ComponentDescriptorFromDescriptorFile,
-  TypedInpsectorSpec,
+  TypedInspectorSpec,
   ShownInspectorSpec,
   StyleSectionState,
 } from '../../custom-code/code-file'
@@ -3935,7 +3935,7 @@ export function ComponentDescriptorSourceKeepDeepEquality(): KeepDeepEqualityCal
   }
 }
 
-const InspectorSpecKeepDeepEquality: KeepDeepEqualityCall<TypedInpsectorSpec> = (
+const InspectorSpecKeepDeepEquality: KeepDeepEqualityCall<TypedInspectorSpec> = (
   oldValue,
   newValue,
 ) => {
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index 0c5ece97bed1..3c5134804b4b 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -1,5 +1,5 @@
 import * as OPI from 'object-path-immutable'
-import type { Emphasis, FlexLength, Icon, Sides } from 'utopia-api/core'
+import type { Emphasis, FlexLength, Icon, Sides, Styling } from 'utopia-api/core'
 import { sides } from 'utopia-api/core'
 import { getReorderDirection } from '../../components/canvas/controls/select-mode/yoga-utils'
 import { getImageSize, scaleImageDimensions } from '../../components/images'
@@ -113,6 +113,7 @@ import {
   componentUsesProperty,
   findJSXElementChildAtPath,
   elementChildSupportsChildrenAlsoText,
+  componentHonoursStyleProps,
 } from './element-template-utils'
 import {
   isImportedComponent,
@@ -1212,6 +1213,70 @@ export const MetadataUtils = {
       return componentHonoursPropsSize(underlyingComponent)
     }
   },
+  targetHonoursStyleProps(
+    projectContents: ProjectContentTreeRoot,
+    metadata: ElementInstanceMetadata | null,
+    props: Array<string>,
+    everyOrSome: 'every' | 'some',
+  ): boolean {
+    if (metadata == null) {
+      return false
+    }
+    if (
+      isLeft(metadata.element) ||
+      (isRight(metadata.element) && !isJSXElement(metadata.element.value))
+    ) {
+      return false
+    }
+    const underlyingComponent = findUnderlyingTargetComponentImplementationFromImportInfo(
+      projectContents,
+      metadata.importInfo,
+    )
+    if (underlyingComponent == null) {
+      // Could be an external third party component, assuming true for now.
+      return true
+    } else {
+      return componentHonoursStyleProps(underlyingComponent, props, everyOrSome)
+    }
+  },
+  targetRegisteredStyleControlsOrHonoursStyleProps(
+    projectContents: ProjectContentTreeRoot,
+    metadata: ElementInstanceMetadata,
+    propertyControlsInfo: PropertyControlsInfo,
+    inspectorSection: Styling, // if this inspector section is registered then the target honours the style props
+    props: Array<string>,
+    everyOrSome: 'every' | 'some',
+  ): boolean {
+    const inspectorSectionRegistered = (() => {
+      const descriptor = getComponentDescriptorForTarget(
+        { propertyControlsInfo, projectContents },
+        metadata.elementPath,
+      )
+
+      if (descriptor?.inspector == null) {
+        return 'no-annotation'
+      }
+
+      if (
+        descriptor.inspector.type === 'hidden' ||
+        !descriptor.inspector.sections.includes(inspectorSection)
+      ) {
+        return 'registered-to-hide'
+      }
+      return 'registered-to-show'
+    })()
+
+    switch (inspectorSectionRegistered) {
+      case 'registered-to-show': //
+        return true
+      case 'registered-to-hide':
+        return false
+      case 'no-annotation':
+        return this.targetHonoursStyleProps(projectContents, metadata, props, everyOrSome)
+      default:
+        assertNever(inspectorSectionRegistered)
+    }
+  },
   targetHonoursPropsPosition(
     projectContents: ProjectContentTreeRoot,
     metadata: ElementInstanceMetadata | null,
diff --git a/editor/src/core/model/element-template-utils.ts b/editor/src/core/model/element-template-utils.ts
index f5274b447419..1f00ca7c7849 100644
--- a/editor/src/core/model/element-template-utils.ts
+++ b/editor/src/core/model/element-template-utils.ts
@@ -969,6 +969,46 @@ export function componentHonoursPropsSize(component: UtopiaJSXComponent): boolea
   }
 }
 
+export function componentHonoursStyleProps(
+  component: UtopiaJSXComponent,
+  props: Array<string>,
+  everyOrSome: 'every' | 'some',
+): boolean {
+  if (component.params == null) {
+    return false
+  } else {
+    const nonNullParams = component.params
+    function checkElements(rootElement: JSXElementChild): boolean {
+      switch (rootElement.type) {
+        case 'JSX_ELEMENT':
+          if (propsStyleIsSpreadInto(nonNullParams, rootElement.props)) {
+            return true
+          }
+          const styleAttrs = props.map((prop) => ({
+            propName: prop,
+            attr: getJSXAttributesAtPath(rootElement.props, PP.create('style', prop)),
+          }))
+          const filterFn = (styleAttr: { propName: string; attr: GetJSXAttributeResult }) =>
+            propertyComesFromPropsStyle(nonNullParams, styleAttr.attr, styleAttr.propName)
+          switch (everyOrSome) {
+            case 'some':
+              return styleAttrs.some(filterFn)
+            case 'every':
+              return styleAttrs.every(filterFn)
+            default:
+              assertNever(everyOrSome)
+          }
+          break
+        case 'JSX_FRAGMENT':
+          return rootElement.children.every(checkElements)
+        default:
+          return false
+      }
+    }
+    return checkElements(component.rootElement)
+  }
+}
+
 function checkJSReferencesVariable(
   jsExpression: JSExpressionOtherJavaScript,
   variableName: string,
diff --git a/editor/src/core/property-controls/property-controls-local.ts b/editor/src/core/property-controls/property-controls-local.ts
index 3449b3322b0a..44aa40be87cf 100644
--- a/editor/src/core/property-controls/property-controls-local.ts
+++ b/editor/src/core/property-controls/property-controls-local.ts
@@ -43,7 +43,7 @@ import type {
   ComponentDescriptorWithName,
   ComponentInfo,
   PropertyControlsInfo,
-  TypedInpsectorSpec,
+  TypedInspectorSpec,
 } from '../../components/custom-code/code-file'
 import { dependenciesFromPackageJson } from '../../components/editor/npm-dependency/npm-dependency'
 import { parseControlDescription } from './property-controls-parser'
@@ -998,7 +998,7 @@ async function parseComponentVariants(
   return parsedVariants
 }
 
-function parseInspectorSpec(inspector: InspectorSpec | undefined): TypedInpsectorSpec {
+function parseInspectorSpec(inspector: InspectorSpec | undefined): TypedInspectorSpec {
   if (inspector == null) {
     return ComponentDescriptorDefaults.inspector
   }

From 07c6bd84d4c9c029d1ae286d4f3c76cb37fdf41f Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Fri, 1 Nov 2024 12:53:39 +0200
Subject: [PATCH 195/272] feat(import): detect node built-ins (#6609)

This PR adds the ability to detect Node built-ins that are being
imported.

**Notes:**
- We currently detect all imports in project files, without checking if
the importing file is in the import chain of the app itself. This _may_
result in false positives, if one of the files in the project that does
not belong to the app imports a Node module.
- For that reason - currently this only triggers a "warning" and not a
critical error.
- We compare the built-ins that we find with the project dependencies,
in case some of them are shimmed.
- We're using a static list taken from here:
https://github.com/sindresorhus/builtin-modules. We can't use the
package directly since it is an ESM module, and our tests cannot import
it, and in any case all it does is exporting this JSON.

If you clone this branch you can test it using
http://localhost:8000/p?accessLevel=public&clone=liady/utopia-vite-project
- I added an `import * as fs from 'fs'` there to test this
functionality. (don't forget to turn on the `Import Wizard` feature
flag)

<img width="658" alt="image"
src="https://github.com/user-attachments/assets/c4ddedef-d863-45fa-89f6-63c7ee6cd4f4">

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 .../requirements/builtin-modules.json         | 55 +++++++++++++++++++
 .../requirement-server-packages.ts            | 40 +++++++++++++-
 .../requirements/requirements.spec.ts         | 55 +++++++++++++++++++
 3 files changed, 149 insertions(+), 1 deletion(-)
 create mode 100644 editor/src/core/shared/import/project-health-check/requirements/builtin-modules.json

diff --git a/editor/src/core/shared/import/project-health-check/requirements/builtin-modules.json b/editor/src/core/shared/import/project-health-check/requirements/builtin-modules.json
new file mode 100644
index 000000000000..e3bfb90c64a4
--- /dev/null
+++ b/editor/src/core/shared/import/project-health-check/requirements/builtin-modules.json
@@ -0,0 +1,55 @@
+[
+  "assert",
+  "assert/strict",
+  "async_hooks",
+  "buffer",
+  "child_process",
+  "cluster",
+  "console",
+  "constants",
+  "crypto",
+  "dgram",
+  "diagnostics_channel",
+  "dns",
+  "dns/promises",
+  "domain",
+  "events",
+  "fs",
+  "fs/promises",
+  "http",
+  "http2",
+  "https",
+  "inspector",
+  "inspector/promises",
+  "module",
+  "net",
+  "os",
+  "path",
+  "path/posix",
+  "path/win32",
+  "perf_hooks",
+  "process",
+  "punycode",
+  "querystring",
+  "readline",
+  "readline/promises",
+  "repl",
+  "stream",
+  "stream/consumers",
+  "stream/promises",
+  "stream/web",
+  "string_decoder",
+  "timers",
+  "timers/promises",
+  "tls",
+  "trace_events",
+  "tty",
+  "url",
+  "util",
+  "util/types",
+  "v8",
+  "vm",
+  "wasi",
+  "worker_threads",
+  "zlib"
+]
diff --git a/editor/src/core/shared/import/project-health-check/requirements/requirement-server-packages.ts b/editor/src/core/shared/import/project-health-check/requirements/requirement-server-packages.ts
index 7b18d7cf4f03..fa86fcf80da8 100644
--- a/editor/src/core/shared/import/project-health-check/requirements/requirement-server-packages.ts
+++ b/editor/src/core/shared/import/project-health-check/requirements/requirement-server-packages.ts
@@ -4,13 +4,17 @@ import {
   type RequirementCheck,
   type RequirementCheckResult,
 } from '../utopia-requirements-types'
-import { getProjectDependencies } from '../../../../../components/assets'
+import { getProjectDependencies, walkContentsTree } from '../../../../../components/assets'
+import { isParseSuccess, isTextFile } from '../../../../../core/shared/project-file-types'
+import builtinModules from './builtin-modules.json'
 
 const serverPackagesRestrictionList: RegExp[] = [/^next/, /^remix/, /^astro/, /^svelte/]
 
 export default class CheckServerPackages implements RequirementCheck {
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
     const projectDependencies = getProjectDependencies(projectContents) ?? {}
+
+    // check for server packages in dependencies
     const serverPackages = Object.keys(projectDependencies).filter((packageName) =>
       serverPackagesRestrictionList.some((restriction) => restriction.test(packageName)),
     )
@@ -21,9 +25,43 @@ export default class CheckServerPackages implements RequirementCheck {
         resultValue: serverPackages.join(', '),
       }
     }
+
+    // check for node builtins in imports
+    const nodeBuiltins: string[] = []
+    walkContentsTree(projectContents, (fullPath, file) => {
+      if (isTextFile(file)) {
+        const parseResult = file.fileContents.parsed
+        if (isParseSuccess(parseResult)) {
+          for (const importSource of Object.keys(parseResult.imports)) {
+            // if it's a node builtin and not shimmed as a dependency, add it to the list
+            if (isBuiltinModule(importSource) && projectDependencies[importSource] == null) {
+              nodeBuiltins.push(importSource)
+            }
+          }
+        }
+      }
+    })
+    if (nodeBuiltins.length > 0) {
+      return {
+        resolution: RequirementResolutionResult.Partial,
+        resultText: 'Node built-ins found',
+        resultValue: nodeBuiltins.join(', '),
+      }
+    }
     return {
       resolution: RequirementResolutionResult.Passed,
       resultText: 'No server packages found',
     }
   }
 }
+
+const moduleSet = new Set(builtinModules)
+const NODE_PROTOCOL = 'node:'
+function isBuiltinModule(moduleName: string) {
+  let moduleNameWithoutNodeProtocol = moduleName
+  if (moduleName.startsWith(NODE_PROTOCOL)) {
+    moduleNameWithoutNodeProtocol = moduleName.slice(NODE_PROTOCOL.length)
+  }
+
+  return moduleSet.has(moduleNameWithoutNodeProtocol)
+}
diff --git a/editor/src/core/shared/import/project-health-check/requirements/requirements.spec.ts b/editor/src/core/shared/import/project-health-check/requirements/requirements.spec.ts
index 7ad7c0e6dfa1..05635d128861 100644
--- a/editor/src/core/shared/import/project-health-check/requirements/requirements.spec.ts
+++ b/editor/src/core/shared/import/project-health-check/requirements/requirements.spec.ts
@@ -11,6 +11,7 @@ import { DefaultPackageJson } from '../../../../../components/editor/store/edito
 import { getPackageJson } from '../../../../../components/assets'
 import CheckStoryboard from './requirement-storyboard'
 import CheckServerPackages from './requirement-server-packages'
+import { parseProjectContents } from '../../../../../sample-projects/sample-project-utils.test-utils'
 
 describe('requirements checks', () => {
   describe('project language', () => {
@@ -219,5 +220,59 @@ describe('requirements checks', () => {
       const result = check.check(projectContents)
       expect(result.resolution).toBe(RequirementResolutionResult.Critical)
     })
+
+    it('should return partial for a project with node builtins', () => {
+      const check = new CheckServerPackages()
+      const project = simpleDefaultProject({
+        additionalFiles: {
+          '/src/app.js': textFile(
+            textFileContents(
+              `import { readFileSync } from 'fs'
+              import * as crypto from 'node:crypto'`,
+              unparsed,
+              RevisionsState.CodeAhead,
+            ),
+            null,
+            null,
+            0,
+          ),
+        },
+      })
+      const parsedProjectContents = parseProjectContents(project.projectContents)
+      const result = check.check(parsedProjectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Partial)
+      expect(result.resultValue).toBe('fs, node:crypto')
+    })
+
+    it('should return success for a project with node builtins that are shimmed', () => {
+      const check = new CheckServerPackages()
+      const project = simpleDefaultProject({
+        additionalFiles: {
+          '/src/app.js': textFile(
+            textFileContents(
+              `import { readFileSync } from 'fs'`,
+              unparsed,
+              RevisionsState.CodeAhead,
+            ),
+            null,
+            null,
+            0,
+          ),
+          '/package.json': textFile(
+            textFileContents(
+              JSON.stringify({ dependencies: { fs: '1.0.0' } }, null, 2),
+              unparsed,
+              RevisionsState.CodeAhead,
+            ),
+            null,
+            null,
+            0,
+          ),
+        },
+      })
+      const parsedProjectContents = parseProjectContents(project.projectContents)
+      const result = check.check(parsedProjectContents)
+      expect(result.resolution).toBe(RequirementResolutionResult.Passed)
+    })
   })
 })

From 179f48c2e0b2fcac2bfaa0ddfc7f9077a3e86f10 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Sun, 3 Nov 2024 13:28:05 +0200
Subject: [PATCH 196/272] Fix(import): design review (#6611)

Design fixes according to Mckayla's review

light:
<img width="689" alt="image"
src="https://github.com/user-attachments/assets/346c684f-9828-4bff-95cf-a4968808474c">

dark:
<img width="685" alt="image"
src="https://github.com/user-attachments/assets/d9f407c7-1792-49df-a584-5a500a560db1">

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 .../editor/import-wizard/components.tsx       | 72 ++++---------------
 .../editor/import-wizard/import-wizard.tsx    | 37 ++++------
 editor/src/uuiui/styles/theme/dark.ts         |  1 +
 editor/src/uuiui/styles/theme/light.ts        |  1 +
 4 files changed, 27 insertions(+), 84 deletions(-)

diff --git a/editor/src/components/editor/import-wizard/components.tsx b/editor/src/components/editor/import-wizard/components.tsx
index 792cc44f4eaa..ec15c248288c 100644
--- a/editor/src/components/editor/import-wizard/components.tsx
+++ b/editor/src/components/editor/import-wizard/components.tsx
@@ -9,7 +9,7 @@ import type {
 } from '../../../core/shared/import/import-operation-types'
 import { ImportOperationResult } from '../../../core/shared/import/import-operation-types'
 import { assertNever } from '../../../core/shared/utils'
-import { Icons } from '../../../uuiui'
+import { Icn, Icons, useColorTheme } from '../../../uuiui'
 import { GithubSpinner } from '../../../components/navigator/left-pane/github-pane/github-spinner'
 import { RequirementResolutionResult } from '../../../core/shared/import/project-health-check/utopia-requirements-types'
 
@@ -21,11 +21,8 @@ export function OperationLine({ operation }: { operation: ImportOperation }) {
       ? 'running'
       : 'done'
   }, [operation.timeStarted, operation.timeDone])
-
-  const textColor = React.useMemo(
-    () => getTextColor(operationRunningStatus, operation),
-    [operationRunningStatus, operation],
-  )
+  const colorTheme = useColorTheme()
+  const textColor = operationRunningStatus === 'waiting' ? 'gray' : colorTheme.fg0.value
 
   const [childrenShown, serChildrenShown] = React.useState(false)
   const shouldShowChildren = React.useMemo(
@@ -77,7 +74,7 @@ function OperationChildrenList({ operation }: { operation: ImportOperation }) {
       style={{
         display: 'flex',
         flexDirection: 'column',
-        gap: 10,
+        gap: 15,
       }}
     >
       {operation.type === 'refreshDependencies' ? (
@@ -114,14 +111,15 @@ function AggregatedChildrenStatus<T extends ImportOperation>({
   successFn: (operation: T) => boolean
   successTextFn: (successCount: number) => string
 }) {
+  const colorTheme = useColorTheme()
   const doneDependencies = childOperations.filter(successFn)
   const restOfDependencies = childOperations.filter((op) => !successFn(op))
   return (
     <React.Fragment>
       {doneDependencies.length > 0 ? (
         <OperationLineWrapper className='operation-done'>
-          <OperationLineContent textColor='black'>
-            <Icons.Checkmark style={getIconColorStyle(ImportOperationResult.Success)} />
+          <OperationLineContent textColor={colorTheme.fg0.value}>
+            <Icn color='green' type='checkmark' />
             <div>{successTextFn(doneDependencies.length)}</div>
           </OperationLineContent>
         </OperationLineWrapper>
@@ -140,20 +138,16 @@ function OperationIcon({
   runningStatus: 'waiting' | 'running' | 'done'
   result?: ImportOperationResult
 }) {
-  const iconColorStyle = React.useMemo(
-    () => (result != null ? getIconColorStyle(result) : {}),
-    [result],
-  )
   if (runningStatus === 'running') {
     return <GithubSpinner />
   } else if (runningStatus === 'done' && result === 'success') {
-    return <Icons.Checkmark style={iconColorStyle} />
+    return <Icn color='green' type='checkmark' />
   } else if (runningStatus === 'done' && result === 'warn') {
-    return <Icons.WarningTriangle style={iconColorStyle} />
+    return <Icn color='component-orange' type='warningtriangle' category='navigator-element' />
   } else if (runningStatus === 'waiting') {
     return <Icons.Dot />
   } else {
-    return <Icons.Cross style={iconColorStyle} />
+    return <Icn color='error' type='cross' />
   }
 }
 
@@ -164,6 +158,7 @@ function TimeFromInSeconds({
   operation: ImportOperation
   runningStatus: 'waiting' | 'running' | 'done'
 }) {
+  const colorTheme = useColorTheme()
   const [currentTime, setCurrentTime] = React.useState(Date.now())
   React.useEffect(() => {
     const interval = setInterval(() => {
@@ -188,7 +183,7 @@ function TimeFromInSeconds({
     <div
       data-short-time={operationTime < 100}
       style={{
-        color: runningStatus === 'running' ? 'black' : 'gray',
+        color: runningStatus === 'running' ? colorTheme.fg0.value : 'gray',
         fontSize: runningStatus === 'running' ? undefined : 12,
       }}
     >
@@ -212,16 +207,11 @@ function OperationLineWrapper({
       style={{
         display: 'flex',
         flexDirection: 'column',
-        gap: 10,
+        gap: 15,
       }}
       css={{
         '.import-wizard-operation-children > &': {
           paddingLeft: 26,
-          fontSize: 12,
-          img: {
-            width: 12,
-            height: 12,
-          },
         },
         '.import-wizard-operation-children .operation-done [data-short-time=true]': {
           visibility: 'hidden',
@@ -285,39 +275,3 @@ function getImportOperationText(operation: ImportOperation): React.ReactNode {
       assertNever(operation)
   }
 }
-
-function getTextColor(
-  operationRunningStatus: 'waiting' | 'running' | 'done',
-  operation: ImportOperation,
-) {
-  if (operationRunningStatus === 'waiting') {
-    return 'gray'
-  } else {
-    return 'black'
-  }
-}
-
-function getIconColorStyle(result: ImportOperationResult) {
-  // temp solution since we currently only have black icons
-  // https://codepen.io/sosuke/pen/Pjoqqp
-  if (result === ImportOperationResult.Error) {
-    return {
-      // our error red
-      filter:
-        'invert(14%) sepia(99%) saturate(4041%) hue-rotate(328deg) brightness(101%) contrast(115%)',
-    }
-  } else if (result === ImportOperationResult.Warn) {
-    return {
-      // orange
-      filter:
-        'invert(72%) sepia(90%) saturate(3088%) hue-rotate(1deg) brightness(105%) contrast(104%)',
-    }
-  } else if (result === ImportOperationResult.Success) {
-    return {
-      // green
-      filter:
-        'invert(72%) sepia(60%) saturate(3628%) hue-rotate(126deg) brightness(104%) contrast(76%)',
-    }
-  }
-  return {}
-}
diff --git a/editor/src/components/editor/import-wizard/import-wizard.tsx b/editor/src/components/editor/import-wizard/import-wizard.tsx
index ca6282300b4d..1e212a88cdca 100644
--- a/editor/src/components/editor/import-wizard/import-wizard.tsx
+++ b/editor/src/components/editor/import-wizard/import-wizard.tsx
@@ -82,10 +82,11 @@ export const ImportWizard = React.memo(() => {
         <div
           style={{
             background: colorTheme.bg0.value,
+            color: colorTheme.fg0.value,
             boxShadow: UtopiaStyles.popup.boxShadow,
             borderRadius: 10,
             width: 600,
-            height: 500,
+            height: 420,
             position: 'relative',
             display: 'flex',
             flexDirection: 'column',
@@ -105,18 +106,18 @@ export const ImportWizard = React.memo(() => {
               width: '100%',
             }}
           >
-            <div css={{ fontSize: 16, fontWeight: 400 }}>Project Import</div>
+            <div css={{ fontSize: 16, fontWeight: 400 }}>Loading Project</div>
             {when(
-              totalImportResult != null,
+              totalImportResult == null,
               <Button
                 highlight
                 style={{
-                  width: 22,
-                  height: 22,
+                  padding: 15,
+                  color: colorTheme.fg6.value,
                 }}
                 onClick={handleDismiss}
               >
-                <Icons.Cross />
+                Cancel
               </Button>,
             )}
           </FlexRow>
@@ -157,26 +158,13 @@ export const ImportWizard = React.memo(() => {
 ImportWizard.displayName = 'ImportWizard'
 
 function ActionButtons({ importResult }: { importResult: ImportOperationResult | null }) {
+  const colorTheme = useColorTheme()
   const textColor = React.useMemo(() => {
     switch (importResult) {
       case ImportOperationResult.Success:
         return 'green'
       case ImportOperationResult.Warn:
-        return 'orange'
-      case ImportOperationResult.Error:
-        return 'var(--utopitheme-githubIndicatorFailed)'
-      case null:
-        return 'black'
-      default:
-        assertNever(importResult)
-    }
-  }, [importResult])
-  const buttonColor = React.useMemo(() => {
-    switch (importResult) {
-      case ImportOperationResult.Success:
-        return 'var(--utopitheme-green)'
-      case ImportOperationResult.Warn:
-        return 'var(--utopitheme-githubMUDModified)'
+        return colorTheme.warningOrange.value
       case ImportOperationResult.Error:
         return 'var(--utopitheme-githubIndicatorFailed)'
       case null:
@@ -184,14 +172,13 @@ function ActionButtons({ importResult }: { importResult: ImportOperationResult |
       default:
         assertNever(importResult)
     }
-  }, [importResult])
+  }, [colorTheme.warningOrange.value, importResult])
   const textStyle = {
     color: textColor,
-    fontSize: 16,
+    fontSize: 14,
   }
   const buttonStyle = {
-    backgroundColor: buttonColor,
-    color: 'white',
+    backgroundColor: colorTheme.buttonBackground.value,
     padding: 20,
     fontSize: 14,
     cursor: 'pointer',
diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
index a20d92defc3b..bc91e13d8e91 100644
--- a/editor/src/uuiui/styles/theme/dark.ts
+++ b/editor/src/uuiui/styles/theme/dark.ts
@@ -111,6 +111,7 @@ const darkErrorStates = {
   // TODO vv only used by image-thumbnail-control, consider removing
   warningBgTranslucent: createUtopiColor('rgba(250, 94, 0, 0.2)'),
   warningBgSolid: createUtopiColor('rgba(252,142,77,1)'),
+  warningOrange: createUtopiColor('#FFB751'),
 }
 
 // TEMP colors with preset opacity pulled from within the app
diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts
index 6a16fac353c8..2709b29c7a0a 100644
--- a/editor/src/uuiui/styles/theme/light.ts
+++ b/editor/src/uuiui/styles/theme/light.ts
@@ -111,6 +111,7 @@ const lightErrorStates = {
   // TODO vv only used by image-thumbnail-control, consider removing
   warningBgTranslucent: createUtopiColor('rgba(250, 94, 0, 0.2)'),
   warningBgSolid: createUtopiColor('rgba(252,142,77,1)'),
+  warningOrange: createUtopiColor('#FF8A44'),
 }
 
 // TEMP colors with preset opacity pulled from within the app

From 2a1450fc3ce174523572b8acb10707e592140466 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Mon, 4 Nov 2024 10:35:03 +0000
Subject: [PATCH 197/272] fix(editor) Restore Toast Renderer (#6613)

- Readded `ToastRenderer` to `CanvasFloatingToolbars`.
---
 editor/src/components/canvas/canvas-floating-toolbars.tsx | 4 ++++
 editor/src/components/editor/editor-component.tsx         | 1 +
 2 files changed, 5 insertions(+)

diff --git a/editor/src/components/canvas/canvas-floating-toolbars.tsx b/editor/src/components/canvas/canvas-floating-toolbars.tsx
index 87e1e7041f26..938290b89427 100644
--- a/editor/src/components/canvas/canvas-floating-toolbars.tsx
+++ b/editor/src/components/canvas/canvas-floating-toolbars.tsx
@@ -6,6 +6,7 @@ import { ErrorOverlayComponent } from './canvas-error-overlay'
 import { SafeModeErrorOverlay } from './canvas-wrapper-component'
 import { CanvasStrategyPicker } from './controls/select-mode/canvas-strategy-picker'
 import { TestMenu } from '../titlebar/test-menu'
+import { ToastRenderer } from '../editor/editor-component'
 
 export const CanvasFloatingToolbars = React.memo((props: { style: React.CSSProperties }) => {
   const safeMode = useEditorState(
@@ -43,6 +44,9 @@ export const CanvasFloatingToolbars = React.memo((props: { style: React.CSSPrope
           <CanvasStrategyPicker />
         </FlexRow>
       </FlexRow>
+      <FlexRow style={{ marginTop: 'auto', marginBottom: '6.5px' }}>
+        <ToastRenderer />
+      </FlexRow>
       {/* The error overlays are deliberately the last here so they hide other canvas UI, except the test menu */}
       {safeMode ? <SafeModeErrorOverlay /> : <ErrorOverlayComponent />}
       <TestMenu />
diff --git a/editor/src/components/editor/editor-component.tsx b/editor/src/components/editor/editor-component.tsx
index c7bcd6d1cbe1..a712edca6ee0 100644
--- a/editor/src/components/editor/editor-component.tsx
+++ b/editor/src/components/editor/editor-component.tsx
@@ -645,6 +645,7 @@ export const ToastRenderer = React.memo(() => {
   return (
     <FlexColumn
       key={'toast-stack'}
+      data-testid={'toast-stack'}
       style={{
         zIndex: 100,
         gap: 10,

From d5006bf97b597415fd4b32f775a3aed082a02cd3 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Mon, 4 Nov 2024 10:44:37 +0000
Subject: [PATCH 198/272] fix(editor) Do Not Insert In Progress Insertion
 (#6593)

- `resetStateOnBlur` now clears the interaction session without applying
changes and resets the editor mode to select mode.
---
 editor/src/templates/editor.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index c31c2a933d5d..74de72b62d77 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -135,6 +135,7 @@ import { omitWithPredicate } from '../core/shared/object-utils'
 import { getParserWorkerCount } from '../core/workers/common/concurrency-utils'
 import { canMeasurePerformance } from '../core/performance/performance-utils'
 import { getChildGroupsForNonGroupParents } from '../components/canvas/canvas-strategies/strategies/fragment-like-helpers'
+import { EditorModes } from '../components/editor/editor-modes'
 
 if (PROBABLY_ELECTRON) {
   let { webFrame } = requireElectron()
@@ -412,7 +413,8 @@ export class Editor {
     this.boundDispatch(
       [
         EditorActions.clearHighlightedViews(),
-        CanvasActions.clearInteractionSession(true),
+        CanvasActions.clearInteractionSession(false),
+        EditorActions.switchEditorMode(EditorModes.selectMode(null, false, 'none')),
         EditorActions.updateKeys({}),
         EditorActions.closePopup(),
         EditorActions.clearPostActionData(),

From 03865fc18a97a04789eaf77179f28908060d6738 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Tue, 5 Nov 2024 17:52:05 +0200
Subject: [PATCH 199/272] feat(import): allow continuing the import after an
 error (#6614)

This PR adds the ability to control the import process after an error:
1. Import a different project
2. Decide to continue anyway (for example to correct it using our
editor).
This PR distinguishes between an `Error` (that can be continued) and a
`Critical Error` (for example a non-existent repo) - that we cannot
recover from.

**PR details:**
1. In
[editor/src/core/shared/github/operations/load-branch.ts](https://github.com/concrete-utopia/utopia/pull/6614/files#diff-3c1474cac72b0e757d951539630bd72175135c05eddbff91d9f10639d2796440)
this PR adds the ability to stop before dependencies fetching and resume
afterwards
2. In
[editor/src/components/editor/import-wizard/import-wizard.tsx](https://github.com/concrete-utopia/utopia/pull/6614/files#diff-a1ec93eec4b0720f01ff6ec77bb4efb6cc3ac0ba4297d3fe7bb77049c601ca94)
this PR adds the UI for displaying the correct status/buttons according
to the current import state.
3. The rest of the changes are mostly actions/state changes.


For example this flow:
1. Importing a non-existing repo (critical error)
2. Then importing a project with errors (TS/server packages, etc),
choosing to continue importing
3. Deciding to import a different project - which is a success

<video
src="https://github.com/user-attachments/assets/39eaeedd-14fd-4819-b590-39a92629ad8e"></video>

Current design:
<img width="693" alt="image"
src="https://github.com/user-attachments/assets/a609068f-dece-4448-a31d-c266969a6341">

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/components/editor/action-types.ts  |   7 +
 .../editor/actions/action-creators.ts         |   9 ++
 .../components/editor/actions/action-utils.ts |   1 +
 .../src/components/editor/actions/actions.tsx |  16 +-
 .../editor/import-wizard/components.tsx       |  39 +++--
 .../editor/import-wizard/import-wizard.tsx    | 144 ++++++++++++------
 .../components/editor/store/editor-state.ts   |  16 +-
 .../components/editor/store/editor-update.tsx |   2 +
 .../store/store-deep-equality-instances.ts    |  23 ++-
 .../store/store-hook-substore-helpers.ts      |   3 +-
 .../editor/store/store-hook-substore-types.ts |   2 +-
 .../github/github-repository-clone-flow.tsx   |  17 ++-
 .../shared/github/operations/load-branch.ts   |  66 +++++---
 .../shared/import/import-operation-service.ts |  49 +++++-
 .../shared/import/import-operation-types.ts   |  38 ++++-
 editor/src/utils/feature-switches.ts          |   2 +-
 16 files changed, 333 insertions(+), 101 deletions(-)

diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts
index b00f6ce2d31b..552ecdf9b594 100644
--- a/editor/src/components/editor/action-types.ts
+++ b/editor/src/components/editor/action-types.ts
@@ -90,6 +90,7 @@ import { assertNever } from '../../core/shared/utils'
 import type {
   ImportOperation,
   ImportOperationAction,
+  ImportStatus,
 } from '../../core/shared/import/import-operation-types'
 import type { ProjectRequirements } from '../../core/shared/import/project-health-check/utopia-requirements-types'
 export { isLoggedIn, loggedInUser, notLoggedIn } from '../../common/user'
@@ -1008,6 +1009,11 @@ export interface UpdateImportOperations {
   type: ImportOperationAction
 }
 
+export interface UpdateImportStatus {
+  action: 'UPDATE_IMPORT_STATUS'
+  importStatus: ImportStatus
+}
+
 export interface UpdateProjectRequirements {
   action: 'UPDATE_PROJECT_REQUIREMENTS'
   requirements: Partial<ProjectRequirements>
@@ -1376,6 +1382,7 @@ export type EditorAction =
   | SetImageDragSessionState
   | UpdateGithubOperations
   | UpdateImportOperations
+  | UpdateImportStatus
   | UpdateProjectRequirements
   | SetImportWizardOpen
   | UpdateBranchContents
diff --git a/editor/src/components/editor/actions/action-creators.ts b/editor/src/components/editor/actions/action-creators.ts
index 31db2ce322e9..a8c9383b9f1a 100644
--- a/editor/src/components/editor/actions/action-creators.ts
+++ b/editor/src/components/editor/actions/action-creators.ts
@@ -240,6 +240,7 @@ import type {
   SetImportWizardOpen,
   UpdateImportOperations,
   UpdateProjectRequirements,
+  UpdateImportStatus,
 } from '../action-types'
 import type { InsertionSubjectWrapper, Mode } from '../editor-modes'
 import { EditorModes, insertionSubject } from '../editor-modes'
@@ -274,6 +275,7 @@ import type { ElementPathTrees } from '../../../core/shared/element-path-tree'
 import type {
   ImportOperation,
   ImportOperationAction,
+  ImportStatus,
 } from '../../../core/shared/import/import-operation-types'
 import type { ProjectRequirements } from '../../../core/shared/import/project-health-check/utopia-requirements-types'
 
@@ -1610,6 +1612,13 @@ export function updateImportOperations(
   }
 }
 
+export function updateImportStatus(importStatus: ImportStatus): UpdateImportStatus {
+  return {
+    action: 'UPDATE_IMPORT_STATUS',
+    importStatus: importStatus,
+  }
+}
+
 export function updateProjectRequirements(
   requirements: Partial<ProjectRequirements>,
 ): UpdateProjectRequirements {
diff --git a/editor/src/components/editor/actions/action-utils.ts b/editor/src/components/editor/actions/action-utils.ts
index 21bf6e0852ba..aeffe3713f27 100644
--- a/editor/src/components/editor/actions/action-utils.ts
+++ b/editor/src/components/editor/actions/action-utils.ts
@@ -141,6 +141,7 @@ export function isTransientAction(action: EditorAction): boolean {
     case 'SET_ERROR_BOUNDARY_HANDLING':
     case 'SET_IMPORT_WIZARD_OPEN':
     case 'UPDATE_IMPORT_OPERATIONS':
+    case 'UPDATE_IMPORT_STATUS':
     case 'UPDATE_PROJECT_REQUIREMENTS':
       return true
 
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index 5b2d20b462bf..5bbbe2ef3620 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -355,6 +355,7 @@ import type {
   SetImportWizardOpen,
   UpdateImportOperations,
   UpdateProjectRequirements,
+  UpdateImportStatus,
 } from '../action-types'
 import { isAlignment, isLoggedIn } from '../action-types'
 import type { Mode } from '../editor-modes'
@@ -1034,7 +1035,7 @@ export function restoreEditorState(
     githubSettings: currentEditor.githubSettings,
     imageDragSessionState: currentEditor.imageDragSessionState,
     githubOperations: currentEditor.githubOperations,
-    importOperations: currentEditor.importOperations,
+    importState: currentEditor.importState,
     projectRequirements: currentEditor.projectRequirements,
     importWizardOpen: currentEditor.importWizardOpen,
     branchOriginContents: currentEditor.branchOriginContents,
@@ -2178,13 +2179,22 @@ export const UPDATE_FNS = {
   },
   UPDATE_IMPORT_OPERATIONS: (action: UpdateImportOperations, editor: EditorModel): EditorModel => {
     const resultImportOperations = getUpdateOperationResult(
-      editor.importOperations,
+      editor.importState.importOperations,
       action.operations,
       action.type,
     )
     return {
       ...editor,
-      importOperations: resultImportOperations,
+      importState: { ...editor.importState, importOperations: resultImportOperations },
+    }
+  },
+  UPDATE_IMPORT_STATUS: (action: UpdateImportStatus, editor: EditorModel): EditorModel => {
+    return {
+      ...editor,
+      importState: {
+        ...editor.importState,
+        importStatus: action.importStatus,
+      },
     }
   },
   UPDATE_PROJECT_REQUIREMENTS: (
diff --git a/editor/src/components/editor/import-wizard/components.tsx b/editor/src/components/editor/import-wizard/components.tsx
index ec15c248288c..e086e93771fa 100644
--- a/editor/src/components/editor/import-wizard/components.tsx
+++ b/editor/src/components/editor/import-wizard/components.tsx
@@ -15,11 +15,10 @@ import { RequirementResolutionResult } from '../../../core/shared/import/project
 
 export function OperationLine({ operation }: { operation: ImportOperation }) {
   const operationRunningStatus = React.useMemo(() => {
-    return operation.timeStarted == null
-      ? 'waiting'
-      : operation.timeDone == null
-      ? 'running'
-      : 'done'
+    if (operation.timeDone != null) {
+      return 'done'
+    }
+    return operation.timeStarted == null ? 'waiting' : 'running'
   }, [operation.timeStarted, operation.timeDone])
   const colorTheme = useColorTheme()
   const textColor = operationRunningStatus === 'waiting' ? 'gray' : colorTheme.fg0.value
@@ -29,7 +28,7 @@ export function OperationLine({ operation }: { operation: ImportOperation }) {
     () =>
       childrenShown ||
       operation.timeDone == null ||
-      operation.result == ImportOperationResult.Error,
+      operation.result != ImportOperationResult.Success,
     [childrenShown, operation.timeDone, operation.result],
   )
   const hasChildren = React.useMemo(
@@ -253,14 +252,26 @@ function getImportOperationText(operation: ImportOperation): React.ReactNode {
   }
   switch (operation.type) {
     case 'loadBranch':
-      return (
-        <span>
-          Loading branch{' '}
-          <strong>
-            {operation.githubRepo?.owner}/{operation.githubRepo?.repository}@{operation.branchName}
-          </strong>
-        </span>
-      )
+      if (operation.branchName != null) {
+        return (
+          <span>
+            Loading branch{' '}
+            <strong>
+              {operation.githubRepo?.owner}/{operation.githubRepo?.repository}@
+              {operation.branchName}
+            </strong>
+          </span>
+        )
+      } else {
+        return (
+          <span>
+            Loading repository{' '}
+            <strong>
+              {operation.githubRepo?.owner}/{operation.githubRepo?.repository}
+            </strong>
+          </span>
+        )
+      }
     case 'fetchDependency':
       return `Fetching ${operation.dependencyName}@${operation.dependencyVersion}`
     case 'parseFiles':
diff --git a/editor/src/components/editor/import-wizard/import-wizard.tsx b/editor/src/components/editor/import-wizard/import-wizard.tsx
index 1e212a88cdca..e1a38c8e92d4 100644
--- a/editor/src/components/editor/import-wizard/import-wizard.tsx
+++ b/editor/src/components/editor/import-wizard/import-wizard.tsx
@@ -3,14 +3,25 @@
 import React from 'react'
 import { jsx } from '@emotion/react'
 import { getProjectID } from '../../../common/env-vars'
-import { Button, FlexRow, Icons, useColorTheme, UtopiaStyles } from '../../../uuiui'
+import { Button, FlexRow, useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useEditorState, Substores } from '../store/store-hook'
-import { when } from '../../../utils/react-conditionals'
-import { hideImportWizard } from '../../../core/shared/import/import-operation-service'
+import { unless, when } from '../../../utils/react-conditionals'
+import {
+  getTotalImportStatusAndResult,
+  hideImportWizard,
+  updateProjectImportStatus,
+} from '../../../core/shared/import/import-operation-service'
 import { OperationLine } from './components'
+import type { TotalImportResult } from '../../../core/shared/import/import-operation-types'
 import { ImportOperationResult } from '../../../core/shared/import/import-operation-types'
 import { assertNever } from '../../../core/shared/utils'
 import { useDispatch } from '../store/dispatch-context'
+import {
+  setImportWizardOpen,
+  setLeftMenuTab,
+  updateGithubSettings,
+} from '../actions/action-creators'
+import { emptyGithubSettings, LeftMenuTab } from '../store/editor-state'
 
 export const ImportWizard = React.memo(() => {
   const colorTheme = useColorTheme()
@@ -22,12 +33,14 @@ export const ImportWizard = React.memo(() => {
     'ImportWizard importWizardOpen',
   )
 
-  const operations = useEditorState(
+  const importState = useEditorState(
     Substores.github,
-    (store) => store.editor.importOperations,
-    'ImportWizard operations',
+    (store) => store.editor.importState,
+    'ImportWizard importState',
   )
 
+  const operations = importState.importOperations
+
   const dispatch = useDispatch()
 
   const handleDismiss = React.useCallback(() => {
@@ -38,25 +51,10 @@ export const ImportWizard = React.memo(() => {
     e.stopPropagation()
   }, [])
 
-  const totalImportResult: ImportOperationResult | null = React.useMemo(() => {
-    let result: ImportOperationResult = ImportOperationResult.Success
-    for (const operation of operations) {
-      // if one of the operations is still running, we don't know the total result yet
-      if (operation.timeDone == null || operation.result == null) {
-        return null
-      }
-      // if any operation is an error, the total result is an error
-      if (operation.result == ImportOperationResult.Error) {
-        return ImportOperationResult.Error
-      }
-      // if any operation is at least a warn, the total result is a warn,
-      // but we also need to check if there are any errors
-      if (operation.result == ImportOperationResult.Warn) {
-        result = ImportOperationResult.Warn
-      }
-    }
-    return result
-  }, [operations])
+  const totalImportResult: TotalImportResult = React.useMemo(
+    () => getTotalImportStatusAndResult(importState),
+    [importState],
+  )
 
   if (projectId == null) {
     return null
@@ -86,12 +84,12 @@ export const ImportWizard = React.memo(() => {
             boxShadow: UtopiaStyles.popup.boxShadow,
             borderRadius: 10,
             width: 600,
-            height: 420,
+            height: 450,
             position: 'relative',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
-            fontSize: '14px',
+            fontSize: '13px',
             lineHeight: 'normal',
             letterSpacing: 'normal',
             padding: 20,
@@ -104,11 +102,13 @@ export const ImportWizard = React.memo(() => {
             css={{
               justifyContent: 'space-between',
               width: '100%',
+              height: '30px',
+              flex: 'none',
             }}
           >
             <div css={{ fontSize: 16, fontWeight: 400 }}>Loading Project</div>
             {when(
-              totalImportResult == null,
+              totalImportResult.importStatus.status === 'in-progress',
               <Button
                 highlight
                 style={{
@@ -146,6 +146,7 @@ export const ImportWizard = React.memo(() => {
               alignItems: 'center',
               width: '100%',
               marginTop: 20,
+              gap: 10,
             }}
           >
             <ActionButtons importResult={totalImportResult} />
@@ -157,22 +158,50 @@ export const ImportWizard = React.memo(() => {
 })
 ImportWizard.displayName = 'ImportWizard'
 
-function ActionButtons({ importResult }: { importResult: ImportOperationResult | null }) {
+function ActionButtons({ importResult }: { importResult: TotalImportResult }) {
   const colorTheme = useColorTheme()
+  const dispatch = useDispatch()
+  const result = importResult.result
   const textColor = React.useMemo(() => {
-    switch (importResult) {
+    switch (result) {
       case ImportOperationResult.Success:
-        return 'green'
+        return colorTheme.green.value
       case ImportOperationResult.Warn:
         return colorTheme.warningOrange.value
       case ImportOperationResult.Error:
-        return 'var(--utopitheme-githubIndicatorFailed)'
+        return colorTheme.error.value
+      case ImportOperationResult.CriticalError:
+        return colorTheme.error.value
       case null:
-        return 'black'
+        return colorTheme.fg0.value
       default:
-        assertNever(importResult)
+        assertNever(result)
     }
-  }, [colorTheme.warningOrange.value, importResult])
+  }, [colorTheme, result])
+  const hideWizard = React.useCallback(() => {
+    hideImportWizard(dispatch)
+  }, [dispatch])
+  const continueAnyway = React.useCallback(() => {
+    if (importResult.importStatus.status === 'done') {
+      hideWizard()
+    }
+    if (importResult.importStatus.status === 'paused') {
+      updateProjectImportStatus(dispatch, {
+        status: 'in-progress',
+      })
+      importResult.importStatus.onResume()
+    }
+  }, [dispatch, hideWizard, importResult.importStatus])
+  const importADifferentProject = React.useCallback(() => {
+    dispatch(
+      [
+        setImportWizardOpen(false),
+        setLeftMenuTab(LeftMenuTab.Github),
+        updateGithubSettings(emptyGithubSettings()),
+      ],
+      'everyone',
+    )
+  }, [dispatch])
   const textStyle = {
     color: textColor,
     fontSize: 14,
@@ -183,11 +212,13 @@ function ActionButtons({ importResult }: { importResult: ImportOperationResult |
     fontSize: 14,
     cursor: 'pointer',
   }
-  const dispatch = useDispatch()
-  const hideWizard = React.useCallback(() => {
-    hideImportWizard(dispatch)
-  }, [dispatch])
-  if (importResult == ImportOperationResult.Success) {
+  if (
+    importResult.importStatus.status === 'in-progress' ||
+    importResult.importStatus.status === 'not-started'
+  ) {
+    return null
+  }
+  if (importResult.result == ImportOperationResult.Success) {
     return (
       <React.Fragment>
         <div style={textStyle}>Project Imported Successfully</div>
@@ -197,21 +228,44 @@ function ActionButtons({ importResult }: { importResult: ImportOperationResult |
       </React.Fragment>
     )
   }
-  if (importResult == ImportOperationResult.Warn) {
+  if (importResult.result == ImportOperationResult.Warn) {
     return (
       <React.Fragment>
         <div style={textStyle}>Project Imported With Warnings</div>
         <Button onClick={hideWizard} style={buttonStyle}>
-          Continue
+          Continue To Editor
         </Button>
       </React.Fragment>
     )
   }
-  if (importResult == ImportOperationResult.Error) {
+  if (
+    importResult.result == ImportOperationResult.Error ||
+    importResult.result == ImportOperationResult.CriticalError
+  ) {
     return (
       <React.Fragment>
-        <div style={textStyle}>Error Importing Project</div>
-        <Button style={buttonStyle}>Import A Different Project</Button>
+        <div style={textStyle}>
+          {importResult.importStatus.status !== 'done' ||
+          importResult.result === ImportOperationResult.CriticalError
+            ? 'Error Importing Project'
+            : 'Project Imported With Errors'}
+        </div>
+        <Button style={{ ...buttonStyle, marginLeft: 'auto' }} onClick={importADifferentProject}>
+          Import A Different Project
+        </Button>
+        {unless(
+          importResult.result == ImportOperationResult.CriticalError,
+          <Button
+            style={{
+              cursor: 'pointer',
+            }}
+            onClick={continueAnyway}
+          >
+            {importResult.importStatus.status === 'done'
+              ? 'Continue To Editor'
+              : 'Continue Importing'}
+          </Button>,
+        )}
       </React.Fragment>
     )
   }
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index 233bf98cf6d4..9bd727ec1d77 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -189,7 +189,11 @@ import type { OnlineState } from '../online-status'
 import type { NavigatorRow } from '../../navigator/navigator-row'
 import type { FancyError } from '../../../core/shared/code-exec-utils'
 import type { GridCellCoordinates } from '../../canvas/canvas-strategies/strategies/grid-cell-bounds'
-import type { ImportOperation } from '../../../core/shared/import/import-operation-types'
+import {
+  emptyImportState,
+  type ImportOperation,
+  type ImportState,
+} from '../../../core/shared/import/import-operation-types'
 import {
   emptyProjectRequirements,
   type ProjectRequirements,
@@ -1457,7 +1461,7 @@ export interface EditorState {
   githubSettings: ProjectGithubSettings
   imageDragSessionState: ImageDragSessionState
   githubOperations: Array<GithubOperation>
-  importOperations: Array<ImportOperation>
+  importState: ImportState
   projectRequirements: ProjectRequirements
   importWizardOpen: boolean
   githubData: GithubData
@@ -1543,7 +1547,7 @@ export function editorState(
   githubSettings: ProjectGithubSettings,
   imageDragSessionState: ImageDragSessionState,
   githubOperations: Array<GithubOperation>,
-  importOperations: Array<ImportOperation>,
+  importState: ImportState,
   importWizardOpen: boolean,
   projectRequirements: ProjectRequirements,
   branchOriginContents: ProjectContentTreeRoot | null,
@@ -1630,7 +1634,7 @@ export function editorState(
     githubSettings: githubSettings,
     imageDragSessionState: imageDragSessionState,
     githubOperations: githubOperations,
-    importOperations: importOperations,
+    importState: importState,
     importWizardOpen: importWizardOpen,
     projectRequirements: projectRequirements,
     githubData: githubData,
@@ -2710,7 +2714,7 @@ export function createEditorState(dispatch: EditorDispatch): EditorState {
     githubSettings: emptyGithubSettings(),
     imageDragSessionState: notDragging(),
     githubOperations: [],
-    importOperations: [],
+    importState: emptyImportState(),
     importWizardOpen: false,
     projectRequirements: emptyProjectRequirements(),
     branchOriginContents: null,
@@ -3080,7 +3084,7 @@ export function editorModelFromPersistentModel(
     githubSettings: persistentModel.githubSettings,
     imageDragSessionState: notDragging(),
     githubOperations: [],
-    importOperations: [],
+    importState: emptyImportState(),
     importWizardOpen: false,
     projectRequirements: emptyProjectRequirements(),
     refreshingDependencies: false,
diff --git a/editor/src/components/editor/store/editor-update.tsx b/editor/src/components/editor/store/editor-update.tsx
index 2c7ded3d89bc..a7782b72af78 100644
--- a/editor/src/components/editor/store/editor-update.tsx
+++ b/editor/src/components/editor/store/editor-update.tsx
@@ -222,6 +222,8 @@ export function runSimpleLocalEditorAction(
       return UPDATE_FNS.UPDATE_GITHUB_OPERATIONS(action, state)
     case 'UPDATE_IMPORT_OPERATIONS':
       return UPDATE_FNS.UPDATE_IMPORT_OPERATIONS(action, state)
+    case 'UPDATE_IMPORT_STATUS':
+      return UPDATE_FNS.UPDATE_IMPORT_STATUS(action, state)
     case 'SET_IMPORT_WIZARD_OPEN':
       return UPDATE_FNS.SET_IMPORT_WIZARD_OPEN(action, state)
     case 'UPDATE_PROJECT_REQUIREMENTS':
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index b1b7f7816a3c..6c039e513818 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -643,7 +643,11 @@ import type {
 } from '../../../core/property-controls/component-descriptor-parser'
 import type { Axis } from '../../../components/canvas/gap-utils'
 import type { GridCellCoordinates } from '../../canvas/canvas-strategies/strategies/grid-cell-bounds'
-import type { ImportOperation } from '../../../core/shared/import/import-operation-types'
+import {
+  newImportState,
+  type ImportOperation,
+  type ImportState,
+} from '../../../core/shared/import/import-operation-types'
 import type {
   ProjectRequirements,
   RequirementResolution,
@@ -4904,6 +4908,14 @@ export const GithubOperationKeepDeepEquality: KeepDeepEqualityCall<GithubOperati
 export const GithubOperationsKeepDeepEquality: KeepDeepEqualityCall<Array<GithubOperation>> =
   arrayDeepEquality(GithubOperationKeepDeepEquality)
 
+export const ImportStateKeepDeepEquality: KeepDeepEqualityCall<ImportState> = combine2EqualityCalls(
+  (importState) => importState.importStatus,
+  createCallWithTripleEquals(),
+  (importState) => importState.importOperations,
+  arrayDeepEquality(ImportOperationKeepDeepEquality),
+  newImportState,
+)
+
 export const ColorSwatchDeepEquality: KeepDeepEqualityCall<ColorSwatch> = combine2EqualityCalls(
   (c) => c.id,
   StringKeepDeepEquality,
@@ -5434,10 +5446,7 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
     newValue.githubOperations,
   )
 
-  const importOperationsResults = arrayDeepEquality(ImportOperationKeepDeepEquality)(
-    oldValue.importOperations,
-    newValue.importOperations,
-  )
+  const importStateResults = ImportStateKeepDeepEquality(oldValue.importState, newValue.importState)
 
   const importWizardOpenResults = BooleanKeepDeepEquality(
     oldValue.importWizardOpen,
@@ -5570,7 +5579,7 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
     githubSettingsResults.areEqual &&
     imageDragSessionStateEqual.areEqual &&
     githubOperationsResults.areEqual &&
-    importOperationsResults.areEqual &&
+    importStateResults.areEqual &&
     importWizardOpenResults.areEqual &&
     projectRequirementsResults.areEqual &&
     branchContentsResults.areEqual &&
@@ -5659,7 +5668,7 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
       githubSettingsResults.value,
       imageDragSessionStateEqual.value,
       githubOperationsResults.value,
-      importOperationsResults.value,
+      importStateResults.value,
       importWizardOpenResults.value,
       projectRequirementsResults.value,
       branchContentsResults.value,
diff --git a/editor/src/components/editor/store/store-hook-substore-helpers.ts b/editor/src/components/editor/store/store-hook-substore-helpers.ts
index 8d985eccca1d..94249fa36087 100644
--- a/editor/src/components/editor/store/store-hook-substore-helpers.ts
+++ b/editor/src/components/editor/store/store-hook-substore-helpers.ts
@@ -1,5 +1,6 @@
 import { type EditorState } from './editor-state'
 import { emptyProjectRequirements } from '../../../core/shared/import/project-health-check/utopia-requirements-types'
+import { emptyImportState } from '../../../core/shared/import/import-operation-types'
 
 export const EmptyEditorStateForKeysOnly: EditorState = {
   id: null,
@@ -158,7 +159,7 @@ export const EmptyEditorStateForKeysOnly: EditorState = {
   githubSettings: null as any,
   imageDragSessionState: null as any,
   githubOperations: [],
-  importOperations: [],
+  importState: emptyImportState(),
   importWizardOpen: false,
   projectRequirements: emptyProjectRequirements(),
   branchOriginContents: null,
diff --git a/editor/src/components/editor/store/store-hook-substore-types.ts b/editor/src/components/editor/store/store-hook-substore-types.ts
index b08ce4a6da76..178ab22a95d2 100644
--- a/editor/src/components/editor/store/store-hook-substore-types.ts
+++ b/editor/src/components/editor/store/store-hook-substore-types.ts
@@ -178,7 +178,7 @@ export const githubSubstateKeys = [
   'githubSettings',
   'githubOperations',
   'githubData',
-  'importOperations',
+  'importState',
   'projectRequirements',
 ] as const
 export const emptyGithubSubstate = {
diff --git a/editor/src/components/github/github-repository-clone-flow.tsx b/editor/src/components/github/github-repository-clone-flow.tsx
index fbd56a47ef4d..6973c8b94524 100644
--- a/editor/src/components/github/github-repository-clone-flow.tsx
+++ b/editor/src/components/github/github-repository-clone-flow.tsx
@@ -26,6 +26,12 @@ import { CloneParamKey } from '../editor/persistence/persistence-backend'
 import { getPublicRepositoryEntryOrNull } from '../../core/shared/github/operations/load-repositories'
 import { OperationContext } from '../../core/shared/github/operations/github-operation-context'
 import { notice } from '../common/notice'
+import { isFeatureEnabled } from '../../utils/feature-switches'
+import {
+  notifyOperationFinished,
+  startImportProcess,
+} from '../../core/shared/import/import-operation-service'
+import { ImportOperationResult } from '../../core/shared/import/import-operation-types'
 
 export const LoadActionsDispatched = 'loadActionDispatched'
 
@@ -123,7 +129,16 @@ async function cloneGithubRepo(
     repo: githubRepo.repository,
   })
   if (repositoryEntry == null) {
-    dispatch([showToast(notice('Cannot find repository', 'ERROR'))])
+    if (isFeatureEnabled('Import Wizard')) {
+      startImportProcess(dispatch)
+      notifyOperationFinished(
+        dispatch,
+        { type: 'loadBranch', branchName: githubRepo.branch ?? undefined, githubRepo: githubRepo },
+        ImportOperationResult.CriticalError,
+      )
+    } else {
+      dispatch([showToast(notice('Cannot find repository', 'ERROR'))])
+    }
     return
   }
   const githubBranch = githubRepo.branch ?? repositoryEntry.defaultBranch
diff --git a/editor/src/core/shared/github/operations/load-branch.ts b/editor/src/core/shared/github/operations/load-branch.ts
index 8182198dfb15..9fe8389eaabd 100644
--- a/editor/src/core/shared/github/operations/load-branch.ts
+++ b/editor/src/core/shared/github/operations/load-branch.ts
@@ -1,6 +1,6 @@
 import type { UtopiaTsWorkers } from '../../../../core/workers/common/worker-types'
 import type { ProjectContentTreeRoot } from '../../../../components/assets'
-import { getProjectFileByFilePath, walkContentsTree } from '../../../../components/assets'
+import { getProjectFileByFilePath } from '../../../../components/assets'
 import {
   packageJsonFileFromProjectContents,
   walkContentsTreeAsync,
@@ -12,6 +12,7 @@ import {
   showToast,
   truncateHistory,
   updateBranchContents,
+  updateImportStatus,
   updateProjectContents,
 } from '../../../../components/editor/actions/action-creators'
 import type {
@@ -24,7 +25,12 @@ import { refreshDependencies } from '../../dependencies'
 import type { RequestedNpmDependency } from '../../npm-dependency-types'
 import { forceNotNull } from '../../optional-utils'
 import { isTextFile } from '../../project-file-types'
-import type { BranchContent, GithubOperationSource } from '../helpers'
+import type {
+  BranchContent,
+  GetBranchContentResponse,
+  GetBranchContentSuccess,
+  GithubOperationSource,
+} from '../helpers'
 import {
   connectRepo,
   getExistingAssets,
@@ -40,6 +46,7 @@ import { updateProjectContentsWithParseResults } from '../../parser-projectconte
 import {
   notifyOperationFinished,
   notifyOperationStarted,
+  pauseImport,
   startImportProcess,
 } from '../../import/import-operation-service'
 import {
@@ -48,6 +55,7 @@ import {
 } from '../../import/project-health-check/utopia-requirements-service'
 import { checkAndFixUtopiaRequirements } from '../../import/project-health-check/check-utopia-requirements'
 import { ImportOperationResult } from '../../import/import-operation-types'
+import { isFeatureEnabled } from '../../../../utils/feature-switches'
 
 export const saveAssetsToProject =
   (operationContext: GithubOperationContext) =>
@@ -151,9 +159,23 @@ export const updateProjectWithBranchContent =
 
         switch (responseBody.type) {
           case 'FAILURE':
+            if (isFeatureEnabled('Import Wizard')) {
+              notifyOperationFinished(
+                dispatch,
+                { type: 'loadBranch' },
+                ImportOperationResult.CriticalError,
+              )
+            }
             throw githubAPIError(operation, responseBody.failureReason)
           case 'SUCCESS':
             if (responseBody.branch == null) {
+              if (isFeatureEnabled('Import Wizard')) {
+                notifyOperationFinished(
+                  dispatch,
+                  { type: 'loadBranch' },
+                  ImportOperationResult.CriticalError,
+                )
+              }
               throw githubAPIError(operation, `Could not find branch ${branchName}`)
             }
             const newGithubData: Partial<GithubData> = {
@@ -178,7 +200,8 @@ export const updateProjectWithBranchContent =
               checkAndFixUtopiaRequirements(dispatch, parseResults)
 
             if (requirementResolutionResult === RequirementResolutionResult.Critical) {
-              return []
+              // wait for the user to resume the import if they choose to
+              await pauseImport(dispatch)
             }
 
             // Update the editor with everything so that if anything else fails past this point
@@ -219,28 +242,33 @@ export const updateProjectWithBranchContent =
             // When the dependencies update has gone through, then indicate that the project was imported.
             await dependenciesPromise
               .catch(() => {
-                dispatch(
-                  [
-                    showToast(
-                      notice(
-                        `Github: There was an error when attempting to update the dependencies.`,
-                        'ERROR',
-                      ),
+                if (isFeatureEnabled('Import Wizard')) {
+                  notifyOperationFinished(
+                    dispatch,
+                    { type: 'refreshDependencies' },
+                    ImportOperationResult.Error,
+                  )
+                } else {
+                  showToast(
+                    notice(
+                      `Github: There was an error when attempting to update the dependencies.`,
+                      'ERROR',
                     ),
-                  ],
-                  'everyone',
-                )
+                  )
+                }
               })
               .finally(() => {
                 dispatch(
                   [
                     extractPropertyControlsFromDescriptorFiles(componentDescriptorFiles),
-                    showToast(
-                      notice(
-                        `Github: Updated the project with the content from ${branchName}`,
-                        'SUCCESS',
-                      ),
-                    ),
+                    isFeatureEnabled('Import Wizard')
+                      ? updateImportStatus({ status: 'done' })
+                      : showToast(
+                          notice(
+                            `Github: Updated the project with the content from ${branchName}`,
+                            'SUCCESS',
+                          ),
+                        ),
                   ],
                   'everyone',
                 )
diff --git a/editor/src/core/shared/import/import-operation-service.ts b/editor/src/core/shared/import/import-operation-service.ts
index e04b0cb10103..107f19dd8917 100644
--- a/editor/src/core/shared/import/import-operation-service.ts
+++ b/editor/src/core/shared/import/import-operation-service.ts
@@ -3,17 +3,22 @@ import type { EditorAction, EditorDispatch } from '../../../components/editor/ac
 import {
   setImportWizardOpen,
   updateImportOperations,
+  updateImportStatus,
 } from '../../../components/editor/actions/action-creators'
 import { ImportOperationAction } from './import-operation-types'
 import type {
   ImportOperation,
-  ImportOperationResult,
   ImportOperationType,
+  ImportState,
+  ImportStatus,
+  TotalImportResult,
 } from './import-operation-types'
+import { ImportOperationResult } from './import-operation-types'
 import { isFeatureEnabled } from '../../../utils/feature-switches'
 
 export function startImportProcess(dispatch: EditorDispatch) {
   const actions: EditorAction[] = [
+    updateImportStatus({ status: 'in-progress' }),
     updateImportOperations(
       [
         { type: 'loadBranch' },
@@ -147,3 +152,45 @@ export function getUpdateOperationResult(
   }
   return operations
 }
+
+export function updateProjectImportStatus(dispatch: EditorDispatch, importStatus: ImportStatus) {
+  dispatch([updateImportStatus(importStatus)])
+}
+
+export function getTotalImportStatusAndResult(importState: ImportState): TotalImportResult {
+  const operations = importState.importOperations
+  // if any operation is an error, the total result is immediately an error
+  for (const operation of operations) {
+    // with critical errors we are done immediately
+    if (operation.result == ImportOperationResult.CriticalError) {
+      return {
+        result: ImportOperationResult.CriticalError,
+        importStatus: { status: 'done' },
+      }
+    }
+    // we continue on errors, to let the user decide
+    if (operation.result == ImportOperationResult.Error) {
+      return {
+        result: ImportOperationResult.Error,
+        importStatus: importState.importStatus,
+      }
+    }
+  }
+  // if any operation is a warning, the total result is a warning
+  if (operations.some((op) => op.result == ImportOperationResult.Warn)) {
+    return {
+      result: ImportOperationResult.Warn,
+      importStatus: importState.importStatus,
+    }
+  }
+  return {
+    result: ImportOperationResult.Success,
+    importStatus: importState.importStatus,
+  }
+}
+
+export function pauseImport(dispatch: EditorDispatch): Promise<void> {
+  return new Promise((resolve) =>
+    updateProjectImportStatus(dispatch, { status: 'paused', onResume: resolve }),
+  )
+}
diff --git a/editor/src/core/shared/import/import-operation-types.ts b/editor/src/core/shared/import/import-operation-types.ts
index 08fa2ea2ed05..7789e76639a4 100644
--- a/editor/src/core/shared/import/import-operation-types.ts
+++ b/editor/src/core/shared/import/import-operation-types.ts
@@ -7,14 +7,16 @@ type ImportOperationData = {
   timeStarted?: number | null
   timeDone?: number | null
   result?: ImportOperationResult
-  error?: string
   children?: ImportOperation[]
 }
 
 export const ImportOperationResult = {
   Success: 'success',
-  Error: 'error',
   Warn: 'warn',
+  // an error that shows "continue anyway" button
+  Error: 'error',
+  // an error that we can't recover from
+  CriticalError: 'criticalError',
 } as const
 
 export type ImportOperationResult =
@@ -73,6 +75,33 @@ export type ImportOperation =
 
 export type ImportOperationType = ImportOperation['type']
 
+export type ImportState = {
+  importStatus: ImportStatus
+  importOperations: ImportOperation[]
+}
+
+export function newImportState(importStatus: ImportStatus, importOperations: ImportOperation[]) {
+  return {
+    importStatus: importStatus,
+    importOperations: importOperations,
+  }
+}
+
+export function emptyImportState(): ImportState {
+  return newImportState({ status: 'not-started' }, [])
+}
+
+export type ImportStatus =
+  | ImportStatusNotStarted
+  | ImportStatusInProgress
+  | ImportStatusDone
+  | ImportStatusPaused
+
+export type ImportStatusNotStarted = { status: 'not-started' }
+export type ImportStatusInProgress = { status: 'in-progress' }
+export type ImportStatusDone = { status: 'done' }
+export type ImportStatusPaused = { status: 'paused'; onResume: () => void }
+
 export const ImportOperationAction = {
   Add: 'add',
   Remove: 'remove',
@@ -82,3 +111,8 @@ export const ImportOperationAction = {
 
 export type ImportOperationAction =
   (typeof ImportOperationAction)[keyof typeof ImportOperationAction]
+
+export type TotalImportResult = {
+  importStatus: ImportStatus
+  result: ImportOperationResult
+}
diff --git a/editor/src/utils/feature-switches.ts b/editor/src/utils/feature-switches.ts
index 0044642a5ccf..fab803319515 100644
--- a/editor/src/utils/feature-switches.ts
+++ b/editor/src/utils/feature-switches.ts
@@ -70,7 +70,7 @@ let FeatureSwitches: { [feature in FeatureName]: boolean } = {
   'Condensed Navigator Entries': !IS_TEST_ENVIRONMENT,
   'Use Parsing Cache': false,
   'Canvas Fast Selection Hack': true,
-  'Import Wizard': false,
+  'Import Wizard': !IS_TEST_ENVIRONMENT,
   'Show Debug Features': false,
 }
 

From bee47ee36cf80c1978cac95b7f4b6da648b75a2e Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 5 Nov 2024 18:07:28 +0100
Subject: [PATCH 200/272] Split grid move strategies (#6606)

**Problem:**

The move strategies for grids should be split both functionally as well
as implementation-wise.

**Fix:**

This PR does a bunch of things in order to clean up the grid move
strategies:

- Remove the swap strategy
- Split the rearrange strategy into two distinct strategies: rearrange
and reorder
- Take out the absolute move portions out of the rearrange strategy into
their own strategy
- The reorder strategy performs in-flow moves
- The rearrange strategy performs pinned moves
- When the reorder strategy is active, don't show the animation as well
as the target cell outline
- For pinned elements, give precedence to the rearrange strategy
- For in-flow elements, give precedence to the reorder strategy
- Marked all usages of `EP.parentPath` to detect the parent grid as
`TODO` for a future PR fixing that in favor of actual grid metadata

**Note:**
Imho the tests should be also split in two, in this PR I only updated
the existing ones (which are still relevant tho!) but it'd be good to
have an incremental PR to do that split as well.


Fixes #6607
---
 .../canvas-strategies/canvas-strategies.tsx   |  15 +-
 .../strategies/grid-helpers.ts                | 451 ++++++------------
 .../strategies/grid-move-absolute.ts          | 287 +++++++++++
 ...grid-move-rearrange-duplicate-strategy.ts} |  90 ++--
 .../grid-move-rearrange-strategy.ts           | 274 +++++++++++
 .../strategies/grid-move-reorder-strategy.ts  | 256 ++++++++++
 .../grid-rearrange-keyboard-strategy.ts       |   7 +-
 ...-rearrange-move-strategy.spec.browser2.tsx | 221 +++++----
 .../grid-rearrange-move-strategy.ts           | 262 ----------
 ...grid-reparent-strategies.spec.browser2.tsx |   2 +
 .../strategies/grid-reparent-strategy.tsx     |  44 +-
 .../grid-resize-element-strategy.ts           |  10 +-
 ...range-grid-swap-strategy.spec.browser2.tsx | 208 --------
 .../rearrange-grid-swap-strategy.ts           | 193 --------
 .../strategies/resize-grid-strategy.ts        |  14 +-
 .../canvas/controls/grid-controls.tsx         |  28 +-
 .../canvas/event-helpers.test-utils.tsx       |   5 +
 .../src/components/inspector/grid-helpers.ts  |  49 ++
 .../grid-cell-subsection.tsx                  |   2 +-
 19 files changed, 1289 insertions(+), 1129 deletions(-)
 create mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
 rename editor/src/components/canvas/canvas-strategies/strategies/{grid-rearrange-move-duplicate-strategy.ts => grid-move-rearrange-duplicate-strategy.ts} (64%)
 create mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-strategy.ts
 create mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid-move-reorder-strategy.ts
 delete mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
 delete mode 100644 editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.spec.browser2.tsx
 delete mode 100644 editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
index c14f07eb91c0..aae5d84554ef 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { createSelector } from 'reselect'
 import { mapDropNulls, pushUniquelyBy, sortBy } from '../../../core/shared/array-utils'
 import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template'
 import { arrayEqualsByReference, assertNever } from '../../../core/shared/utils'
@@ -68,11 +67,10 @@ import type { InsertionSubject, InsertionSubjectWrapper } from '../../editor/edi
 import { generateUidWithExistingComponents } from '../../../core/model/element-template-utils'
 import { retargetStrategyToChildrenOfFragmentLikeElements } from './strategies/fragment-like-helpers'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
-import { gridRearrangeMoveStrategy } from './strategies/grid-rearrange-move-strategy'
+import { gridMoveRearrangeStrategy } from './strategies/grid-move-rearrange-strategy'
 import { resizeGridStrategy } from './strategies/resize-grid-strategy'
-import { rearrangeGridSwapStrategy } from './strategies/rearrange-grid-swap-strategy'
 import { gridResizeElementStrategy } from './strategies/grid-resize-element-strategy'
-import { gridRearrangeMoveDuplicateStrategy } from './strategies/grid-rearrange-move-duplicate-strategy'
+import { gridMoveRearrangeDuplicateStrategy } from './strategies/grid-move-rearrange-duplicate-strategy'
 import { setGridGapStrategy } from './strategies/set-grid-gap-strategy'
 import type { CanvasCommand } from '../commands/commands'
 import { foldAndApplyCommandsInner } from '../commands/commands'
@@ -89,6 +87,8 @@ import {
   GridControls,
   isGridControlsProps,
 } from '../controls/grid-controls-for-strategies'
+import { gridMoveReorderStrategy } from './strategies/grid-move-reorder-strategy'
+import { gridMoveAbsoluteStrategy } from './strategies/grid-move-absolute'
 
 export type CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -116,10 +116,11 @@ const moveOrReorderStrategies: MetaCanvasStrategy = (
       convertToAbsoluteAndMoveStrategy,
       convertToAbsoluteAndMoveAndSetParentFixedStrategy,
       reorderSliderStategy,
-      gridRearrangeMoveStrategy,
-      rearrangeGridSwapStrategy,
-      gridRearrangeMoveDuplicateStrategy,
+      gridMoveRearrangeStrategy,
+      gridMoveRearrangeDuplicateStrategy,
+      gridMoveReorderStrategy,
       gridRearrangeResizeKeyboardStrategy,
+      gridMoveAbsoluteStrategy,
     ],
   )
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 77a6260c8856..c889849c6d79 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -1,39 +1,39 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import { mapDropNulls } from '../../../../core/shared/array-utils'
 import * as EP from '../../../../core/shared/element-path'
 import type {
   ElementInstanceMetadataMap,
+  GridAutoOrTemplateBase,
   GridPositionValue,
+  SpecialSizeMeasurements,
 } from '../../../../core/shared/element-template'
 import {
-  gridPositionValue,
   type ElementInstanceMetadata,
   type GridContainerProperties,
   type GridElementProperties,
   type GridPosition,
 } from '../../../../core/shared/element-template'
 import type { CanvasRectangle } from '../../../../core/shared/math-utils'
-import {
-  canvasPoint,
-  canvasVector,
-  isInfinityRectangle,
-  offsetPoint,
-} from '../../../../core/shared/math-utils'
 import * as PP from '../../../../core/shared/property-path'
-import { absolute } from '../../../../utils/utils'
+import { assertNever } from '../../../../core/shared/utils'
 import type { GridDimension } from '../../../inspector/common/css-utils'
 import {
-  cssNumber,
   gridCSSRepeat,
   isCSSKeyword,
   isGridCSSRepeat,
   isStaticGridRepeat,
+  printGridAutoOrTemplateBase,
 } from '../../../inspector/common/css-utils'
 import type { CanvasCommand } from '../../commands/commands'
 import { deleteProperties } from '../../commands/delete-properties-command'
-import { reorderElement } from '../../commands/reorder-element-command'
-import { setCssLengthProperty } from '../../commands/set-css-length-command'
-import { setProperty } from '../../commands/set-property-command'
+import type { PropertyToUpdate } from '../../commands/set-property-command'
+import {
+  propertyToDelete,
+  propertyToSet,
+  setProperty,
+  updateBulkProperties,
+} from '../../commands/set-property-command'
 import type { DragInteractionData } from '../interaction-state'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 import {
@@ -41,174 +41,6 @@ import {
   getGridChildCellCoordBoundsFromCanvas,
   gridCellCoordinates,
 } from './grid-cell-bounds'
-import { mapDropNulls } from '../../../../core/shared/array-utils'
-import { assertNever } from '../../../../core/shared/utils'
-import { showGridControls } from '../../commands/show-grid-controls-command'
-
-export function runGridRearrangeMove(
-  targetElement: ElementPath,
-  selectedElement: ElementPath,
-  jsxMetadata: ElementInstanceMetadataMap,
-  interactionData: DragInteractionData,
-  gridCellGlobalFrames: GridCellGlobalFrames,
-  gridTemplate: GridContainerProperties,
-  newPathAfterReparent?: ElementPath,
-): CanvasCommand[] {
-  if (interactionData.drag == null) {
-    return []
-  }
-
-  const originalElement = MetadataUtils.findElementByElementPath(jsxMetadata, selectedElement)
-  if (originalElement == null) {
-    return []
-  }
-
-  const isReparent = newPathAfterReparent != null
-
-  const mousePos = offsetPoint(interactionData.dragStart, interactionData.drag)
-  const targetCellData = getClosestGridCellToPoint(gridCellGlobalFrames, mousePos)
-  const targetCellCoords = targetCellData?.gridCellCoordinates
-  if (targetCellCoords == null) {
-    return []
-  }
-
-  const originalElementGridConfiguration = isReparent
-    ? {
-        originalCellBounds: { width: 1, height: 1 }, //when reparenting, we just put it in a single cell
-        mouseCellPosInOriginalElement: { row: 0, column: 0 },
-      }
-    : getOriginalElementGridConfiguration(gridCellGlobalFrames, interactionData, originalElement)
-  if (originalElementGridConfiguration == null) {
-    return []
-  }
-
-  const { originalCellBounds, mouseCellPosInOriginalElement } = originalElementGridConfiguration
-
-  // get the new adjusted row
-  const row = Math.max(targetCellCoords.row - mouseCellPosInOriginalElement.row, 1)
-  // get the new adjusted column
-  const column = Math.max(targetCellCoords.column - mouseCellPosInOriginalElement.column, 1)
-
-  const pathForCommands = newPathAfterReparent ?? targetElement // when reparenting, we want to use the new path for commands
-  const gridPath = EP.parentPath(pathForCommands)
-
-  const gridCellMoveCommands = setGridPropsCommands(pathForCommands, gridTemplate, {
-    gridColumnStart: gridPositionValue(column),
-    gridColumnEnd: gridPositionValue(column + originalCellBounds.height),
-    gridRowStart: gridPositionValue(row),
-    gridRowEnd: gridPositionValue(row + originalCellBounds.width),
-  })
-
-  const gridTemplateColumns =
-    gridTemplate.gridTemplateColumns?.type === 'DIMENSIONS'
-      ? gridTemplate.gridTemplateColumns.dimensions.length
-      : 1
-
-  // The "pure" index in the grid children for the cell under mouse
-  const possiblyReorderIndex = getGridPositionIndex({
-    row: targetCellCoords.row,
-    column: targetCellCoords.column,
-    gridTemplateColumns: gridTemplateColumns,
-  })
-
-  // The siblings of the grid element being moved
-  const siblings = MetadataUtils.getChildrenUnordered(jsxMetadata, gridPath)
-    .filter((s) => !EP.pathsEqual(s.elementPath, selectedElement))
-    .map(
-      (s, index): SortableGridElementProperties => ({
-        ...s.specialSizeMeasurements.elementGridProperties,
-        index: index,
-        path: s.elementPath,
-      }),
-    )
-
-  // Sort the siblings and the cell under mouse ascending based on their grid coordinates, so that
-  // the indexes grow left-right, top-bottom.
-  const cellsSortedByPosition = siblings
-    .concat({
-      ...{
-        gridColumnStart: gridPositionValue(targetCellCoords.column),
-        gridColumnEnd: gridPositionValue(targetCellCoords.column),
-        gridRowStart: gridPositionValue(targetCellCoords.row),
-        gridRowEnd: gridPositionValue(targetCellCoords.row),
-      },
-      path: selectedElement,
-      index: siblings.length + 1,
-    })
-    .sort(sortElementsByGridPosition(gridTemplateColumns))
-
-  // If rearranging, reorder to the index based on the sorted cells arrays.
-  const indexInSortedCellsForRearrange = cellsSortedByPosition.findIndex((s) =>
-    EP.pathsEqual(selectedElement, s.path),
-  )
-
-  const moveType = getGridMoveType({
-    elementPath: targetElement,
-    originalElementMetadata: originalElement,
-    possiblyReorderIndex: possiblyReorderIndex,
-    cellsSortedByPosition: cellsSortedByPosition,
-    isReparent: isReparent,
-  })
-
-  const updateGridControlsCommand = showGridControls(
-    'mid-interaction',
-    gridPath,
-    targetCellData?.gridCellCoordinates ?? null,
-    gridCellCoordinates(row, column),
-  )
-
-  switch (moveType) {
-    case 'absolute': {
-      if (isReparent) {
-        return []
-      }
-      const absoluteMoveCommands = gridChildAbsoluteMoveCommands(
-        MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
-        MetadataUtils.getFrameOrZeroRectInCanvasCoords(gridPath, jsxMetadata),
-        interactionData,
-      )
-      return [...absoluteMoveCommands, updateGridControlsCommand]
-    }
-    case 'rearrange': {
-      const targetRootCell = gridCellCoordinates(row, column)
-      const canvasRect = getGlobalFrameOfGridCell(gridCellGlobalFrames, targetRootCell)
-      const absoluteMoveCommands =
-        canvasRect == null || isReparent
-          ? []
-          : gridChildAbsoluteMoveCommands(
-              MetadataUtils.findElementByElementPath(jsxMetadata, targetElement),
-              canvasRect,
-              interactionData,
-            )
-      return [
-        ...gridCellMoveCommands,
-        ...absoluteMoveCommands,
-        reorderElement(
-          'always',
-          pathForCommands,
-          absolute(Math.max(indexInSortedCellsForRearrange, 0)),
-        ),
-        updateGridControlsCommand,
-      ]
-    }
-    case 'reorder': {
-      return [
-        reorderElement('always', pathForCommands, absolute(possiblyReorderIndex)),
-        deleteProperties('always', pathForCommands, [
-          PP.create('style', 'gridColumn'),
-          PP.create('style', 'gridRow'),
-          PP.create('style', 'gridColumnStart'),
-          PP.create('style', 'gridColumnEnd'),
-          PP.create('style', 'gridRowStart'),
-          PP.create('style', 'gridRowEnd'),
-        ]),
-        updateGridControlsCommand,
-      ]
-    }
-    default:
-      assertNever(moveType)
-  }
-}
 
 export function gridPositionToValue(p: GridPosition | null | undefined): string | number | null {
   if (p == null) {
@@ -365,62 +197,12 @@ function asMaybeNamedLineOrValue(
   return value
 }
 
-function gridChildAbsoluteMoveCommands(
-  targetMetadata: ElementInstanceMetadata | null,
-  containingRect: CanvasRectangle,
-  dragInteractionData: DragInteractionData,
-): CanvasCommand[] {
-  if (
-    targetMetadata == null ||
-    targetMetadata.globalFrame == null ||
-    isInfinityRectangle(targetMetadata.globalFrame) ||
-    !MetadataUtils.isPositionAbsolute(targetMetadata)
-  ) {
-    return []
-  }
-
-  const offsetInTarget = canvasPoint({
-    x: dragInteractionData.originalDragStart.x - targetMetadata.globalFrame.x,
-    y: dragInteractionData.originalDragStart.y - targetMetadata.globalFrame.y,
-  })
-
-  const dragOffset = offsetPoint(
-    dragInteractionData.originalDragStart,
-    dragInteractionData.drag ?? canvasPoint({ x: 0, y: 0 }),
-  )
-
-  const offset = canvasVector({
-    x: dragOffset.x - containingRect.x - offsetInTarget.x,
-    y: dragOffset.y - containingRect.y - offsetInTarget.y,
-  })
-
-  return [
-    deleteProperties('always', targetMetadata.elementPath, [
-      PP.create('style', 'top'),
-      PP.create('style', 'left'),
-      PP.create('style', 'right'),
-      PP.create('style', 'bottom'),
-    ]),
-    setCssLengthProperty(
-      'always',
-      targetMetadata.elementPath,
-      PP.create('style', 'top'),
-      { type: 'EXPLICIT_CSS_NUMBER', value: cssNumber(offset.y, null) },
-      null,
-    ),
-    setCssLengthProperty(
-      'always',
-      targetMetadata.elementPath,
-      PP.create('style', 'left'),
-      { type: 'EXPLICIT_CSS_NUMBER', value: cssNumber(offset.x, null) },
-      null,
-    ),
-  ]
+export type SortableGridElementProperties = GridElementProperties & {
+  path: ElementPath
+  index: number
 }
 
-type SortableGridElementProperties = GridElementProperties & { path: ElementPath; index: number }
-
-function sortElementsByGridPosition(gridTemplateColumns: number) {
+export function sortElementsByGridPosition(gridTemplateColumns: number) {
   return function (a: SortableGridElementProperties, b: SortableGridElementProperties): number {
     function getPosition(index: number, e: GridElementProperties) {
       if (
@@ -442,80 +224,11 @@ function sortElementsByGridPosition(gridTemplateColumns: number) {
   }
 }
 
-type GridMoveType =
-  | 'reorder' // reorder the element in the code based on the ascending position, and remove explicit positioning props
-  | 'rearrange' // set explicit positioning props, and reorder based on the visual location
-  | 'absolute' // a regular absolute move, relative to the grid
-
-function getGridMoveType(params: {
-  elementPath: ElementPath
-  originalElementMetadata: ElementInstanceMetadata | null
-  possiblyReorderIndex: number
-  cellsSortedByPosition: SortableGridElementProperties[]
-  isReparent: boolean
-}): GridMoveType {
-  const specialSizeMeasurements = params.originalElementMetadata?.specialSizeMeasurements
-  if (
-    !params.isReparent &&
-    specialSizeMeasurements != null &&
-    MetadataUtils.isPositionAbsolute(params.originalElementMetadata)
-  ) {
-    return MetadataUtils.hasNoGridCellPositioning(specialSizeMeasurements)
-      ? 'absolute'
-      : 'rearrange'
-  }
-  if (params.possiblyReorderIndex >= params.cellsSortedByPosition.length) {
-    return 'rearrange'
-  }
-
-  const elementGridProperties = specialSizeMeasurements?.elementGridProperties
-  const gridRowStart = gridPositionNumberValue(elementGridProperties?.gridRowStart ?? null)
-  const gridColumnStart = gridPositionNumberValue(elementGridProperties?.gridColumnStart ?? null)
-  const gridRowEnd = gridPositionNumberValue(elementGridProperties?.gridRowEnd ?? null)
-  const gridColumnEnd = gridPositionNumberValue(elementGridProperties?.gridColumnEnd ?? null)
-
-  const isMultiCellChild =
-    (gridRowEnd != null && gridRowStart != null && gridRowEnd > gridRowStart + 1) ||
-    (gridColumnEnd != null && gridColumnStart != null && gridColumnEnd > gridColumnStart + 1)
-
-  if (isMultiCellChild) {
-    return 'rearrange'
-  }
-
-  // The first element is intrinsically in order, so try to adjust for that
-  if (params.possiblyReorderIndex === 0) {
-    const isTheOnlyChild = params.cellsSortedByPosition.length === 1
-    const isAlreadyTheFirstChild =
-      EP.toUid(params.cellsSortedByPosition[0].path) === EP.toUid(params.elementPath)
-
-    const isAlreadyAtOrigin = gridRowStart === 1 && gridColumnStart === 1
-
-    if (isTheOnlyChild || isAlreadyTheFirstChild || isAlreadyAtOrigin) {
-      return 'reorder'
-    }
-  }
-
-  const previousElement = params.cellsSortedByPosition.at(params.possiblyReorderIndex - 1)
-  if (previousElement == null) {
-    return 'rearrange'
-  }
-  const previousElementColumn = previousElement.gridColumnStart ?? null
-  const previousElementRow = previousElement.gridRowStart ?? null
-  return isGridPositionNumericValue(previousElementColumn) &&
-    isGridPositionNumericValue(previousElementRow)
-    ? 'rearrange'
-    : 'reorder'
-}
-
 function isGridPositionNumericValue(p: GridPosition | null): p is GridPositionValue {
   return p != null && !(isCSSKeyword(p) && p.value === 'auto')
 }
 
-function gridPositionNumberValue(p: GridPosition | null): number | null {
-  return isGridPositionNumericValue(p) ? p.numericalPosition : null
-}
-
-function getGridPositionIndex(props: {
+export function getGridPositionIndex(props: {
   row: number
   column: number
   gridTemplateColumns: number
@@ -718,7 +431,7 @@ export function getGridRelatedIndexes(params: {
   return expandedRelatedIndexes[params.index] ?? []
 }
 
-function getOriginalElementGridConfiguration(
+export function getOriginalElementGridConfiguration(
   gridCellGlobalFrames: GridCellGlobalFrames,
   interactionData: DragInteractionData,
   originalElement: ElementInstanceMetadata,
@@ -788,3 +501,131 @@ export function isJustAutoGridDimension(dimensions: GridDimension[]): boolean {
     dimensions[0].value.value === 'auto'
   )
 }
+
+type GridElementPinState = 'not-pinned' | 'auto-pinned' | 'pinned'
+
+export function getGridElementPinState(
+  elementGridPropertiesFromProps: GridElementProperties | null,
+): GridElementPinState {
+  if (
+    elementGridPropertiesFromProps?.gridColumnEnd == null ||
+    elementGridPropertiesFromProps?.gridColumnStart == null ||
+    elementGridPropertiesFromProps?.gridRowEnd == null ||
+    elementGridPropertiesFromProps?.gridRowStart == null
+  ) {
+    return 'not-pinned'
+  }
+  if (
+    isGridPositionNumericValue(elementGridPropertiesFromProps?.gridColumnEnd ?? null) ||
+    isGridPositionNumericValue(elementGridPropertiesFromProps?.gridColumnStart ?? null) ||
+    isGridPositionNumericValue(elementGridPropertiesFromProps?.gridRowEnd ?? null) ||
+    isGridPositionNumericValue(elementGridPropertiesFromProps?.gridRowStart ?? null)
+  ) {
+    return 'pinned'
+  }
+  return 'auto-pinned'
+}
+
+export function isFlowGridChild(child: ElementInstanceMetadata) {
+  return (
+    getGridElementPinState(child.specialSizeMeasurements.elementGridPropertiesFromProps) !==
+    'pinned'
+  )
+}
+
+function restoreGridTemplateFromProps(params: {
+  columns: GridAutoOrTemplateBase
+  rows: GridAutoOrTemplateBase
+}): PropertyToUpdate[] {
+  let properties: PropertyToUpdate[] = []
+  const newCols = printGridAutoOrTemplateBase(params.columns)
+  const newRows = printGridAutoOrTemplateBase(params.rows)
+  if (newCols === '') {
+    properties.push(propertyToDelete(PP.create('style', 'gridTemplateColumns')))
+  } else {
+    properties.push(propertyToSet(PP.create('style', 'gridTemplateColumns'), newCols))
+  }
+  if (newRows === '') {
+    properties.push(propertyToDelete(PP.create('style', 'gridTemplateRows')))
+  } else {
+    properties.push(propertyToSet(PP.create('style', 'gridTemplateRows'), newRows))
+  }
+  return properties
+}
+
+type GridInitialTemplates = {
+  calculated: {
+    columns: GridAutoOrTemplateBase
+    rows: GridAutoOrTemplateBase
+  }
+  fromProps: {
+    columns: GridAutoOrTemplateBase
+    rows: GridAutoOrTemplateBase
+  }
+}
+
+export function getParentGridTemplatesFromChildMeasurements(
+  specialSizeMeasurements: SpecialSizeMeasurements,
+): GridInitialTemplates | null {
+  const parentTemplateCalculated = specialSizeMeasurements.parentContainerGridProperties
+  const parentTemplateFromProps = specialSizeMeasurements.parentContainerGridPropertiesFromProps
+
+  const templateColsCalculated = parentTemplateCalculated.gridTemplateColumns
+  if (templateColsCalculated == null) {
+    return null
+  }
+  const templateRowsCalculated = parentTemplateCalculated.gridTemplateRows
+  if (templateRowsCalculated == null) {
+    return null
+  }
+
+  const templateColsFromProps = parentTemplateFromProps.gridTemplateColumns
+  if (templateColsFromProps == null) {
+    return null
+  }
+  const templateRowsFromProps = parentTemplateFromProps.gridTemplateRows
+  if (templateRowsFromProps == null) {
+    return null
+  }
+
+  return {
+    calculated: {
+      columns: templateColsCalculated,
+      rows: templateRowsCalculated,
+    },
+    fromProps: {
+      columns: templateColsFromProps,
+      rows: templateRowsFromProps,
+    },
+  }
+}
+
+export function gridMoveStrategiesExtraCommands(
+  parentGridPath: ElementPath,
+  initialTemplates: GridInitialTemplates,
+) {
+  const midInteractionCommands = [
+    // during the interaction, freeze the template with the calculated values…
+    updateBulkProperties('mid-interaction', parentGridPath, [
+      propertyToSet(
+        PP.create('style', 'gridTemplateColumns'),
+        printGridAutoOrTemplateBase(initialTemplates.calculated.columns),
+      ),
+      propertyToSet(
+        PP.create('style', 'gridTemplateRows'),
+        printGridAutoOrTemplateBase(initialTemplates.calculated.rows),
+      ),
+    ]),
+  ]
+
+  const onCompleteCommands = [
+    // …eventually, restore the grid template on complete.
+    updateBulkProperties(
+      'on-complete',
+      parentGridPath,
+      restoreGridTemplateFromProps(initialTemplates.fromProps),
+    ),
+  ]
+
+  return { midInteractionCommands, onCompleteCommands }
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
new file mode 100644
index 000000000000..c81b4b2c9aff
--- /dev/null
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
@@ -0,0 +1,287 @@
+import type { ElementPath } from 'utopia-shared/src/types'
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import * as EP from '../../../../core/shared/element-path'
+import {
+  type ElementInstanceMetadata,
+  type ElementInstanceMetadataMap,
+  type GridContainerProperties,
+} from '../../../../core/shared/element-template'
+import type { CanvasRectangle } from '../../../../core/shared/math-utils'
+import {
+  canvasPoint,
+  canvasRectangle,
+  isInfinityRectangle,
+  offsetPoint,
+  pointDifference,
+  zeroRectangle,
+} from '../../../../core/shared/math-utils'
+import * as PP from '../../../../core/shared/property-path'
+import { cssNumber } from '../../../inspector/common/css-utils'
+import type { CanvasCommand } from '../../commands/commands'
+import { deleteProperties } from '../../commands/delete-properties-command'
+import { setCssLengthProperty } from '../../commands/set-css-length-command'
+import { showGridControls } from '../../commands/show-grid-controls-command'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import type { CanvasStrategyFactory } from '../canvas-strategies'
+import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
+import type { InteractionCanvasState } from '../canvas-strategy-types'
+import {
+  emptyStrategyApplicationResult,
+  getTargetPathsFromInteractionTarget,
+  strategyApplicationResult,
+} from '../canvas-strategy-types'
+import type { DragInteractionData, InteractionSession } from '../interaction-state'
+import type { GridCellGlobalFrames } from './grid-helpers'
+import {
+  findOriginalGrid,
+  getGlobalFrameOfGridCell,
+  getOriginalElementGridConfiguration,
+  getParentGridTemplatesFromChildMeasurements,
+  gridMoveStrategiesExtraCommands,
+} from './grid-helpers'
+import { runGridMoveRearrange } from './grid-move-rearrange-strategy'
+import { getTargetGridCellData } from '../../../inspector/grid-helpers'
+
+export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
+  canvasState: InteractionCanvasState,
+  interactionSession: InteractionSession | null,
+) => {
+  const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget)
+  if (
+    selectedElements.length !== 1 ||
+    interactionSession == null ||
+    interactionSession.interactionData.type !== 'DRAG' ||
+    interactionSession.interactionData.drag == null ||
+    interactionSession.activeControl.type !== 'GRID_CELL_HANDLE' ||
+    interactionSession.interactionData.modifiers.alt
+  ) {
+    return null
+  }
+
+  const selectedElement = selectedElements[0]
+  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+    return null
+  }
+
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    selectedElement,
+  )
+  if (selectedElementMetadata == null) {
+    return null
+  }
+  const initialTemplates = getParentGridTemplatesFromChildMeasurements(
+    selectedElementMetadata.specialSizeMeasurements,
+  )
+  if (initialTemplates == null) {
+    return null
+  }
+
+  const parentGridPath = findOriginalGrid(
+    canvasState.startingMetadata,
+    EP.parentPath(selectedElement),
+  ) // TODO don't use EP.parentPath
+  if (parentGridPath == null) {
+    return null
+  }
+
+  const gridFrame = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    parentGridPath,
+  )?.globalFrame
+  if (gridFrame == null || isInfinityRectangle(gridFrame)) {
+    return null
+  }
+
+  if (!MetadataUtils.isPositionAbsolute(selectedElementMetadata)) {
+    return null
+  }
+
+  return {
+    id: 'absolute-grid-move-strategy',
+    name: 'Grid move (Abs)',
+    descriptiveLabel: 'Grid move (Abs)',
+    icon: {
+      category: 'tools',
+      type: 'pointer',
+    },
+    controlsToRender: [controlsForGridPlaceholders(parentGridPath, 'visible-only-while-active')],
+    fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 2),
+    apply: () => {
+      if (
+        interactionSession == null ||
+        interactionSession.interactionData.type !== 'DRAG' ||
+        interactionSession.interactionData.drag == null ||
+        interactionSession.activeControl.type !== 'GRID_CELL_HANDLE'
+      ) {
+        return emptyStrategyApplicationResult
+      }
+
+      const { commands, elementsToRerender } = getCommandsAndPatchForGridAbsoluteMove(
+        canvasState,
+        interactionSession.interactionData,
+        selectedElement,
+        parentGridPath,
+      )
+      if (commands.length === 0) {
+        return emptyStrategyApplicationResult
+      }
+
+      const { midInteractionCommands, onCompleteCommands } = gridMoveStrategiesExtraCommands(
+        parentGridPath,
+        initialTemplates,
+      )
+      return strategyApplicationResult(
+        [...midInteractionCommands, ...onCompleteCommands, ...commands],
+        elementsToRerender,
+      )
+    },
+  }
+}
+
+function getCommandsAndPatchForGridAbsoluteMove(
+  canvasState: InteractionCanvasState,
+  interactionData: DragInteractionData,
+  selectedElement: ElementPath,
+  gridPath: ElementPath,
+): {
+  commands: CanvasCommand[]
+  elementsToRerender: ElementPath[]
+} {
+  if (interactionData.drag == null) {
+    return { commands: [], elementsToRerender: [] }
+  }
+
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    selectedElement,
+  )
+  if (selectedElementMetadata == null) {
+    return { commands: [], elementsToRerender: [] }
+  }
+
+  const { parentGridCellGlobalFrames, parentContainerGridProperties } =
+    selectedElementMetadata.specialSizeMeasurements
+  if (parentGridCellGlobalFrames == null) {
+    return { commands: [], elementsToRerender: [] }
+  }
+
+  const commands = runGridMoveAbsolute(
+    canvasState.startingMetadata,
+    interactionData,
+    selectedElementMetadata,
+    gridPath,
+    parentGridCellGlobalFrames,
+    parentContainerGridProperties,
+  )
+
+  return {
+    commands: commands,
+    elementsToRerender: [gridPath, selectedElement],
+  }
+}
+
+function runGridMoveAbsolute(
+  jsxMetadata: ElementInstanceMetadataMap,
+  interactionData: DragInteractionData,
+  selectedElementMetadata: ElementInstanceMetadata,
+  gridPath: ElementPath,
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  gridTemplate: GridContainerProperties,
+): CanvasCommand[] {
+  if (interactionData.drag == null) {
+    return []
+  }
+
+  const gridConfig = getOriginalElementGridConfiguration(
+    gridCellGlobalFrames,
+    interactionData,
+    selectedElementMetadata,
+  )
+  if (gridConfig == null) {
+    return []
+  }
+  const { mouseCellPosInOriginalElement } = gridConfig
+
+  const targetGridCellData = getTargetGridCellData(
+    interactionData,
+    gridCellGlobalFrames,
+    mouseCellPosInOriginalElement,
+  )
+  if (targetGridCellData == null) {
+    return []
+  }
+  const { targetCellCoords, targetRootCell } = targetGridCellData
+
+  // if moving an absolutely-positioned child which does not have pinning
+  // props, do not set them at all.
+  if (MetadataUtils.hasNoGridCellPositioning(selectedElementMetadata.specialSizeMeasurements)) {
+    return [
+      showGridControls('mid-interaction', gridPath, targetCellCoords, targetRootCell),
+      ...gridChildAbsoluteMoveCommands(
+        selectedElementMetadata,
+        MetadataUtils.getFrameOrZeroRectInCanvasCoords(gridPath, jsxMetadata),
+        interactionData,
+      ),
+    ]
+  }
+
+  // otherwise, return a rearrange move + absolute adjustment
+  return [
+    ...runGridMoveRearrange(
+      jsxMetadata,
+      interactionData,
+      selectedElementMetadata,
+      gridPath,
+      gridCellGlobalFrames,
+      gridTemplate,
+      null,
+    ),
+    ...gridChildAbsoluteMoveCommands(
+      selectedElementMetadata,
+      getGlobalFrameOfGridCell(gridCellGlobalFrames, targetRootCell) ??
+        canvasRectangle(zeroRectangle),
+      interactionData,
+    ),
+  ]
+}
+
+function gridChildAbsoluteMoveCommands(
+  element: ElementInstanceMetadata,
+  containingRect: CanvasRectangle,
+  dragInteractionData: DragInteractionData,
+): CanvasCommand[] {
+  if (
+    element.globalFrame == null ||
+    isInfinityRectangle(element.globalFrame) ||
+    dragInteractionData.drag == null
+  ) {
+    return []
+  }
+
+  const offsetInTarget = pointDifference(containingRect, element.globalFrame)
+  const dragOffset = offsetPoint(offsetInTarget, dragInteractionData.drag)
+
+  return [
+    deleteProperties('always', element.elementPath, [
+      PP.create('style', 'top'),
+      PP.create('style', 'left'),
+      PP.create('style', 'right'),
+      PP.create('style', 'bottom'),
+    ]),
+    setCssLengthProperty(
+      'always',
+      element.elementPath,
+      PP.create('style', 'top'),
+      { type: 'EXPLICIT_CSS_NUMBER', value: cssNumber(dragOffset.y, null) },
+      null,
+    ),
+    setCssLengthProperty(
+      'always',
+      element.elementPath,
+      PP.create('style', 'left'),
+      { type: 'EXPLICIT_CSS_NUMBER', value: cssNumber(dragOffset.x, null) },
+      null,
+    ),
+  ]
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-duplicate-strategy.ts
similarity index 64%
rename from editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
rename to editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-duplicate-strategy.ts
index 91d3e60875ee..b3623409513c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-duplicate-strategy.ts
@@ -1,6 +1,7 @@
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { generateUidWithExistingComponents } from '../../../../core/model/element-template-utils'
 import * as EP from '../../../../core/shared/element-path'
+import { isInfinityRectangle } from '../../../../core/shared/math-utils'
 import { CSSCursor } from '../../../../uuiui-deps'
 import { duplicateElement } from '../../commands/duplicate-element-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
@@ -12,14 +13,19 @@ import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { CustomStrategyState, InteractionCanvasState } from '../canvas-strategy-types'
 import {
-  getTargetPathsFromInteractionTarget,
   emptyStrategyApplicationResult,
+  getTargetPathsFromInteractionTarget,
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { runGridRearrangeMove } from './grid-helpers'
+import {
+  findOriginalGrid,
+  getParentGridTemplatesFromChildMeasurements,
+  gridMoveStrategiesExtraCommands,
+} from './grid-helpers'
+import { runGridMoveRearrange } from './grid-move-rearrange-strategy'
 
-export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
+export const gridMoveRearrangeDuplicateStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
   interactionSession: InteractionSession | null,
   customState: CustomStrategyState,
@@ -41,15 +47,46 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
     return null
   }
 
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    selectedElement,
+  )
+  if (selectedElementMetadata == null) {
+    return null
+  }
+
+  const initialTemplates = getParentGridTemplatesFromChildMeasurements(
+    selectedElementMetadata.specialSizeMeasurements,
+  )
+  if (initialTemplates == null) {
+    return null
+  }
+
+  const parentGridPath = findOriginalGrid(
+    canvasState.startingMetadata,
+    EP.parentPath(selectedElement),
+  ) // TODO don't use EP.parentPath
+  if (parentGridPath == null) {
+    return null
+  }
+
+  const gridFrame = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    parentGridPath,
+  )?.globalFrame
+  if (gridFrame == null || isInfinityRectangle(gridFrame)) {
+    return null
+  }
+
   return {
     id: 'rearrange-grid-move-duplicate-strategy',
-    name: 'Rearrange Grid (Duplicate)',
-    descriptiveLabel: 'Rearrange Grid (Duplicate)',
+    name: 'Grid Rearrange (Duplicate)',
+    descriptiveLabel: 'Grid Rearrange (Duplicate)',
     icon: {
       category: 'tools',
       type: 'pointer',
     },
-    controlsToRender: [controlsForGridPlaceholders(EP.parentPath(selectedElement))],
+    controlsToRender: [controlsForGridPlaceholders(parentGridPath)],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 3),
     apply: () => {
       if (
@@ -70,38 +107,35 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
         duplicatedElementNewUids[oldUid] = newUid
       }
 
-      const targetElement = EP.appendToPath(EP.parentPath(selectedElement), newUid)
-
-      const selectedElementMetadata = MetadataUtils.findElementByElementPath(
-        canvasState.startingMetadata,
-        selectedElement,
-      )
-      if (selectedElementMetadata == null) {
-        return emptyStrategyApplicationResult
-      }
+      const targetElement = EP.appendToPath(parentGridPath, newUid)
 
       const { parentGridCellGlobalFrames, parentContainerGridProperties } =
         selectedElementMetadata.specialSizeMeasurements
-
-      const moveCommands =
-        parentGridCellGlobalFrames != null
-          ? runGridRearrangeMove(
-              targetElement,
-              selectedElement,
-              canvasState.startingMetadata,
-              interactionSession.interactionData,
-              parentGridCellGlobalFrames,
-              parentContainerGridProperties,
-            )
-          : []
-      if (moveCommands.length === 0) {
+      if (parentGridCellGlobalFrames == null) {
         return emptyStrategyApplicationResult
       }
 
+      const moveCommands = runGridMoveRearrange(
+        canvasState.startingMetadata,
+        interactionSession.interactionData,
+        selectedElementMetadata,
+        parentGridPath,
+        parentGridCellGlobalFrames,
+        parentContainerGridProperties,
+        null,
+      )
+
+      const { midInteractionCommands, onCompleteCommands } = gridMoveStrategiesExtraCommands(
+        parentGridPath,
+        initialTemplates,
+      )
+
       return strategyApplicationResult(
         [
           duplicateElement('always', selectedElement, newUid),
           ...moveCommands,
+          ...midInteractionCommands,
+          ...onCompleteCommands,
           updateSelectedViews('always', [targetElement]),
           updateHighlightedViews('always', [targetElement]),
           setCursorCommand(CSSCursor.Duplicate),
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-strategy.ts
new file mode 100644
index 000000000000..1d54d077cffb
--- /dev/null
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-strategy.ts
@@ -0,0 +1,274 @@
+import type { ElementPath } from 'utopia-shared/src/types'
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import * as EP from '../../../../core/shared/element-path'
+import type {
+  ElementInstanceMetadata,
+  ElementInstanceMetadataMap,
+  GridContainerProperties,
+} from '../../../../core/shared/element-template'
+import { gridPositionValue } from '../../../../core/shared/element-template'
+import { isInfinityRectangle } from '../../../../core/shared/math-utils'
+import { absolute } from '../../../../utils/utils'
+import type { CanvasCommand } from '../../commands/commands'
+import { reorderElement } from '../../commands/reorder-element-command'
+import { showGridControls } from '../../commands/show-grid-controls-command'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import type { CanvasStrategyFactory } from '../canvas-strategies'
+import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
+import type { InteractionCanvasState } from '../canvas-strategy-types'
+import {
+  emptyStrategyApplicationResult,
+  getTargetPathsFromInteractionTarget,
+  strategyApplicationResult,
+} from '../canvas-strategy-types'
+import type { DragInteractionData, InteractionSession } from '../interaction-state'
+import type { GridCellGlobalFrames, SortableGridElementProperties } from './grid-helpers'
+import {
+  findOriginalGrid,
+  getOriginalElementGridConfiguration,
+  getParentGridTemplatesFromChildMeasurements,
+  gridMoveStrategiesExtraCommands,
+  setGridPropsCommands,
+  sortElementsByGridPosition,
+} from './grid-helpers'
+import { getTargetGridCellData } from '../../../inspector/grid-helpers'
+
+export const gridMoveRearrangeStrategy: CanvasStrategyFactory = (
+  canvasState: InteractionCanvasState,
+  interactionSession: InteractionSession | null,
+) => {
+  const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget)
+  if (
+    selectedElements.length !== 1 ||
+    interactionSession == null ||
+    interactionSession.interactionData.type !== 'DRAG' ||
+    interactionSession.interactionData.drag == null ||
+    interactionSession.activeControl.type !== 'GRID_CELL_HANDLE' ||
+    interactionSession.interactionData.modifiers.alt
+  ) {
+    return null
+  }
+
+  const selectedElement = selectedElements[0]
+  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+    return null
+  }
+
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    selectedElement,
+  )
+  if (selectedElementMetadata == null) {
+    return null
+  }
+  const initialTemplates = getParentGridTemplatesFromChildMeasurements(
+    selectedElementMetadata.specialSizeMeasurements,
+  )
+  if (initialTemplates == null) {
+    return null
+  }
+
+  const parentGridPath = findOriginalGrid(
+    canvasState.startingMetadata,
+    EP.parentPath(selectedElement),
+  ) // TODO don't use EP.parentPath
+  if (parentGridPath == null) {
+    return null
+  }
+
+  const gridFrame = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    parentGridPath,
+  )?.globalFrame
+  if (gridFrame == null || isInfinityRectangle(gridFrame)) {
+    return null
+  }
+
+  if (MetadataUtils.isPositionAbsolute(selectedElementMetadata)) {
+    return null
+  }
+
+  return {
+    id: 'rearrange-grid-move-strategy',
+    name: 'Grid rearrange',
+    descriptiveLabel: 'Grid rearrange',
+    icon: {
+      category: 'tools',
+      type: 'pointer',
+    },
+    controlsToRender: [controlsForGridPlaceholders(parentGridPath, 'visible-only-while-active')],
+    fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 2),
+    apply: () => {
+      if (
+        interactionSession == null ||
+        interactionSession.interactionData.type !== 'DRAG' ||
+        interactionSession.interactionData.drag == null ||
+        interactionSession.activeControl.type !== 'GRID_CELL_HANDLE'
+      ) {
+        return emptyStrategyApplicationResult
+      }
+
+      const { commands, elementsToRerender } = getCommandsAndPatchForGridRearrange(
+        canvasState,
+        interactionSession.interactionData,
+        selectedElement,
+        parentGridPath,
+      )
+      if (commands.length === 0) {
+        return emptyStrategyApplicationResult
+      }
+
+      const { midInteractionCommands, onCompleteCommands } = gridMoveStrategiesExtraCommands(
+        parentGridPath,
+        initialTemplates,
+      )
+      return strategyApplicationResult(
+        [...midInteractionCommands, ...onCompleteCommands, ...commands],
+        elementsToRerender,
+      )
+    },
+  }
+}
+
+function getCommandsAndPatchForGridRearrange(
+  canvasState: InteractionCanvasState,
+  interactionData: DragInteractionData,
+  selectedElement: ElementPath,
+  gridPath: ElementPath,
+): {
+  commands: CanvasCommand[]
+  elementsToRerender: ElementPath[]
+} {
+  if (interactionData.drag == null) {
+    return { commands: [], elementsToRerender: [] }
+  }
+
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    selectedElement,
+  )
+  if (selectedElementMetadata == null) {
+    return { commands: [], elementsToRerender: [] }
+  }
+
+  const { parentGridCellGlobalFrames, parentContainerGridProperties } =
+    selectedElementMetadata.specialSizeMeasurements
+  if (parentGridCellGlobalFrames == null) {
+    return { commands: [], elementsToRerender: [] }
+  }
+
+  const commands = runGridMoveRearrange(
+    canvasState.startingMetadata,
+    interactionData,
+    selectedElementMetadata,
+    gridPath,
+    parentGridCellGlobalFrames,
+    parentContainerGridProperties,
+    null,
+  )
+
+  return {
+    commands: commands,
+    elementsToRerender: [gridPath, selectedElement],
+  }
+}
+
+export function runGridMoveRearrange(
+  jsxMetadata: ElementInstanceMetadataMap,
+  interactionData: DragInteractionData,
+  selectedElementMetadata: ElementInstanceMetadata,
+  gridPath: ElementPath,
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  gridTemplate: GridContainerProperties,
+  newPathAfterReparent: ElementPath | null,
+): CanvasCommand[] {
+  if (interactionData.drag == null) {
+    return []
+  }
+
+  const isReparent = newPathAfterReparent != null
+  const pathForCommands = isReparent ? newPathAfterReparent : selectedElementMetadata.elementPath // when reparenting, we want to use the new path for commands
+
+  const gridConfig = isReparent
+    ? {
+        originalCellBounds: { width: 1, height: 1 }, // when reparenting, we just put it in a single cell
+        mouseCellPosInOriginalElement: { row: 0, column: 0 },
+      }
+    : getOriginalElementGridConfiguration(
+        gridCellGlobalFrames,
+        interactionData,
+        selectedElementMetadata,
+      )
+  if (gridConfig == null) {
+    return []
+  }
+  const { mouseCellPosInOriginalElement, originalCellBounds } = gridConfig
+
+  const targetGridCellData = getTargetGridCellData(
+    interactionData,
+    gridCellGlobalFrames,
+    mouseCellPosInOriginalElement,
+  )
+  if (targetGridCellData == null) {
+    return []
+  }
+  const { targetCellCoords, targetRootCell } = targetGridCellData
+
+  const gridCellMoveCommands = setGridPropsCommands(pathForCommands, gridTemplate, {
+    gridColumnStart: gridPositionValue(targetRootCell.column),
+    gridColumnEnd: gridPositionValue(targetRootCell.column + originalCellBounds.height),
+    gridRowStart: gridPositionValue(targetRootCell.row),
+    gridRowEnd: gridPositionValue(targetRootCell.row + originalCellBounds.width),
+  })
+
+  // The siblings of the grid element being moved
+  const siblings = MetadataUtils.getChildrenUnordered(jsxMetadata, gridPath)
+    .filter((s) => !EP.pathsEqual(s.elementPath, selectedElementMetadata.elementPath))
+    .map(
+      (s, index): SortableGridElementProperties => ({
+        ...s.specialSizeMeasurements.elementGridProperties,
+        index: index,
+        path: s.elementPath,
+      }),
+    )
+
+  // Sort the siblings and the cell under mouse ascending based on their grid coordinates, so that
+  // the indexes grow left-right, top-bottom.
+  const templateColumnsCount =
+    gridTemplate.gridTemplateColumns?.type === 'DIMENSIONS'
+      ? gridTemplate.gridTemplateColumns.dimensions.length
+      : 1
+  const cellsSortedByPosition = siblings
+    .concat({
+      ...{
+        gridColumnStart: gridPositionValue(targetCellCoords.column),
+        gridColumnEnd: gridPositionValue(targetCellCoords.column),
+        gridRowStart: gridPositionValue(targetCellCoords.row),
+        gridRowEnd: gridPositionValue(targetCellCoords.row),
+      },
+      path: selectedElementMetadata.elementPath,
+      index: siblings.length + 1,
+    })
+    .sort(sortElementsByGridPosition(templateColumnsCount))
+
+  const indexInSortedCellsForRearrange = cellsSortedByPosition.findIndex((s) =>
+    EP.pathsEqual(selectedElementMetadata.elementPath, s.path),
+  )
+
+  const updateGridControlsCommand = showGridControls(
+    'mid-interaction',
+    gridPath,
+    targetCellCoords,
+    targetRootCell,
+  )
+
+  return [
+    ...gridCellMoveCommands,
+    reorderElement(
+      'always',
+      pathForCommands,
+      absolute(Math.max(indexInSortedCellsForRearrange, 0)),
+    ),
+    updateGridControlsCommand,
+  ]
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-reorder-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-reorder-strategy.ts
new file mode 100644
index 000000000000..e603ba364f9f
--- /dev/null
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-reorder-strategy.ts
@@ -0,0 +1,256 @@
+import type { ElementPath } from 'utopia-shared/src/types'
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import * as EP from '../../../../core/shared/element-path'
+import type {
+  ElementInstanceMetadata,
+  ElementInstanceMetadataMap,
+  GridContainerProperties,
+} from '../../../../core/shared/element-template'
+import { isInfinityRectangle } from '../../../../core/shared/math-utils'
+import * as PP from '../../../../core/shared/property-path'
+import { absolute } from '../../../../utils/utils'
+import type { CanvasCommand } from '../../commands/commands'
+import { deleteProperties } from '../../commands/delete-properties-command'
+import { reorderElement } from '../../commands/reorder-element-command'
+import { showGridControls } from '../../commands/show-grid-controls-command'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import type { CanvasStrategyFactory } from '../canvas-strategies'
+import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
+import type { InteractionCanvasState } from '../canvas-strategy-types'
+import {
+  emptyStrategyApplicationResult,
+  getTargetPathsFromInteractionTarget,
+  strategyApplicationResult,
+} from '../canvas-strategy-types'
+import type { DragInteractionData, InteractionSession } from '../interaction-state'
+import type { GridCellGlobalFrames } from './grid-helpers'
+import {
+  findOriginalGrid,
+  getGridElementPinState,
+  getGridPositionIndex,
+  getOriginalElementGridConfiguration,
+  getParentGridTemplatesFromChildMeasurements,
+  gridMoveStrategiesExtraCommands,
+  isFlowGridChild,
+} from './grid-helpers'
+import { getTargetGridCellData } from '../../../inspector/grid-helpers'
+
+export const gridMoveReorderStrategy: CanvasStrategyFactory = (
+  canvasState: InteractionCanvasState,
+  interactionSession: InteractionSession | null,
+) => {
+  const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget)
+  if (
+    selectedElements.length !== 1 ||
+    interactionSession == null ||
+    interactionSession.interactionData.type !== 'DRAG' ||
+    interactionSession.interactionData.drag == null ||
+    interactionSession.activeControl.type !== 'GRID_CELL_HANDLE' ||
+    interactionSession.interactionData.modifiers.alt ||
+    interactionSession.interactionData.modifiers.cmd // disable reorder when reparenting, for now (TODO)
+  ) {
+    return null
+  }
+
+  const selectedElement = selectedElements[0]
+  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+    return null
+  }
+
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    selectedElement,
+  )
+  if (selectedElementMetadata == null) {
+    return null
+  }
+  if (MetadataUtils.isPositionAbsolute(selectedElementMetadata)) {
+    return null
+  }
+
+  const initialTemplates = getParentGridTemplatesFromChildMeasurements(
+    selectedElementMetadata.specialSizeMeasurements,
+  )
+  if (initialTemplates == null) {
+    return null
+  }
+
+  const parentGridPath = findOriginalGrid(
+    canvasState.startingMetadata,
+    EP.parentPath(selectedElement),
+  ) // TODO don't use EP.parentPath
+  if (parentGridPath == null) {
+    return null
+  }
+
+  const gridFrame = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    parentGridPath,
+  )?.globalFrame
+  if (gridFrame == null || isInfinityRectangle(gridFrame)) {
+    return null
+  }
+
+  const elementGridPropertiesFromProps =
+    selectedElementMetadata.specialSizeMeasurements.elementGridPropertiesFromProps
+
+  const pinnedState = getGridElementPinState(elementGridPropertiesFromProps ?? null)
+  const fitnessModifier = pinnedState !== 'pinned' ? 1 : -1
+
+  return {
+    id: 'reorder-grid-move-strategy',
+    name: 'Grid Reorder',
+    descriptiveLabel: 'Grid Reorder',
+    icon: {
+      category: 'tools',
+      type: 'pointer',
+    },
+    controlsToRender: [controlsForGridPlaceholders(parentGridPath, 'visible-only-while-active')],
+    fitness: onlyFitWhenDraggingThisControl(
+      interactionSession,
+      'GRID_CELL_HANDLE',
+      2 + fitnessModifier,
+    ),
+    apply: () => {
+      if (
+        interactionSession == null ||
+        interactionSession.interactionData.type !== 'DRAG' ||
+        interactionSession.interactionData.drag == null ||
+        interactionSession.activeControl.type !== 'GRID_CELL_HANDLE'
+      ) {
+        return emptyStrategyApplicationResult
+      }
+
+      const { commands, elementsToRerender } = getCommandsAndPatchForGridReorder(
+        canvasState,
+        interactionSession.interactionData,
+        selectedElement,
+        parentGridPath,
+      )
+      if (commands.length === 0) {
+        return emptyStrategyApplicationResult
+      }
+
+      const { midInteractionCommands, onCompleteCommands } = gridMoveStrategiesExtraCommands(
+        parentGridPath,
+        initialTemplates,
+      )
+
+      return strategyApplicationResult(
+        [...midInteractionCommands, ...onCompleteCommands, ...commands],
+        elementsToRerender,
+      )
+    },
+  }
+}
+
+function getCommandsAndPatchForGridReorder(
+  canvasState: InteractionCanvasState,
+  interactionData: DragInteractionData,
+  selectedElement: ElementPath,
+  gridPath: ElementPath,
+): {
+  commands: CanvasCommand[]
+  elementsToRerender: ElementPath[]
+} {
+  if (interactionData.drag == null) {
+    return { commands: [], elementsToRerender: [] }
+  }
+
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    selectedElement,
+  )
+  if (selectedElementMetadata == null) {
+    return { commands: [], elementsToRerender: [] }
+  }
+
+  const { parentGridCellGlobalFrames, parentContainerGridProperties } =
+    selectedElementMetadata.specialSizeMeasurements
+  if (parentGridCellGlobalFrames == null) {
+    return { commands: [], elementsToRerender: [] }
+  }
+
+  const commands = runGridMoveReorder(
+    canvasState.startingMetadata,
+    interactionData,
+    selectedElementMetadata,
+    gridPath,
+    parentGridCellGlobalFrames,
+    parentContainerGridProperties,
+  )
+
+  return {
+    commands: commands,
+    elementsToRerender: [gridPath, selectedElement],
+  }
+}
+
+function runGridMoveReorder(
+  jsxMetadata: ElementInstanceMetadataMap,
+  interactionData: DragInteractionData,
+  selectedElementMetadata: ElementInstanceMetadata,
+  gridPath: ElementPath,
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  gridTemplate: GridContainerProperties,
+): CanvasCommand[] {
+  if (interactionData.drag == null) {
+    return []
+  }
+
+  const mouseCellPosInOriginalElement = getOriginalElementGridConfiguration(
+    gridCellGlobalFrames,
+    interactionData,
+    selectedElementMetadata,
+  )?.mouseCellPosInOriginalElement
+  if (mouseCellPosInOriginalElement == null) {
+    return []
+  }
+
+  const targetGridCellData = getTargetGridCellData(
+    interactionData,
+    gridCellGlobalFrames,
+    mouseCellPosInOriginalElement,
+  )
+  if (targetGridCellData == null) {
+    return []
+  }
+  const { targetCellCoords, targetRootCell } = targetGridCellData
+
+  const gridTemplateColumns =
+    gridTemplate.gridTemplateColumns?.type === 'DIMENSIONS'
+      ? gridTemplate.gridTemplateColumns.dimensions.length
+      : 1
+
+  const gridChildren = MetadataUtils.getChildrenUnordered(jsxMetadata, gridPath)
+  const gridFlowChildrenCount = gridChildren.filter(isFlowGridChild).length
+
+  // The "pure" index in the grid children for the cell under mouse
+  const possiblyReorderIndex = getGridPositionIndex({
+    row: targetCellCoords.row,
+    column: targetCellCoords.column,
+    gridTemplateColumns: gridTemplateColumns,
+  })
+
+  const canReorderToIndex = possiblyReorderIndex < gridFlowChildrenCount
+
+  const updateGridControlsCommand = showGridControls(
+    'mid-interaction',
+    gridPath,
+    targetCellCoords,
+    canReorderToIndex ? targetRootCell : null,
+  )
+
+  return [
+    reorderElement('always', selectedElementMetadata.elementPath, absolute(possiblyReorderIndex)),
+    deleteProperties('always', selectedElementMetadata.elementPath, [
+      PP.create('style', 'gridColumn'),
+      PP.create('style', 'gridRow'),
+      PP.create('style', 'gridColumnStart'),
+      PP.create('style', 'gridColumnEnd'),
+      PP.create('style', 'gridRowStart'),
+      PP.create('style', 'gridRowEnd'),
+    ]),
+    updateGridControlsCommand,
+  ]
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
index 8952cee616b8..9d5f8a20a1a5 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
@@ -10,7 +10,7 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { setGridPropsCommands } from './grid-helpers'
+import { findOriginalGrid, setGridPropsCommands } from './grid-helpers'
 import { getGridChildCellCoordBoundsFromCanvas } from './grid-cell-bounds'
 import { accumulatePresses } from './shared-keyboard-strategy-helpers'
 
@@ -41,7 +41,10 @@ export function gridRearrangeResizeKeyboardStrategy(
     return null
   }
 
-  const parentGridPath = EP.parentPath(target)
+  const parentGridPath = findOriginalGrid(canvasState.startingMetadata, EP.parentPath(target)) // TODO don't use EP.parentPath
+  if (parentGridPath == null) {
+    return null
+  }
 
   const gridTemplate = cell.specialSizeMeasurements.parentContainerGridProperties
   const gridCellGlobalFrames = cell.specialSizeMeasurements.parentGridCellGlobalFrames
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
index e293d4cd572d..ace5540d545f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
@@ -12,7 +12,12 @@ import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 import CanvasActions from '../../canvas-actions'
 import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
 import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
-import { mouseDragFromPointToPoint, mouseUpAtPoint } from '../../event-helpers.test-utils'
+import {
+  keyDown,
+  mouseDownAtPoint,
+  mouseMoveToPoint,
+  mouseUpAtPoint,
+} from '../../event-helpers.test-utils'
 import type { EditorRenderResult } from '../../ui-jsx.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
 import type { GridCellCoordinates } from './grid-cell-bounds'
@@ -84,7 +89,9 @@ describe('grid rearrange move strategy', () => {
       scale: 1,
       pathString: `sb/scene/grid/${testId}`,
       testId: testId,
+      tab: true,
     })
+
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnEnd: 'auto',
       gridColumnStart: '3',
@@ -214,24 +221,21 @@ export var storyboard = (
       const sourceRect = sourceGridCell.getBoundingClientRect()
       const targetRect = targetGridCell.getBoundingClientRect()
 
-      await mouseDragFromPointToPoint(
-        sourceGridCell,
-        {
-          x: sourceRect.x + 10,
-          y: sourceRect.y + 10,
-        },
-        getRectCenter(
-          localRectangle({
-            x: targetRect.x,
-            y: targetRect.y,
-            width: targetRect.width,
-            height: targetRect.height,
-          }),
-        ),
-        {
-          moveBeforeMouseDown: true,
-        },
+      const dragFrom = {
+        x: sourceRect.x + 10,
+        y: sourceRect.y + 10,
+      }
+      const dragTo = getRectCenter(
+        localRectangle({
+          x: targetRect.x,
+          y: targetRect.y,
+          width: targetRect.width,
+          height: targetRect.height,
+        }),
       )
+      await mouseDownAtPoint(sourceGridCell, dragFrom)
+      await mouseMoveToPoint(sourceGridCell, dragTo)
+      await mouseUpAtPoint(sourceGridCell, dragTo)
 
       const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
         editor.renderedDOM.getByTestId(testId).style
@@ -275,8 +279,7 @@ export var storyboard = (
           display: 'grid',
           gridTemplateColumns: '1fr 1fr',
           gridTemplateRows: '1fr 1fr',
-          border: '5px solid #000',
-          gridGap: 10,
+          gridGap: 0,
         }}
       >
         <div
@@ -321,24 +324,22 @@ export var storyboard = (
           y: Math.floor(childBounds.top + childBounds.height / 2),
         })
 
-        await mouseDragFromPointToPoint(
-          editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
-          childCenter,
-          offsetPoint(childCenter, windowPoint({ x: 20, y: 20 })),
-          {
-            moveBeforeMouseDown: true,
-          },
-        )
+        const endPoint = offsetPoint(childCenter, windowPoint({ x: 20, y: 20 }))
 
-        {
-          const { top, left, gridColumn, gridRow } = child.style
-          expect({ top, left, gridColumn, gridRow }).toEqual({
-            gridColumn: '1',
-            gridRow: '1',
-            left: '37px',
-            top: '41px',
-          })
-        }
+        const dragTarget = editor.renderedDOM.getByTestId(
+          GridCellTestId(EP.fromString('sb/scene/grid/child')),
+        )
+        await mouseDownAtPoint(dragTarget, childCenter)
+        await mouseMoveToPoint(dragTarget, endPoint)
+        await mouseUpAtPoint(dragTarget, endPoint)
+
+        const { top, left, gridColumn, gridRow } = child.style
+        expect({ top, left, gridColumn, gridRow }).toEqual({
+          gridColumn: '1',
+          gridRow: '1',
+          left: '32px',
+          top: '36px',
+        })
       })
 
       it('can move absolute element inside a grid cell, zoomed in', async () => {
@@ -366,22 +367,21 @@ export var storyboard = (
           y: Math.floor(childBounds.top + childBounds.height / 2),
         })
 
-        await mouseDragFromPointToPoint(
-          editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
-          childCenter,
-          offsetPoint(childCenter, windowPoint({ x: 240, y: 240 })),
-          {
-            moveBeforeMouseDown: true,
-          },
+        const dragTarget = editor.renderedDOM.getByTestId(
+          GridCellTestId(EP.fromString('sb/scene/grid/child')),
         )
+        const endPoint = offsetPoint(childCenter, windowPoint({ x: 240, y: 240 }))
+        await mouseDownAtPoint(dragTarget, childCenter)
+        await mouseMoveToPoint(dragTarget, endPoint)
+        await mouseUpAtPoint(dragTarget, endPoint)
 
         {
           const { top, left, gridColumn, gridRow } = child.style
           expect({ top, left, gridColumn, gridRow }).toEqual({
             gridColumn: '1',
             gridRow: '1',
-            left: '137px',
-            top: '141px',
+            left: '132px',
+            top: '136px',
           })
         }
       })
@@ -409,22 +409,22 @@ export var storyboard = (
           y: Math.floor(childBounds.top + childBounds.height / 2),
         })
 
-        await mouseDragFromPointToPoint(
-          editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
-          childCenter,
-          offsetPoint(childCenter, windowPoint({ x: 240, y: 240 })),
-          {
-            moveBeforeMouseDown: true,
-          },
+        const endPoint = offsetPoint(childCenter, windowPoint({ x: 240, y: 240 }))
+        const dragTarget = editor.renderedDOM.getByTestId(
+          GridCellTestId(EP.fromString('sb/scene/grid/child')),
         )
 
+        await mouseDownAtPoint(dragTarget, childCenter)
+        await mouseMoveToPoint(dragTarget, endPoint)
+        await mouseUpAtPoint(dragTarget, endPoint)
+
         {
           const { top, left, gridColumn, gridRow } = child.style
           expect({ top, left, gridColumn, gridRow }).toEqual({
             gridColumn: '2',
             gridRow: '2',
-            left: '26.5px',
-            top: '37px',
+            left: '21.5px',
+            top: '32px',
           })
         }
       })
@@ -459,7 +459,6 @@ export var storyboard = (
           display: 'grid',
           gridTemplateColumns: '1fr 1fr 1fr 1fr',
           gridTemplateRows: '1fr 1fr 1fr 1fr',
-          border: '5px solid #000',
           gridGap: 10,
         }}
       >
@@ -495,22 +494,22 @@ export var storyboard = (
           y: Math.floor(childBounds.top + childBounds.height - 3),
         })
 
-        await mouseDragFromPointToPoint(
-          editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
-          startPoint,
-          offsetPoint(startPoint, windowPoint({ x: -100, y: -100 })),
-          {
-            moveBeforeMouseDown: true,
-          },
+        const endPoint = offsetPoint(startPoint, windowPoint({ x: -100, y: -100 }))
+        const dragTarget = editor.renderedDOM.getByTestId(
+          GridCellTestId(EP.fromString('sb/scene/grid/child')),
         )
 
+        await mouseDownAtPoint(dragTarget, startPoint)
+        await mouseMoveToPoint(dragTarget, endPoint)
+        await mouseUpAtPoint(dragTarget, endPoint)
+
         {
           const { top, left, gridColumn, gridRow } = child.style
           expect({ top, left, gridColumn, gridRow }).toEqual({
             gridColumn: '1',
             gridRow: '1',
-            left: '61.5px',
-            top: '62px',
+            left: '59px',
+            top: '59.5px',
           })
         }
       })
@@ -544,7 +543,6 @@ export var storyboard = (
           display: 'grid',
           gridTemplateColumns: '1fr 1fr',
           gridTemplateRows: '1fr 1fr',
-          border: '5px solid #000',
           gridGap: 10,
         }}
       >
@@ -588,23 +586,22 @@ export var storyboard = (
           y: Math.floor(childBounds.top + childBounds.height / 2),
         })
 
-        await mouseDragFromPointToPoint(
-          editor.renderedDOM.getByTestId(GridCellTestId(EP.fromString('sb/scene/grid/child'))),
-          childCenter,
-          offsetPoint(childCenter, windowPoint({ x: 280, y: 120 })),
-          {
-            staggerMoveEvents: false,
-            moveBeforeMouseDown: true,
-          },
+        const dragTarget = editor.renderedDOM.getByTestId(
+          GridCellTestId(EP.fromString('sb/scene/grid/child')),
         )
+        const endPoint = offsetPoint(childCenter, windowPoint({ x: 280, y: 120 }))
+
+        await mouseDownAtPoint(dragTarget, childCenter)
+        await mouseMoveToPoint(dragTarget, endPoint)
+        await mouseUpAtPoint(dragTarget, endPoint)
 
         {
           const { top, left, gridColumn, gridRow } = child.style
           expect({ top, left, gridColumn, gridRow }).toEqual({
             gridColumn: '',
             gridRow: '',
-            left: '297px',
-            top: '141px',
+            left: '292px',
+            top: '136px',
           })
         }
       })
@@ -645,7 +642,13 @@ export var storyboard = (
       const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
 
       const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
-        await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 2, column: 2 })
+        await runReorderTest(
+          editor,
+          'sb/scene/grid',
+          'orange',
+          { row: 2, column: 2 },
+          { tab: true },
+        )
 
       expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
         gridColumnEnd: 'auto',
@@ -659,7 +662,13 @@ export var storyboard = (
     it('reorders an element setting positioning also relative to other fixed elements', async () => {
       const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
 
-      const first = await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 2, column: 2 })
+      const first = await runReorderTest(
+        editor,
+        'sb/scene/grid',
+        'orange',
+        { row: 2, column: 2 },
+        { tab: true },
+      )
 
       expect({
         gridRowStart: first.gridRowStart,
@@ -675,7 +684,13 @@ export var storyboard = (
 
       expect(first.cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
 
-      const second = await runReorderTest(editor, 'sb/scene/grid', 'pink', { row: 2, column: 3 })
+      const second = await runReorderTest(
+        editor,
+        'sb/scene/grid',
+        'pink',
+        { row: 2, column: 3 },
+        { tab: true },
+      )
 
       expect({
         gridRowStart: second.gridRowStart,
@@ -695,7 +710,13 @@ export var storyboard = (
     it('reorders and removes positioning when moving back to contiguous', async () => {
       const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
 
-      const first = await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 2, column: 2 })
+      const first = await runReorderTest(
+        editor,
+        'sb/scene/grid',
+        'orange',
+        { row: 2, column: 2 },
+        { tab: true },
+      )
       expect({
         gridRowStart: first.gridRowStart,
         gridRowEnd: first.gridRowEnd,
@@ -710,7 +731,13 @@ export var storyboard = (
 
       expect(first.cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
 
-      const second = await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 1 })
+      const second = await runReorderTest(
+        editor,
+        'sb/scene/grid',
+        'orange',
+        { row: 1, column: 1 },
+        { tab: true },
+      )
 
       expect({
         gridRowStart: second.gridRowStart,
@@ -733,7 +760,13 @@ export var storyboard = (
         'await-first-dom-report',
       )
 
-      const result = await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 1 })
+      const result = await runReorderTest(
+        editor,
+        'sb/scene/grid',
+        'orange',
+        { row: 1, column: 1 },
+        { tab: true },
+      )
       expect({
         gridRowStart: result.gridRowStart,
         gridRowEnd: result.gridRowEnd,
@@ -759,6 +792,7 @@ async function runMoveTest(
     testId: string
     targetCell?: GridCellCoordinates
     draggedCell?: GridCellCoordinates
+    tab?: boolean
   },
 ) {
   const elementPathToDrag = EP.fromString(props.pathString)
@@ -789,6 +823,10 @@ async function runMoveTest(
   const sourceRect = sourceGridCell.getBoundingClientRect()
   const targetRect = targetGridCell.getBoundingClientRect()
 
+  const dragFrom = {
+    x: sourceRect.x + 10,
+    y: sourceRect.y + 10,
+  }
   const endPoint = getRectCenter(
     localRectangle({
       x: targetRect.x,
@@ -798,18 +836,11 @@ async function runMoveTest(
     }),
   )
 
-  await mouseDragFromPointToPoint(
-    sourceGridCell,
-    {
-      x: sourceRect.x + 10,
-      y: sourceRect.y + 10,
-    },
-    endPoint,
-    {
-      staggerMoveEvents: false,
-      moveBeforeMouseDown: true,
-    },
-  )
+  await mouseDownAtPoint(sourceGridCell, dragFrom)
+  await mouseMoveToPoint(sourceGridCell, endPoint)
+  if (props.tab) {
+    await keyDown('Tab')
+  }
   await mouseUpAtPoint(editor.renderedDOM.getByTestId(CanvasControlsContainerID), endPoint)
 
   return editor.renderedDOM.getByTestId(props.testId).style
@@ -820,12 +851,14 @@ async function runReorderTest(
   gridTestId: string,
   testId: string,
   targetCell: GridCellCoordinates,
+  options?: { tab?: boolean },
 ) {
   const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
     scale: 1,
     pathString: `${gridTestId}/${testId}`,
     testId: testId,
     targetCell: targetCell,
+    tab: options?.tab,
   })
 
   const element = editor.getEditorState().editor.jsxMetadata[gridTestId]
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
deleted file mode 100644
index 430007657cc5..000000000000
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-import type { ElementPath } from 'utopia-shared/src/types'
-import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
-import * as EP from '../../../../core/shared/element-path'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
-import type {
-  ElementInstanceMetadataMap,
-  GridAutoOrTemplateBase,
-} from '../../../../core/shared/element-template'
-import * as PP from '../../../../core/shared/property-path'
-import { printGridAutoOrTemplateBase } from '../../../inspector/common/css-utils'
-import type { PropertyToUpdate } from '../../commands/set-property-command'
-import {
-  propertyToDelete,
-  propertyToSet,
-  updateBulkProperties,
-} from '../../commands/set-property-command'
-import type { CanvasStrategyFactory } from '../canvas-strategies'
-import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
-import type { ControlWithProps, InteractionCanvasState } from '../canvas-strategy-types'
-import {
-  getTargetPathsFromInteractionTarget,
-  emptyStrategyApplicationResult,
-  strategyApplicationResult,
-} from '../canvas-strategy-types'
-import type { DragInteractionData, InteractionSession } from '../interaction-state'
-import { runGridRearrangeMove } from './grid-helpers'
-import { isInfinityRectangle } from '../../../../core/shared/math-utils'
-import type { CanvasCommand } from '../../commands/commands'
-
-export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
-  canvasState: InteractionCanvasState,
-  interactionSession: InteractionSession | null,
-) => {
-  const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget)
-  if (
-    selectedElements.length === 0 ||
-    interactionSession == null ||
-    interactionSession.interactionData.type !== 'DRAG' ||
-    interactionSession.interactionData.drag == null ||
-    interactionSession.activeControl.type !== 'GRID_CELL_HANDLE' ||
-    interactionSession.interactionData.modifiers.alt
-  ) {
-    return null
-  }
-
-  const selectedElement = selectedElements[0]
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
-    return null
-  }
-
-  const parentGridPath = EP.parentPath(selectedElement)
-  const gridFrame = MetadataUtils.findElementByElementPath(
-    canvasState.startingMetadata,
-    parentGridPath,
-  )?.globalFrame
-  if (gridFrame == null || isInfinityRectangle(gridFrame)) {
-    return null
-  }
-
-  const initialTemplates = getGridTemplates(canvasState.startingMetadata, parentGridPath)
-  if (initialTemplates == null) {
-    return null
-  }
-
-  const strategyToApply = getStrategyToApply(
-    interactionSession.interactionData,
-    parentGridPath,
-    canvasState.startingMetadata,
-    selectedElement,
-  )
-  if (strategyToApply == null) {
-    return null
-  }
-
-  return {
-    id: 'rearrange-grid-move-strategy',
-    name: strategyToApply.name,
-    descriptiveLabel: strategyToApply.name,
-    icon: {
-      category: 'tools',
-      type: 'pointer',
-    },
-    controlsToRender: strategyToApply.controlsToRender,
-    fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 2),
-    apply: (strategyLifecycle) => {
-      if (
-        interactionSession == null ||
-        interactionSession.interactionData.type !== 'DRAG' ||
-        interactionSession.interactionData.drag == null ||
-        interactionSession.activeControl.type !== 'GRID_CELL_HANDLE'
-      ) {
-        return emptyStrategyApplicationResult
-      }
-
-      const midInteractionCommands = [
-        // during the interaction, freeze the template with the calculated values…
-        updateBulkProperties('mid-interaction', parentGridPath, [
-          propertyToSet(
-            PP.create('style', 'gridTemplateColumns'),
-            printGridAutoOrTemplateBase(initialTemplates.calculated.columns),
-          ),
-          propertyToSet(
-            PP.create('style', 'gridTemplateRows'),
-            printGridAutoOrTemplateBase(initialTemplates.calculated.rows),
-          ),
-        ]),
-      ]
-
-      const onCompleteCommands = [
-        // …eventually, restore the grid template on complete.
-        updateBulkProperties(
-          'on-complete',
-          parentGridPath,
-          restoreGridTemplateFromProps(initialTemplates.fromProps),
-        ),
-      ]
-
-      const { commands, elementsToRerender } = getCommandsAndPatchForGridRearrange(
-        canvasState,
-        interactionSession.interactionData,
-        selectedElement,
-      )
-
-      if (commands.length === 0) {
-        return emptyStrategyApplicationResult
-      }
-
-      return strategyApplicationResult(
-        [...midInteractionCommands, ...onCompleteCommands, ...commands],
-        elementsToRerender,
-      )
-    },
-  }
-}
-
-function getCommandsAndPatchForGridRearrange(
-  canvasState: InteractionCanvasState,
-  interactionData: DragInteractionData,
-  selectedElement: ElementPath,
-): {
-  commands: CanvasCommand[]
-  elementsToRerender: ElementPath[]
-} {
-  if (interactionData.drag == null) {
-    return { commands: [], elementsToRerender: [] }
-  }
-
-  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
-    canvasState.startingMetadata,
-    selectedElement,
-  )
-  if (selectedElementMetadata == null) {
-    return { commands: [], elementsToRerender: [] }
-  }
-
-  const { parentGridCellGlobalFrames, parentContainerGridProperties } =
-    selectedElementMetadata.specialSizeMeasurements
-
-  const commands =
-    parentGridCellGlobalFrames != null
-      ? runGridRearrangeMove(
-          selectedElement,
-          selectedElement,
-          canvasState.startingMetadata,
-          interactionData,
-          parentGridCellGlobalFrames,
-          parentContainerGridProperties,
-        )
-      : []
-
-  return {
-    commands: commands,
-    elementsToRerender: [EP.parentPath(selectedElement), selectedElement],
-  }
-}
-
-function restoreGridTemplateFromProps(params: {
-  columns: GridAutoOrTemplateBase
-  rows: GridAutoOrTemplateBase
-}): PropertyToUpdate[] {
-  let properties: PropertyToUpdate[] = []
-  const newCols = printGridAutoOrTemplateBase(params.columns)
-  const newRows = printGridAutoOrTemplateBase(params.rows)
-  if (newCols === '') {
-    properties.push(propertyToDelete(PP.create('style', 'gridTemplateColumns')))
-  } else {
-    properties.push(propertyToSet(PP.create('style', 'gridTemplateColumns'), newCols))
-  }
-  if (newRows === '') {
-    properties.push(propertyToDelete(PP.create('style', 'gridTemplateRows')))
-  } else {
-    properties.push(propertyToSet(PP.create('style', 'gridTemplateRows'), newRows))
-  }
-  return properties
-}
-
-function getGridTemplates(jsxMetadata: ElementInstanceMetadataMap, gridPath: ElementPath) {
-  const grid = MetadataUtils.findElementByElementPath(jsxMetadata, gridPath)
-  if (grid == null) {
-    return null
-  }
-
-  const templateFromProps = grid.specialSizeMeasurements.containerGridPropertiesFromProps
-  const templateRowsFromProps = templateFromProps.gridTemplateRows
-  if (templateRowsFromProps == null) {
-    return null
-  }
-  const templateColsFromProps = templateFromProps.gridTemplateColumns
-  if (templateColsFromProps == null) {
-    return null
-  }
-
-  const templateCalculated = grid.specialSizeMeasurements.containerGridProperties
-  const templateRowsCalculated = templateCalculated.gridTemplateRows
-  if (templateRowsCalculated == null) {
-    return null
-  }
-  const templateColsCalculated = templateCalculated.gridTemplateColumns
-  if (templateColsCalculated == null) {
-    return null
-  }
-
-  return {
-    calculated: {
-      columns: templateColsCalculated,
-      rows: templateRowsCalculated,
-    },
-    fromProps: {
-      columns: templateColsFromProps,
-      rows: templateRowsFromProps,
-    },
-  }
-}
-
-type StrategyToApply = {
-  controlsToRender: ControlWithProps<any>[]
-  name: string
-}
-
-function getStrategyToApply(
-  interactionData: DragInteractionData,
-  parentGridPath: ElementPath,
-  jsxMetadata: ElementInstanceMetadataMap,
-  cell: ElementPath,
-): StrategyToApply | null {
-  if (interactionData.drag == null) {
-    return null
-  }
-
-  const element = MetadataUtils.findElementByElementPath(jsxMetadata, cell)
-
-  const name =
-    MetadataUtils.isPositionAbsolute(element) &&
-    !MetadataUtils.isGridCellWithPositioning(jsxMetadata, cell)
-      ? 'Grid Move (Abs)'
-      : 'Rearrange Grid (Move)'
-
-  return {
-    name: name,
-    controlsToRender: [controlsForGridPlaceholders(parentGridPath, 'visible-only-while-active')],
-  }
-}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
index 313c9b8deee0..b1e296f1aec2 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx
@@ -847,6 +847,8 @@ describe('grid reparent strategies', () => {
           backgroundColor: '#f0f',
           width: 79,
           height: 86,
+          gridColumn: 3,
+          gridRow: 1,
         }}
         data-uid='dragme'
         data-testid='dragme'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 2f8ee083020b..968c3ee88b3d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -4,10 +4,7 @@ import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { mapDropNulls } from '../../../../core/shared/array-utils'
 import * as EP from '../../../../core/shared/element-path'
 import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
-import {
-  type ElementInstanceMetadata,
-  type ElementInstanceMetadataMap,
-} from '../../../../core/shared/element-template'
+import { type ElementInstanceMetadataMap } from '../../../../core/shared/element-template'
 import type { CanvasRectangle } from '../../../../core/shared/math-utils'
 import { isInfinityRectangle } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
@@ -38,7 +35,7 @@ import {
 import type { DragInteractionData, InteractionSession, UpdatedPathMap } from '../interaction-state'
 import { honoursPropsPosition, shouldKeepMovingDraggedGroupChildren } from './absolute-utils'
 import { replaceFragmentLikePathsWithTheirChildrenRecursive } from './fragment-like-helpers'
-import { runGridRearrangeMove } from './grid-helpers'
+import { runGridMoveRearrange } from './grid-move-rearrange-strategy'
 import { ifAllowedToReparent, isAllowedToReparent } from './reparent-helpers/reparent-helpers'
 import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-property-changes'
 import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers'
@@ -268,21 +265,34 @@ function gridReparentCommands(
     jsxMetadata,
     newParent.intendedParentPath,
   )
+  if (targetParent == null) {
+    return null
+  }
+
   const gridCellGlobalFrames = targetParent?.specialSizeMeasurements.gridCellGlobalFrames ?? null
+  if (gridCellGlobalFrames == null) {
+    return null
+  }
+
   const gridTemplate = targetParent?.specialSizeMeasurements.containerGridProperties ?? null
+  if (gridTemplate == null) {
+    return null
+  }
 
-  const gridPropsCommands =
-    gridCellGlobalFrames != null && gridTemplate != null
-      ? runGridRearrangeMove(
-          target,
-          target,
-          jsxMetadata,
-          interactionData,
-          gridCellGlobalFrames,
-          gridTemplate,
-          newPath,
-        )
-      : []
+  const targetElement = MetadataUtils.findElementByElementPath(jsxMetadata, target)
+  if (targetElement == null) {
+    return null
+  }
+
+  const gridPropsCommands = runGridMoveRearrange(
+    jsxMetadata,
+    interactionData,
+    targetElement,
+    targetParent.elementPath,
+    gridCellGlobalFrames,
+    gridTemplate,
+    newPath,
+  )
 
   const removeAbsolutePositioningPropsCommands = removeAbsolutePositioningProps('always', newPath)
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index d315bbadc7d6..187915c80452 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -20,7 +20,7 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { setGridPropsCommands } from './grid-helpers'
+import { findOriginalGrid, setGridPropsCommands } from './grid-helpers'
 import { resizeBoundingBoxFromSide } from './resize-helpers'
 
 export const gridResizeElementStrategy: CanvasStrategyFactory = (
@@ -60,7 +60,13 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const parentGridPath = EP.parentPath(selectedElement)
+  const parentGridPath = findOriginalGrid(
+    canvasState.startingMetadata,
+    EP.parentPath(selectedElement),
+  ) // TODO don't use EP.parentPath
+  if (parentGridPath == null) {
+    return null
+  }
 
   return {
     id: 'GRID-CELL-RESIZE-STRATEGY',
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.spec.browser2.tsx
deleted file mode 100644
index 42293637b623..000000000000
--- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.spec.browser2.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import { getPrintedUiJsCode, renderTestEditorWithCode } from '../../ui-jsx.test-utils'
-import * as EP from '../../../../core/shared/element-path'
-import { selectComponents } from '../../../../components/editor/actions/meta-actions'
-import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
-import {
-  mouseDownAtPoint,
-  mouseMoveToPoint,
-  mouseUpAtPoint,
-  pressKey,
-} from '../../event-helpers.test-utils'
-import { canvasPoint } from '../../../../core/shared/math-utils'
-import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
-
-const testProject = `
-import * as React from 'react'
-import { Storyboard } from 'utopia-api'
-
-export var storyboard = (
-  <Storyboard data-uid='sb'>
-    <div
-      data-uid='grid'
-      data-testid='grid'
-      style={{
-        position: 'absolute',
-        left: 25,
-        top: 305,
-        display: 'grid',
-        gap: 10,
-        width: 600,
-        height: 600,
-        gridTemplateColumns: '2.4fr 1fr 1fr',
-        gridTemplateRows: '99px 109px 90px',
-        height: 'max-content',
-      }}
-    >
-      <div
-        data-uid='row-1-column-1'
-        data-testid='row-1-column-1'
-        style={{
-          backgroundColor: 'green',
-        }}
-      />
-      <div
-        data-uid='row-2-column-1'
-        data-testid='row-2-column-1'
-        style={{ backgroundColor: 'blue' }}
-      />
-      <div
-        data-uid='row-1-column-3'
-        data-testid='row-1-column-3'
-        style={{ backgroundColor: 'pink' }}
-      />
-      <div
-        data-uid='row-1-column-2'
-        data-testid='row-1-column-2'
-        style={{
-          backgroundColor: 'green',
-		  gridRow: 'auto',
-		  gridColumn: 'auto',
-        }}
-      />
-      <div
-        data-uid='row-2-column-2'
-        data-testid='row-2-column-2'
-        style={{
-          backgroundColor: 'blue',
-        }}
-      />
-      <div 
-        data-uid='row-2-column-3'
-        data-testid='row-2-column-3'
-        style={{ backgroundColor: 'pink' }} 
-      />
-      <div
-        data-uid='row-3-column-1'
-        data-testid='row-3-column-1'
-        style={{ backgroundColor: 'green' }} 
-      />
-      <div
-        data-uid='row-3-column-2'
-        data-testid='row-3-column-2'
-        style={{ backgroundColor: 'blue' }}
-      />
-      <div
-        data-uid='row-3-column-3'
-        data-testid='row-3-column-3'
-        style={{ backgroundColor: 'pink' }}
-      />
-    </div>
-  </Storyboard>
-)
-`
-
-describe('swap an element', () => {
-  it('swap out an element for another from a different column and row', async () => {
-    const renderResult = await renderTestEditorWithCode(testProject, 'await-first-dom-report')
-    const draggedItem = EP.fromString(`sb/grid/row-1-column-2`)
-    await renderResult.dispatch(selectComponents([draggedItem], false), true)
-    await renderResult.getDispatchFollowUpActionsFinished()
-    const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
-    const draggedItemElement = renderResult.renderedDOM.getByTestId(
-      GridCellTestId(EP.fromString(`sb/grid/row-1-column-2`)),
-    )
-    const draggedItemRect = draggedItemElement.getBoundingClientRect()
-    const startPoint = canvasPoint({
-      x: draggedItemRect.x + draggedItemRect.width / 2,
-      y: draggedItemRect.y + draggedItemRect.height / 2,
-    })
-    const swapTargetElement = renderResult.renderedDOM.getByTestId(
-      GridCellTestId(EP.fromString(`sb/grid/row-2-column-1`)),
-    )
-    const swapTargetRect = swapTargetElement.getBoundingClientRect()
-    const endPoint = canvasPoint({
-      x: swapTargetRect.x + swapTargetRect.width / 2,
-      y: swapTargetRect.y + swapTargetRect.height / 2,
-    })
-    await mouseMoveToPoint(draggedItemElement, startPoint)
-    await mouseDownAtPoint(draggedItemElement, startPoint)
-    await mouseMoveToPoint(canvasControlsLayer, endPoint)
-    await pressKey('Tab')
-    await renderResult.getDispatchFollowUpActionsFinished()
-    expect(
-      renderResult.getEditorState().editor.canvas.interactionSession?.userPreferredStrategy,
-    ).toEqual('rearrange-grid-swap-strategy')
-    await mouseUpAtPoint(canvasControlsLayer, endPoint)
-    await renderResult.getDispatchFollowUpActionsFinished()
-
-    expect(getPrintedUiJsCode(renderResult.getEditorState()))
-      .toEqual(`import * as React from 'react'
-import { Storyboard } from 'utopia-api'
-
-export var storyboard = (
-  <Storyboard data-uid='sb'>
-    <div
-      data-uid='grid'
-      data-testid='grid'
-      style={{
-        position: 'absolute',
-        left: 25,
-        top: 305,
-        display: 'grid',
-        gap: 10,
-        width: 600,
-        height: 600,
-        gridTemplateColumns: '2.4fr 1fr 1fr',
-        gridTemplateRows: '99px 109px 90px',
-        height: 'max-content',
-      }}
-    >
-      <div
-        data-uid='row-1-column-1'
-        data-testid='row-1-column-1'
-        style={{ backgroundColor: 'green' }}
-      />
-      <div
-        data-uid='row-1-column-2'
-        data-testid='row-1-column-2'
-        style={{
-          backgroundColor: 'green',
-          gridColumn: 'auto',
-          gridRow: 'auto',
-        }}
-      />
-      <div
-        data-uid='row-1-column-3'
-        data-testid='row-1-column-3'
-        style={{ backgroundColor: 'pink' }}
-      />
-      <div
-        data-uid='row-2-column-1'
-        data-testid='row-2-column-1'
-        style={{
-          backgroundColor: 'blue',
-          gridColumn: 'auto',
-          gridRow: 'auto',
-        }}
-      />
-      <div
-        data-uid='row-2-column-2'
-        data-testid='row-2-column-2'
-        style={{ backgroundColor: 'blue' }}
-      />
-      <div
-        data-uid='row-2-column-3'
-        data-testid='row-2-column-3'
-        style={{ backgroundColor: 'pink' }}
-      />
-      <div
-        data-uid='row-3-column-1'
-        data-testid='row-3-column-1'
-        style={{ backgroundColor: 'green' }}
-      />
-      <div
-        data-uid='row-3-column-2'
-        data-testid='row-3-column-2'
-        style={{ backgroundColor: 'blue' }}
-      />
-      <div
-        data-uid='row-3-column-3'
-        data-testid='row-3-column-3'
-        style={{ backgroundColor: 'pink' }}
-      />
-    </div>
-  </Storyboard>
-)
-`)
-  })
-})
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
deleted file mode 100644
index ffaebb2d3f6b..000000000000
--- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
-import * as EP from '../../../../core/shared/element-path'
-import type {
-  ElementInstanceMetadata,
-  GridContainerProperties,
-} from '../../../../core/shared/element-template'
-import {
-  isFiniteRectangle,
-  offsetPoint,
-  rectContainsPointInclusive,
-} from '../../../../core/shared/math-utils'
-import type { ElementPath } from '../../../../core/shared/project-file-types'
-import { create } from '../../../../core/shared/property-path'
-import type { CanvasCommand } from '../../commands/commands'
-import { deleteProperties } from '../../commands/delete-properties-command'
-import { rearrangeChildren } from '../../commands/rearrange-children-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
-import { recurseIntoChildrenOfMapOrFragment } from '../../gap-utils'
-import type { CanvasStrategyFactory } from '../canvas-strategies'
-import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
-import type { InteractionCanvasState } from '../canvas-strategy-types'
-import {
-  getTargetPathsFromInteractionTarget,
-  emptyStrategyApplicationResult,
-  strategyApplicationResult,
-} from '../canvas-strategy-types'
-import type { InteractionSession } from '../interaction-state'
-import { setGridPropsCommands } from './grid-helpers'
-
-export const rearrangeGridSwapStrategy: CanvasStrategyFactory = (
-  canvasState: InteractionCanvasState,
-  interactionSession: InteractionSession | null,
-) => {
-  const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget)
-  if (
-    selectedElements.length !== 1 ||
-    interactionSession == null ||
-    interactionSession.interactionData.type !== 'DRAG' ||
-    interactionSession.interactionData.drag == null ||
-    interactionSession.activeControl.type !== 'GRID_CELL_HANDLE' ||
-    interactionSession.interactionData.modifiers.alt ||
-    interactionSession.interactionData.modifiers.cmd
-  ) {
-    return null
-  }
-
-  const selectedElement = selectedElements[0]
-
-  if (!MetadataUtils.isGridCellWithPositioning(canvasState.startingMetadata, selectedElement)) {
-    return null
-  }
-
-  const children = recurseIntoChildrenOfMapOrFragment(
-    canvasState.startingMetadata,
-    canvasState.startingAllElementProps,
-    canvasState.startingElementPathTree,
-    EP.parentPath(selectedElement),
-  )
-
-  const parentGridPath = EP.parentPath(selectedElement)
-
-  return {
-    id: 'rearrange-grid-swap-strategy',
-    name: 'Rearrange Grid (Swap)',
-    descriptiveLabel: 'Rearrange Grid (Swap)',
-    icon: {
-      category: 'tools',
-      type: 'pointer',
-    },
-    controlsToRender: [controlsForGridPlaceholders(parentGridPath)],
-    fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 1),
-    apply: () => {
-      if (
-        interactionSession == null ||
-        interactionSession.interactionData.type !== 'DRAG' ||
-        interactionSession.interactionData.drag == null ||
-        interactionSession.activeControl.type !== 'GRID_CELL_HANDLE'
-      ) {
-        return emptyStrategyApplicationResult
-      }
-
-      const pointOnCanvas = offsetPoint(
-        interactionSession.interactionData.dragStart,
-        interactionSession.interactionData.drag,
-      )
-
-      const pointerOverChild = children.find(
-        (c) =>
-          c.globalFrame != null &&
-          isFiniteRectangle(c.globalFrame) &&
-          rectContainsPointInclusive(c.globalFrame, pointOnCanvas),
-      )
-
-      const container = MetadataUtils.findElementByElementPath(
-        canvasState.startingMetadata,
-        EP.parentPath(selectedElement),
-      )
-      if (container == null) {
-        return emptyStrategyApplicationResult
-      }
-      const gridTemplate = container.specialSizeMeasurements.containerGridProperties
-
-      let commands: CanvasCommand[] = []
-
-      if (
-        pointerOverChild != null &&
-        EP.toUid(pointerOverChild.elementPath) !== EP.toUid(interactionSession.activeControl.path)
-      ) {
-        commands.push(
-          ...swapChildrenCommands({
-            grabbedElementUid: EP.toUid(interactionSession.activeControl.path),
-            swapToElementUid: EP.toUid(pointerOverChild.elementPath),
-            children: children,
-            parentPath: EP.parentPath(selectedElement),
-            gridTemplate: gridTemplate,
-          }),
-        )
-      }
-
-      if (commands == null) {
-        return emptyStrategyApplicationResult
-      }
-
-      return strategyApplicationResult(commands, [EP.parentPath(selectedElement)])
-    },
-  }
-}
-
-export const GridPositioningProps: Array<keyof React.CSSProperties> = [
-  'gridColumn',
-  'gridRow',
-  'gridColumnStart',
-  'gridColumnEnd',
-  'gridRowStart',
-  'gridRowEnd',
-]
-
-function swapChildrenCommands({
-  grabbedElementUid,
-  swapToElementUid,
-  children,
-  parentPath,
-  gridTemplate,
-}: {
-  grabbedElementUid: string
-  swapToElementUid: string
-  children: ElementInstanceMetadata[]
-  parentPath: ElementPath
-  gridTemplate: GridContainerProperties
-}): CanvasCommand[] {
-  const grabbedElement = children.find((c) => EP.toUid(c.elementPath) === grabbedElementUid)
-  const swapToElement = children.find((c) => EP.toUid(c.elementPath) === swapToElementUid)
-
-  if (grabbedElement == null || swapToElement == null) {
-    return []
-  }
-
-  const rearrangedChildren = children
-    .map((c) => {
-      if (EP.pathsEqual(c.elementPath, grabbedElement.elementPath)) {
-        return swapToElement.elementPath
-      }
-      if (EP.pathsEqual(c.elementPath, swapToElement.elementPath)) {
-        return grabbedElement.elementPath
-      }
-      return c.elementPath
-    })
-    .map((path) => EP.dynamicPathToStaticPath(path))
-
-  return [
-    rearrangeChildren('always', parentPath, rearrangedChildren),
-    deleteProperties(
-      'always',
-      swapToElement.elementPath,
-      GridPositioningProps.map((p) => create('style', p)),
-    ),
-    deleteProperties(
-      'always',
-      grabbedElement.elementPath,
-      GridPositioningProps.map((p) => create('style', p)),
-    ),
-    ...setGridPropsCommands(
-      grabbedElement.elementPath,
-      gridTemplate,
-      swapToElement.specialSizeMeasurements.elementGridProperties,
-    ),
-    ...setGridPropsCommands(
-      swapToElement.elementPath,
-      gridTemplate,
-      grabbedElement.specialSizeMeasurements.elementGridProperties,
-    ),
-  ]
-}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index 4c58e3d97ad9..95733b2426fd 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -87,10 +87,10 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const gridPath = isGrid ? selectedElement : EP.parentPath(selectedElement)
-  const metadata = interactionSession?.latestMetadata ?? canvasState.startingMetadata
-  const originalGridPath = findOriginalGrid(metadata, gridPath)
-  if (originalGridPath == null) {
+  const gridPath = isGrid
+    ? selectedElement
+    : findOriginalGrid(canvasState.startingMetadata, EP.parentPath(selectedElement)) // TODO don't use EP.parentPath
+  if (gridPath == null) {
     return null
   }
 
@@ -131,7 +131,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       const dragAmount = control.axis === 'column' ? drag.x : drag.y
 
       const gridSpecialSizeMeasurements =
-        canvasState.startingMetadata[EP.toString(originalGridPath)].specialSizeMeasurements
+        canvasState.startingMetadata[EP.toString(gridPath)].specialSizeMeasurements
 
       const originalValues =
         control.axis === 'column'
@@ -242,11 +242,11 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       }
 
       let commands: CanvasCommand[] = [
-        updateBulkProperties('always', originalGridPath, propertiesToUpdate),
+        updateBulkProperties('always', gridPath, propertiesToUpdate),
         setCursorCommand(control.axis === 'column' ? CSSCursor.ColResize : CSSCursor.RowResize),
       ]
 
-      return strategyApplicationResult(commands, [originalGridPath])
+      return strategyApplicationResult(commands, [gridPath])
     },
   }
 }
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 2cb226ce961e..7491cc5a9ef8 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -65,6 +65,7 @@ import { gridCellTargetId } from '../canvas-strategies/strategies/grid-cell-boun
 import {
   getGlobalFrameOfGridCellFromMetadata,
   getGridRelatedIndexes,
+  getGridElementPinState,
 } from '../canvas-strategies/strategies/grid-helpers'
 import { canResizeGridTemplate } from '../canvas-strategies/strategies/resize-grid-strategy'
 import { resizeBoundingBoxFromSide } from '../canvas-strategies/strategies/resize-helpers'
@@ -677,6 +678,19 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
     'GridControl anyTargetAbsolute',
   )
 
+  const anyTargetNotPinned = useEditorState(
+    Substores.metadata,
+    (store) =>
+      store.editor.selectedViews.some(
+        (elementPath) =>
+          getGridElementPinState(
+            MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, elementPath)
+              ?.specialSizeMeasurements.elementGridPropertiesFromProps ?? null,
+          ) !== 'pinned',
+      ),
+    'GridControl anyTargetNotPinned',
+  )
+
   const scale = useEditorState(
     Substores.canvas,
     (store) => store.editor.canvas.scale,
@@ -840,7 +854,7 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
   )
 
   useCellAnimation({
-    disabled: anyTargetAbsolute,
+    disabled: anyTargetAbsolute || anyTargetNotPinned,
     targetRootCell: targetRootCell,
     controls: controls,
     shadowFrame: initialShadowFrame,
@@ -862,7 +876,15 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
     }`,
   }
 
-  const dontShowActiveCellHighlight = !targetsAreCellsWithPositioning && anyTargetAbsolute
+  const targetRootCellIsValidTarget = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.controls.gridControlData?.rootCell != null,
+    'GridControl targetRootCellIsValidTarget',
+  )
+
+  const dontShowActiveCellHighlight =
+    (!targetsAreCellsWithPositioning && anyTargetAbsolute) ||
+    (anyTargetNotPinned && !targetRootCellIsValidTarget)
 
   return (
     <React.Fragment>
@@ -1440,7 +1462,7 @@ function useCellAnimation(params: {
   const selectedViews = useEditorState(
     Substores.selectedViews,
     (store) => store.editor.selectedViews,
-    'useSnapAnimation selectedViews',
+    'useCellAnimation selectedViews',
   )
 
   const animate = useCanvasAnimation(selectedViews)
diff --git a/editor/src/components/canvas/event-helpers.test-utils.tsx b/editor/src/components/canvas/event-helpers.test-utils.tsx
index 11f37d4f63fb..1f5e1c50e768 100644
--- a/editor/src/components/canvas/event-helpers.test-utils.tsx
+++ b/editor/src/components/canvas/event-helpers.test-utils.tsx
@@ -205,6 +205,7 @@ export async function mouseDragFromPointToPoint(
     moveBeforeMouseDown?: boolean
     skipMouseUp?: boolean
     realMouseDown?: boolean
+    tab?: boolean
   } = {},
 ): Promise<void> {
   const { buttons, ...mouseUpOptions } = options.eventOptions ?? {}
@@ -271,6 +272,10 @@ export async function mouseDragFromPointToPoint(
     )
   }
 
+  if (options.tab) {
+    await keyDown('Tab')
+  }
+
   if (options.midDragCallback != null) {
     await options.midDragCallback()
   }
diff --git a/editor/src/components/inspector/grid-helpers.ts b/editor/src/components/inspector/grid-helpers.ts
index ef8be9bff817..3b91b1feb7a1 100644
--- a/editor/src/components/inspector/grid-helpers.ts
+++ b/editor/src/components/inspector/grid-helpers.ts
@@ -16,6 +16,14 @@ import {
   isGridCSSNumber,
   type GridDimension,
 } from './common/css-utils'
+import type { DragInteractionData } from '../canvas/canvas-strategies/interaction-state'
+import { offsetPoint } from '../../core/shared/math-utils'
+import type { GridCellCoordinates } from '../canvas/canvas-strategies/strategies/grid-cell-bounds'
+import {
+  getClosestGridCellToPoint,
+  gridCellCoordinates,
+} from '../canvas/canvas-strategies/strategies/grid-cell-bounds'
+import type { GridCellGlobalFrames } from '../canvas/canvas-strategies/strategies/grid-helpers'
 
 export const useGridExpressionInputFocused = () => {
   const [focused, setFocused] = React.useState(false)
@@ -49,3 +57,44 @@ export const gridDimensionDropdownKeywords = [
   { label: 'Min-Content', value: cssKeyword('min-content') },
   { label: 'Max-Content', value: cssKeyword('max-content') },
 ]
+
+export const GridPositioningProps: Array<keyof React.CSSProperties> = [
+  'gridColumn',
+  'gridRow',
+  'gridColumnStart',
+  'gridColumnEnd',
+  'gridRowStart',
+  'gridRowEnd',
+]
+
+export function getTargetGridCellData(
+  interactionData: DragInteractionData,
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  mouseCellPosInOriginalElement: GridCellCoordinates,
+): {
+  targetCellCoords: GridCellCoordinates
+  targetRootCell: GridCellCoordinates
+} | null {
+  if (interactionData.drag == null) {
+    return null
+  }
+  const mousePos = offsetPoint(interactionData.dragStart, interactionData.drag)
+  const targetCellData = getClosestGridCellToPoint(gridCellGlobalFrames, mousePos)
+  if (targetCellData == null) {
+    return null
+  }
+  const targetCellCoords = targetCellData?.gridCellCoordinates
+  if (targetCellCoords == null) {
+    return null
+  }
+
+  const row = Math.max(targetCellCoords.row - mouseCellPosInOriginalElement.row, 1)
+  const column = Math.max(targetCellCoords.column - mouseCellPosInOriginalElement.column, 1)
+
+  const targetRootCell = gridCellCoordinates(row, column)
+
+  return {
+    targetCellCoords,
+    targetRootCell,
+  }
+}
diff --git a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
index 3f206d40aab6..15141b3f314a 100644
--- a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
+++ b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
@@ -39,7 +39,7 @@ import {
 } from '../../../common/css-utils'
 import { UIGridRow } from '../../../widgets/ui-grid-row'
 import { deleteProperties } from '../../../../canvas/commands/delete-properties-command'
-import { GridPositioningProps } from '../../../../canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy'
+import { GridPositioningProps } from '../../../grid-helpers'
 import { styleP } from '../../../inspector-common'
 
 type CellAdjustMode = 'dimensions' | 'boundaries'

From 2c8aee3c8728128e48f5f81e41431d5c790e34ca Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 6 Nov 2024 10:22:21 +0100
Subject: [PATCH 201/272] Allow reparenting of components without style prop
 support (#6616)

**Problem:**
Components without style prop support are not allowed to be reparented.

**Fix:**
- Remove the condition which disallows reparenting when the target does
not honours position style props.
- Fix condition in absolute reparenting that honouring style props is
necessary for absolute reparent
- Fix exception in grid rearrange animation when the selector does not
find an element
- Added test

**Problems to solve:**
This PR is a technical PR to support reparenting, but the experience is
quite bad:
1. Moving of these components is not allowed, so we show the
notpermitted cursor until you stay in the original parent (so most users
would probably give up before actually trying to reparent)
2. Reparent to flow is allowed, but that doesn't render the element
(only a blue line between siblings, if there are siblings), and does not
even render an outline (which is rendered inside the original parent)

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../strategies/absolute-reparent-strategy.tsx |  23 +-
 ...eparent-to-flow-strategy.spec.browser2.tsx | 257 ++++++++++++++++++
 .../strategies/grid-reparent-strategy.tsx     |   1 -
 .../reparent-helpers/reparent-helpers.ts      |  21 +-
 .../animation-context.ts                      |   9 +-
 .../navigator-item-dnd-container.tsx          |   7 +-
 6 files changed, 286 insertions(+), 32 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx
index 587de432e8c3..736f34d19fcf 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx
@@ -3,9 +3,13 @@ import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { mapDropNulls } from '../../../../core/shared/array-utils'
 import * as EP from '../../../../core/shared/element-path'
 import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
-import type { ElementInstanceMetadataMap } from '../../../../core/shared/element-template'
+import {
+  metadataHasPositionAbsoluteOrNull,
+  type ElementInstanceMetadataMap,
+} from '../../../../core/shared/element-template'
 import type { ElementPath, NodeModules } from '../../../../core/shared/project-file-types'
 import * as PP from '../../../../core/shared/property-path'
+import { assertNever } from '../../../../core/shared/utils'
 import type { IndexPosition } from '../../../../utils/utils'
 import type { ProjectContentTreeRoot } from '../../../assets'
 import type { AllElementProps } from '../../../editor/store/editor-state'
@@ -75,10 +79,18 @@ export function baseAbsoluteReparentStrategy(
         element,
       )
 
-      return (
-        elementMetadata?.specialSizeMeasurements.position === 'absolute' &&
-        honoursPropsPosition(canvasState, element)
-      )
+      const honoursPosition = honoursPropsPosition(canvasState, element)
+
+      switch (honoursPosition) {
+        case 'does-not-honour':
+          return false
+        case 'absolute-position-and-honours-numeric-props':
+          return metadataHasPositionAbsoluteOrNull(elementMetadata)
+        case 'honours-numeric-props-only':
+          return elementMetadata?.specialSizeMeasurements.position === 'absolute'
+        default:
+          assertNever(honoursPosition)
+      }
     })
     if (!isApplicable) {
       return null
@@ -164,7 +176,6 @@ export function applyAbsoluteReparent(
 
         const allowedToReparent = selectedElements.every((selectedElement) => {
           return isAllowedToReparent(
-            canvasState.projectContents,
             canvasState.startingMetadata,
             selectedElement,
             newParent.intendedParentPath,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flow-reparent-to-flow-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flow-reparent-to-flow-strategy.spec.browser2.tsx
index e8435f7a8cdf..faf67b6292b1 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flow-reparent-to-flow-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flow-reparent-to-flow-strategy.spec.browser2.tsx
@@ -259,6 +259,263 @@ describe('Flow Reparent To Flow Strategy', () => {
   `),
     )
   })
+
+  it('reparents flow component without style prop support to flow parent', async () => {
+    const renderResult = await renderTestEditorWithCode(
+      `import * as React from 'react'
+import { Scene, Storyboard, View, Group } from 'utopia-api'
+
+export var App = (props) => {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        width: 700,
+        height: 600,
+      }}
+      data-uid='container'
+      data-testid='container'
+    >
+      <div
+        style={{
+          position: 'absolute',
+          width: 250,
+          height: 500,
+          left: 0,
+          top: 0,
+          backgroundColor: 'blue',
+        }}
+        data-uid='flowparent1'
+        data-testid='flowparent1'
+      >
+        <div
+          style={{
+            width: 100,
+            height: 100,
+            backgroundColor: 'purple',
+          }}
+          data-uid='flowchild1'
+          data-testid='flowchild1'
+        />
+        <div
+          style={{
+            width: 100,
+            height: 100,
+            backgroundColor: 'pink',
+          }}
+          data-uid='flowchild2'
+          data-testid='flowchild2'
+        />
+      </div>
+      <div
+        style={{
+          position: 'absolute',
+          width: 250,
+          height: 500,
+          left: 350,
+          top: 0,
+          backgroundColor: 'lightgreen',
+        }}
+        data-uid='flowparent2'
+        data-testid='flowparent2'
+      >
+        <CompNoStyle data-uid='flowchild3' />
+        <div
+          style={{
+            width: 100,
+            height: 100,
+            backgroundColor: 'red',
+          }}
+          data-uid='flowchild4'
+          data-testid='flowchild4'
+        />
+      </div>
+    </div>
+  )
+}
+
+export var storyboard = (props) => {
+  return (
+    <Storyboard data-uid='utopia-storyboard-uid'>
+      <Scene
+        style={{
+          left: 0,
+          top: 0,
+          width: 2000,
+          height: 2000,
+        }}
+        data-uid='scene-aaa'
+      >
+        <App
+          data-uid='app-entity'
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+          }}
+        />
+      </Scene>
+    </Storyboard>
+  )
+}
+
+function CompNoStyle(props) {
+  return (
+    <div
+      style={{
+        width: 100,
+        height: 100,
+        backgroundColor: 'teal',
+      }}
+      data-testid="compnostyle"
+      data-uid='compnostyle'
+    />
+  )
+}
+`,
+      'await-first-dom-report',
+    )
+
+    const targetFlowParent = await renderResult.renderedDOM.findByTestId('flowparent1')
+    const targetFlowParentRect = targetFlowParent.getBoundingClientRect()
+    const targetFlowParentEnd = {
+      x: targetFlowParentRect.x + targetFlowParentRect.width / 2,
+      y: targetFlowParentRect.y + targetFlowParentRect.height - 15,
+    }
+    const flowChildToReparent = await renderResult.renderedDOM.findByTestId('compnostyle')
+    const flowChildToReparentRect = flowChildToReparent.getBoundingClientRect()
+    const flowChildToReparentCenter = {
+      x: flowChildToReparentRect.x + flowChildToReparentRect.width / 2,
+      y: flowChildToReparentRect.y + flowChildToReparentRect.height / 2,
+    }
+
+    await renderResult.getDispatchFollowUpActionsFinished()
+    const dragDelta = windowPoint({
+      x: targetFlowParentEnd.x - flowChildToReparentCenter.x + 5,
+      y: targetFlowParentEnd.y - flowChildToReparentCenter.y,
+    })
+
+    await dragElement(renderResult, 'compnostyle', dragDelta, cmdModifier)
+
+    await renderResult.getDispatchFollowUpActionsFinished()
+    expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+      formatTestProjectCode(`import * as React from 'react'
+import { Scene, Storyboard, View, Group } from 'utopia-api'
+
+export var App = (props) => {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        width: 700,
+        height: 600,
+      }}
+      data-uid='container'
+      data-testid='container'
+    >
+      <div
+        style={{
+          position: 'absolute',
+          width: 250,
+          height: 500,
+          left: 0,
+          top: 0,
+          backgroundColor: 'blue',
+        }}
+        data-uid='flowparent1'
+        data-testid='flowparent1'
+      >
+        <div
+          style={{
+            width: 100,
+            height: 100,
+            backgroundColor: 'purple',
+          }}
+          data-uid='flowchild1'
+          data-testid='flowchild1'
+        />
+        <div
+          style={{
+            width: 100,
+            height: 100,
+            backgroundColor: 'pink',
+          }}
+          data-uid='flowchild2'
+          data-testid='flowchild2'
+        />
+        <CompNoStyle data-uid='flowchild3' />
+      </div>
+      <div
+        style={{
+          position: 'absolute',
+          width: 250,
+          height: 500,
+          left: 350,
+          top: 0,
+          backgroundColor: 'lightgreen',
+        }}
+        data-uid='flowparent2'
+        data-testid='flowparent2'
+      >
+        <div
+          style={{
+            width: 100,
+            height: 100,
+            backgroundColor: 'red',
+          }}
+          data-uid='flowchild4'
+          data-testid='flowchild4'
+        />
+      </div>
+    </div>
+  )
+}
+
+export var storyboard = (props) => {
+  return (
+    <Storyboard data-uid='utopia-storyboard-uid'>
+      <Scene
+        style={{
+          left: 0,
+          top: 0,
+          width: 2000,
+          height: 2000,
+        }}
+        data-uid='scene-aaa'
+      >
+        <App
+          data-uid='app-entity'
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+          }}
+        />
+      </Scene>
+    </Storyboard>
+  )
+}
+
+function CompNoStyle(props) {
+  return (
+    <div
+      style={{
+        width: 100,
+        height: 100,
+        backgroundColor: 'teal',
+      }}
+      data-testid="compnostyle"
+      data-uid='compnostyle'
+    />
+  )
+}`),
+    )
+  })
+
   it('reparents flow element to flow parent in row layout', async () => {
     const renderResult = await renderTestEditorWithCode(
       makeTestProjectCodeWithSnippet(`
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 968c3ee88b3d..9755cd3ed8a0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -162,7 +162,6 @@ export function applyGridReparent(
 
         const allowedToReparent = selectedElements.every((selectedElement) => {
           return isAllowedToReparent(
-            canvasState.projectContents,
             canvasState.startingMetadata,
             selectedElement,
             newParent.intendedParentPath,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts
index 67dc8834143f..331f23695d47 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-helpers.ts
@@ -78,7 +78,6 @@ import { assertNever } from '../../../../../core/shared/utils'
 export type ShouldAddContainLayout = 'add-contain-layout' | 'dont-add-contain-layout'
 
 export function isAllowedToReparent(
-  projectContents: ProjectContentTreeRoot,
   startingMetadata: ElementInstanceMetadataMap,
   elementToReparent: ElementPath,
   targetParentPath: ElementPath,
@@ -114,15 +113,12 @@ export function isAllowedToReparent(
 
   return foldEither(
     (_) => true,
-    (elementFromMetadata) =>
-      !elementReferencesElsewhere(elementFromMetadata) &&
-      MetadataUtils.targetHonoursPropsPosition(projectContents, metadata) !== 'does-not-honour',
+    (elementFromMetadata) => !elementReferencesElsewhere(elementFromMetadata),
     metadata.element,
   )
 }
 
 export function isAllowedToNavigatorReparent(
-  projectContents: ProjectContentTreeRoot,
   startingMetadata: ElementInstanceMetadataMap,
   target: ElementPath,
 ): boolean {
@@ -137,14 +133,8 @@ export function isAllowedToNavigatorReparent(
         return maybeBranchConditionalCase(parentPath, conditional, target) != null
       }
       return false
-    } else {
-      return foldEither(
-        (_) => true,
-        (elementFromMetadata) =>
-          MetadataUtils.targetHonoursPropsPosition(projectContents, metadata) !== 'does-not-honour',
-        metadata.element,
-      )
     }
+    return true
   }
 }
 
@@ -241,12 +231,7 @@ export function ifAllowedToReparent(
   ifAllowed: () => StrategyApplicationResult,
 ): StrategyApplicationResult {
   const allowed = elementsToReparent.every((elementToReparent) => {
-    return isAllowedToReparent(
-      canvasState.projectContents,
-      startingMetadata,
-      elementToReparent,
-      targetParentPath,
-    )
+    return isAllowedToReparent(startingMetadata, elementToReparent, targetParentPath)
   })
   if (allowed) {
     return ifAllowed()
diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/animation-context.ts b/editor/src/components/canvas/ui-jsx-canvas-renderer/animation-context.ts
index e8d66fc93f79..7e0aed35c661 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-renderer/animation-context.ts
+++ b/editor/src/components/canvas/ui-jsx-canvas-renderer/animation-context.ts
@@ -52,13 +52,18 @@ export function useCanvasAnimation(paths: ElementPath[]) {
     return uids.map((uid) => `[data-uid='${uid}']`).join(',')
   }, [uids])
 
+  const elements = React.useMemo(
+    () => (selector == null || selector === '' ? [] : document.querySelectorAll(selector)),
+    [selector],
+  )
+
   return React.useCallback(
     (keyframes: DOMKeyframesDefinition, options?: DynamicAnimationOptions) => {
-      if (ctx.animate == null || selector == null) {
+      if (ctx.animate == null || elements.length === 0 || selector == null) {
         return
       }
       void ctx.animate(selector, keyframes, options)
     },
-    [ctx, selector],
+    [ctx, elements, selector],
   )
 }
diff --git a/editor/src/components/navigator/navigator-item/navigator-item-dnd-container.tsx b/editor/src/components/navigator/navigator-item/navigator-item-dnd-container.tsx
index d2ce13445154..6861ae661783 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item-dnd-container.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item-dnd-container.tsx
@@ -541,11 +541,8 @@ export const NavigatorItemContainer = React.memo((props: NavigatorItemDragAndDro
       canDrag: () => {
         const editorState = editorStateRef.current
         return (
-          isAllowedToNavigatorReparent(
-            editorState.projectContents,
-            editorState.jsxMetadata,
-            props.elementPath,
-          ) && !EP.isRootElementOfInstance(props.elementPath)
+          isAllowedToNavigatorReparent(editorState.jsxMetadata, props.elementPath) &&
+          !EP.isRootElementOfInstance(props.elementPath)
         )
       },
     }),

From 31483678a4b7fc42f1615cbe43825106d56e4881 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Thu, 7 Nov 2024 10:44:35 +0100
Subject: [PATCH 202/272] Rename grid cell to grid item (#6623)

**Problem:**
Sometimes we call the grid items "grid cells", which is incorrect (grid
cells are the positions in the grid, and not the child items).

**Fix:**
Rename

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../absolute-resize-bounding-box-strategy.tsx        |  2 +-
 .../strategies/basic-resize-strategy.tsx             |  4 ++--
 .../convert-to-absolute-and-move-strategy.tsx        |  2 +-
 .../strategies/flex-resize-basic-strategy.tsx        |  2 +-
 .../strategies/flex-resize-strategy.tsx              |  2 +-
 .../strategies/grid-move-absolute.ts                 |  4 ++--
 .../grid-move-rearrange-duplicate-strategy.ts        |  2 +-
 .../strategies/grid-move-rearrange-strategy.ts       |  2 +-
 .../strategies/grid-move-reorder-strategy.ts         |  2 +-
 .../strategies/grid-rearrange-keyboard-strategy.ts   |  2 +-
 .../strategies/grid-resize-element-strategy.ts       |  2 +-
 .../strategies/keyboard-absolute-resize-strategy.tsx |  2 +-
 .../canvas-strategies/strategies/reparent-utils.ts   |  4 ++--
 .../strategies/resize-grid-strategy.ts               |  2 +-
 .../src/components/canvas/controls/grid-controls.tsx |  2 +-
 .../controls/select-mode/absolute-resize-control.tsx |  2 +-
 .../controls/select-mode/select-mode-hooks.tsx       |  2 +-
 editor/src/components/inspector/inspector-common.ts  |  4 ++--
 .../fill-container-basic-strategy.ts                 |  2 +-
 .../simplified-layout-subsection.tsx                 |  2 +-
 editor/src/core/model/element-metadata-utils.ts      | 12 ++++++------
 21 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
index 0409ecb7a166..208447472800 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
@@ -98,7 +98,7 @@ export function absoluteResizeBoundingBoxStrategy(
   }
 
   if (
-    retargetedTargets.some((path) => MetadataUtils.isGridCell(canvasState.startingMetadata, path))
+    retargetedTargets.some((path) => MetadataUtils.isGridItem(canvasState.startingMetadata, path))
   ) {
     return null
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
index 1ea457c5036a..1bef2cc9ef87 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -83,7 +83,7 @@ export function basicResizeStrategy(
   const elementDimensionsProps = metadata != null ? getElementDimensions(metadata) : null
   const elementParentBounds = metadata?.specialSizeMeasurements.immediateParentBounds ?? null
 
-  const isGridCell = MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)
+  const isGridCell = MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElement)
   if (isGridCell && isFillOrStretchModeApplied(canvasState.startingMetadata, selectedElement)) {
     return null
   }
@@ -216,7 +216,7 @@ export function basicResizeStrategy(
           )
 
           const gridsToRerender = selectedElements
-            .filter((element) => MetadataUtils.isGridCell(canvasState.startingMetadata, element))
+            .filter((element) => MetadataUtils.isGridItem(canvasState.startingMetadata, element))
             .map(EP.parentPath)
 
           const elementsToRerender = [...selectedElements, ...gridsToRerender]
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
index eb8bf8f0b0dc..4f448960f964 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
@@ -180,7 +180,7 @@ function convertToAbsoluteAndMoveStrategyFactory(setHuggingParentToFixed: SetHug
       originalTargets,
     ).filter(
       // don't show the siblings control for grid cells
-      (sibling) => !MetadataUtils.isGridCell(canvasState.startingMetadata, sibling.elementPath),
+      (sibling) => !MetadataUtils.isGridItem(canvasState.startingMetadata, sibling.elementPath),
     )
 
     const showSiblingsControl = autoLayoutSiblingsExceptGridCells.length > 1
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx
index 1ecb3e442b9e..b0bde9a31625 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx
@@ -89,7 +89,7 @@ export function flexResizeBasicStrategy(
     elementParentBounds != null &&
     (elementParentBounds.width !== 0 || elementParentBounds.height !== 0)
 
-  if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElements[0])) {
+  if (MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElements[0])) {
     return null
   }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx
index b8d0f8860531..d55cbe7ed7e0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx
@@ -109,7 +109,7 @@ export function flexResizeStrategy(
     elementParentBounds.width !== 0 &&
     elementParentBounds.height !== 0
 
-  if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElements[0])) {
+  if (MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElements[0])) {
     return null
   }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
index c81b4b2c9aff..31dc4f7acaef 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
@@ -59,7 +59,7 @@ export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+  if (!MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 
@@ -215,7 +215,7 @@ function runGridMoveAbsolute(
 
   // if moving an absolutely-positioned child which does not have pinning
   // props, do not set them at all.
-  if (MetadataUtils.hasNoGridCellPositioning(selectedElementMetadata.specialSizeMeasurements)) {
+  if (MetadataUtils.hasNoGridItemPositioning(selectedElementMetadata.specialSizeMeasurements)) {
     return [
       showGridControls('mid-interaction', gridPath, targetCellCoords, targetRootCell),
       ...gridChildAbsoluteMoveCommands(
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-duplicate-strategy.ts
index b3623409513c..a0635923af93 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-duplicate-strategy.ts
@@ -43,7 +43,7 @@ export const gridMoveRearrangeDuplicateStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+  if (!MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-strategy.ts
index 1d54d077cffb..e6a4eaf20713 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-strategy.ts
@@ -50,7 +50,7 @@ export const gridMoveRearrangeStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+  if (!MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-reorder-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-reorder-strategy.ts
index e603ba364f9f..c2f304d647de 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-reorder-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-reorder-strategy.ts
@@ -53,7 +53,7 @@ export const gridMoveReorderStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+  if (!MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
index 9d5f8a20a1a5..fee5f4990a91 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
@@ -32,7 +32,7 @@ export function gridRearrangeResizeKeyboardStrategy(
 
   const target = selectedElements[0]
 
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, target)) {
+  if (!MetadataUtils.isGridItem(canvasState.startingMetadata, target)) {
     return null
   }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 187915c80452..fc93be276dbf 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -40,7 +40,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
   if (selectedElementMetadata == null) {
     return null
   }
-  const isElementInsideGrid = MetadataUtils.isGridCell(
+  const isElementInsideGrid = MetadataUtils.isGridItem(
     canvasState.startingMetadata,
     selectedElement,
   )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx
index b1ebec5d2fe6..9d45920a3627 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx
@@ -145,7 +145,7 @@ export function keyboardAbsoluteResizeStrategy(
     return null
   }
 
-  if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElements[0])) {
+  if (MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElements[0])) {
     return null
   }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/reparent-utils.ts b/editor/src/components/canvas/canvas-strategies/strategies/reparent-utils.ts
index c45d9855d732..8616aa1d39c3 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/reparent-utils.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/reparent-utils.ts
@@ -551,13 +551,13 @@ function pasteIntoNextGridCell(
   // if the copied elements are grid cells and the target is a grid cell, paste next to it
 
   const copyDataElementsAreGridCells = copyData.elementPaste.every(({ originalElementPath }) =>
-    MetadataUtils.isGridCell(copyData.originalContextMetadata, originalElementPath),
+    MetadataUtils.isGridItem(copyData.originalContextMetadata, originalElementPath),
   )
   if (!copyDataElementsAreGridCells) {
     return null
   }
 
-  const targetIsGridChild = MetadataUtils.isGridCell(metadata, selectedView)
+  const targetIsGridChild = MetadataUtils.isGridItem(metadata, selectedView)
   if (!targetIsGridChild) {
     return null
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index 95733b2426fd..5de4ce4c0461 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -77,7 +77,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
     'some',
   )
 
-  const isGridCell = MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)
+  const isGridCell = MetadataUtils.isGridItem(canvasState.startingMetadata, selectedElement)
   const isGrid = MetadataUtils.isGridLayoutedContainer(
     MetadataUtils.findElementByElementPath(canvasState.startingMetadata, selectedElement),
   )
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 7491cc5a9ef8..e6b4edc5b45d 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -662,7 +662,7 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
     Substores.metadata,
     (store) =>
       store.editor.selectedViews.every((elementPath) =>
-        MetadataUtils.isGridCellWithPositioning(store.editor.jsxMetadata, elementPath),
+        MetadataUtils.isGridItemWithPositioning(store.editor.jsxMetadata, elementPath),
       ),
     'GridControl targetsAreCellsWithPositioning',
   )
diff --git a/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx b/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
index afa79fca4bc8..cb062b956b9b 100644
--- a/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
@@ -147,7 +147,7 @@ export const AbsoluteResizeControl = controlForStrategyMemoized(
         let diagonally = true
 
         for (const element of selectedElementsRef.current) {
-          if (MetadataUtils.isGridCell(metadata, element)) {
+          if (MetadataUtils.isGridItem(metadata, element)) {
             if (isFillOrStretchModeAppliedOnAnySide(metadata, element)) {
               diagonally = false
             }
diff --git a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
index 8437f1734d66..6ee632ce1d42 100644
--- a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
+++ b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx
@@ -724,7 +724,7 @@ function useSelectOrLiveModeSelectAndHover(
           foundTarget != null &&
           draggingAllowed &&
           // grid has its own drag handling
-          !MetadataUtils.isGridCell(
+          !MetadataUtils.isGridItem(
             editorStoreRef.current.editor.jsxMetadata,
             foundTarget.elementPath,
           )
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index e06101e7d485..d7e8974094af 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -746,7 +746,7 @@ export function detectFillHugFixedState(
     getSimpleAttributeAtPath(right(element.element.value.props), PP.create('style', 'height')),
   )
 
-  if (MetadataUtils.isGridCell(metadata, elementPath)) {
+  if (MetadataUtils.isGridItem(metadata, elementPath)) {
     const isStretchingExplicitly =
       (element.specialSizeMeasurements.alignSelf === 'stretch' &&
         axis === 'horizontal' &&
@@ -1205,7 +1205,7 @@ export function getFixedFillHugOptionsForElement(
         ? 'hug'
         : null,
       fillContainerApplicable(metadata, selectedView)
-        ? MetadataUtils.isGridCell(metadata, selectedView)
+        ? MetadataUtils.isGridItem(metadata, selectedView)
           ? 'stretch'
           : 'fill'
         : null,
diff --git a/editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts b/editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts
index 20ca8f6a8b7b..3970554122c3 100644
--- a/editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts
+++ b/editor/src/components/inspector/inspector-strategies/fill-container-basic-strategy.ts
@@ -167,7 +167,7 @@ export const fillContainerStrategyGridParent = (
   name: 'Set to Fill Container, in grid layout',
   strategy: () => {
     const elements = elementPaths.filter(
-      (path) => fillContainerApplicable(metadata, path) && MetadataUtils.isGridCell(metadata, path),
+      (path) => fillContainerApplicable(metadata, path) && MetadataUtils.isGridItem(metadata, path),
     )
 
     if (elements.length === 0) {
diff --git a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx
index 7254d5b25790..f634e05e943c 100644
--- a/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx
+++ b/editor/src/components/inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx
@@ -61,7 +61,7 @@ export const SimplifiedLayoutSubsection = React.memo(() => {
     Substores.metadata,
     (store) =>
       store.editor.selectedViews.length === 1 &&
-      MetadataUtils.isGridCell(store.editor.jsxMetadata, store.editor.selectedViews[0]),
+      MetadataUtils.isGridItem(store.editor.jsxMetadata, store.editor.selectedViews[0]),
     'Inspector shouldShowGridCellSection',
   )
 
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index 3c5134804b4b..1e8209a245ec 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -381,19 +381,19 @@ export const MetadataUtils = {
   isGridLayoutedContainer(instance: ElementInstanceMetadata | null): boolean {
     return instance?.specialSizeMeasurements.layoutSystemForChildren === 'grid'
   },
-  isGridCell(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
+  isGridItem(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
     const elementMetadata = MetadataUtils.findElementByElementPath(metadata, path)
     return elementMetadata?.specialSizeMeasurements.parentLayoutSystem === 'grid'
   },
-  isGridCellWithPositioning(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
+  isGridItemWithPositioning(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
     const element = MetadataUtils.findElementByElementPath(metadata, path)
     return (
-      MetadataUtils.isGridCell(metadata, path) &&
+      MetadataUtils.isGridItem(metadata, path) &&
       element != null &&
-      !MetadataUtils.hasNoGridCellPositioning(element.specialSizeMeasurements)
+      !MetadataUtils.hasNoGridItemPositioning(element.specialSizeMeasurements)
     )
   },
-  hasNoGridCellPositioning(specialSizeMeasurements: SpecialSizeMeasurements): boolean {
+  hasNoGridItemPositioning(specialSizeMeasurements: SpecialSizeMeasurements): boolean {
     return (
       specialSizeMeasurements.elementGridPropertiesFromProps.gridColumnStart == null &&
       specialSizeMeasurements.elementGridPropertiesFromProps.gridColumnEnd == null &&
@@ -632,7 +632,7 @@ export const MetadataUtils = {
     return (
       MetadataUtils.isFlexLayoutedContainer(
         MetadataUtils.findElementByElementPath(jsxMetadata, EP.parentPath(path)),
-      ) || MetadataUtils.isGridCell(jsxMetadata, path)
+      ) || MetadataUtils.isGridItem(jsxMetadata, path)
     )
   },
   getRelativeAlignJustify: function (

From c681e6b427adbf3fde944da607aea99d5810577e Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 7 Nov 2024 12:48:58 +0100
Subject: [PATCH 203/272] Rename grid movement strategies (#6621)

**Problem:**

The grid "move" strategies should be renamed to better reflect what they
do and to be less confusing.

**Fix:**
This PR is a followup to
https://github.com/concrete-utopia/utopia/pull/6606

1. Rename "move rearrange" to "change grid element location" (and
duplicate)
2. Rename "move reorder" to "reorder"

Fixes #6620

---------

Co-authored-by: Federico Ruggi <federico.ruggi@shopify.com>
---
 .../canvas-strategies/canvas-strategies.tsx   | 16 +++++++-------
 ...ge-element-location-duplicate-strategy.ts} | 12 +++++------
 ...nge-element-location-keyboard-strategy.ts} |  6 +++---
 ... grid-change-element-location-strategy.ts} | 21 ++++++++++---------
 ...hange-location-strategy.spec.browser2.tsx} | 14 ++++++-------
 .../strategies/grid-move-absolute.ts          |  7 +++----
 ...r-strategy.ts => grid-reorder-strategy.ts} |  6 +++---
 .../strategies/grid-reparent-strategy.tsx     |  4 ++--
 .../canvas/controls/grid-controls.tsx         |  2 +-
 9 files changed, 44 insertions(+), 44 deletions(-)
 rename editor/src/components/canvas/canvas-strategies/strategies/{grid-move-rearrange-duplicate-strategy.ts => grid-change-element-location-duplicate-strategy.ts} (92%)
 rename editor/src/components/canvas/canvas-strategies/strategies/{grid-rearrange-keyboard-strategy.ts => grid-change-element-location-keyboard-strategy.ts} (97%)
 rename editor/src/components/canvas/canvas-strategies/strategies/{grid-move-rearrange-strategy.ts => grid-change-element-location-strategy.ts} (94%)
 rename editor/src/components/canvas/canvas-strategies/strategies/{grid-rearrange-move-strategy.spec.browser2.tsx => grid-element-change-location-strategy.spec.browser2.tsx} (98%)
 rename editor/src/components/canvas/canvas-strategies/strategies/{grid-move-reorder-strategy.ts => grid-reorder-strategy.ts} (98%)

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
index aae5d84554ef..5fb54fa447a4 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -67,10 +67,10 @@ import type { InsertionSubject, InsertionSubjectWrapper } from '../../editor/edi
 import { generateUidWithExistingComponents } from '../../../core/model/element-template-utils'
 import { retargetStrategyToChildrenOfFragmentLikeElements } from './strategies/fragment-like-helpers'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
-import { gridMoveRearrangeStrategy } from './strategies/grid-move-rearrange-strategy'
+import { gridChangeElementLocationStrategy } from './strategies/grid-change-element-location-strategy'
 import { resizeGridStrategy } from './strategies/resize-grid-strategy'
 import { gridResizeElementStrategy } from './strategies/grid-resize-element-strategy'
-import { gridMoveRearrangeDuplicateStrategy } from './strategies/grid-move-rearrange-duplicate-strategy'
+import { gridChangeElementLocationDuplicateStrategy } from './strategies/grid-change-element-location-duplicate-strategy'
 import { setGridGapStrategy } from './strategies/set-grid-gap-strategy'
 import type { CanvasCommand } from '../commands/commands'
 import { foldAndApplyCommandsInner } from '../commands/commands'
@@ -79,7 +79,7 @@ import { wrapInContainerCommand } from '../commands/wrap-in-container-command'
 import type { ElementPath } from 'utopia-shared/src/types'
 import { reparentSubjectsForInteractionTarget } from './strategies/reparent-helpers/reparent-strategy-helpers'
 import { getReparentTargetUnified } from './strategies/reparent-helpers/reparent-strategy-parent-lookup'
-import { gridRearrangeResizeKeyboardStrategy } from './strategies/grid-rearrange-keyboard-strategy'
+import { gridChangeElementLocationResizeKeyboardStrategy } from './strategies/grid-change-element-location-keyboard-strategy'
 import createCachedSelector from 're-reselect'
 import { getActivePlugin } from '../plugins/style-plugins'
 import {
@@ -87,7 +87,7 @@ import {
   GridControls,
   isGridControlsProps,
 } from '../controls/grid-controls-for-strategies'
-import { gridMoveReorderStrategy } from './strategies/grid-move-reorder-strategy'
+import { gridReorderStrategy } from './strategies/grid-reorder-strategy'
 import { gridMoveAbsoluteStrategy } from './strategies/grid-move-absolute'
 
 export type CanvasStrategyFactory = (
@@ -116,10 +116,10 @@ const moveOrReorderStrategies: MetaCanvasStrategy = (
       convertToAbsoluteAndMoveStrategy,
       convertToAbsoluteAndMoveAndSetParentFixedStrategy,
       reorderSliderStategy,
-      gridMoveRearrangeStrategy,
-      gridMoveRearrangeDuplicateStrategy,
-      gridMoveReorderStrategy,
-      gridRearrangeResizeKeyboardStrategy,
+      gridChangeElementLocationStrategy,
+      gridChangeElementLocationDuplicateStrategy,
+      gridReorderStrategy,
+      gridChangeElementLocationResizeKeyboardStrategy,
       gridMoveAbsoluteStrategy,
     ],
   )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
similarity index 92%
rename from editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-duplicate-strategy.ts
rename to editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
index a0635923af93..66296d761c51 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
@@ -23,9 +23,9 @@ import {
   getParentGridTemplatesFromChildMeasurements,
   gridMoveStrategiesExtraCommands,
 } from './grid-helpers'
-import { runGridMoveRearrange } from './grid-move-rearrange-strategy'
+import { runGridChangeElementLocation } from './grid-change-element-location-strategy'
 
-export const gridMoveRearrangeDuplicateStrategy: CanvasStrategyFactory = (
+export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
   interactionSession: InteractionSession | null,
   customState: CustomStrategyState,
@@ -79,9 +79,9 @@ export const gridMoveRearrangeDuplicateStrategy: CanvasStrategyFactory = (
   }
 
   return {
-    id: 'rearrange-grid-move-duplicate-strategy',
-    name: 'Grid Rearrange (Duplicate)',
-    descriptiveLabel: 'Grid Rearrange (Duplicate)',
+    id: 'grid-change-element-location-duplicate-strategy',
+    name: 'Change Location (Duplicate)',
+    descriptiveLabel: 'Change Location (Duplicate)',
     icon: {
       category: 'tools',
       type: 'pointer',
@@ -115,7 +115,7 @@ export const gridMoveRearrangeDuplicateStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
-      const moveCommands = runGridMoveRearrange(
+      const moveCommands = runGridChangeElementLocation(
         canvasState.startingMetadata,
         interactionSession.interactionData,
         selectedElementMetadata,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
similarity index 97%
rename from editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
rename to editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
index fee5f4990a91..bdddd13ba5cc 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
@@ -14,7 +14,7 @@ import { findOriginalGrid, setGridPropsCommands } from './grid-helpers'
 import { getGridChildCellCoordBoundsFromCanvas } from './grid-cell-bounds'
 import { accumulatePresses } from './shared-keyboard-strategy-helpers'
 
-export function gridRearrangeResizeKeyboardStrategy(
+export function gridChangeElementLocationResizeKeyboardStrategy(
   canvasState: InteractionCanvasState,
   interactionSession: InteractionSession | null,
 ): CanvasStrategy | null {
@@ -62,10 +62,10 @@ export function gridRearrangeResizeKeyboardStrategy(
       interactionSession.interactionData.keyStates.length - 1,
     )?.modifiers.shift ?? false
 
-  const label = resizing ? 'Grid resize' : 'Grid rearrange'
+  const label = resizing ? 'Grid resize' : 'Change Location'
 
   return {
-    id: 'GRID_KEYBOARD_REARRANGE_RESIZE',
+    id: 'GRID_KEYBOARD_CHANGE_ELEMENT_LOCATION_RESIZE',
     name: label,
     descriptiveLabel: label,
     icon: {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
similarity index 94%
rename from editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-strategy.ts
rename to editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
index e6a4eaf20713..54a9bd9f785a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-rearrange-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
@@ -33,7 +33,7 @@ import {
 } from './grid-helpers'
 import { getTargetGridCellData } from '../../../inspector/grid-helpers'
 
-export const gridMoveRearrangeStrategy: CanvasStrategyFactory = (
+export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
   interactionSession: InteractionSession | null,
 ) => {
@@ -89,9 +89,9 @@ export const gridMoveRearrangeStrategy: CanvasStrategyFactory = (
   }
 
   return {
-    id: 'rearrange-grid-move-strategy',
-    name: 'Grid rearrange',
-    descriptiveLabel: 'Grid rearrange',
+    id: 'grid-change-element-location-strategy',
+    name: 'Change Location',
+    descriptiveLabel: 'Change Location',
     icon: {
       category: 'tools',
       type: 'pointer',
@@ -108,7 +108,7 @@ export const gridMoveRearrangeStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
-      const { commands, elementsToRerender } = getCommandsAndPatchForGridRearrange(
+      const { commands, elementsToRerender } = getCommandsAndPatchForGridChangeElementLocation(
         canvasState,
         interactionSession.interactionData,
         selectedElement,
@@ -122,6 +122,7 @@ export const gridMoveRearrangeStrategy: CanvasStrategyFactory = (
         parentGridPath,
         initialTemplates,
       )
+
       return strategyApplicationResult(
         [...midInteractionCommands, ...onCompleteCommands, ...commands],
         elementsToRerender,
@@ -130,7 +131,7 @@ export const gridMoveRearrangeStrategy: CanvasStrategyFactory = (
   }
 }
 
-function getCommandsAndPatchForGridRearrange(
+function getCommandsAndPatchForGridChangeElementLocation(
   canvasState: InteractionCanvasState,
   interactionData: DragInteractionData,
   selectedElement: ElementPath,
@@ -157,7 +158,7 @@ function getCommandsAndPatchForGridRearrange(
     return { commands: [], elementsToRerender: [] }
   }
 
-  const commands = runGridMoveRearrange(
+  const commands = runGridChangeElementLocation(
     canvasState.startingMetadata,
     interactionData,
     selectedElementMetadata,
@@ -173,7 +174,7 @@ function getCommandsAndPatchForGridRearrange(
   }
 }
 
-export function runGridMoveRearrange(
+export function runGridChangeElementLocation(
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
   selectedElementMetadata: ElementInstanceMetadata,
@@ -251,7 +252,7 @@ export function runGridMoveRearrange(
     })
     .sort(sortElementsByGridPosition(templateColumnsCount))
 
-  const indexInSortedCellsForRearrange = cellsSortedByPosition.findIndex((s) =>
+  const indexInSortedCellsForChangeLocation = cellsSortedByPosition.findIndex((s) =>
     EP.pathsEqual(selectedElementMetadata.elementPath, s.path),
   )
 
@@ -267,7 +268,7 @@ export function runGridMoveRearrange(
     reorderElement(
       'always',
       pathForCommands,
-      absolute(Math.max(indexInSortedCellsForRearrange, 0)),
+      absolute(Math.max(indexInSortedCellsForChangeLocation, 0)),
     ),
     updateGridControlsCommand,
   ]
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
similarity index 98%
rename from editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
rename to editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
index ace5540d545f..1be76d1cf3a9 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
@@ -23,8 +23,8 @@ import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 import { gridCellTargetId } from './grid-cell-bounds'
 
-describe('grid rearrange move strategy', () => {
-  it('can rearrange elements on a grid', async () => {
+describe('grid element change location strategy', () => {
+  it('can change the location of elements on a grid', async () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
     const testId = 'aaa'
@@ -41,7 +41,7 @@ describe('grid rearrange move strategy', () => {
     })
   })
 
-  it('can rearrange elements in a grid component', async () => {
+  it('can change the location of elements in a grid component', async () => {
     const editor = await renderTestEditorWithCode(
       ProjectCodeGridComponent,
       'await-first-dom-report',
@@ -61,7 +61,7 @@ describe('grid rearrange move strategy', () => {
     })
   })
 
-  it('can not rearrange multicell element out of the grid', async () => {
+  it('can not change location of a multicell element out of the grid', async () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
     const testId = 'aaa'
@@ -81,7 +81,7 @@ describe('grid rearrange move strategy', () => {
     })
   })
 
-  it('can rearrange element with no explicit grid props set', async () => {
+  it('can change the location of element with no explicit grid props set', async () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
     const testId = 'bbb'
@@ -100,7 +100,7 @@ describe('grid rearrange move strategy', () => {
     })
   })
 
-  it('can rearrange elements on a grid (zoom out)', async () => {
+  it('can change the location of elements on a grid (zoom out)', async () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
     const testId = 'aaa'
@@ -117,7 +117,7 @@ describe('grid rearrange move strategy', () => {
     })
   })
 
-  it('can rearrange elements on a grid (zoom in)', async () => {
+  it('can change the location of elements on a grid (zoom in)', async () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
     const testId = 'aaa'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
index 31dc4f7acaef..332a35c3df98 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
@@ -8,7 +8,6 @@ import {
 } from '../../../../core/shared/element-template'
 import type { CanvasRectangle } from '../../../../core/shared/math-utils'
 import {
-  canvasPoint,
   canvasRectangle,
   isInfinityRectangle,
   offsetPoint,
@@ -39,7 +38,7 @@ import {
   getParentGridTemplatesFromChildMeasurements,
   gridMoveStrategiesExtraCommands,
 } from './grid-helpers'
-import { runGridMoveRearrange } from './grid-move-rearrange-strategy'
+import { runGridChangeElementLocation } from './grid-change-element-location-strategy'
 import { getTargetGridCellData } from '../../../inspector/grid-helpers'
 
 export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
@@ -226,9 +225,9 @@ function runGridMoveAbsolute(
     ]
   }
 
-  // otherwise, return a rearrange move + absolute adjustment
+  // otherwise, return a change location + absolute adjustment
   return [
-    ...runGridMoveRearrange(
+    ...runGridChangeElementLocation(
       jsxMetadata,
       interactionData,
       selectedElementMetadata,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-reorder-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
similarity index 98%
rename from editor/src/components/canvas/canvas-strategies/strategies/grid-move-reorder-strategy.ts
rename to editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
index c2f304d647de..3bae3997c180 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-reorder-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
@@ -35,7 +35,7 @@ import {
 } from './grid-helpers'
 import { getTargetGridCellData } from '../../../inspector/grid-helpers'
 
-export const gridMoveReorderStrategy: CanvasStrategyFactory = (
+export const gridReorderStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
   interactionSession: InteractionSession | null,
 ) => {
@@ -171,7 +171,7 @@ function getCommandsAndPatchForGridReorder(
     return { commands: [], elementsToRerender: [] }
   }
 
-  const commands = runGridMoveReorder(
+  const commands = runGridReorder(
     canvasState.startingMetadata,
     interactionData,
     selectedElementMetadata,
@@ -186,7 +186,7 @@ function getCommandsAndPatchForGridReorder(
   }
 }
 
-function runGridMoveReorder(
+function runGridReorder(
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
   selectedElementMetadata: ElementInstanceMetadata,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 9755cd3ed8a0..6ed9c0e6785c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -35,7 +35,7 @@ import {
 import type { DragInteractionData, InteractionSession, UpdatedPathMap } from '../interaction-state'
 import { honoursPropsPosition, shouldKeepMovingDraggedGroupChildren } from './absolute-utils'
 import { replaceFragmentLikePathsWithTheirChildrenRecursive } from './fragment-like-helpers'
-import { runGridMoveRearrange } from './grid-move-rearrange-strategy'
+import { runGridChangeElementLocation } from './grid-change-element-location-strategy'
 import { ifAllowedToReparent, isAllowedToReparent } from './reparent-helpers/reparent-helpers'
 import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-property-changes'
 import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers'
@@ -283,7 +283,7 @@ function gridReparentCommands(
     return null
   }
 
-  const gridPropsCommands = runGridMoveRearrange(
+  const gridPropsCommands = runGridChangeElementLocation(
     jsxMetadata,
     interactionData,
     targetElement,
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index e6b4edc5b45d..29bad8d7eb4d 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -909,7 +909,7 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
             countedColumn === currentHoveredCell?.column &&
             countedRow === currentHoveredCell?.row
 
-          const activePositioningTarget = isActiveCell && !dontShowActiveCellHighlight // TODO: move the logic into runGridRearrangeMove and do not set targetCell prop in these cases
+          const activePositioningTarget = isActiveCell && !dontShowActiveCellHighlight // TODO: move the logic into runGridChangeElementLocation and do not set targetCell prop in these cases
 
           const borderColor = activePositioningTarget
             ? colorTheme.brandNeonPink.value

From 612bdd7a4e73ff4c92c5cab175cd6bc8f0bacd9a Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 7 Nov 2024 12:49:09 +0100
Subject: [PATCH 204/272] Include border widths when measuring grid templates
 for controls (#6622)

**Problem:**

Border width is not taken into account when calculating grid template
measurements, which results in the grid placeholders being misplaced.

**Fix:**

Include the border widths in the special size measurements and use them
(transparent) for the grid placeholder styles.

Fixes #6619
---
 .../ui-jsx-canvas-bugs.spec.tsx.snap          |   12 +
 .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 1542 +++++++++++++++++
 .../controls/grid-controls-for-strategies.tsx |    5 +-
 .../canvas/controls/grid-controls-helpers.ts  |    4 +
 editor/src/components/canvas/dom-walker.ts    |    4 +-
 .../store-deep-equality-instances-3.spec.ts   |   42 +
 .../store/store-deep-equality-instances.ts    |   24 +-
 editor/src/core/shared/element-template.ts    |   16 +
 8 files changed, 1646 insertions(+), 3 deletions(-)

diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
index df7eef693210..184e8bc688cb 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
@@ -162,6 +162,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -328,6 +334,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
index be17ed60714a..eff92e4a3c60 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
@@ -203,6 +203,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -392,6 +398,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -876,6 +888,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -1209,6 +1227,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -1397,6 +1421,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -1585,6 +1615,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -1773,6 +1809,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -2066,6 +2108,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -2255,6 +2303,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -2550,6 +2604,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -2842,6 +2902,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -3031,6 +3097,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -3200,6 +3272,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -3510,6 +3588,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -3699,6 +3783,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -4095,6 +4185,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -4457,6 +4553,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -4674,6 +4776,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -4857,6 +4965,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -5074,6 +5188,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -5257,6 +5377,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -5474,6 +5600,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -5657,6 +5789,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -6018,6 +6156,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -6207,6 +6351,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -6824,6 +6974,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -7407,6 +7563,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -7830,6 +7992,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -8219,6 +8387,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -8456,6 +8630,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -8659,6 +8839,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -8896,6 +9082,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -9099,6 +9291,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -9336,6 +9534,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -9539,6 +9743,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -9962,6 +10172,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -10351,6 +10567,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -10588,6 +10810,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -10791,6 +11019,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -11028,6 +11262,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -11231,6 +11471,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -11468,6 +11714,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -11671,6 +11923,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -12094,6 +12352,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -12483,6 +12747,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -12720,6 +12990,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -12923,6 +13199,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -13160,6 +13442,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -13363,6 +13651,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -13600,6 +13894,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -13803,6 +14103,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -14107,6 +14413,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -14296,6 +14608,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -14526,6 +14844,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -14696,6 +15020,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -14866,6 +15196,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -15158,6 +15494,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -15347,6 +15689,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -15629,6 +15977,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -15939,6 +16293,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -16128,6 +16488,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -16541,6 +16907,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -16919,6 +17291,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -17156,6 +17534,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -17393,6 +17777,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -17630,6 +18020,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -17940,6 +18336,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -18129,6 +18531,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -18542,6 +18950,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -18920,6 +19334,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -19157,6 +19577,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -19394,6 +19820,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -19631,6 +20063,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -19935,6 +20373,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -20124,6 +20568,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -20354,6 +20804,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -20524,6 +20980,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -20694,6 +21156,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -20998,6 +21466,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -21187,6 +21661,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -21522,6 +22002,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -21823,6 +22309,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -21994,6 +22486,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -22165,6 +22663,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -22485,6 +22989,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -22689,6 +23199,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -23172,6 +23688,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -23474,6 +23996,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -23793,6 +24321,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -23997,6 +24531,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -24480,6 +25020,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -24782,6 +25328,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -25102,6 +25654,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -25306,6 +25864,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -25840,6 +26404,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -26193,6 +26763,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -26513,6 +27089,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -26717,6 +27299,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -27251,6 +27839,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -27604,6 +28198,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -27895,6 +28495,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -28084,6 +28690,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -28253,6 +28865,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -28667,6 +29285,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -28856,6 +29480,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -30803,6 +31433,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -32296,6 +32932,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -33755,6 +34397,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -34396,6 +35044,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -34765,6 +35419,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -35406,6 +36066,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -35775,6 +36441,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -36416,6 +37088,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -36785,6 +37463,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -37464,6 +38148,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -37875,6 +38565,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -38554,6 +39250,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -38965,6 +39667,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -39644,6 +40352,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -40055,6 +40769,12 @@ export var storyboard = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -40369,6 +41089,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -40558,6 +41284,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -40822,6 +41554,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -41009,6 +41747,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -41196,6 +41940,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -41489,6 +42239,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -41678,6 +42434,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -41914,6 +42676,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -42206,6 +42974,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -42395,6 +43169,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -42735,6 +43515,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -43073,6 +43859,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -43262,6 +44054,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -43559,6 +44357,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -43805,6 +44609,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -44000,6 +44810,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -44320,6 +45136,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -44524,6 +45346,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -44898,6 +45726,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -45094,6 +45928,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -45567,6 +46407,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -45771,6 +46617,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -46147,6 +46999,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -46343,6 +47201,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -46747,6 +47611,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -46935,6 +47805,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -47748,6 +48624,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -47919,6 +48801,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -48090,6 +48978,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -48261,6 +49155,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -48434,6 +49334,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -48605,6 +49511,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -48776,6 +49688,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -48947,6 +49865,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -49186,6 +50110,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -49386,6 +50316,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -49559,6 +50495,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -49730,6 +50672,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -49901,6 +50849,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -50072,6 +51026,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -50243,6 +51203,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -50414,6 +51380,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -50585,6 +51557,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -50756,6 +51734,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -50927,6 +51911,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -51098,6 +52088,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -51269,6 +52265,12 @@ export var App = (props) => {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -51579,6 +52581,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -51768,6 +52776,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -52181,6 +53195,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -52559,6 +53579,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -52796,6 +53822,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -53033,6 +54065,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -53270,6 +54308,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -53580,6 +54624,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -53769,6 +54819,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -54181,6 +55237,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -54558,6 +55620,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -54795,6 +55863,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -55032,6 +56106,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -55269,6 +56349,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -55579,6 +56665,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -55768,6 +56860,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -56224,6 +57322,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -56645,6 +57749,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -56882,6 +57992,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -57119,6 +58235,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -57356,6 +58478,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -57672,6 +58800,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -57876,6 +59010,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -58159,6 +59299,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -58355,6 +59501,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -58649,6 +59801,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -58815,6 +59973,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -59029,6 +60193,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -59205,6 +60375,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -59381,6 +60557,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -59662,6 +60844,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -59828,6 +61016,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -60100,6 +61294,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -60314,6 +61514,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -60491,6 +61697,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -60760,6 +61972,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -60926,6 +62144,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -61208,6 +62432,12 @@ export var storyboard = (
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -61399,6 +62629,12 @@ export var storyboard = (
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -61668,6 +62904,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -61834,6 +63076,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -62003,6 +63251,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -62280,6 +63534,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -62446,6 +63706,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -62693,6 +63959,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -62889,6 +64161,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -63160,6 +64438,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -63326,6 +64610,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -63670,6 +64960,12 @@ export var storyboard = (
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -63880,6 +65176,12 @@ export var storyboard = (
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -64090,6 +65392,12 @@ export var storyboard = (
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -64360,6 +65668,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -64526,6 +65840,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -64712,6 +66032,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -65027,6 +66353,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -65216,6 +66548,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -65742,6 +67080,12 @@ export var storyboard = (
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -65918,6 +67262,12 @@ export var storyboard = (
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -66208,6 +67558,12 @@ export var storyboard = (
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -66496,6 +67852,12 @@ export var storyboard = (
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -66708,6 +68070,12 @@ export var storyboard = (
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -66918,6 +68286,12 @@ export var storyboard = (
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -67215,6 +68589,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -67404,6 +68784,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -67622,6 +69008,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -67809,6 +69201,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -68104,6 +69502,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -68293,6 +69697,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -68462,6 +69872,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -68787,6 +70203,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -68976,6 +70398,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -69414,6 +70842,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -69817,6 +71251,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -70068,6 +71508,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -70289,6 +71735,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -70476,6 +71928,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -70727,6 +72185,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -70948,6 +72412,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -71135,6 +72605,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -71386,6 +72862,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -71607,6 +73089,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -71794,6 +73282,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -72088,6 +73582,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -72277,6 +73777,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -72446,6 +73952,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -72750,6 +74262,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -72939,6 +74457,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -73176,6 +74700,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -73383,6 +74913,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
@@ -73560,6 +75096,12 @@ Object {
       "alignItems": null,
       "alignSelf": null,
       "borderRadius": null,
+      "borderWidths": Object {
+        "bottom": 0,
+        "left": 0,
+        "right": 0,
+        "top": 0,
+      },
       "clientHeight": 0,
       "clientWidth": 0,
       "closestOffsetParentPath": Object {
diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index 59a7b34d616b..1cc724bb5556 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -7,7 +7,7 @@ import { isStaticGridRepeat, printGridAutoOrTemplateBase } from '../../inspector
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { mapDropNulls } from '../../../core/shared/array-utils'
 import * as EP from '../../../core/shared/element-path'
-import type { ElementInstanceMetadata } from '../../../core/shared/element-template'
+import type { BorderWidths, ElementInstanceMetadata } from '../../../core/shared/element-template'
 import { type GridAutoOrTemplateBase } from '../../../core/shared/element-template'
 import type { CanvasRectangle } from '../../../core/shared/math-utils'
 import { isFiniteRectangle } from '../../../core/shared/math-utils'
@@ -76,6 +76,7 @@ export type GridMeasurementHelperData = {
   padding: Sides
   columns: number
   cells: number
+  border: BorderWidths
 }
 
 export function useGridMeasurentHelperData(
@@ -117,6 +118,7 @@ export function useGridMeasurentHelperData(
         padding: targetGridContainer.specialSizeMeasurements.padding,
         columns: columns,
         cells: rows * columns,
+        border: targetGridContainer.specialSizeMeasurements.borderWidths,
       }
     },
     'useGridMeasurentHelperData',
@@ -194,6 +196,7 @@ export function useGridData(elementPaths: ElementPath[]): GridData[] {
           rows: rows,
           columns: columns,
           cells: rows * columns,
+          border: targetGridContainer.specialSizeMeasurements.borderWidths,
         }
       }, elementPaths)
     },
diff --git a/editor/src/components/canvas/controls/grid-controls-helpers.ts b/editor/src/components/canvas/controls/grid-controls-helpers.ts
index 3ba65cc81a61..9cd0282c550f 100644
--- a/editor/src/components/canvas/controls/grid-controls-helpers.ts
+++ b/editor/src/components/canvas/controls/grid-controls-helpers.ts
@@ -21,6 +21,10 @@ export function getGridHelperStyleMatchingTargetGrid(
       grid.padding == null
         ? 0
         : `${grid.padding.top}px ${grid.padding.right}px ${grid.padding.bottom}px ${grid.padding.left}px`,
+    borderTop: `${grid.border?.top}px solid transparent`,
+    borderLeft: `${grid.border?.left}px solid transparent`,
+    borderBottom: `${grid.border?.bottom}px solid transparent`,
+    borderRight: `${grid.border?.right}px solid transparent`,
   }
 
   // Gap needs to be set only if the other two are not present or we'll have rendering issues
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 0cabbbfb19f6..56d1f6aaa894 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -10,6 +10,7 @@ import type {
   GridElementProperties,
   DomElementMetadata,
   GridAutoOrTemplateBase,
+  BorderWidths,
 } from '../../core/shared/element-template'
 import {
   specialSizeMeasurements,
@@ -803,7 +804,7 @@ function getSpecialMeasurements(
   const borderRightWidth = parseCSSLength(elementStyle.borderRightWidth)
   const borderBottomWidth = parseCSSLength(elementStyle.borderBottomWidth)
   const borderLeftWidth = parseCSSLength(elementStyle.borderLeftWidth)
-  const border = {
+  const border: BorderWidths = {
     top: isRight(borderTopWidth) ? borderTopWidth.value.value : 0,
     right: isRight(borderRightWidth) ? borderRightWidth.value.value : 0,
     bottom: isRight(borderBottomWidth) ? borderBottomWidth.value.value : 0,
@@ -1015,6 +1016,7 @@ function getSpecialMeasurements(
     parentGridCellGlobalFrames,
     justifySelf,
     alignSelf,
+    border,
   )
 }
 
diff --git a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
index d4b0f00ce07c..b02aff443352 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
@@ -341,6 +341,12 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     parentGridCellGlobalFrames: null,
     justifySelf: null,
     alignSelf: null,
+    borderWidths: {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    },
   }
 
   const newDifferentValue: SpecialSizeMeasurements = {
@@ -479,6 +485,12 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     parentGridCellGlobalFrames: null,
     justifySelf: null,
     alignSelf: null,
+    borderWidths: {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    },
   }
 
   it('same reference returns the same reference', () => {
@@ -672,6 +684,12 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       parentGridCellGlobalFrames: null,
       justifySelf: null,
       alignSelf: null,
+      borderWidths: {
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+      },
     },
     computedStyle: {
       a: 'a',
@@ -842,6 +860,12 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       parentGridCellGlobalFrames: null,
       justifySelf: null,
       alignSelf: null,
+      borderWidths: {
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+      },
     },
     computedStyle: {
       a: 'a',
@@ -1037,6 +1061,12 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         parentGridCellGlobalFrames: null,
         justifySelf: null,
         alignSelf: null,
+        borderWidths: {
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+        },
       },
       computedStyle: {
         a: 'a',
@@ -1209,6 +1239,12 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         parentGridCellGlobalFrames: null,
         justifySelf: null,
         alignSelf: null,
+        borderWidths: {
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+        },
       },
       computedStyle: {
         a: 'a',
@@ -1381,6 +1417,12 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         parentGridCellGlobalFrames: null,
         justifySelf: null,
         alignSelf: null,
+        borderWidths: {
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+        },
       },
       computedStyle: {
         a: 'a',
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 6c039e513818..e101258b0e94 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -151,6 +151,7 @@ import type {
   GridAutoOrTemplateBase,
   GridAutoOrTemplateDimensions,
   GridAutoOrTemplateFallback,
+  BorderWidths,
 } from '../../../core/shared/element-template'
 import {
   elementInstanceMetadata,
@@ -2178,6 +2179,20 @@ export function GridElementPropertiesKeepDeepEquality(): KeepDeepEqualityCall<Gr
   )
 }
 
+export function BorderWidthsKeepDeepEquality(): KeepDeepEqualityCall<BorderWidths> {
+  return combine4EqualityCalls(
+    (p) => p.bottom,
+    NumberKeepDeepEquality,
+    (p) => p.left,
+    NumberKeepDeepEquality,
+    (p) => p.right,
+    NumberKeepDeepEquality,
+    (p) => p.top,
+    NumberKeepDeepEquality,
+    (bottom, left, right, top) => ({ bottom, left, right, top }),
+  )
+}
+
 export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<SpecialSizeMeasurements> {
   return (oldSize, newSize) => {
     const offsetResult = LocalPointKeepDeepEquality(oldSize.offset, newSize.offset)
@@ -2298,6 +2313,11 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
       arrayDeepEquality(arrayDeepEquality(CanvasRectangleKeepDeepEquality)),
     )(oldSize.gridCellGlobalFrames, newSize.gridCellGlobalFrames).areEqual
 
+    const borderWidthsEqual = BorderWidthsKeepDeepEquality()(
+      oldSize.borderWidths,
+      newSize.borderWidths,
+    ).areEqual
+
     const areEqual =
       offsetResult.areEqual &&
       coordinateSystemBoundsResult.areEqual &&
@@ -2352,7 +2372,8 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
       justifySelfEquals &&
       alignSelfEquals &&
       gridCellGlobalFramesEqual &&
-      parentGridCellGlobalFramesEqual
+      parentGridCellGlobalFramesEqual &&
+      borderWidthsEqual
     if (areEqual) {
       return keepDeepEqualityResult(oldSize, true)
     } else {
@@ -2412,6 +2433,7 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
         newSize.parentGridCellGlobalFrames,
         newSize.justifySelf,
         newSize.alignSelf,
+        newSize.borderWidths,
       )
       return keepDeepEqualityResult(sizeMeasurements, false)
     }
diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts
index 24cdf8dea6ce..fdf067c9b8c6 100644
--- a/editor/src/core/shared/element-template.ts
+++ b/editor/src/core/shared/element-template.ts
@@ -2783,6 +2783,13 @@ export function gridElementProperties(
   }
 }
 
+export type BorderWidths = {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
 export interface SpecialSizeMeasurements {
   offset: LocalPoint
   coordinateSystemBounds: CanvasRectangle | null
@@ -2839,6 +2846,7 @@ export interface SpecialSizeMeasurements {
   columnGap: number | null
   gridCellGlobalFrames: GridCellGlobalFrames | null
   parentGridCellGlobalFrames: GridCellGlobalFrames | null
+  borderWidths: BorderWidths
 }
 
 export function specialSizeMeasurements(
@@ -2897,6 +2905,7 @@ export function specialSizeMeasurements(
   parentGridCellGlobalFrames: GridCellGlobalFrames | null,
   justifySelf: SelfAlignment | null,
   alignSelf: SelfAlignment | null,
+  borderWidths: BorderWidths,
 ): SpecialSizeMeasurements {
   return {
     offset,
@@ -2954,6 +2963,7 @@ export function specialSizeMeasurements(
     parentGridCellGlobalFrames,
     justifySelf,
     alignSelf,
+    borderWidths,
   }
 }
 
@@ -3050,6 +3060,12 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements(
   null,
   null,
   null,
+  {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
 )
 
 export function walkElement(

From c49b3b989f5613e0f75754a13d4560cb6e06c8f0 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Thu, 7 Nov 2024 17:36:41 +0100
Subject: [PATCH 205/272] keep live mode on blur (#6615)

#6593 Aggressively switches to edit mode on blur, but we only want that
to happen if the user is in insert mode (which means a draw-to-insert
interaction).

**Fix**
only switch to edit mode if the current mode is insert mode
---
 editor/src/templates/editor.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index 74de72b62d77..0f5f22c96362 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -410,11 +410,15 @@ export class Editor {
   }
 
   resetStateOnBlur = (): void => {
+    const currentMode = this.storedState.patchedEditor.mode
+
     this.boundDispatch(
       [
         EditorActions.clearHighlightedViews(),
         CanvasActions.clearInteractionSession(false),
-        EditorActions.switchEditorMode(EditorModes.selectMode(null, false, 'none')),
+        ...(currentMode.type === 'insert'
+          ? [EditorActions.switchEditorMode(EditorModes.selectMode(null, false, 'none'))]
+          : []),
         EditorActions.updateKeys({}),
         EditorActions.closePopup(),
         EditorActions.clearPostActionData(),

From b08b24f9fac5d759b573a81ccbf2062f0704d835 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Thu, 7 Nov 2024 19:22:49 +0200
Subject: [PATCH 206/272] feat(import): split checks (#6618)

This PR splits the validation checks to allow an early break before
parsing the files.
In the UI they are split to these phases:
- **Validating code** (which are actually the pre-parse validations)
- Parse files (as today)
- **Checking Utopia requirements** (which are the post-parse
validations)

**Details:**
1. The requirements are still aggregated in the editor state, but they
are separated to phases for running as well as for displaying in the
wizard ([see the separation
here](https://github.com/concrete-utopia/utopia/pull/6618/files#diff-15c53165ea0f64ccf6f092783f2dce88639666dd1f4fd29e46035dc96ca4f2b3R20-R30)).
2. Main changes are in
[editor/src/core/shared/import/project-health-check/utopia-requirements-service.ts](https://github.com/concrete-utopia/utopia/pull/6618/files#diff-9691feb390abe09b4d2b2aca374b464cf8bcb91a10942f8f6f07a2b4e9355fa6),
where the split actually happens (`startPreParseValidation` and
`startPostParseValidation`).
3. Renaming the requirement phases added changes in several other files,
but they are simply refactors.
4. Minor - we also remove the shimmer when pausing the wizard (to make
it clearer that the import has stopped).

See here - first a successful project and then one with errors:
<video
src="https://github.com/user-attachments/assets/a907fe6b-68be-44a9-8a01-7e951ed90001"></video>

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 .../canvas/canvas-loading-screen.tsx          |  32 +++++
 .../editor/import-wizard/components.tsx       |  71 ++++-----
 .../editor/import-wizard/import-wizard.tsx    | 135 ++++++++----------
 .../components/editor/store/editor-state.ts   |   4 +-
 .../shared/github/operations/load-branch.ts   |  32 ++++-
 .../shared/import/import-operation-service.ts |   6 +-
 .../shared/import/import-operation-types.ts   |  42 ++++--
 .../check-utopia-requirements.ts              |  74 +++++++---
 .../requirements/requirement-language.ts      |   1 +
 .../requirements/requirement-package-json.ts  |   1 +
 .../requirements/requirement-react.ts         |   1 +
 .../requirement-server-packages.ts            |   3 +-
 .../requirements/requirement-storyboard.ts    |   1 +
 .../utopia-requirements-service.ts            |  97 +++++++++----
 .../utopia-requirements-types.ts              |  21 ++-
 editor/src/core/shared/object-utils.ts        |   7 +-
 16 files changed, 351 insertions(+), 177 deletions(-)

diff --git a/editor/src/components/canvas/canvas-loading-screen.tsx b/editor/src/components/canvas/canvas-loading-screen.tsx
index c9778254c3a1..54e4c74042e4 100644
--- a/editor/src/components/canvas/canvas-loading-screen.tsx
+++ b/editor/src/components/canvas/canvas-loading-screen.tsx
@@ -1,9 +1,35 @@
 import React from 'react'
 import { Global, css } from '@emotion/react'
 import { useColorTheme } from '../../uuiui'
+import { useEditorState } from '../editor/store/store-hook'
+import { Substores } from '../editor/store/store-hook'
 
 export const CanvasLoadingScreen = React.memo(() => {
   const colorTheme = useColorTheme()
+  const importState = useEditorState(
+    Substores.github,
+    (store) => store.editor.importState,
+    'CanvasLoadingScreen importState',
+  )
+  const importWizardOpen = useEditorState(
+    Substores.restOfEditor,
+    (store) => store.editor.importWizardOpen,
+    'CanvasLoadingScreen importWizardOpen',
+  )
+
+  const importingStoppedStyleOverride = React.useMemo(
+    () =>
+      // if the importing was stopped, we want to pause the shimmer animation
+      (importWizardOpen && importState.importStatus.status === 'done') ||
+      importState.importStatus.status === 'paused'
+        ? {
+            background: colorTheme.codeEditorShimmerPrimary.value,
+            animation: 'none',
+          }
+        : {},
+    [importWizardOpen, importState.importStatus.status, colorTheme.codeEditorShimmerPrimary.value],
+  )
+
   return (
     <React.Fragment>
       <Global
@@ -34,6 +60,11 @@ export const CanvasLoadingScreen = React.memo(() => {
             background-size: 1468px 104px;
             position: relative;
           }
+
+          .no-shimmer {
+            animation: none;
+            background: ${colorTheme.codeEditorShimmerPrimary.value};
+          }
         `}
       />
       <div
@@ -48,6 +79,7 @@ export const CanvasLoadingScreen = React.memo(() => {
             top: 0,
             width: '100vw',
             height: '100vh',
+            ...importingStoppedStyleOverride,
           }}
         ></div>
       </div>
diff --git a/editor/src/components/editor/import-wizard/components.tsx b/editor/src/components/editor/import-wizard/components.tsx
index e086e93771fa..24674d81b6e5 100644
--- a/editor/src/components/editor/import-wizard/components.tsx
+++ b/editor/src/components/editor/import-wizard/components.tsx
@@ -3,7 +3,6 @@
 import { jsx } from '@emotion/react'
 import React from 'react'
 import type {
-  ImportCheckRequirementAndFix,
   ImportFetchDependency,
   ImportOperation,
 } from '../../../core/shared/import/import-operation-types'
@@ -11,7 +10,6 @@ import { ImportOperationResult } from '../../../core/shared/import/import-operat
 import { assertNever } from '../../../core/shared/utils'
 import { Icn, Icons, useColorTheme } from '../../../uuiui'
 import { GithubSpinner } from '../../../components/navigator/left-pane/github-pane/github-spinner'
-import { RequirementResolutionResult } from '../../../core/shared/import/project-health-check/utopia-requirements-types'
 
 export function OperationLine({ operation }: { operation: ImportOperation }) {
   const operationRunningStatus = React.useMemo(() => {
@@ -58,7 +56,18 @@ export function OperationLine({ operation }: { operation: ImportOperation }) {
           </div>
         ) : null}
       </OperationLineContent>
-      {shouldShowChildren && hasChildren ? <OperationChildrenList operation={operation} /> : null}
+      {shouldShowChildren && hasChildren ? (
+        <div
+          className='import-wizard-operation-children'
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 15,
+          }}
+        >
+          <OperationChildrenList operation={operation} />
+        </div>
+      ) : null}
     </OperationLineWrapper>
   )
 }
@@ -67,39 +76,31 @@ function OperationChildrenList({ operation }: { operation: ImportOperation }) {
   if (operation.children == null || operation.children.length === 0) {
     return null
   }
+  // this is a special case where we don't list all of the children
+  // but we collapse the successful ones to a single line
+  if (operation.type === 'refreshDependencies') {
+    return (
+      <AggregatedChildrenStatus
+        childOperations={operation.children as ImportFetchDependency[]}
+        successFn={dependenciesSuccessFn}
+        successTextFn={dependenciesSuccessTextFn}
+      />
+    )
+  }
+  // otherwise, we list all of the children
   return (
-    <div
-      className='import-wizard-operation-children'
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 15,
-      }}
-    >
-      {operation.type === 'refreshDependencies' ? (
-        <AggregatedChildrenStatus
-          childOperations={operation.children as ImportFetchDependency[]}
-          successFn={dependenciesSuccessFn}
-          successTextFn={dependenciesSuccessTextFn}
-        />
-      ) : operation.type === 'checkRequirements' ? (
-        operation.children.map((childOperation) => (
-          <OperationLine
-            key={childOperation.id ?? childOperation.type}
-            operation={childOperation}
-          />
-        ))
-      ) : null}
-    </div>
+    <React.Fragment>
+      {operation.children?.map((childOperation) => (
+        <OperationLine key={childOperation.id ?? childOperation.type} operation={childOperation} />
+      ))}
+    </React.Fragment>
   )
 }
+
 const dependenciesSuccessFn = (op: ImportFetchDependency) =>
   op.result === ImportOperationResult.Success
 const dependenciesSuccessTextFn = (successCount: number) =>
   `${successCount} dependencies fetched successfully`
-const requirementsSuccessFn = (op: ImportCheckRequirementAndFix) =>
-  op.resolution === RequirementResolutionResult.Passed
-const requirementsSuccessTextFn = (successCount: number) => `${successCount} requirements met`
 
 function AggregatedChildrenStatus<T extends ImportOperation>({
   childOperations,
@@ -255,7 +256,7 @@ function getImportOperationText(operation: ImportOperation): React.ReactNode {
       if (operation.branchName != null) {
         return (
           <span>
-            Loading branch{' '}
+            Fetching branch{' '}
             <strong>
               {operation.githubRepo?.owner}/{operation.githubRepo?.repository}@
               {operation.branchName}
@@ -265,7 +266,7 @@ function getImportOperationText(operation: ImportOperation): React.ReactNode {
       } else {
         return (
           <span>
-            Loading repository{' '}
+            Fetching repository{' '}
             <strong>
               {operation.githubRepo?.owner}/{operation.githubRepo?.repository}
             </strong>
@@ -278,9 +279,13 @@ function getImportOperationText(operation: ImportOperation): React.ReactNode {
       return 'Parsing files'
     case 'refreshDependencies':
       return 'Fetching dependencies'
-    case 'checkRequirements':
+    case 'checkRequirementsPreParse':
+      return 'Validating code'
+    case 'checkRequirementsPostParse':
       return 'Checking Utopia requirements'
-    case 'checkRequirementAndFix':
+    case 'checkRequirementAndFixPreParse':
+      return operation.text
+    case 'checkRequirementAndFixPostParse':
       return operation.text
     default:
       assertNever(operation)
diff --git a/editor/src/components/editor/import-wizard/import-wizard.tsx b/editor/src/components/editor/import-wizard/import-wizard.tsx
index e1a38c8e92d4..b0c163244167 100644
--- a/editor/src/components/editor/import-wizard/import-wizard.tsx
+++ b/editor/src/components/editor/import-wizard/import-wizard.tsx
@@ -41,12 +41,6 @@ export const ImportWizard = React.memo(() => {
 
   const operations = importState.importOperations
 
-  const dispatch = useDispatch()
-
-  const handleDismiss = React.useCallback(() => {
-    hideImportWizard(dispatch)
-  }, [dispatch])
-
   const stopPropagation = React.useCallback((e: React.MouseEvent) => {
     e.stopPropagation()
   }, [])
@@ -84,7 +78,7 @@ export const ImportWizard = React.memo(() => {
             boxShadow: UtopiaStyles.popup.boxShadow,
             borderRadius: 10,
             width: 600,
-            height: 450,
+            height: 480,
             position: 'relative',
             display: 'flex',
             flexDirection: 'column',
@@ -106,20 +100,7 @@ export const ImportWizard = React.memo(() => {
               flex: 'none',
             }}
           >
-            <div css={{ fontSize: 16, fontWeight: 400 }}>Loading Project</div>
-            {when(
-              totalImportResult.importStatus.status === 'in-progress',
-              <Button
-                highlight
-                style={{
-                  padding: 15,
-                  color: colorTheme.fg6.value,
-                }}
-                onClick={handleDismiss}
-              >
-                Cancel
-              </Button>,
-            )}
+            <div css={{ fontSize: 16, fontWeight: 400 }}>Cloning Project</div>
           </FlexRow>
           <div
             className='import-wizard-body'
@@ -218,56 +199,66 @@ function ActionButtons({ importResult }: { importResult: TotalImportResult }) {
   ) {
     return null
   }
-  if (importResult.result == ImportOperationResult.Success) {
-    return (
-      <React.Fragment>
-        <div style={textStyle}>Project Imported Successfully</div>
-        <Button onClick={hideWizard} style={buttonStyle}>
-          Continue To Editor
-        </Button>
-      </React.Fragment>
-    )
-  }
-  if (importResult.result == ImportOperationResult.Warn) {
-    return (
-      <React.Fragment>
-        <div style={textStyle}>Project Imported With Warnings</div>
-        <Button onClick={hideWizard} style={buttonStyle}>
-          Continue To Editor
-        </Button>
-      </React.Fragment>
-    )
-  }
-  if (
-    importResult.result == ImportOperationResult.Error ||
-    importResult.result == ImportOperationResult.CriticalError
-  ) {
-    return (
-      <React.Fragment>
-        <div style={textStyle}>
-          {importResult.importStatus.status !== 'done' ||
-          importResult.result === ImportOperationResult.CriticalError
-            ? 'Error Importing Project'
-            : 'Project Imported With Errors'}
-        </div>
-        <Button style={{ ...buttonStyle, marginLeft: 'auto' }} onClick={importADifferentProject}>
-          Import A Different Project
-        </Button>
-        {unless(
-          importResult.result == ImportOperationResult.CriticalError,
-          <Button
-            style={{
-              cursor: 'pointer',
-            }}
-            onClick={continueAnyway}
-          >
-            {importResult.importStatus.status === 'done'
-              ? 'Continue To Editor'
-              : 'Continue Importing'}
-          </Button>,
-        )}
-      </React.Fragment>
-    )
+  switch (importResult.result) {
+    case ImportOperationResult.Success:
+      return (
+        <React.Fragment>
+          <div style={textStyle}>Project Imported Successfully</div>
+          <Button onClick={hideWizard} style={buttonStyle}>
+            Continue To Editor
+          </Button>
+        </React.Fragment>
+      )
+    case ImportOperationResult.Warn:
+      return (
+        <React.Fragment>
+          <div style={textStyle}>Project Imported With Warnings</div>
+          <Button onClick={hideWizard} style={buttonStyle}>
+            Continue To Editor
+          </Button>
+        </React.Fragment>
+      )
+    case ImportOperationResult.CriticalError:
+      return (
+        <React.Fragment>
+          <div style={textStyle}>Error Importing Project</div>
+          <Button style={{ ...buttonStyle, marginLeft: 'auto' }} onClick={importADifferentProject}>
+            Cancel
+          </Button>
+        </React.Fragment>
+      )
+    case ImportOperationResult.Error:
+      return (
+        <React.Fragment>
+          <div style={textStyle}>
+            {importResult.importStatus.status !== 'done'
+              ? 'Error While Importing Project'
+              : 'Project Imported With Errors'}
+          </div>
+          {when(
+            importResult.importStatus.status !== 'done',
+            <Button
+              style={{
+                cursor: 'pointer',
+                marginLeft: 'auto',
+              }}
+              onClick={continueAnyway}
+            >
+              Continue Anyway
+            </Button>,
+          )}
+          {importResult.importStatus.status === 'done' ? (
+            <Button style={{ ...buttonStyle }} onClick={hideWizard}>
+              Continue To Editor
+            </Button>
+          ) : (
+            <Button style={{ ...buttonStyle }} onClick={importADifferentProject}>
+              Cancel
+            </Button>
+          )}
+        </React.Fragment>
+      )
+    default:
+      assertNever(importResult.result)
   }
-  return null
 }
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index 9bd727ec1d77..5ac17fc9ebd1 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -191,13 +191,13 @@ import type { FancyError } from '../../../core/shared/code-exec-utils'
 import type { GridCellCoordinates } from '../../canvas/canvas-strategies/strategies/grid-cell-bounds'
 import {
   emptyImportState,
-  type ImportOperation,
   type ImportState,
 } from '../../../core/shared/import/import-operation-types'
 import {
   emptyProjectRequirements,
   type ProjectRequirements,
 } from '../../../core/shared/import/project-health-check/utopia-requirements-types'
+import { isFeatureEnabled } from '../../../utils/feature-switches'
 
 const ObjectPathImmutable: any = OPI
 
@@ -362,6 +362,8 @@ export function githubOperationLocksEditor(op: GithubOperation): boolean {
     case 'loadRepositories':
     case 'listPullRequestsForBranch':
       return false
+    case 'loadBranch':
+      return !isFeatureEnabled('Import Wizard')
     default:
       return true
   }
diff --git a/editor/src/core/shared/github/operations/load-branch.ts b/editor/src/core/shared/github/operations/load-branch.ts
index 9fe8389eaabd..f106d9aaec64 100644
--- a/editor/src/core/shared/github/operations/load-branch.ts
+++ b/editor/src/core/shared/github/operations/load-branch.ts
@@ -52,8 +52,13 @@ import {
 import {
   RequirementResolutionResult,
   resetRequirementsResolutions,
+  startPostParseValidation,
+  startPreParseValidation,
 } from '../../import/project-health-check/utopia-requirements-service'
-import { checkAndFixUtopiaRequirements } from '../../import/project-health-check/check-utopia-requirements'
+import {
+  checkAndFixUtopiaRequirementsParsed,
+  checkAndFixUtopiaRequirementsPreParsed,
+} from '../../import/project-health-check/check-utopia-requirements'
 import { ImportOperationResult } from '../../import/import-operation-types'
 import { isFeatureEnabled } from '../../../../utils/feature-switches'
 
@@ -186,20 +191,33 @@ export const updateProjectWithBranchContent =
             }
             notifyOperationFinished(dispatch, { type: 'loadBranch' }, ImportOperationResult.Success)
 
+            // pre parse validation
+            resetRequirementsResolutions(dispatch)
+            startPreParseValidation(dispatch)
+            const {
+              fixedProjectContents: projectContents,
+              result: preParsedRequirementResolutionResult,
+            } = checkAndFixUtopiaRequirementsPreParsed(dispatch, responseBody.branch.content)
+            if (preParsedRequirementResolutionResult === RequirementResolutionResult.Critical) {
+              // wait for the user to resume the import if they choose to
+              await pauseImport(dispatch)
+            }
+
+            // parse files
             notifyOperationStarted(dispatch, { type: 'parseFiles' })
             // Push any code through the parser so that the representations we end up with are in a state of `BOTH_MATCH`.
             // So that it will override any existing files that might already exist in the project when sending them to VS Code.
             const parseResults = await updateProjectContentsWithParseResults(
               workers,
-              responseBody.branch.content,
+              projectContents,
             )
             notifyOperationFinished(dispatch, { type: 'parseFiles' }, ImportOperationResult.Success)
 
-            resetRequirementsResolutions(dispatch)
-            const { fixedProjectContents, result: requirementResolutionResult } =
-              checkAndFixUtopiaRequirements(dispatch, parseResults)
-
-            if (requirementResolutionResult === RequirementResolutionResult.Critical) {
+            // post parse validation
+            startPostParseValidation(dispatch)
+            const { fixedProjectContents, result: postParsedRequirementResolutionResult } =
+              checkAndFixUtopiaRequirementsParsed(dispatch, parseResults)
+            if (postParsedRequirementResolutionResult === RequirementResolutionResult.Critical) {
               // wait for the user to resume the import if they choose to
               await pauseImport(dispatch)
             }
diff --git a/editor/src/core/shared/import/import-operation-service.ts b/editor/src/core/shared/import/import-operation-service.ts
index 107f19dd8917..6b21a6e0236e 100644
--- a/editor/src/core/shared/import/import-operation-service.ts
+++ b/editor/src/core/shared/import/import-operation-service.ts
@@ -22,8 +22,9 @@ export function startImportProcess(dispatch: EditorDispatch) {
     updateImportOperations(
       [
         { type: 'loadBranch' },
+        { type: 'checkRequirementsPreParse' },
         { type: 'parseFiles' },
-        { type: 'checkRequirements' },
+        { type: 'checkRequirementsPostParse' },
         { type: 'refreshDependencies' },
       ],
       ImportOperationAction.Replace,
@@ -80,7 +81,8 @@ export function areSameOperation(existing: ImportOperation, incoming: ImportOper
 }
 
 export const defaultParentTypes: Partial<Record<ImportOperationType, ImportOperationType>> = {
-  checkRequirementAndFix: 'checkRequirements',
+  checkRequirementAndFixPreParse: 'checkRequirementsPreParse',
+  checkRequirementAndFixPostParse: 'checkRequirementsPostParse',
   fetchDependency: 'refreshDependencies',
 } as const
 
diff --git a/editor/src/core/shared/import/import-operation-types.ts b/editor/src/core/shared/import/import-operation-types.ts
index 7789e76639a4..5c987103253e 100644
--- a/editor/src/core/shared/import/import-operation-types.ts
+++ b/editor/src/core/shared/import/import-operation-types.ts
@@ -43,26 +43,48 @@ type ImportParseFiles = {
   type: 'parseFiles'
 } & ImportOperationData
 
-export type ImportCheckRequirementAndFix = ImportOperationData & {
-  type: 'checkRequirementAndFix'
+export type ImportCheckRequirementAndFixPostParse = ImportOperationData & {
+  type: 'checkRequirementAndFixPostParse'
   resolution?: RequirementResolutionResult
   text: string
   id: string
 }
 
-export function importCheckRequirementAndFix(
+export function importCheckRequirementAndFixPostParse(
   id: string,
   text: string,
-): ImportCheckRequirementAndFix {
+): ImportCheckRequirementAndFixPostParse {
   return {
-    type: 'checkRequirementAndFix',
+    type: 'checkRequirementAndFixPostParse',
     text: text,
     id: id,
   }
 }
 
-type ImportCheckRequirements = ImportOperationData & {
-  type: 'checkRequirements'
+export type ImportCheckRequirementAndFixPreParse = ImportOperationData & {
+  type: 'checkRequirementAndFixPreParse'
+  resolution?: RequirementResolutionResult
+  text: string
+  id: string
+}
+
+export function importCheckRequirementAndFixPreParse(
+  id: string,
+  text: string,
+): ImportCheckRequirementAndFixPreParse {
+  return {
+    type: 'checkRequirementAndFixPreParse',
+    text: text,
+    id: id,
+  }
+}
+
+type ImportCheckRequirementsPostParse = ImportOperationData & {
+  type: 'checkRequirementsPostParse'
+}
+
+type ImportCheckRequirementsPreParse = ImportOperationData & {
+  type: 'checkRequirementsPreParse'
 }
 
 export type ImportOperation =
@@ -70,8 +92,10 @@ export type ImportOperation =
   | ImportRefreshDependencies
   | ImportParseFiles
   | ImportFetchDependency
-  | ImportCheckRequirementAndFix
-  | ImportCheckRequirements
+  | ImportCheckRequirementAndFixPreParse
+  | ImportCheckRequirementAndFixPostParse
+  | ImportCheckRequirementsPreParse
+  | ImportCheckRequirementsPostParse
 
 export type ImportOperationType = ImportOperation['type']
 
diff --git a/editor/src/core/shared/import/project-health-check/check-utopia-requirements.ts b/editor/src/core/shared/import/project-health-check/check-utopia-requirements.ts
index edc9d9902185..bbf45ac6b588 100644
--- a/editor/src/core/shared/import/project-health-check/check-utopia-requirements.ts
+++ b/editor/src/core/shared/import/project-health-check/check-utopia-requirements.ts
@@ -4,33 +4,71 @@ import CheckPackageJson from './requirements/requirement-package-json'
 import CheckLanguage from './requirements/requirement-language'
 import CheckReactVersion from './requirements/requirement-react'
 import { RequirementResolutionResult } from './utopia-requirements-types'
-import type { ProjectRequirement, RequirementCheck } from './utopia-requirements-types'
-import {
-  initialTexts,
-  notifyCheckingRequirement,
-  notifyResolveRequirement,
-} from './utopia-requirements-service'
+import type {
+  ProjectRequirement,
+  RequirementCheck,
+  RequirementCheckStage,
+  RequirementsByStage,
+} from './utopia-requirements-types'
+import { notifyCheckingRequirement, notifyResolveRequirement } from './utopia-requirements-service'
 import CheckStoryboard from './requirements/requirement-storyboard'
 import CheckServerPackages from './requirements/requirement-server-packages'
 
-export function checkAndFixUtopiaRequirements(
+let requirementsToCheck: RequirementsByStage | undefined
+export function getRequirementsToCheck(): RequirementsByStage {
+  if (requirementsToCheck == null) {
+    requirementsToCheck = {
+      preParse: {
+        packageJsonEntries: new CheckPackageJson(),
+        language: new CheckLanguage(),
+        reactVersion: new CheckReactVersion(),
+      },
+      postParse: {
+        storyboard: new CheckStoryboard(),
+        serverPackages: new CheckServerPackages(),
+      },
+    }
+  }
+  return requirementsToCheck
+}
+
+export function checkAndFixUtopiaRequirementsPreParsed(
+  dispatch: EditorDispatch,
+  projectContents: ProjectContentTreeRoot,
+): { result: RequirementResolutionResult; fixedProjectContents: ProjectContentTreeRoot } {
+  return checkAndFixUtopiaRequirements(dispatch, projectContents, getRequirementsToCheck().preParse)
+}
+
+export function checkAndFixUtopiaRequirementsParsed(
   dispatch: EditorDispatch,
   parsedProjectContents: ProjectContentTreeRoot,
 ): { result: RequirementResolutionResult; fixedProjectContents: ProjectContentTreeRoot } {
-  const checks: Record<ProjectRequirement, RequirementCheck> = {
-    storyboard: new CheckStoryboard(),
-    packageJsonEntries: new CheckPackageJson(),
-    language: new CheckLanguage(),
-    reactVersion: new CheckReactVersion(),
-    serverPackages: new CheckServerPackages(),
+  return checkAndFixUtopiaRequirements(
+    dispatch,
+    parsedProjectContents,
+    getRequirementsToCheck().postParse,
+  )
+}
+
+export function getRequirementStage(requirement: ProjectRequirement): RequirementCheckStage {
+  if (requirement in getRequirementsToCheck().preParse) {
+    return 'preParse'
   }
-  let projectContents = parsedProjectContents
+  return 'postParse'
+}
+
+function checkAndFixUtopiaRequirements(
+  dispatch: EditorDispatch,
+  projectContents: ProjectContentTreeRoot,
+  checks: Partial<Record<ProjectRequirement, RequirementCheck>>,
+): { result: RequirementResolutionResult; fixedProjectContents: ProjectContentTreeRoot } {
+  let updatedProjectContents = projectContents
   let result: RequirementResolutionResult = RequirementResolutionResult.Passed
   // iterate over all checks, updating the project contents as we go
   for (const [name, check] of Object.entries(checks)) {
     const checkName = name as ProjectRequirement
-    notifyCheckingRequirement(dispatch, checkName, initialTexts[checkName])
-    const checkResult = check.check(projectContents)
+    notifyCheckingRequirement(dispatch, checkName, check.initialText)
+    const checkResult = check.check(updatedProjectContents)
     if (checkResult.resolution === RequirementResolutionResult.Critical) {
       result = RequirementResolutionResult.Critical
     }
@@ -41,7 +79,7 @@ export function checkAndFixUtopiaRequirements(
       checkResult.resultText,
       checkResult.resultValue,
     )
-    projectContents = checkResult.newProjectContents ?? projectContents
+    updatedProjectContents = checkResult.newProjectContents ?? updatedProjectContents
   }
-  return { result: result, fixedProjectContents: projectContents }
+  return { result: result, fixedProjectContents: updatedProjectContents }
 }
diff --git a/editor/src/core/shared/import/project-health-check/requirements/requirement-language.ts b/editor/src/core/shared/import/project-health-check/requirements/requirement-language.ts
index 0d9024032e26..952240ccccd2 100644
--- a/editor/src/core/shared/import/project-health-check/requirements/requirement-language.ts
+++ b/editor/src/core/shared/import/project-health-check/requirements/requirement-language.ts
@@ -7,6 +7,7 @@ import {
 import { applyToAllUIJSFiles } from '../../../../model/project-file-utils'
 
 export default class CheckProjectLanguage implements RequirementCheck {
+  initialText = 'Checking project language'
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
     let jsCount = 0
     let tsCount = 0
diff --git a/editor/src/core/shared/import/project-health-check/requirements/requirement-package-json.ts b/editor/src/core/shared/import/project-health-check/requirements/requirement-package-json.ts
index 006747800867..d27f24e62de7 100644
--- a/editor/src/core/shared/import/project-health-check/requirements/requirement-package-json.ts
+++ b/editor/src/core/shared/import/project-health-check/requirements/requirement-package-json.ts
@@ -7,6 +7,7 @@ import { addFileToProjectContents } from '../../../../../components/assets'
 import { codeFile } from '../../../../../core/shared/project-file-types'
 
 export default class PackageJsonCheckAndFix implements RequirementCheck {
+  initialText = 'Checking for a valid package.json'
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
     const parsedPackageJson = getPackageJson(projectContents)
     if (parsedPackageJson == null) {
diff --git a/editor/src/core/shared/import/project-health-check/requirements/requirement-react.ts b/editor/src/core/shared/import/project-health-check/requirements/requirement-react.ts
index 7198949d3ee7..555d86336ff6 100644
--- a/editor/src/core/shared/import/project-health-check/requirements/requirement-react.ts
+++ b/editor/src/core/shared/import/project-health-check/requirements/requirement-react.ts
@@ -10,6 +10,7 @@ import { getProjectDependencies } from '../../../../../components/assets'
 const SUPPORTED_REACT_VERSION_RANGE = '16.8.0 - 18.x'
 
 export default class CheckReactRequirement implements RequirementCheck {
+  initialText = 'Checking React version'
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
     const projectDependencies = getProjectDependencies(projectContents)
     const reactVersion = projectDependencies?.react
diff --git a/editor/src/core/shared/import/project-health-check/requirements/requirement-server-packages.ts b/editor/src/core/shared/import/project-health-check/requirements/requirement-server-packages.ts
index fa86fcf80da8..495c96e12aca 100644
--- a/editor/src/core/shared/import/project-health-check/requirements/requirement-server-packages.ts
+++ b/editor/src/core/shared/import/project-health-check/requirements/requirement-server-packages.ts
@@ -11,6 +11,7 @@ import builtinModules from './builtin-modules.json'
 const serverPackagesRestrictionList: RegExp[] = [/^next/, /^remix/, /^astro/, /^svelte/]
 
 export default class CheckServerPackages implements RequirementCheck {
+  initialText = 'Checking for server packages'
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
     const projectDependencies = getProjectDependencies(projectContents) ?? {}
 
@@ -21,7 +22,7 @@ export default class CheckServerPackages implements RequirementCheck {
     if (serverPackages.length > 0) {
       return {
         resolution: RequirementResolutionResult.Critical,
-        resultText: 'Server packages found',
+        resultText: 'Unsupported server packages found',
         resultValue: serverPackages.join(', '),
       }
     }
diff --git a/editor/src/core/shared/import/project-health-check/requirements/requirement-storyboard.ts b/editor/src/core/shared/import/project-health-check/requirements/requirement-storyboard.ts
index 35ceeca6e1ce..0f18824db2e2 100644
--- a/editor/src/core/shared/import/project-health-check/requirements/requirement-storyboard.ts
+++ b/editor/src/core/shared/import/project-health-check/requirements/requirement-storyboard.ts
@@ -13,6 +13,7 @@ import { codeFile } from '../../../../../core/shared/project-file-types'
 import { addStoryboardFileToProject } from '../../../../../core/model/storyboard-utils'
 
 export default class CheckStoryboard implements RequirementCheck {
+  initialText = 'Checking storyboard.js'
   check(projectContents: ProjectContentTreeRoot): RequirementCheckResult {
     return createStoryboardFileIfNecessaryInner(projectContents)
   }
diff --git a/editor/src/core/shared/import/project-health-check/utopia-requirements-service.ts b/editor/src/core/shared/import/project-health-check/utopia-requirements-service.ts
index 82aa36895c5a..8ba39e5d6999 100644
--- a/editor/src/core/shared/import/project-health-check/utopia-requirements-service.ts
+++ b/editor/src/core/shared/import/project-health-check/utopia-requirements-service.ts
@@ -1,4 +1,8 @@
-import { importCheckRequirementAndFix, ImportOperationResult } from '../import-operation-types'
+import {
+  importCheckRequirementAndFixPostParse,
+  importCheckRequirementAndFixPreParse,
+  ImportOperationResult,
+} from '../import-operation-types'
 import { notifyOperationFinished, notifyOperationStarted } from '../import-operation-service'
 import type { EditorDispatch } from '../../../../components/editor/action-types'
 import { updateProjectRequirements } from '../../../../components/editor/actions/action-creators'
@@ -9,14 +13,8 @@ import {
   RequirementResolutionStatus,
 } from './utopia-requirements-types'
 import { isFeatureEnabled } from '../../../../utils/feature-switches'
-
-export const initialTexts: Record<ProjectRequirement, string> = {
-  storyboard: 'Checking storyboard.js',
-  packageJsonEntries: 'Checking for a valid package.json',
-  language: 'Checking project language',
-  reactVersion: 'Checking React version',
-  serverPackages: 'Checking for server packages',
-}
+import { getRequirementStage, getRequirementsToCheck } from './check-utopia-requirements'
+import { objectFilter, objectKeys } from '../../object-utils'
 
 export function updateProjectRequirementsStatus(
   dispatch: EditorDispatch,
@@ -33,13 +31,24 @@ export function updateProjectRequirementsStatus(
 export function resetRequirementsResolutions(dispatch: EditorDispatch) {
   let projectRequirements = emptyProjectRequirements()
   updateProjectRequirementsStatus(dispatch, projectRequirements)
+}
+
+export function startPreParseValidation(dispatch: EditorDispatch) {
+  const checks = getRequirementsToCheck().preParse
   notifyOperationStarted(dispatch, {
-    type: 'checkRequirements',
-    children: Object.keys(projectRequirements).map((key) =>
-      importCheckRequirementAndFix(
-        key as ProjectRequirement,
-        initialTexts[key as ProjectRequirement],
-      ),
+    type: 'checkRequirementsPreParse',
+    children: objectKeys(checks).map((key) =>
+      importCheckRequirementAndFixPreParse(key, checks[key].initialText),
+    ),
+  })
+}
+
+export function startPostParseValidation(dispatch: EditorDispatch) {
+  const checks = getRequirementsToCheck().postParse
+  notifyOperationStarted(dispatch, {
+    type: 'checkRequirementsPostParse',
+    children: objectKeys(checks).map((key) =>
+      importCheckRequirementAndFixPostParse(key, checks[key].initialText),
     ),
   })
 }
@@ -49,13 +58,15 @@ export function notifyCheckingRequirement(
   requirement: ProjectRequirement,
   text: string,
 ) {
+  const stage = getRequirementStage(requirement)
   updateProjectRequirementsStatus(dispatch, {
     [requirement]: {
       status: RequirementResolutionStatus.Pending,
     },
   })
   notifyOperationStarted(dispatch, {
-    type: 'checkRequirementAndFix',
+    type:
+      stage === 'preParse' ? 'checkRequirementAndFixPreParse' : 'checkRequirementAndFixPostParse',
     id: requirement,
     text: text,
   })
@@ -68,6 +79,7 @@ export function notifyResolveRequirement(
   text: string,
   value?: string,
 ) {
+  const stage = getRequirementStage(requirementName)
   updateProjectRequirementsStatus(dispatch, {
     [requirementName]: {
       status: RequirementResolutionStatus.Done,
@@ -85,7 +97,8 @@ export function notifyResolveRequirement(
   notifyOperationFinished(
     dispatch,
     {
-      type: 'checkRequirementAndFix',
+      type:
+        stage === 'preParse' ? 'checkRequirementAndFixPreParse' : 'checkRequirementAndFixPostParse',
       id: requirementName,
       text: text,
       resolution: resolution,
@@ -99,37 +112,65 @@ export function updateRequirements(
   existingRequirements: ProjectRequirements,
   incomingRequirements: Partial<ProjectRequirements>,
 ): ProjectRequirements {
-  let result = { ...existingRequirements }
+  let requirements = { ...existingRequirements }
   for (const incomingRequirement of Object.keys(incomingRequirements)) {
     const incomingRequirementName = incomingRequirement as ProjectRequirement
-    result[incomingRequirementName] = {
-      ...result[incomingRequirementName],
+    requirements[incomingRequirementName] = {
+      ...requirements[incomingRequirementName],
       ...incomingRequirements[incomingRequirementName],
     }
   }
 
-  const aggregatedDoneStatus = getAggregatedStatus(result)
-  if (aggregatedDoneStatus != null) {
-    notifyOperationFinished(dispatch, { type: 'checkRequirements' }, aggregatedDoneStatus)
+  notifyAggregatedResult(dispatch, incomingRequirements)
+
+  return requirements
+}
+
+function notifyAggregatedResult(
+  dispatch: EditorDispatch,
+  incomingRequirements: Partial<ProjectRequirements>,
+): void {
+  const incomingPreParseRequirements = objectFilter(
+    (_, key) => getRequirementStage(key as ProjectRequirement) === 'preParse',
+    incomingRequirements,
+  )
+  if (Object.keys(incomingPreParseRequirements).length > 0) {
+    const aggregatedStatus = getAggregatedStatus(incomingPreParseRequirements)
+    if (aggregatedStatus != null) {
+      notifyOperationFinished(dispatch, { type: 'checkRequirementsPreParse' }, aggregatedStatus)
+    }
   }
 
-  return result
+  const incomingPostParseRequirements = objectFilter(
+    (_, key) => getRequirementStage(key as ProjectRequirement) === 'postParse',
+    incomingRequirements,
+  )
+  if (Object.keys(incomingPostParseRequirements).length > 0) {
+    const aggregatedStatus = getAggregatedStatus(incomingPostParseRequirements)
+    if (aggregatedStatus != null) {
+      notifyOperationFinished(dispatch, { type: 'checkRequirementsPostParse' }, aggregatedStatus)
+    }
+  }
 }
 
 function getAggregatedStatus(
-  requirementsResolutions: ProjectRequirements,
+  requirementsResolutions: Partial<ProjectRequirements>,
 ): ImportOperationResult | null {
   for (const resolution of Object.values(requirementsResolutions)) {
-    if (resolution.status != RequirementResolutionStatus.Done) {
-      return null
-    }
     if (resolution.resolution == RequirementResolutionResult.Critical) {
       return ImportOperationResult.Error
     }
+  }
+  for (const resolution of Object.values(requirementsResolutions)) {
     if (resolution.resolution == RequirementResolutionResult.Partial) {
       return ImportOperationResult.Warn
     }
   }
+  for (const resolution of Object.values(requirementsResolutions)) {
+    if (resolution.status != RequirementResolutionStatus.Done) {
+      return null
+    }
+  }
   return ImportOperationResult.Success
 }
 export { RequirementResolutionResult }
diff --git a/editor/src/core/shared/import/project-health-check/utopia-requirements-types.ts b/editor/src/core/shared/import/project-health-check/utopia-requirements-types.ts
index 665824133d5e..bfbf9ca268b6 100644
--- a/editor/src/core/shared/import/project-health-check/utopia-requirements-types.ts
+++ b/editor/src/core/shared/import/project-health-check/utopia-requirements-types.ts
@@ -59,28 +59,34 @@ export function requirementResolution(
   }
 }
 
-export interface ProjectRequirements {
-  storyboard: RequirementResolution
+export type PreParseValidationRequirements = {
   packageJsonEntries: RequirementResolution
   language: RequirementResolution
   reactVersion: RequirementResolution
+}
+export type PreParseValidationRequirement = keyof PreParseValidationRequirements
+
+export type PostParseValidationRequirements = {
+  storyboard: RequirementResolution
   serverPackages: RequirementResolution
 }
+export type PostParseValidationRequirement = keyof PostParseValidationRequirements
 
+export type ProjectRequirements = PreParseValidationRequirements & PostParseValidationRequirements
 export type ProjectRequirement = keyof ProjectRequirements
 
 export function newProjectRequirements(
-  storyboard: RequirementResolution,
   packageJsonEntries: RequirementResolution,
   language: RequirementResolution,
   reactVersion: RequirementResolution,
+  storyboard: RequirementResolution,
   serverPackages: RequirementResolution,
 ): ProjectRequirements {
   return {
-    storyboard,
     packageJsonEntries,
     language,
     reactVersion,
+    storyboard,
     serverPackages,
   }
 }
@@ -93,5 +99,12 @@ export interface RequirementCheckResult {
 }
 
 export interface RequirementCheck {
+  initialText: string
   check: (projectContents: ProjectContentTreeRoot) => RequirementCheckResult
 }
+
+export type RequirementCheckStage = 'preParse' | 'postParse'
+export type RequirementsByStage = {
+  preParse: Record<PreParseValidationRequirement, RequirementCheck>
+  postParse: Record<PostParseValidationRequirement, RequirementCheck>
+}
diff --git a/editor/src/core/shared/object-utils.ts b/editor/src/core/shared/object-utils.ts
index fff91d92de78..cf263592beb1 100644
--- a/editor/src/core/shared/object-utils.ts
+++ b/editor/src/core/shared/object-utils.ts
@@ -209,8 +209,7 @@ export function mergeObjects<T, U>(
 export type SimpleObject<T> = { [key: string]: T } & { [Symbol.iterator]?: never }
 
 export function objectValues<T>(object: { [key: string]: T }): Array<T> {
-  const objectKeys = Object.keys(object)
-  return objectKeys.map((key) => object[key])
+  return Object.keys(object).map((key) => object[key])
 }
 
 export function isEmptyObject(obj: SimpleObject<any>): boolean {
@@ -294,3 +293,7 @@ export function objectContainsAllKeys<T extends MapLike<any>>(
 ): boolean {
   return keys.every((key) => objectContainsKey(obj, key))
 }
+
+export function objectKeys<T extends MapLike<any>>(obj: T): Array<keyof T> {
+  return Object.keys(obj) as Array<keyof T>
+}

From 16a0ff60aa5985bf1b58822a4435efea22a0ecd7 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:34:00 +0100
Subject: [PATCH 207/272] fix(canvas) A Less Aggressive Auto-Collapse (#6598)

- Reverted the changes which disabled
`pushIntendedBoundsAndUpdateHuggingElements` along with the changes from
that PR.
- Added toast when fixed width and height added.
- Updated some tests.
- Moved `getHuggingElementContentsStatus` into its own file and
  extracted out the type `HuggingElementContentsStatus`.
- Changed type of `PushIntendedBoundsAndUpdateHuggingElements.value`.
- Added additional escape case in
`applyUpdateResizeHuggingElementsCommands`.
- `deleteElements` stores some more values upfront in the
`trueUpHuggingElement`
  value.
- Added `elementFrame` and `huggingElementContentsStatus` to
`TrueUpHuggingElement`.
---
 ...nds-and-update-hugging-elements-command.ts |  78 +++------
 ...d-update-targets-command.spec.browser2.tsx | 159 ++++++++++++++++-
 editor/src/components/canvas/hugging-utils.ts |  26 +++
 .../editor/actions/actions.spec.browser2.tsx  | 164 +++++++++---------
 .../src/components/editor/actions/actions.tsx |  16 +-
 .../editor/conditionals.spec.browser2.tsx     |   4 +-
 .../components/editor/store/editor-state.ts   |   7 +
 .../store/store-deep-equality-instances.ts    |   9 +-
 editor/src/core/model/true-up-targets.ts      |  13 +-
 9 files changed, 327 insertions(+), 149 deletions(-)
 create mode 100644 editor/src/components/canvas/hugging-utils.ts

diff --git a/editor/src/components/canvas/commands/push-intended-bounds-and-update-hugging-elements-command.ts b/editor/src/components/canvas/commands/push-intended-bounds-and-update-hugging-elements-command.ts
index 7b82f99e77c4..d4cbf9f313af 100644
--- a/editor/src/components/canvas/commands/push-intended-bounds-and-update-hugging-elements-command.ts
+++ b/editor/src/components/canvas/commands/push-intended-bounds-and-update-hugging-elements-command.ts
@@ -1,3 +1,5 @@
+import type { CanvasRectangle } from '../../../core/shared/math-utils'
+import { isFiniteRectangle, sizesEqual } from '../../../core/shared/math-utils'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import * as EP from '../../../core/shared/element-path'
 import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template'
@@ -14,16 +16,23 @@ import type { CanvasFrameAndTarget } from '../canvas-types'
 import type { BaseCommand, CanvasCommand, CommandFunctionResult } from './commands'
 import { foldAndApplyCommandsSimple } from './commands'
 import { setCssLengthProperty, setExplicitCssValue } from './set-css-length-command'
-import { setProperty } from './set-property-command'
 import { showToastCommand } from './show-toast-command'
+import { isZeroSizedElement } from '../controls/outline-utils'
+import type { HuggingElementContentsStatus } from '../hugging-utils'
+import { getHuggingElementContentsStatus } from '../hugging-utils'
+
+export interface IntendedBoundsAndChildrenState extends CanvasFrameAndTarget {
+  elementFrame: CanvasRectangle
+  huggingElementContentsStatus: HuggingElementContentsStatus
+}
 
 export interface PushIntendedBoundsAndUpdateHuggingElements extends BaseCommand {
   type: 'PUSH_INTENDED_BOUNDS_AND_UPDATE_HUGGING_ELEMENTS'
-  value: Array<CanvasFrameAndTarget>
+  value: Array<IntendedBoundsAndChildrenState>
 }
 
 export function pushIntendedBoundsAndUpdateHuggingElements(
-  value: Array<CanvasFrameAndTarget>,
+  value: Array<IntendedBoundsAndChildrenState>,
 ): PushIntendedBoundsAndUpdateHuggingElements {
   return {
     type: 'PUSH_INTENDED_BOUNDS_AND_UPDATE_HUGGING_ELEMENTS',
@@ -60,23 +69,6 @@ export const runPushIntendedBoundsAndUpdateHuggingElements = (
   }
 }
 
-function getHuggingElementContentsStatus(
-  jsxMetadata: ElementInstanceMetadataMap,
-  path: ElementPath,
-): 'empty' | 'contains-only-absolute' | 'contains-some-absolute' | 'non-empty' {
-  const children = MetadataUtils.getChildrenUnordered(jsxMetadata, path)
-  const absoluteChildren = children.filter(MetadataUtils.isPositionAbsolute).length
-  if (children.length === 0) {
-    return 'empty'
-  } else if (absoluteChildren === children.length) {
-    return 'contains-only-absolute'
-  } else if (absoluteChildren > 0) {
-    return 'contains-some-absolute'
-  } else {
-    return 'non-empty'
-  }
-}
-
 function applyUpdateResizeHuggingElementsCommands(
   editor: EditorState,
   command: PushIntendedBoundsAndUpdateHuggingElements,
@@ -89,17 +81,30 @@ function applyUpdateResizeHuggingElementsCommands(
       editor.jsxMetadata,
       frameAndTarget.target,
     )
+
+    // If the element isn't hugging its parent in either direction, skip this case.
     if (
       metadata == null ||
       !(isHuggingParent(metadata, 'width') || isHuggingParent(metadata, 'height'))
     ) {
       continue
     }
+
+    // If the element still has non-absolute children, skip this case.
     const status = getHuggingElementContentsStatus(editor.jsxMetadata, frameAndTarget.target)
     if (status === 'non-empty') {
       continue
     }
 
+    // If the element is now empty, but used to contain only absolute children, and is zero-sized, skip this case.
+    if (
+      status === 'empty' &&
+      frameAndTarget.huggingElementContentsStatus === 'contains-only-absolute' &&
+      isZeroSizedElement(frameAndTarget.elementFrame)
+    ) {
+      continue
+    }
+
     function setCSSDimension(
       flexDirection: FlexDirection | null,
       prop: 'left' | 'top' | 'width' | 'height',
@@ -128,39 +133,8 @@ function applyUpdateResizeHuggingElementsCommands(
           'height',
           frameAndTarget.frame.height,
         ),
+        showToastCommand('Added fixed width and height', 'NOTICE', 'added-width-height'),
       )
-
-      const parentPath = EP.parentPath(frameAndTarget.target)
-      const parentElement = MetadataUtils.findElementByElementPath(editor.jsxMetadata, parentPath)
-      const parentIsHugging =
-        parentElement != null &&
-        (isHuggingParent(parentElement, 'width') || isHuggingParent(parentElement, 'height'))
-      const shouldSetAbsolutePosition =
-        EP.isStoryboardPath(parentPath) || parentElement == null || parentIsHugging
-      if (shouldSetAbsolutePosition) {
-        commands.push(
-          setProperty('always', frameAndTarget.target, PP.create('style', 'position'), 'absolute'),
-          setCSSDimension(
-            metadata.specialSizeMeasurements.flexDirection,
-            'left',
-            frameAndTarget.frame.x,
-          ),
-          setCSSDimension(
-            metadata.specialSizeMeasurements.flexDirection,
-            'top',
-            frameAndTarget.frame.y,
-          ),
-          showToastCommand(
-            'Converted to fixed size and absolute position',
-            'NOTICE',
-            'convert-to-fixed-size',
-          ),
-        )
-      } else {
-        commands.push(
-          showToastCommand('Added fixed width and height', 'NOTICE', 'added-width-height'),
-        )
-      }
     }
   }
   return {
diff --git a/editor/src/components/canvas/commands/push-intended-bounds-and-update-targets-command.spec.browser2.tsx b/editor/src/components/canvas/commands/push-intended-bounds-and-update-targets-command.spec.browser2.tsx
index 5a42a32d7d88..15a9f36a92f1 100644
--- a/editor/src/components/canvas/commands/push-intended-bounds-and-update-targets-command.spec.browser2.tsx
+++ b/editor/src/components/canvas/commands/push-intended-bounds-and-update-targets-command.spec.browser2.tsx
@@ -19,7 +19,7 @@ function makeScenePath(trailingPath: string): ElementPath {
 describe('push intended bounds', () => {
   describe('hugging elements', () => {
     describe('flex containers', () => {
-      xit('keeps the container dimensions when becoming empty (flex) (delete, single element)', async () => {
+      it('keeps the container dimensions when becoming empty (flex) (delete, single element)', async () => {
         const renderResult = await renderTestEditorWithCode(
           formatTestProjectCode(
             makeTestProjectCodeWithSnippet(`
@@ -74,7 +74,7 @@ describe('push intended bounds', () => {
           ),
         )
       })
-      xit('keeps the container dimensions when becoming empty (flex) (delete, multiple elements)', async () => {
+      it('keeps the container dimensions when becoming empty (flex) (delete, multiple elements)', async () => {
         const renderResult = await renderTestEditorWithCode(
           formatTestProjectCode(
             makeTestProjectCodeWithSnippet(`
@@ -177,7 +177,7 @@ describe('push intended bounds', () => {
           ),
         )
       })
-      xit('keeps the container dimensions when becoming empty (zero-sized)', async () => {
+      it('keeps the container dimensions when becoming empty (zero-sized)', async () => {
         const renderResult = await renderTestEditorWithCode(
           formatTestProjectCode(`
 				import * as React from 'react'
@@ -205,13 +205,13 @@ describe('push intended bounds', () => {
 
 			export var storyboard = (
 				<Storyboard data-uid='sb'>
-					<div data-uid='container' data-testid='container' style={{ backgroundColor: 'red', width: 80, height: 80, position: 'absolute', left: 100, top: 100 }} />
+					<div data-uid='container' data-testid='container' style={{ backgroundColor: 'red' }} />
 				</Storyboard>
 			)
 		`),
         )
       })
-      xit('keeps the container dimensions when becoming empty (inside a flex container)', async () => {
+      it('keeps the container dimensions when becoming empty (inside a flex container)', async () => {
         const renderResult = await renderTestEditorWithCode(
           formatTestProjectCode(`
 				import * as React from 'react'
@@ -251,6 +251,155 @@ describe('push intended bounds', () => {
 		`),
         )
       })
+      it('keeps the container dimensions when becoming empty (inside a grid container)', async () => {
+        const renderResult = await renderTestEditorWithCode(
+          formatTestProjectCode(`
+				import * as React from 'react'
+				import { Storyboard, Group } from 'utopia-api'
+
+				export var storyboard = (
+					<Storyboard data-uid='sb'>
+						<div data-uid='grid' style={{ display: 'grid', gridTemplateColumns: '1fr', gridRowColumns: '1fr', alignItems: 'center', justifyContent: 'center', padding: 10, gap: 10, backgroundColor: 'white', width: 100, height: 100, position: 'absolute', left: 21, top: 17 }}>
+							<div data-uid='container' data-testid='container' style={{ backgroundColor: 'red' }}>
+								<div data-uid='delete-me' style={{ backgroundColor: 'yellow', width: 80, height: 80 }}>
+									delete me pls
+								</div>
+							</div>
+						</div>
+					</Storyboard>
+				)
+			`),
+          'await-first-dom-report',
+        )
+
+        await selectComponentsForTest(renderResult, [EP.fromString(`sb/grid/container/delete-me`)])
+
+        await renderResult.dispatch([deleteSelected()], true)
+
+        expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+          formatTestProjectCode(`
+			import * as React from 'react'
+			import { Storyboard, Group } from 'utopia-api'
+
+			export var storyboard = (
+				<Storyboard data-uid='sb'>
+					<div data-uid='grid' style={{ display: 'grid', gridTemplateColumns: '1fr', gridRowColumns: '1fr', alignItems: 'center', justifyContent: 'center', padding: 10, gap: 10, backgroundColor: 'white', width: 100, height: 100, position: 'absolute', left: 21, top: 17 }}>
+						<div data-uid='container' data-testid='container' style={{ backgroundColor: 'red', width: 80, height: 80 }} />
+					</div>
+				</Storyboard>
+			)
+		`),
+        )
+      })
+    })
+    it('keeps the container dimensions with a fractionally defined grid becomes empty', async () => {
+      const renderResult = await renderTestEditorWithCode(
+        formatTestProjectCode(`
+      import * as React from 'react'
+      import { Storyboard, Group } from 'utopia-api'
+
+      export var storyboard = (
+        <Storyboard data-uid='sb'>
+          <div data-uid='grid' style={{ display: 'grid', gridTemplateColumns: '1fr', gridRowColumns: '1fr', alignItems: 'center', justifyContent: 'center', padding: 10, gap: 10, backgroundColor: 'white', position: 'absolute', left: 21, top: 17 }}>
+            <div data-uid='delete-me' style={{ backgroundColor: 'yellow', width: 80, height: 80 }}>
+              delete me pls
+            </div>
+          </div>
+        </Storyboard>
+      )
+    `),
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(renderResult, [EP.fromString(`sb/grid/delete-me`)])
+
+      await renderResult.dispatch([deleteSelected()], true)
+
+      expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+        formatTestProjectCode(`
+    import * as React from 'react'
+    import { Storyboard, Group } from 'utopia-api'
+
+    export var storyboard = (
+      <Storyboard data-uid='sb'>
+        <div data-uid='grid' style={{ display: 'grid', gridTemplateColumns: '1fr', gridRowColumns: '1fr', alignItems: 'center', justifyContent: 'center', padding: 10, gap: 10, backgroundColor: 'white', position: 'absolute', left: 21, top: 17, width: 100, height: 100 }} />
+      </Storyboard>
+    )
+  `),
+      )
+    })
+
+    it('keeps the container dimensions with a grid that has auto repeat becomes empty', async () => {
+      const renderResult = await renderTestEditorWithCode(
+        formatTestProjectCode(`
+      import * as React from 'react'
+      import { Storyboard, Group } from 'utopia-api'
+
+      export var storyboard = (
+        <Storyboard data-uid='sb'>
+          <div data-uid='grid' style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gridRowColumns: 'repeat(5, 1fr)', alignItems: 'center', justifyContent: 'center', padding: 10, gap: 10, backgroundColor: 'white', position: 'absolute', left: 21, top: 17 }}>
+            <div data-uid='delete-me' style={{ backgroundColor: 'yellow', width: 80, height: 80 }}>
+              delete me pls
+            </div>
+          </div>
+        </Storyboard>
+      )
+    `),
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(renderResult, [EP.fromString(`sb/grid/delete-me`)])
+
+      await renderResult.dispatch([deleteSelected()], true)
+
+      expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+        formatTestProjectCode(`
+    import * as React from 'react'
+    import { Storyboard, Group } from 'utopia-api'
+
+    export var storyboard = (
+      <Storyboard data-uid='sb'>
+        <div data-uid='grid' style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gridRowColumns: 'repeat(5, 1fr)', alignItems: 'center', justifyContent: 'center', padding: 10, gap: 10, backgroundColor: 'white', position: 'absolute', left: 21, top: 17, width: 140, height: 100 }} />
+      </Storyboard>
+    )
+  `),
+      )
+    })
+    it('keeps the container dimensions with a grid that has all sorts of options becomes empty', async () => {
+      const renderResult = await renderTestEditorWithCode(
+        formatTestProjectCode(`
+      import * as React from 'react'
+      import { Storyboard, Group } from 'utopia-api'
+
+      export var storyboard = (
+        <Storyboard data-uid='sb'>
+          <div data-uid='grid' style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(10rem, 1fr))', gridRowColumns: 'auto', alignItems: 'center', justifyContent: 'center', padding: 10, gap: 10, backgroundColor: 'white', position: 'absolute', left: 21, top: 17 }}>
+            <div data-uid='delete-me' style={{ backgroundColor: 'yellow', width: 80, height: 80 }}>
+              delete me pls
+            </div>
+          </div>
+        </Storyboard>
+      )
+    `),
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(renderResult, [EP.fromString(`sb/grid/delete-me`)])
+
+      await renderResult.dispatch([deleteSelected()], true)
+
+      expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+        formatTestProjectCode(`
+    import * as React from 'react'
+    import { Storyboard, Group } from 'utopia-api'
+
+    export var storyboard = (
+      <Storyboard data-uid='sb'>
+        <div data-uid='grid' style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(10rem, 1fr))', gridRowColumns: 'auto', alignItems: 'center', justifyContent: 'center', padding: 10, gap: 10, backgroundColor: 'white', position: 'absolute', left: 21, top: 17, width: 180, height: 100 }} />
+      </Storyboard>
+    )
+  `),
+      )
     })
   })
 })
diff --git a/editor/src/components/canvas/hugging-utils.ts b/editor/src/components/canvas/hugging-utils.ts
new file mode 100644
index 000000000000..c6f552f74976
--- /dev/null
+++ b/editor/src/components/canvas/hugging-utils.ts
@@ -0,0 +1,26 @@
+import { MetadataUtils } from '../../core/model/element-metadata-utils'
+import type { ElementInstanceMetadataMap } from '../../core/shared/element-template'
+import type { ElementPath } from '../../core/shared/project-file-types'
+
+export type HuggingElementContentsStatus =
+  | 'empty'
+  | 'contains-only-absolute'
+  | 'contains-some-absolute'
+  | 'non-empty'
+
+export function getHuggingElementContentsStatus(
+  jsxMetadata: ElementInstanceMetadataMap,
+  path: ElementPath,
+): HuggingElementContentsStatus {
+  const children = MetadataUtils.getChildrenUnordered(jsxMetadata, path)
+  const absoluteChildren = children.filter(MetadataUtils.isPositionAbsolute).length
+  if (children.length === 0) {
+    return 'empty'
+  } else if (absoluteChildren === children.length) {
+    return 'contains-only-absolute'
+  } else if (absoluteChildren > 0) {
+    return 'contains-some-absolute'
+  } else {
+    return 'non-empty'
+  }
+}
diff --git a/editor/src/components/editor/actions/actions.spec.browser2.tsx b/editor/src/components/editor/actions/actions.spec.browser2.tsx
index 4ea691d27750..c378be6fb6ac 100644
--- a/editor/src/components/editor/actions/actions.spec.browser2.tsx
+++ b/editor/src/components/editor/actions/actions.spec.browser2.tsx
@@ -421,68 +421,68 @@ describe('actions', () => {
         `,
         wantSelection: [makeTargetPath('view/group/child1')],
       },
-      // {
-      //   name: 'delete group child selects next sibling (multiple selection)',
-      //   input: `
-      //     <View data-uid='view'>
-      //       <Group data-uid='group'>
-      //         <div data-uid='child1' style={{ position: 'absolute', width: 10, height: 10, top: 0, left: 0, background: 'blue' }} />
-      //         <div data-uid='child2' style={{ position: 'absolute', width: 10, height: 10, top: 0, left: 40, background: 'blue' }} />
-      //         <div data-uid='child3' style={{ position: 'absolute', width: 10, height: 10, top: 40, left: 0, background: 'blue' }} />
-      //         <div data-uid='child4' style={{ position: 'absolute', width: 10, height: 10, top: 40, left: 40, background: 'blue' }} />
-      //       </Group>
-      //       <div data-uid='foo'>
-      //         <div data-uid='bar' />
-      //       </div>
-      //     </View>
-      //   `,
-      //   targets: [makeTargetPath('view/group/child3'), makeTargetPath('view/foo/bar')],
-      //   wantCode: `
-      //     <View data-uid='view'>
-      //       <Group data-uid='group'>
-      //         <div data-uid='child1' style={{ position: 'absolute', width: 10, height: 10, top: 0, left: 0, background: 'blue' }} />
-      //         <div data-uid='child2' style={{ position: 'absolute', width: 10, height: 10, top: 0, left: 40, background: 'blue' }} />
-      //         <div data-uid='child4' style={{ position: 'absolute', width: 10, height: 10, top: 40, left: 40, background: 'blue' }} />
-      //       </Group>
-      //       <div data-uid='foo' style={{ width: 400, height: 0, position: 'absolute', left: 0, top: 50 }} />
-      //     </View>
-      //   `,
-      //   wantSelection: [makeTargetPath('view/group/child1'), makeTargetPath('view/foo')],
-      // },
-      // {
-      //   name: 'delete last group child deletes the group',
-      //   input: `
-      //     <View data-uid='view'>
-      //       <Group data-uid='group'>
-      //         <div data-uid='child1' style={{ position: 'absolute', width: 10, height: 10, top: 0, left: 0, background: 'blue' }} />
-      //       </Group>
-      //     </View>
-      //   `,
-      //   targets: [makeTargetPath('view/group/child1')],
-      //   wantCode: `
-      //     <View data-uid='view' style={{ width: 400, height: 10, position: 'absolute', left: 0, top: 0 }} />
-      //   `,
-      //   wantSelection: [makeTargetPath('view')],
-      // },
-      // {
-      //   name: 'recursively delete empty parents when groups or fragments',
-      //   input: `
-      //   <div data-uid='root'>
-      //     <Group data-uid='g1'>
-      //       <Group data-uid='g2'>
-      //         <React.Fragment data-uid='f1'>
-      //           <div data-uid='child' />
-      //         </React.Fragment>
-      //       </Group>
-      //     </Group>
-      //   </div>
-      //   `,
-      //   targets: [makeTargetPath(`root/g1/g2/f1/child`)],
-      //   wantCode: `
-      //     <div data-uid='root' style={{ width: 400, height: 0, position: 'absolute', left: 0, top: 0 }} />
-      //   `,
-      //   wantSelection: [makeTargetPath(`root`)],
-      // },
+      {
+        name: 'delete group child selects next sibling (multiple selection)',
+        input: `
+          <View data-uid='view'>
+            <Group data-uid='group'>
+              <div data-uid='child1' style={{ position: 'absolute', width: 10, height: 10, top: 0, left: 0, background: 'blue' }} />
+              <div data-uid='child2' style={{ position: 'absolute', width: 10, height: 10, top: 0, left: 40, background: 'blue' }} />
+              <div data-uid='child3' style={{ position: 'absolute', width: 10, height: 10, top: 40, left: 0, background: 'blue' }} />
+              <div data-uid='child4' style={{ position: 'absolute', width: 10, height: 10, top: 40, left: 40, background: 'blue' }} />
+            </Group>
+            <div data-uid='foo'>
+              <div data-uid='bar' />
+            </div>
+          </View>
+        `,
+        targets: [makeTargetPath('view/group/child3'), makeTargetPath('view/foo/bar')],
+        wantCode: `
+          <View data-uid='view'>
+            <Group data-uid='group'>
+              <div data-uid='child1' style={{ position: 'absolute', width: 10, height: 10, top: 0, left: 0, background: 'blue' }} />
+              <div data-uid='child2' style={{ position: 'absolute', width: 10, height: 10, top: 0, left: 40, background: 'blue' }} />
+              <div data-uid='child4' style={{ position: 'absolute', width: 10, height: 10, top: 40, left: 40, background: 'blue' }} />
+            </Group>
+            <div data-uid='foo' style={{ width: 400, height: 0 }} />
+          </View>
+        `,
+        wantSelection: [makeTargetPath('view/group/child1'), makeTargetPath('view/foo')],
+      },
+      {
+        name: 'delete last group child deletes the group',
+        input: `
+          <View data-uid='view'>
+            <Group data-uid='group'>
+              <div data-uid='child1' style={{ position: 'absolute', width: 10, height: 10, top: 0, left: 0, background: 'blue' }} />
+            </Group>
+          </View>
+        `,
+        targets: [makeTargetPath('view/group/child1')],
+        wantCode: `
+          <View data-uid='view' style={{ width: 400, height: 10 }} />
+        `,
+        wantSelection: [makeTargetPath('view')],
+      },
+      {
+        name: 'recursively delete empty parents when groups or fragments',
+        input: `
+        <div data-uid='root'>
+          <Group data-uid='g1'>
+            <Group data-uid='g2'>
+              <React.Fragment data-uid='f1'>
+                <div data-uid='child' />
+              </React.Fragment>
+            </Group>
+          </Group>
+        </div>
+        `,
+        targets: [makeTargetPath(`root/g1/g2/f1/child`)],
+        wantCode: `
+          <div data-uid='root' style={{ width: 400, height: 0 }} />
+        `,
+        wantSelection: [makeTargetPath(`root`)],
+      },
       {
         name: 'recursively delete empty parents when groups or fragments and stops',
         input: `
@@ -507,26 +507,26 @@ describe('actions', () => {
         `,
         wantSelection: [makeTargetPath(`root/g1/stop-here`)],
       },
-      // {
-      //   name: 'recursively delete empty parents when groups or fragments with multiselect',
-      //   input: `
-      //   <div data-uid='root'>
-      //     <Group data-uid='g1'>
-      //       <div data-uid='delete-me' />
-      //       <Group data-uid='g2'>
-      //         <React.Fragment data-uid='f1'>
-      //           <div data-uid='child' />
-      //         </React.Fragment>
-      //       </Group>
-      //     </Group>
-      //   </div>
-      //   `,
-      //   targets: [makeTargetPath(`root/g1/g2/f1/child`), makeTargetPath(`root/g1/delete-me`)],
-      //   wantCode: `
-      //     <div data-uid='root' style={{ width: 400, height: 0, position: 'absolute', left: 0, top: 0 }} />
-      //   `,
-      //   wantSelection: [makeTargetPath(`root`)],
-      // },
+      {
+        name: 'recursively delete empty parents when groups or fragments with multiselect',
+        input: `
+        <div data-uid='root'>
+          <Group data-uid='g1'>
+            <div data-uid='delete-me' />
+            <Group data-uid='g2'>
+              <React.Fragment data-uid='f1'>
+                <div data-uid='child' />
+              </React.Fragment>
+            </Group>
+          </Group>
+        </div>
+        `,
+        targets: [makeTargetPath(`root/g1/g2/f1/child`), makeTargetPath(`root/g1/delete-me`)],
+        wantCode: `
+          <div data-uid='root' style={{ width: 400, height: 0 }} />
+        `,
+        wantSelection: [makeTargetPath(`root`)],
+      },
     ]
     tests.forEach((tt, idx) => {
       it(`(${idx + 1}) ${tt.name}`, async () => {
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index 5bbbe2ef3620..8ee4b3047ea8 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -631,6 +631,8 @@ import { styleP } from '../../inspector/inspector-common'
 import { getUpdateOperationResult } from '../../../core/shared/import/import-operation-service'
 import { updateRequirements } from '../../../core/shared/import/project-health-check/utopia-requirements-service'
 import { applyValuesAtPath, deleteValuesAtPath } from '../../canvas/commands/utils/property-utils'
+import type { HuggingElementContentsStatus } from '../../../components/canvas/hugging-utils'
+import { getHuggingElementContentsStatus } from '../../../components/canvas/hugging-utils'
 import { createStoryboardFileIfNecessary } from '../../../core/shared/import/project-health-check/requirements/requirement-storyboard'
 
 export const MIN_CODE_PANE_REOPEN_WIDTH = 100
@@ -1087,6 +1089,7 @@ function deleteElements(
     console.error(`Attempted to delete element(s) with no UI file open.`)
     return editor
   } else {
+    const targetStaticUIDs = targets.map(EP.toStaticUid)
     const updatedEditor = targets.reduce((working, targetPath) => {
       const underlyingTarget = normalisePathToUnderlyingTarget(working.projectContents, targetPath)
 
@@ -1146,6 +1149,8 @@ function deleteElements(
           ? right(metadata.element.value.props)
           : null
 
+        const children = MetadataUtils.getChildrenUnordered(editor.jsxMetadata, path)
+
         const childrenFrame =
           boundingRectangleArray(
             mapDropNulls((child) => {
@@ -1154,7 +1159,7 @@ function deleteElements(
                 return null
               }
               return childFrame
-            }, MetadataUtils.getChildrenUnordered(editor.jsxMetadata, path)),
+            }, children),
           ) ?? canvasRectangle(zeroRectangle)
 
         const hasHorizontalPosition =
@@ -1174,7 +1179,14 @@ function deleteElements(
             height: main.height !== 0 ? main.height : backup.height,
           })
         }
-        return trueUpHuggingElement(path, combineFrames(canvasRectangle(frame), childrenFrame))
+        const huggingElementContentsStatus: HuggingElementContentsStatus =
+          getHuggingElementContentsStatus(editor.jsxMetadata, path)
+        return trueUpHuggingElement(
+          path,
+          canvasRectangle(frame),
+          combineFrames(canvasRectangle(frame), childrenFrame),
+          huggingElementContentsStatus,
+        )
       }, uniqBy(targets.map(EP.parentPath), EP.pathsEqual))
       trueUps.push(...trueUpHuggingElements)
     }
diff --git a/editor/src/components/editor/conditionals.spec.browser2.tsx b/editor/src/components/editor/conditionals.spec.browser2.tsx
index 735968b12e6b..3b48b06eb47f 100644
--- a/editor/src/components/editor/conditionals.spec.browser2.tsx
+++ b/editor/src/components/editor/conditionals.spec.browser2.tsx
@@ -264,7 +264,7 @@ describe('conditionals', () => {
       expect(EP.isParentOf(conditionalPath, selectedViews[0])).toBe(true)
       expect(EP.toUid(selectedViews[0])).not.toBe('ccc')
     })
-    xit('keeps the selection on the null branch (multiple targets)', async () => {
+    it('keeps the selection on the null branch (multiple targets)', async () => {
       const startSnippet = `
         <div data-uid='aaa' data-testid='aaa'>
           {
@@ -336,7 +336,7 @@ describe('conditionals', () => {
                 null
               )
             }
-              <div data-uid='fff' data-testid='fff' style={{ width: ${divFFF.width}, height: ${divFFF.height}, position: 'absolute', left: ${left}, top: ${top} }} />
+              <div data-uid='fff' data-testid='fff' style={{ width: ${divFFF.width}, height: ${divFFF.height} }} />
             </div>
          `),
       )
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index 5ac17fc9ebd1..ed59bee44c92 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -189,6 +189,7 @@ import type { OnlineState } from '../online-status'
 import type { NavigatorRow } from '../../navigator/navigator-row'
 import type { FancyError } from '../../../core/shared/code-exec-utils'
 import type { GridCellCoordinates } from '../../canvas/canvas-strategies/strategies/grid-cell-bounds'
+import type { HuggingElementContentsStatus } from '../../../components/canvas/hugging-utils'
 import {
   emptyImportState,
   type ImportState,
@@ -1366,17 +1367,23 @@ export function trueUpChildrenOfGroupChanged(
 export interface TrueUpHuggingElement {
   type: 'TRUE_UP_HUGGING_ELEMENT'
   target: ElementPath
+  elementFrame: CanvasRectangle
   frame: CanvasRectangle
+  huggingElementContentsStatus: HuggingElementContentsStatus
 }
 
 export function trueUpHuggingElement(
   target: ElementPath,
+  elementFrame: CanvasRectangle,
   frame: CanvasRectangle,
+  huggingElementContentsStatus: HuggingElementContentsStatus,
 ): TrueUpHuggingElement {
   return {
     type: 'TRUE_UP_HUGGING_ELEMENT',
     target: target,
+    elementFrame: elementFrame,
     frame: frame,
+    huggingElementContentsStatus: huggingElementContentsStatus,
   }
 }
 
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index e101258b0e94..8eaab5d78983 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -5125,12 +5125,17 @@ export const TrueUpChildrenOfGroupChangedKeepDeepEquality: KeepDeepEqualityCall<
   )
 
 export const TrueUpHuggingElementKeepDeepEquality: KeepDeepEqualityCall<TrueUpHuggingElement> =
-  combine2EqualityCalls(
+  combine4EqualityCalls(
     (value) => value.target,
     ElementPathKeepDeepEquality,
+    (value) => value.elementFrame,
+    CanvasRectangleKeepDeepEquality,
     (value) => value.frame,
     CanvasRectangleKeepDeepEquality,
-    (target, frame) => trueUpHuggingElement(target, frame),
+    (value) => value.huggingElementContentsStatus,
+    createCallWithTripleEquals(),
+    (target, elementFrame, frame, huggingElementContentsStatus) =>
+      trueUpHuggingElement(target, elementFrame, frame, huggingElementContentsStatus),
   )
 
 export const TrueUpTargetKeepDeepEquality: KeepDeepEqualityCall<TrueUpTarget> = (
diff --git a/editor/src/core/model/true-up-targets.ts b/editor/src/core/model/true-up-targets.ts
index f8b65d15ff01..9f576abe504e 100644
--- a/editor/src/core/model/true-up-targets.ts
+++ b/editor/src/core/model/true-up-targets.ts
@@ -1,6 +1,7 @@
 import type { CanvasFrameAndTarget } from '../../components/canvas/canvas-types'
 import type { PushIntendedBoundsAndUpdateGroups } from '../../components/canvas/commands/push-intended-bounds-and-update-groups-command'
 import { pushIntendedBoundsAndUpdateGroups } from '../../components/canvas/commands/push-intended-bounds-and-update-groups-command'
+import type { IntendedBoundsAndChildrenState } from '../../components/canvas/commands/push-intended-bounds-and-update-hugging-elements-command'
 import {
   pushIntendedBoundsAndUpdateHuggingElements,
   type PushIntendedBoundsAndUpdateHuggingElements,
@@ -48,7 +49,7 @@ export function getCommandsForPushIntendedBounds(
   }
 
   let groupTargets: Array<CanvasFrameAndTarget> = []
-  let huggingElementTargets: Array<CanvasFrameAndTarget> = []
+  let huggingElementTargets: Array<IntendedBoundsAndChildrenState> = []
 
   for (const trueUpTarget of targets) {
     switch (trueUpTarget.type) {
@@ -68,7 +69,12 @@ export function getCommandsForPushIntendedBounds(
         )
         break
       case 'TRUE_UP_HUGGING_ELEMENT':
-        huggingElementTargets.push(trueUpTarget)
+        huggingElementTargets.push({
+          target: trueUpTarget.target,
+          elementFrame: trueUpTarget.elementFrame,
+          frame: trueUpTarget.frame,
+          huggingElementContentsStatus: trueUpTarget.huggingElementContentsStatus,
+        })
         break
       default:
         assertNever(trueUpTarget)
@@ -77,8 +83,7 @@ export function getCommandsForPushIntendedBounds(
 
   return [
     pushIntendedBoundsAndUpdateGroups(groupTargets, isStartingMetadata),
-    // disabling this as the collapsed elements detection is way too agressive and converts too many elements to absolute
-    // pushIntendedBoundsAndUpdateHuggingElements(huggingElementTargets),
+    pushIntendedBoundsAndUpdateHuggingElements(huggingElementTargets),
   ]
 }
 

From c7c479bf5aa1d99c1bd896d86945660fb907f7d5 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:25:03 +0000
Subject: [PATCH 208/272] feature(grid) Grid Child Pin Outlines (#6617)

- Fixed `parseGridRange` to more closely reflect the behaviour in
browsers.
- Renamed `elementStyle` to `computedStyle` in `getSpecialMeasurements`
for clarity.
- `PinLines` excludes grid cells from those elements which will get
regular pin outlines.
- `PinOutlineProps` now has `endX` and `endY` properties, along with
supporting `string` values for most of the properties.
- `PinOutline` now defers a lot of the calculations down into the CSS.
- Added `GridElementContainingBlocks` into the controls hierarchy.
- Implemented `collectGridPinOutlines` which handles the more
complicated case that grids present.
- Implemented `GridElementContainingBlock` to render `PinOutline`
instances for the grid children.
---
 .../grid-change-element-location-strategy.ts  |  59 +-
 ...change-location-strategy.spec.browser2.tsx |  11 +-
 .../controls/grid-controls-for-strategies.tsx |   2 +
 .../controls/grid-controls.spec.browser2.tsx  | 618 ++++++++++++++++++
 .../canvas/controls/grid-controls.tsx         | 257 +++++++-
 .../canvas/controls/new-canvas-controls.tsx   |   6 +-
 .../canvas/controls/position-outline.tsx      |  88 ++-
 editor/src/components/canvas/dom-walker.ts    | 100 +--
 .../components/inspector/common/css-utils.ts  |   4 +-
 .../src/core/model/element-metadata-utils.ts  |  10 +
 ...performance-regression-tests.spec.tsx.snap |  10 +
 .../performance-regression-tests.spec.tsx     |   8 +-
 12 files changed, 1078 insertions(+), 95 deletions(-)
 create mode 100644 editor/src/components/canvas/controls/grid-controls.spec.browser2.tsx

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
index 54a9bd9f785a..1adc1f4f739d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
@@ -1,12 +1,18 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
+import * as PP from '../../../../core/shared/property-path'
 import type {
   ElementInstanceMetadata,
   ElementInstanceMetadataMap,
   GridContainerProperties,
+  GridElementProperties,
+} from '../../../../core/shared/element-template'
+import {
+  getJSXAttribute,
+  gridPositionValue,
+  isJSXElement,
 } from '../../../../core/shared/element-template'
-import { gridPositionValue } from '../../../../core/shared/element-template'
 import { isInfinityRectangle } from '../../../../core/shared/math-utils'
 import { absolute } from '../../../../utils/utils'
 import type { CanvasCommand } from '../../commands/commands'
@@ -32,6 +38,13 @@ import {
   sortElementsByGridPosition,
 } from './grid-helpers'
 import { getTargetGridCellData } from '../../../inspector/grid-helpers'
+import { forEachOf } from '../../../../core/shared/optics/optic-utilities'
+import {
+  eitherRight,
+  fromField,
+  fromTypeGuard,
+} from '../../../../core/shared/optics/optic-creators'
+import { getJSXAttributesAtPath } from '../../../..//core/shared/jsx-attribute-utils'
 
 export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -215,11 +228,53 @@ export function runGridChangeElementLocation(
   }
   const { targetCellCoords, targetRootCell } = targetGridCellData
 
-  const gridCellMoveCommands = setGridPropsCommands(pathForCommands, gridTemplate, {
+  const gridProps: Partial<GridElementProperties> = {
     gridColumnStart: gridPositionValue(targetRootCell.column),
     gridColumnEnd: gridPositionValue(targetRootCell.column + originalCellBounds.height),
     gridRowStart: gridPositionValue(targetRootCell.row),
     gridRowEnd: gridPositionValue(targetRootCell.row + originalCellBounds.width),
+  }
+
+  // TODO: Remove this logic once there is a fix for the handling of the track end fields.
+  let keepGridColumnEnd: boolean = true
+  let keepGridRowEnd: boolean = true
+  forEachOf(
+    fromField<ElementInstanceMetadata, 'element'>('element')
+      .compose(eitherRight())
+      .compose(fromTypeGuard(isJSXElement))
+      .compose(fromField('props')),
+    selectedElementMetadata,
+    (elementProperties) => {
+      const gridColumnEnd = getJSXAttributesAtPath(
+        elementProperties,
+        PP.create('style', 'gridColumnEnd'),
+      )
+      if (gridColumnEnd.attribute.type === 'ATTRIBUTE_NOT_FOUND') {
+        keepGridColumnEnd = false
+      }
+      const gridRowEnd = getJSXAttributesAtPath(elementProperties, PP.create('style', 'gridRowEnd'))
+      if (gridRowEnd.attribute.type === 'ATTRIBUTE_NOT_FOUND') {
+        keepGridRowEnd = false
+      }
+    },
+  )
+
+  const gridCellMoveCommands = setGridPropsCommands(
+    pathForCommands,
+    gridTemplate,
+    gridProps,
+  ).filter((command) => {
+    if (command.type === 'SET_PROPERTY') {
+      if (PP.pathsEqual(command.property, PP.create('style', 'gridColumnEnd'))) {
+        return keepGridColumnEnd
+      } else if (PP.pathsEqual(command.property, PP.create('style', 'gridRowEnd'))) {
+        return keepGridRowEnd
+      } else {
+        return true
+      }
+    } else {
+      return true
+    }
   })
 
   // The siblings of the grid element being moved
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
index 1be76d1cf3a9..d1a11cc8377a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
@@ -504,10 +504,13 @@ export var storyboard = (
         await mouseUpAtPoint(dragTarget, endPoint)
 
         {
-          const { top, left, gridColumn, gridRow } = child.style
-          expect({ top, left, gridColumn, gridRow }).toEqual({
-            gridColumn: '1',
-            gridRow: '1',
+          const { top, left, gridColumnStart, gridColumnEnd, gridRowStart, gridRowEnd } =
+            child.style
+          expect({ top, left, gridColumnStart, gridColumnEnd, gridRowStart, gridRowEnd }).toEqual({
+            gridColumnStart: '1',
+            gridColumnEnd: '',
+            gridRowStart: '1',
+            gridRowEnd: '',
             left: '59px',
             top: '59.5px',
           })
diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index 1cc724bb5556..e76428030af7 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -222,6 +222,8 @@ export const GridMeasurementHelpersKey = (gridPath: ElementPath) =>
   `grid-measurement-helpers-${EP.toString(gridPath)}`
 export const GridMeasurementHelperKey = (gridPath: ElementPath) =>
   `grid-measurement-helper-${EP.toString(gridPath)}`
+export const GridElementContainingBlockKey = (gridPath: ElementPath) =>
+  `grid-measurement-containing-block-${EP.toString(gridPath)}`
 
 export interface GridControlProps {
   grid: GridData
diff --git a/editor/src/components/canvas/controls/grid-controls.spec.browser2.tsx b/editor/src/components/canvas/controls/grid-controls.spec.browser2.tsx
new file mode 100644
index 000000000000..be1be9264dd2
--- /dev/null
+++ b/editor/src/components/canvas/controls/grid-controls.spec.browser2.tsx
@@ -0,0 +1,618 @@
+import type { CSSProperties } from 'react'
+import { renderTestEditorWithCode } from '../ui-jsx.test-utils'
+import type { SimpleRectangle } from '../../..//core/shared/math-utils'
+import { selectComponentsForTest } from '../../../utils/utils.test-utils'
+import * as EP from '../../../core/shared/element-path'
+
+interface TestGridOutlinesResult {
+  top?: SimpleRectangle
+  left?: SimpleRectangle
+  bottom?: SimpleRectangle
+  right?: SimpleRectangle
+}
+
+async function testGridOutlines(
+  targetPath: string,
+  attributes: CSSProperties,
+): Promise<TestGridOutlinesResult> {
+  const fullAttributes: CSSProperties = { backgroundColor: 'pink', ...attributes }
+  let fullAttributesText: string = '{\n'
+  for (const [key, value] of Object.entries(fullAttributes)) {
+    fullAttributesText += `${key}: ${JSON.stringify(value)},\n`
+  }
+  fullAttributesText += '}'
+
+  const projectCode = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='storyboard'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 1000,
+        height: 1000,
+        position: 'absolute',
+        left: 50,
+        top: 100,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateRows: '100px 100px 100px',
+          gridTemplateColumns: '100px 100px 100px',
+          gridGap: 15,
+          height: 400,
+          width: 400,
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          padding: '10px 20px 30px 40px'
+        }}
+        data-uid='grid'
+      >
+        <div
+          style={
+            ${fullAttributesText}
+          }
+          data-uid='grid-child'
+          data-testid='grid-child'
+        />
+      </div>
+      <div
+        style={{
+          position: 'absolute',
+          left: 1000,
+          top: 0
+        }}
+        data-uid='grid-2-outer'
+      >
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateRows: '100px 100px 100px',
+            gridTemplateColumns: '100px 100px 100px',
+            gridGap: 15,
+            height: 400,
+            width: 400,
+            left: 0,
+            top: 0,
+            padding: '10px 20px 30px 40px'
+          }}
+          data-uid='grid-2'
+        >
+          <div
+            style={
+              ${fullAttributesText}
+            }
+            data-uid='grid-child-2'
+            data-testid='grid-child-2'
+          />
+        </div>
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`
+  const editor = await renderTestEditorWithCode(projectCode, 'await-first-dom-report')
+  await selectComponentsForTest(editor, [EP.fromString(targetPath)])
+
+  const topPinLine = editor.renderedDOM.queryByTestId('pin-line-top')
+  const leftPinLine = editor.renderedDOM.queryByTestId('pin-line-left')
+  const bottomPinLine = editor.renderedDOM.queryByTestId('pin-line-bottom')
+  const rightPinLine = editor.renderedDOM.queryByTestId('pin-line-right')
+
+  function toBoundingRect(element: HTMLElement): SimpleRectangle {
+    const domRect = element.getBoundingClientRect()
+    return {
+      x: domRect.x,
+      y: domRect.y,
+      width: domRect.width,
+      height: domRect.height,
+    }
+  }
+
+  let result: TestGridOutlinesResult = {}
+  if (topPinLine != null) {
+    result.top = toBoundingRect(topPinLine)
+  }
+  if (leftPinLine != null) {
+    result.left = toBoundingRect(leftPinLine)
+  }
+  if (bottomPinLine != null) {
+    result.bottom = toBoundingRect(bottomPinLine)
+  }
+  if (rightPinLine != null) {
+    result.right = toBoundingRect(rightPinLine)
+  }
+  return result
+}
+
+describe('Grid Pin Outlines', () => {
+  it('pinned top and left, grid rows and columns fully specified and not absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      top: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned top and left, grid rows and columns fully specified and absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      position: 'absolute',
+      top: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      left: { x: 688.5, y: 315.5, width: 12, height: 1 },
+      top: { x: 725.5, y: 285.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned top and right, grid rows and columns fully specified and not absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      top: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned top and right, grid rows and columns fully specified and absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      position: 'absolute',
+      top: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      right: { x: 777.5, y: 315.5, width: 12, height: 1 },
+      top: { x: 751.5, y: 285.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned bottom and left, grid rows and columns fully specified and not absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      bottom: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned bottom and left, grid rows and columns fully specified and absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      position: 'absolute',
+      bottom: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      left: { x: 688.5, y: 355.5, width: 12, height: 1 },
+      bottom: { x: 725.5, y: 381.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned bottom and right, grid rows and columns fully specified and not absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      bottom: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned bottom and right, grid rows and columns fully specified and absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      position: 'absolute',
+      bottom: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      right: { x: 777.5, y: 355.5, width: 12, height: 1 },
+      bottom: { x: 751.5, y: 381.5, width: 1, height: 5 },
+    })
+  })
+
+  it('pinned top and left, grid column end set to auto and not absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      top: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned top and left, grid column end set to auto and absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      position: 'absolute',
+      top: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      left: { x: 688.5, y: 315.5, width: 12, height: 1 },
+      top: { x: 725.5, y: 285.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned top and right, grid column end set to auto and not absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      top: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned top and right, grid column end set to auto and absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      position: 'absolute',
+      top: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      right: { x: 807.5, y: 315.5, width: 12, height: 1 },
+      top: { x: 781.5, y: 285.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned bottom and left, grid column end set to auto and not absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      bottom: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned bottom and left, grid column end set to auto and absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      position: 'absolute',
+      bottom: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      left: { x: 688.5, y: 355.5, width: 12, height: 1 },
+      bottom: { x: 725.5, y: 381.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned bottom and right, grid column end set to auto and not absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      bottom: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned bottom and right, grid column end set to auto and absolutely positioned', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      position: 'absolute',
+      bottom: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      right: { x: 807.5, y: 355.5, width: 12, height: 1 },
+      bottom: { x: 781.5, y: 381.5, width: 1, height: 5 },
+    })
+  })
+
+  it('pinned top and left, grid rows and columns fully specified and not absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      top: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned top and left, grid rows and columns fully specified and absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      position: 'absolute',
+      top: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      left: { x: 1418.5, y: 190.5, width: 12, height: 1 },
+      top: { x: 1455.5, y: 160.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned top and right, grid rows and columns fully specified and not absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      top: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned top and right, grid rows and columns fully specified and absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      position: 'absolute',
+      top: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      right: { x: 1806.5, y: 190.5, width: 12, height: 1 },
+      top: { x: 1781.5, y: 160.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned bottom and left, grid rows and columns fully specified and not absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      bottom: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned bottom and left, grid rows and columns fully specified and absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      position: 'absolute',
+      bottom: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      left: { x: 1418.5, y: 530.5, width: 12, height: 1 },
+      bottom: { x: 1455.5, y: 555.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned bottom and right, grid rows and columns fully specified and not absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      bottom: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned bottom and right, grid rows and columns fully specified and absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      position: 'absolute',
+      bottom: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      right: { x: 1806.5, y: 530.5, width: 12, height: 1 },
+      bottom: { x: 1781.5, y: 555.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned top and left, grid column end set to auto and not absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      top: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned top and left, grid column end set to auto and absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      position: 'absolute',
+      top: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      left: { x: 1418.5, y: 190.5, width: 12, height: 1 },
+      top: { x: 1455.5, y: 160.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned top and right, grid column end set to auto and not absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      top: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned top and right, grid column end set to auto and absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      position: 'absolute',
+      top: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      right: { x: 1806.5, y: 190.5, width: 12, height: 1 },
+      top: { x: 1781.5, y: 160.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned bottom and left, grid column end set to auto and not absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      bottom: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned bottom and left, grid column end set to auto and absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      position: 'absolute',
+      bottom: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      left: { x: 1418.5, y: 530.5, width: 12, height: 1 },
+      bottom: { x: 1455.5, y: 555.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned bottom and right, grid column end set to auto and not absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      bottom: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned bottom and right, grid column end set to auto and absolutely positioned in non-absolute grid', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid-2-outer/grid-2/grid-child-2', {
+      position: 'absolute',
+      bottom: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 'auto',
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      right: { x: 1806.5, y: 530.5, width: 12, height: 1 },
+      bottom: { x: 1781.5, y: 555.5, width: 1, height: 5 },
+    })
+  })
+})
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 29bad8d7eb4d..b708bead4b9f 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -1,5 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
+/** @jsxFrag React.Fragment */
 import { jsx } from '@emotion/react'
 import type { AnimationControls } from 'framer-motion'
 import { motion, useAnimationControls } from 'framer-motion'
@@ -7,9 +8,10 @@ import type { CSSProperties } from 'react'
 import React from 'react'
 import type { Sides } from 'utopia-api/core'
 import type { ElementPath } from 'utopia-shared/src/types'
+import type { PropsOrJSXAttributes } from '../../../core/model/element-metadata-utils'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { mapDropNulls, range, stripNulls, uniqBy } from '../../../core/shared/array-utils'
-import { defaultEither } from '../../../core/shared/either'
+import { defaultEither, eitherToMaybe } from '../../../core/shared/either'
 import * as EP from '../../../core/shared/element-path'
 import type {
   ElementInstanceMetadataMap,
@@ -19,7 +21,7 @@ import {
   isGridAutoOrTemplateDimensions,
   type GridAutoOrTemplateBase,
 } from '../../../core/shared/element-template'
-import type { CanvasPoint, CanvasRectangle } from '../../../core/shared/math-utils'
+import type { CanvasPoint, CanvasRectangle, LocalRectangle } from '../../../core/shared/math-utils'
 import {
   canvasPoint,
   isFiniteRectangle,
@@ -28,6 +30,7 @@ import {
   pointsEqual,
   scaleRect,
   windowPoint,
+  zeroCanvasRect,
   zeroRectIfNullOrInfinity,
 } from '../../../core/shared/math-utils'
 import {
@@ -44,12 +47,23 @@ import { Modifier } from '../../../utils/modifiers'
 import { when } from '../../../utils/react-conditionals'
 import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useDispatch } from '../../editor/store/dispatch-context'
-import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
-import type { GridDimension, GridDiscreteDimension } from '../../inspector/common/css-utils'
 import {
+  Substores,
+  useEditorState,
+  useRefEditorState,
+  useSelectorWithCallback,
+} from '../../editor/store/store-hook'
+import type {
+  CSSNumber,
+  GridDimension,
+  GridDiscreteDimension,
+} from '../../inspector/common/css-utils'
+import {
+  cssNumberToString,
   isCSSKeyword,
   isDynamicGridRepeat,
   isGridCSSRepeat,
+  printCSSNumberWithDefaultUnit,
   printGridCSSNumber,
 } from '../../inspector/common/css-utils'
 import CanvasActions from '../canvas-actions'
@@ -66,6 +80,7 @@ import {
   getGlobalFrameOfGridCellFromMetadata,
   getGridRelatedIndexes,
   getGridElementPinState,
+  gridPositionToValue,
 } from '../canvas-strategies/strategies/grid-helpers'
 import { canResizeGridTemplate } from '../canvas-strategies/strategies/resize-grid-strategy'
 import { resizeBoundingBoxFromSide } from '../canvas-strategies/strategies/resize-helpers'
@@ -85,6 +100,7 @@ import {
   GridCellTestId,
   GridControlKey,
   gridEdgeToEdgePosition,
+  GridElementContainingBlockKey,
   GridMeasurementHelperKey,
   GridMeasurementHelpersKey,
   useGridData,
@@ -94,6 +110,10 @@ import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 import { useResizeEdges } from './select-mode/use-resize-edges'
 import { getGridHelperStyleMatchingTargetGrid } from './grid-controls-helpers'
 import { isFillOrStretchModeAppliedOnSpecificSide } from '../../inspector/inspector-common'
+import type { PinOutlineProps } from './position-outline'
+import { PinOutline, PositionOutline, usePropsOrJSXAttributes } from './position-outline'
+import { getLayoutProperty } from '../../../core/layout/getLayoutProperty'
+import { styleStringInArray } from '../../../utils/common-constants'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -1783,6 +1803,235 @@ export const GridResizeControlsComponent = ({ target }: GridResizeControlProps)
   )
 }
 
+function collectGridPinOutlines(
+  attributes: PropsOrJSXAttributes,
+  frame: LocalRectangle,
+  scale: number,
+): PinOutlineProps[] {
+  const pinLeft = eitherToMaybe(getLayoutProperty('left', attributes, styleStringInArray))
+  const pinTop = eitherToMaybe(getLayoutProperty('top', attributes, styleStringInArray))
+  const pinRight = eitherToMaybe(getLayoutProperty('right', attributes, styleStringInArray))
+  const pinBottom = eitherToMaybe(getLayoutProperty('bottom', attributes, styleStringInArray))
+  let pins: PinOutlineProps[] = []
+  if (pinLeft != null) {
+    let startY: string | number | undefined = undefined
+    let endY: string | number | undefined = undefined
+    if (pinTop != null) {
+      startY = `calc(${printCSSNumberWithDefaultUnit(pinTop, 'px')} + ${frame.height / 2}px)`
+    } else if (pinBottom != null) {
+      endY = `calc(${printCSSNumberWithDefaultUnit(pinBottom, 'px')} + ${frame.height / 2}px)`
+    } else {
+      startY = frame.height / 2
+    }
+    pins.push({
+      name: 'left',
+      isHorizontalLine: true,
+      size: printCSSNumberWithDefaultUnit(pinLeft, 'px'),
+      startX: 0,
+      startY: startY,
+      endY: endY,
+      scale: scale,
+    })
+  }
+  if (pinTop != null) {
+    let startX: string | number | undefined = undefined
+    let endX: string | number | undefined = undefined
+    if (pinLeft != null) {
+      startX = `calc(${printCSSNumberWithDefaultUnit(pinLeft, 'px')} + ${frame.width / 2}px)`
+    } else if (pinRight != null) {
+      endX = `calc(${printCSSNumberWithDefaultUnit(pinRight, 'px')} + ${frame.width / 2}px)`
+    } else {
+      startX = frame.width / 2
+    }
+    pins.push({
+      name: 'top',
+      isHorizontalLine: false,
+      size: printCSSNumberWithDefaultUnit(pinTop, 'px'),
+      startX: startX,
+      endX: endX,
+      startY: 0,
+      scale: scale,
+    })
+  }
+  if (pinRight != null) {
+    let startY: string | number | undefined = undefined
+    let endY: string | number | undefined = undefined
+    if (pinTop != null) {
+      startY = `calc(${printCSSNumberWithDefaultUnit(pinTop, 'px')} + ${frame.height / 2}px)`
+    } else if (pinBottom != null) {
+      endY = `calc(${printCSSNumberWithDefaultUnit(pinBottom, 'px')} + ${frame.height / 2}px)`
+    } else {
+      endY = frame.height / 2
+    }
+    pins.push({
+      name: 'right',
+      isHorizontalLine: true,
+      size: printCSSNumberWithDefaultUnit(pinRight, 'px'),
+      startY: startY,
+      endX: 0,
+      endY: endY,
+      scale: scale,
+    })
+  }
+  if (pinBottom != null) {
+    let startX: string | number | undefined = undefined
+    let endX: string | number | undefined = undefined
+    if (pinLeft != null) {
+      startX = `calc(${printCSSNumberWithDefaultUnit(pinLeft, 'px')} + ${frame.width / 2}px)`
+    } else if (pinRight != null) {
+      endX = `calc(${printCSSNumberWithDefaultUnit(pinRight, 'px')} + ${frame.width / 2}px)`
+    } else {
+      endX = frame.width / 2
+    }
+    pins.push({
+      name: 'bottom',
+      isHorizontalLine: false,
+      size: printCSSNumberWithDefaultUnit(pinBottom, 'px'),
+      startX: startX,
+      endX: endX,
+      endY: 0,
+      scale: scale,
+    })
+  }
+  return pins
+}
+
+export interface GridElementContainingBlockProps {
+  gridPath: ElementPath
+  gridChild: ElementPath
+}
+
+const GridElementContainingBlock = React.memo<GridElementContainingBlockProps>((props) => {
+  const gridData = useGridMeasurentHelperData(props.gridPath)
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'GridElementContainingBlock scale',
+  )
+  const position = useEditorState(
+    Substores.metadata,
+    (store) => {
+      const childMetadata = MetadataUtils.findElementByElementPath(
+        store.editor.jsxMetadata,
+        props.gridChild,
+      )
+      return childMetadata?.specialSizeMeasurements.position
+    },
+    'GridElementContainingBlock position',
+  )
+  const gridChildStyle: CSSProperties = useEditorState(
+    Substores.metadata,
+    (store) => {
+      const childMetadata = MetadataUtils.findElementByElementPath(
+        store.editor.jsxMetadata,
+        props.gridChild,
+      )
+      if (childMetadata == null) {
+        return {}
+      }
+      const gridFromProps = childMetadata.specialSizeMeasurements.elementGridPropertiesFromProps
+      const gridComputed = childMetadata.specialSizeMeasurements.elementGridProperties
+      return {
+        gridColumnStart:
+          gridPositionToValue(gridFromProps.gridColumnStart ?? gridComputed.gridColumnStart) ??
+          undefined,
+        gridColumnEnd:
+          gridPositionToValue(gridFromProps.gridColumnEnd ?? gridComputed.gridColumnEnd) ??
+          undefined,
+        gridRowStart:
+          gridPositionToValue(gridFromProps.gridRowStart ?? gridComputed.gridRowStart) ?? undefined,
+        gridRowEnd:
+          gridPositionToValue(gridFromProps.gridRowEnd ?? gridComputed.gridRowEnd) ?? undefined,
+        position: childMetadata.specialSizeMeasurements.position ?? undefined,
+      }
+    },
+    'GridElementContainingBlock gridChildStyle',
+  )
+  const gridChildFrame = useEditorState(
+    Substores.metadata,
+    (store) => {
+      return MetadataUtils.getLocalFrame(props.gridChild, store.editor.jsxMetadata, null)
+    },
+    'GridElementContainingBlock gridChildFrame',
+  )
+  const attributes = usePropsOrJSXAttributes(props.gridChild)
+
+  if (gridChildFrame == null || isInfinityRectangle(gridChildFrame)) {
+    return null
+  }
+
+  if (gridData == null) {
+    return null
+  }
+
+  if (position !== 'absolute') {
+    return null
+  }
+
+  const style: CSSProperties = {
+    ...getGridHelperStyleMatchingTargetGrid(gridData),
+    opacity: 1,
+  }
+
+  const pins: Array<PinOutlineProps> = collectGridPinOutlines(attributes, gridChildFrame, scale)
+
+  return (
+    <div
+      id={GridElementContainingBlockKey(props.gridPath)}
+      data-grid-path={EP.toString(props.gridPath)}
+      style={style}
+    >
+      <div
+        id={`${GridElementContainingBlockKey(props.gridPath)}-child`}
+        style={{
+          ...gridChildStyle,
+          pointerEvents: 'none',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+        }}
+      >
+        {pins.map((pin) => (
+          <PinOutline {...pin} key={pin.name} />
+        ))}
+      </div>
+    </div>
+  )
+})
+GridElementContainingBlock.displayName = 'GridElementContainingBlock'
+
+export interface GridElementContainingBlocksProps {}
+
+export const GridElementContainingBlocks = React.memo<GridElementContainingBlocksProps>((props) => {
+  const selectedGridChildElements = useEditorState(
+    Substores.metadata,
+    (store) => {
+      return store.editor.selectedViews.filter((selectedView) => {
+        return MetadataUtils.isGridItemWithLayoutProvidingGridParent(
+          store.editor.jsxMetadata,
+          selectedView,
+        )
+      })
+    },
+    'GridElementContainingBlocks selectedViews',
+  )
+
+  return (
+    <CanvasOffsetWrapper>
+      {selectedGridChildElements.map((selectedGridChildElement) => {
+        return (
+          <GridElementContainingBlock
+            key={GridElementContainingBlockKey(selectedGridChildElement)}
+            gridPath={EP.parentPath(selectedGridChildElement)}
+            gridChild={selectedGridChildElement}
+          />
+        )
+      })}
+    </CanvasOffsetWrapper>
+  )
+})
+
 function gridEdgeToCSSCursor(edge: GridResizeEdge): CSSCursor {
   switch (edge) {
     case 'column-end':
diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx
index bd1863cff4c7..6e31c6e04816 100644
--- a/editor/src/components/canvas/controls/new-canvas-controls.tsx
+++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx
@@ -75,7 +75,7 @@ import { NO_OP } from '../../../core/shared/utils'
 import { useIsMyProject } from '../../editor/store/collaborative-editing'
 import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 import { MultiplayerPresence } from '../multiplayer-presence'
-import { GridMeasurementHelpers } from './grid-controls'
+import { GridElementContainingBlocks, GridMeasurementHelpers } from './grid-controls'
 
 export const CanvasControlsContainerID = 'new-canvas-controls-container'
 
@@ -619,6 +619,10 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
                       isSelectMode(editorMode) || isInsertMode(editorMode),
                       <GridMeasurementHelpers />,
                     )}
+                    {when(
+                      isSelectMode(editorMode) || isInsertMode(editorMode),
+                      <GridElementContainingBlocks />,
+                    )}
                     {middleStrategyControls.map((c) => (
                       <RenderControlMemoized
                         key={c.key}
diff --git a/editor/src/components/canvas/controls/position-outline.tsx b/editor/src/components/canvas/controls/position-outline.tsx
index a9601dc2f32b..16c42fb4332b 100644
--- a/editor/src/components/canvas/controls/position-outline.tsx
+++ b/editor/src/components/canvas/controls/position-outline.tsx
@@ -31,8 +31,12 @@ export const PinLines = React.memo(() => {
       return mapDropNulls((path) => {
         const element = MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, path)
         const isAbsolute = MetadataUtils.isPositionAbsolute(element)
+        const isGridItem = MetadataUtils.isGridItemWithLayoutProvidingGridParent(
+          store.editor.jsxMetadata,
+          path,
+        )
         const frame = element?.globalFrame
-        if (isAbsolute && frame != null && isFiniteRectangle(frame)) {
+        if (isAbsolute && !isGridItem && frame != null && isFiniteRectangle(frame)) {
           return {
             path: path,
             frame: frame,
@@ -78,26 +82,26 @@ interface PositionOutlineProps {
 export const PositionOutline = React.memo((props: PositionOutlineProps) => {
   const containingFrame = useContainingFrameForElement(props.path)
   const attributes = usePropsOrJSXAttributes(props.path)
-  if (containingFrame != null) {
-    let pins: PinOutlineProps[] = collectPinOutlines(
-      attributes,
-      props.frame,
-      containingFrame,
-      props.scale,
-    )
-    return (
-      <CanvasOffsetWrapper>
-        {pins.map((pin) => (
-          <PinOutline {...pin} key={pin.name} />
-        ))}
-      </CanvasOffsetWrapper>
-    )
-  } else {
+  if (containingFrame == null) {
     return null
   }
+
+  const pins: PinOutlineProps[] = collectPinOutlines(
+    attributes,
+    props.frame,
+    containingFrame,
+    props.scale,
+  )
+  return (
+    <CanvasOffsetWrapper>
+      {pins.map((pin) => (
+        <PinOutline {...pin} key={pin.name} />
+      ))}
+    </CanvasOffsetWrapper>
+  )
 })
 
-const usePropsOrJSXAttributes = (path: ElementPath): PropsOrJSXAttributes => {
+export const usePropsOrJSXAttributes = (path: ElementPath): PropsOrJSXAttributes => {
   return useEditorState(
     Substores.metadata,
     (store) => {
@@ -128,7 +132,7 @@ const useContainingFrameForElement = (path: ElementPath): CanvasRectangle | null
   )
 }
 
-const collectPinOutlines = (
+export const collectPinOutlines = (
   attributes: PropsOrJSXAttributes,
   frame: CanvasRectangle,
   containingFrame: CanvasRectangle,
@@ -182,29 +186,57 @@ const collectPinOutlines = (
   return pins
 }
 
-interface PinOutlineProps {
+export interface PinOutlineProps {
   name: string
   isHorizontalLine: boolean
-  startX: number
-  startY: number
-  size: number
+  startX?: number | string
+  endX?: number | string
+  startY?: number | string
+  endY?: number | string
+  size: number | string
   scale: number
 }
 
 const PinOutlineUnscaledSize = 1
 
-const PinOutline = React.memo((props: PinOutlineProps): JSX.Element => {
+export const PinOutline = React.memo((props: PinOutlineProps): JSX.Element => {
   const colorTheme = useColorTheme()
-  const width = props.isHorizontalLine ? props.size : 0
-  const height = props.isHorizontalLine ? 0 : props.size
+  function numberOrStringToSize(value: number | string): string {
+    return typeof value === 'number' ? `${value}px` : value
+  }
+  const width = numberOrStringToSize(props.isHorizontalLine ? props.size : 0)
+  const height = numberOrStringToSize(props.isHorizontalLine ? 0 : props.size)
   const borderTop = props.isHorizontalLine
     ? `${PinOutlineUnscaledSize / props.scale}px dashed ${colorTheme.primary.value}`
     : 'none'
   const borderLeft = props.isHorizontalLine
     ? 'none'
     : `${PinOutlineUnscaledSize / props.scale}px dashed ${colorTheme.primary.value}`
-  const lineLeft = props.startX - PinOutlineUnscaledSize / 2 / props.scale
-  const lineTop = props.startY - PinOutlineUnscaledSize / 2 / props.scale
+
+  function lineStart(startValue?: number | string): string | undefined {
+    if (startValue == null) {
+      return undefined
+    } else {
+      return `calc(${numberOrStringToSize(startValue)} - ${
+        PinOutlineUnscaledSize / 2 / props.scale
+      }px)`
+    }
+  }
+
+  function lineEnd(endValue?: number | string): string | undefined {
+    if (endValue == null) {
+      return undefined
+    } else {
+      return `calc(${numberOrStringToSize(endValue)} - ${
+        PinOutlineUnscaledSize / 2 / props.scale
+      }px)`
+    }
+  }
+
+  const lineLeft = lineStart(props.startX)
+  const lineTop = lineStart(props.startY)
+  const lineRight = lineEnd(props.endX)
+  const lineBottom = lineEnd(props.endY)
 
   return (
     <div
@@ -212,6 +244,8 @@ const PinOutline = React.memo((props: PinOutlineProps): JSX.Element => {
         position: 'absolute',
         left: lineLeft,
         top: lineTop,
+        right: lineRight,
+        bottom: lineBottom,
         width: width,
         height: height,
         borderTop: borderTop,
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 56d1f6aaa894..d18f48e5d0cc 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -703,9 +703,9 @@ function getSpecialMeasurements(
   containerRectLazy: CanvasPoint | (() => CanvasPoint),
   elementCanvasRectangleCache: ElementCanvasRectangleCache,
 ): SpecialSizeMeasurements {
-  const elementStyle = window.getComputedStyle(element)
-  const layoutSystemForChildren = elementLayoutSystem(elementStyle)
-  const position = getPosition(elementStyle)
+  const computedStyle = window.getComputedStyle(element)
+  const layoutSystemForChildren = elementLayoutSystem(computedStyle)
+  const position = getPosition(computedStyle)
 
   const offset = {
     x: roundToNearestHalf(element.offsetLeft),
@@ -740,7 +740,7 @@ function getSpecialMeasurements(
     element.parentElement == null ? null : window.getComputedStyle(element.parentElement)
   const isParentNonStatic = isElementNonStatic(parentElementStyle)
 
-  const providesBoundsForAbsoluteChildren = isElementAContainingBlockForAbsolute(elementStyle)
+  const providesBoundsForAbsoluteChildren = isElementAContainingBlockForAbsolute(computedStyle)
 
   const parentLayoutSystem = elementLayoutSystem(parentElementStyle)
   const parentProvidesLayout = element.parentElement === element.offsetParent
@@ -755,29 +755,29 @@ function getSpecialMeasurements(
     element.parentElement != null &&
     element.parentElement.style[sizeMainAxis] === MaxContent
 
-  const flexDirection = eitherToMaybe(parseFlexDirection(elementStyle.flexDirection, null))
+  const flexDirection = eitherToMaybe(parseFlexDirection(computedStyle.flexDirection, null))
   const parentTextDirection = eitherToMaybe(parseDirection(parentElementStyle?.direction, null))
 
-  const justifyContent = getFlexJustifyContent(elementStyle.justifyContent)
-  const alignContent = getAlignContent(elementStyle.alignContent)
-  const alignItems = getFlexAlignment(elementStyle.alignItems)
-  const alignSelf = getSelfAlignment(elementStyle.alignSelf)
-  const justifySelf = getSelfAlignment(elementStyle.justifySelf)
+  const justifyContent = getFlexJustifyContent(computedStyle.justifyContent)
+  const alignContent = getAlignContent(computedStyle.alignContent)
+  const alignItems = getFlexAlignment(computedStyle.alignItems)
+  const alignSelf = getSelfAlignment(computedStyle.alignSelf)
+  const justifySelf = getSelfAlignment(computedStyle.justifySelf)
 
   const margin = applicative4Either(
     applicativeSidesPxTransform,
-    parseCSSLength(elementStyle.marginTop),
-    parseCSSLength(elementStyle.marginRight),
-    parseCSSLength(elementStyle.marginBottom),
-    parseCSSLength(elementStyle.marginLeft),
+    parseCSSLength(computedStyle.marginTop),
+    parseCSSLength(computedStyle.marginRight),
+    parseCSSLength(computedStyle.marginBottom),
+    parseCSSLength(computedStyle.marginLeft),
   )
 
   const padding = applicative4Either(
     applicativeSidesPxTransform,
-    parseCSSLength(elementStyle.paddingTop),
-    parseCSSLength(elementStyle.paddingRight),
-    parseCSSLength(elementStyle.paddingBottom),
-    parseCSSLength(elementStyle.paddingLeft),
+    parseCSSLength(computedStyle.paddingTop),
+    parseCSSLength(computedStyle.paddingRight),
+    parseCSSLength(computedStyle.paddingBottom),
+    parseCSSLength(computedStyle.paddingLeft),
   )
 
   const parentPadding = applicative4Either(
@@ -800,10 +800,10 @@ function getSpecialMeasurements(
 
   const childrenCount = element.childElementCount
 
-  const borderTopWidth = parseCSSLength(elementStyle.borderTopWidth)
-  const borderRightWidth = parseCSSLength(elementStyle.borderRightWidth)
-  const borderBottomWidth = parseCSSLength(elementStyle.borderBottomWidth)
-  const borderLeftWidth = parseCSSLength(elementStyle.borderLeftWidth)
+  const borderTopWidth = parseCSSLength(computedStyle.borderTopWidth)
+  const borderRightWidth = parseCSSLength(computedStyle.borderRightWidth)
+  const borderBottomWidth = parseCSSLength(computedStyle.borderBottomWidth)
+  const borderLeftWidth = parseCSSLength(computedStyle.borderLeftWidth)
   const border: BorderWidths = {
     top: isRight(borderTopWidth) ? borderTopWidth.value.value : 0,
     right: isRight(borderRightWidth) ? borderRightWidth.value.value : 0,
@@ -845,25 +845,25 @@ function getSpecialMeasurements(
   }
 
   const hasPositionOffset =
-    !positionValueIsDefault(elementStyle.top) ||
-    !positionValueIsDefault(elementStyle.right) ||
-    !positionValueIsDefault(elementStyle.bottom) ||
-    !positionValueIsDefault(elementStyle.left)
-  const hasTransform = elementStyle.transform !== 'none'
+    !positionValueIsDefault(computedStyle.top) ||
+    !positionValueIsDefault(computedStyle.right) ||
+    !positionValueIsDefault(computedStyle.bottom) ||
+    !positionValueIsDefault(computedStyle.left)
+  const hasTransform = computedStyle.transform !== 'none'
 
   const gap = defaultEither(
     null,
-    mapEither((n) => n.value, parseCSSLength(elementStyle.gap)),
+    mapEither((n) => n.value, parseCSSLength(computedStyle.gap)),
   )
 
   const rowGap = defaultEither(
     null,
-    mapEither((n) => n.value, parseCSSLength(elementStyle.rowGap)),
+    mapEither((n) => n.value, parseCSSLength(computedStyle.rowGap)),
   )
 
   const columnGap = defaultEither(
     null,
-    mapEither((n) => n.value, parseCSSLength(elementStyle.columnGap)),
+    mapEither((n) => n.value, parseCSSLength(computedStyle.columnGap)),
   )
 
   const flexGapValue = parseCSSLength(parentElementStyle?.gap)
@@ -873,17 +873,17 @@ function getSpecialMeasurements(
     null,
     applicative4Either(
       applicativeSidesPxTransform,
-      parseCSSLength(elementStyle.borderTopLeftRadius),
-      parseCSSLength(elementStyle.borderTopRightRadius),
-      parseCSSLength(elementStyle.borderBottomLeftRadius),
-      parseCSSLength(elementStyle.borderBottomRightRadius),
+      parseCSSLength(computedStyle.borderTopLeftRadius),
+      parseCSSLength(computedStyle.borderTopRightRadius),
+      parseCSSLength(computedStyle.borderBottomLeftRadius),
+      parseCSSLength(computedStyle.borderBottomRightRadius),
     ),
   )
 
-  const fontSize = elementStyle.fontSize
-  const fontWeight = elementStyle.fontWeight
-  const fontStyle = elementStyle.fontStyle
-  const textDecorationLine = elementStyle.textDecorationLine
+  const fontSize = computedStyle.fontSize
+  const fontWeight = computedStyle.fontWeight
+  const fontStyle = computedStyle.fontStyle
+  const textDecorationLine = computedStyle.textDecorationLine
 
   const textBounds = elementContainsOnlyText(element)
     ? stretchRect(
@@ -896,15 +896,15 @@ function getSpecialMeasurements(
         ),
         {
           w:
-            maybeValueFromComputedStyle(elementStyle.paddingLeft) +
-            maybeValueFromComputedStyle(elementStyle.paddingRight) +
-            maybeValueFromComputedStyle(elementStyle.marginLeft) +
-            maybeValueFromComputedStyle(elementStyle.marginRight),
+            maybeValueFromComputedStyle(computedStyle.paddingLeft) +
+            maybeValueFromComputedStyle(computedStyle.paddingRight) +
+            maybeValueFromComputedStyle(computedStyle.marginLeft) +
+            maybeValueFromComputedStyle(computedStyle.marginRight),
           h:
-            maybeValueFromComputedStyle(elementStyle.paddingTop) +
-            maybeValueFromComputedStyle(elementStyle.paddingBottom) +
-            maybeValueFromComputedStyle(elementStyle.marginTop) +
-            maybeValueFromComputedStyle(elementStyle.marginBottom),
+            maybeValueFromComputedStyle(computedStyle.paddingTop) +
+            maybeValueFromComputedStyle(computedStyle.paddingBottom) +
+            maybeValueFromComputedStyle(computedStyle.marginTop) +
+            maybeValueFromComputedStyle(computedStyle.marginBottom),
         },
       )
     : null
@@ -944,7 +944,7 @@ function getSpecialMeasurements(
 
   const containerGridPropertiesFromProps = getGridContainerProperties(element.style)
   const parentContainerGridPropertiesFromProps = getGridContainerProperties(parentElementStyle)
-  const containerGridProperties = getGridContainerProperties(elementStyle, {
+  const containerGridProperties = getGridContainerProperties(computedStyle, {
     dynamicCols: isDynamicGridTemplate(containerGridPropertiesFromProps.gridTemplateColumns),
     dynamicRows: isDynamicGridTemplate(containerGridPropertiesFromProps.gridTemplateRows),
   })
@@ -955,7 +955,7 @@ function getSpecialMeasurements(
   )
   const containerElementProperties = getGridElementProperties(
     parentContainerGridProperties,
-    elementStyle,
+    computedStyle,
   )
 
   return specialSizeMeasurements(
@@ -970,7 +970,7 @@ function getSpecialMeasurements(
     layoutSystemForChildren,
     false, // layoutSystemForChildrenInherited
     providesBoundsForAbsoluteChildren,
-    elementStyle.display,
+    computedStyle.display,
     position,
     isRight(margin) ? margin.value : sides(undefined, undefined, undefined, undefined),
     paddingValue,
@@ -993,7 +993,7 @@ function getSpecialMeasurements(
     element.localName,
     childrenCount,
     globalContentBoxForChildren,
-    elementStyle.float,
+    computedStyle.float,
     hasPositionOffset,
     parentTextDirection,
     hasTransform,
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index a275e06c50ec..0e7d0c444c54 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -1208,9 +1208,7 @@ export function parseGridRange(
       const startParsed = parseGridPosition(container, axis, 'start', null, input)
       return mapEither((start) => {
         const end =
-          !isCSSKeyword(start) && start.numericalPosition != null
-            ? gridPositionValue(start.numericalPosition + 1)
-            : null
+          !isCSSKeyword(start) && start.numericalPosition != null ? cssKeyword('auto') : null
         return gridRange(start, end)
       }, startParsed)
     }
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index 1e8209a245ec..e55959495b93 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -385,6 +385,16 @@ export const MetadataUtils = {
     const elementMetadata = MetadataUtils.findElementByElementPath(metadata, path)
     return elementMetadata?.specialSizeMeasurements.parentLayoutSystem === 'grid'
   },
+  isGridItemWithLayoutProvidingGridParent(
+    metadata: ElementInstanceMetadataMap,
+    path: ElementPath,
+  ): boolean {
+    const elementMetadata = MetadataUtils.findElementByElementPath(metadata, EP.parentPath(path))
+    return (
+      elementMetadata?.specialSizeMeasurements.layoutSystemForChildren === 'grid' &&
+      elementMetadata?.specialSizeMeasurements.providesBoundsForAbsoluteChildren
+    )
+  },
   isGridItemWithPositioning(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
     const element = MetadataUtils.findElementByElementPath(metadata, path)
     return (
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 1e4ec99abbfc..85a45178b8d7 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -36,6 +36,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -823,6 +824,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -1499,6 +1501,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -1790,6 +1793,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -2395,6 +2399,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -2504,6 +2509,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -2624,6 +2630,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -2903,6 +2910,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -3384,6 +3392,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
@@ -3435,6 +3444,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index 57938fa23a2c..313173838176 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`868`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`872`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1120`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1124`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`657`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`658`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`782`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`783`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })

From 004cc05d14e7082cdd82fc5f5da199ea5c60e0da Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Fri, 8 Nov 2024 13:51:00 +0100
Subject: [PATCH 209/272] Disallow changing location for components which do
 not support style props (#6624)

**Problem:**
When a grid contains component items which do not support style props:
- changing location should be disabled, because we can not attach the
gridRow*, gridColumn* props on the component
- reorder should still work, because that just modifies the order of the
grid items as siblings

**Fix:**
I used MetadataUtils.targetRegisteredStyleControlsOrHonoursStyleProps to
decide if a component supports the necessary grid placement style props:
- if `layout` inspector section is enabled in the component annotations,
we should allow changing location
- if gridRow/gridColumn/etc props are taken by the component, then we
should allow changing location
- reorder does not need any constrains, it does not depend on style
props

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 ...nge-element-location-duplicate-strategy.ts |  12 +-
 .../grid-change-element-location-strategy.ts  |  13 +-
 ...change-location-strategy.spec.browser2.tsx | 246 ++++++++++++++++++
 3 files changed, 269 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
index 66296d761c51..a60713a30bd5 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
@@ -51,7 +51,17 @@ export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory =
     canvasState.startingMetadata,
     selectedElement,
   )
-  if (selectedElementMetadata == null) {
+  if (
+    selectedElementMetadata == null ||
+    !MetadataUtils.targetRegisteredStyleControlsOrHonoursStyleProps(
+      canvasState.projectContents,
+      selectedElementMetadata,
+      canvasState.propertyControlsInfo,
+      'layout',
+      ['gridRow', 'gridColumn', 'gridRowStart', 'gridColumnStart', 'gridRowEnd', 'gridColumnEnd'],
+      'some',
+    )
+  ) {
     return null
   }
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
index 1adc1f4f739d..98dec9e736a4 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
@@ -71,9 +71,20 @@ export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
     canvasState.startingMetadata,
     selectedElement,
   )
-  if (selectedElementMetadata == null) {
+  if (
+    selectedElementMetadata == null ||
+    !MetadataUtils.targetRegisteredStyleControlsOrHonoursStyleProps(
+      canvasState.projectContents,
+      selectedElementMetadata,
+      canvasState.propertyControlsInfo,
+      'layout',
+      ['gridRow', 'gridColumn', 'gridRowStart', 'gridColumnStart', 'gridRowEnd', 'gridColumnEnd'],
+      'every',
+    )
+  ) {
     return null
   }
+
   const initialTemplates = getParentGridTemplatesFromChildMeasurements(
     selectedElementMetadata.specialSizeMeasurements,
   )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
index d1a11cc8377a..ed21826d1673 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
@@ -41,6 +41,69 @@ describe('grid element change location strategy', () => {
     })
   })
 
+  describe('component items', () => {
+    it('can change the location of components on a grid when component takes style prop', async () => {
+      const editor = await renderTestEditorWithCode(
+        makeProjectCodeWithItemComponent(`export function Item(props) {
+  return (
+    <div
+      style={{...props.style}}
+      data-testid={props['data-testid']}
+    />
+  )
+}`),
+        'await-first-dom-report',
+      )
+      const testId = 'aaa'
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(
+        editor,
+        {
+          scale: 1,
+          pathString: `sb/scene/grid/${testId}`,
+          testId: testId,
+        },
+      )
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '7',
+        gridColumnStart: '3',
+        gridRowEnd: '4',
+        gridRowStart: '2',
+      })
+    })
+
+    it('can not change the location of components on a grid when component doesnt take style prop', async () => {
+      const editor = await renderTestEditorWithCode(
+        makeProjectCodeWithItemComponent(`export function Item(props) {
+  return (
+    <div data-testid={props['data-testid']} />
+  )
+}`),
+        'await-first-dom-report',
+      )
+
+      const testId = 'aaa'
+      await runMoveTest(
+        editor,
+        {
+          scale: 1,
+          pathString: `sb/scene/grid/${testId}`,
+          testId: testId,
+        },
+        (ed) => {
+          const strategies = ed.getEditorState().strategyState.sortedApplicableStrategies
+          const changeLocationStrategy = strategies?.find(
+            (s) => s.strategy.id === 'grid-change-element-location-strategy',
+          )
+          expect(changeLocationStrategy).toBeUndefined()
+          const reorderStrategy = strategies?.find(
+            (s) => s.strategy.id === 'reorder-grid-move-strategy',
+          )
+          expect(reorderStrategy).not.toBeUndefined()
+        },
+      )
+    })
+  })
+
   it('can change the location of elements in a grid component', async () => {
     const editor = await renderTestEditorWithCode(
       ProjectCodeGridComponent,
@@ -626,6 +689,23 @@ export var storyboard = (
 
       expect(cells).toEqual(['pink', 'cyan', 'orange', 'blue'])
     })
+    it('reorders a component (which does not take style props) inside contiguous area', async () => {
+      const editor = await renderTestEditorWithCode(
+        ProjectCodeReorderWithComponentItem,
+        'await-first-dom-report',
+      )
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
+        await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 3 })
+
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '',
+        gridColumnStart: '',
+        gridRowEnd: '',
+        gridRowStart: '',
+      })
+
+      expect(cells).toEqual(['pink', 'cyan', 'orange', 'blue'])
+    })
     it('reorders an element without setting positioning (edge of contiguous area)', async () => {
       const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
 
@@ -797,6 +877,7 @@ async function runMoveTest(
     draggedCell?: GridCellCoordinates
     tab?: boolean
   },
+  midDragCallback?: (editor: EditorRenderResult) => void,
 ) {
   const elementPathToDrag = EP.fromString(props.pathString)
 
@@ -844,6 +925,10 @@ async function runMoveTest(
   if (props.tab) {
     await keyDown('Tab')
   }
+  if (midDragCallback != null) {
+    midDragCallback(editor)
+  }
+
   await mouseUpAtPoint(editor.renderedDOM.getByTestId(CanvasControlsContainerID), endPoint)
 
   return editor.renderedDOM.getByTestId(props.testId).style
@@ -964,6 +1049,90 @@ export var storyboard = (
 )
 `
 
+const makeProjectCodeWithItemComponent = (
+  itemComponentCode: string,
+) => `import * as React from 'react'
+import { Scene, Storyboard, Placeholder } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 847,
+        height: 895,
+        position: 'absolute',
+        left: 46,
+        top: 131,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateRows: '75px 75px 75px 75px',
+          gridTemplateColumns:
+            '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
+          gridGap: 16,
+          height: 482,
+          width: 786,
+          position: 'absolute',
+          left: 31,
+          top: 0,
+        }}
+        data-uid='grid'
+      >
+        <Item
+          style={{
+            minHeight: 0,
+            backgroundColor: '#f3785f',
+            gridColumnEnd: 5,
+            gridColumnStart: 1,
+            gridRowEnd: 3,
+            gridRowStart: 1,
+          }}
+          data-uid='aaa'
+          data-testid='aaa'
+        />
+        <Item
+          style={{
+            minHeight: 0,
+            backgroundColor: '#23565b',
+          }}
+          data-uid='bbb'
+          data-testid='bbb'
+        />
+        <Placeholder
+          style={{
+            minHeight: 0,
+            gridColumnEnd: 5,
+            gridRowEnd: 4,
+            gridColumnStart: 1,
+            gridRowStart: 3,
+            backgroundColor: '#0074ff',
+          }}
+          data-uid='ccc'
+        />
+        <Placeholder
+          style={{
+            minHeight: 0,
+            gridColumnEnd: 9,
+            gridRowEnd: 4,
+            gridColumnStart: 5,
+            gridRowStart: 3,
+          }}
+          data-uid='ddd'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+
+${itemComponentCode}
+`
+
 const ProjectCodeGridComponent = `import * as React from 'react'
 import { Scene, Storyboard, Placeholder } from 'utopia-api'
 
@@ -1141,6 +1310,83 @@ export var storyboard = (
 )
 `
 
+const ProjectCodeReorderWithComponentItem = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 600,
+        height: 600,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 500,
+          height: 500,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr',
+          gridGap: 10,
+          padding: 10,
+        }}
+        data-testid='grid'
+        data-uid='grid'
+      >
+        <Item
+          backgroundColor='#f09'
+          data-uid='pink'
+          data-testid='pink'
+          data-label='pink'
+        />
+        <Item
+          backgroundColor='#f90'
+          data-uid='orange'
+          data-testid='orange'
+          data-label='orange'
+        />
+        <Item
+          backgroundColor='#0f9'
+          data-uid='cyan'
+          data-testid='cyan'
+          data-label='cyan'
+        />
+        <Item
+          backgroundColor='#09f'
+          data-uid='blue'
+          data-testid='blue'
+          data-label='blue'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+
+export function Item(props) {
+  return (
+    <div
+      style={{
+        backgroundColor: props.backgroundColor,
+        width: '100%',
+        height: '100%',
+      }}
+      data-uid={props['data-uid']}
+      data-testid={props['data-testid']}
+      data-label={props['data-label']}
+    />
+  )
+}
+`
+
 const ProjectCodeReorderwithMultiCellChild = `import * as React from 'react'
 import { Scene, Storyboard } from 'utopia-api'
 

From c162a943baab70d72d5693631f713f58e6a38119 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 8 Nov 2024 19:23:11 +0100
Subject: [PATCH 210/272] Keep shorthand values when changing grid item
 location (#6626)

**Problem:**

Changing a grid item location that spans multiple cells via a shorthand
(e.g. `gridColumn: '3 / 5'`) regressed and now the interaction causes
the element to shrink to 1-sized dimensions.

**Fix:**

When checking whether to keep the end pins, check whether they come from
a shorthand prop too.

Also, fix naming of variables when calculating the cell bounds so width
is related to cols and height is related to rows.

Fixes #6625
---
 .../grid-change-element-location-strategy.ts  |  43 ++++---
 ...change-location-strategy.spec.browser2.tsx | 110 +++++++++++++++++-
 .../strategies/grid-helpers.ts                |   5 +-
 3 files changed, 135 insertions(+), 23 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
index 98dec9e736a4..9d6b99516b3e 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
@@ -8,11 +8,7 @@ import type {
   GridContainerProperties,
   GridElementProperties,
 } from '../../../../core/shared/element-template'
-import {
-  getJSXAttribute,
-  gridPositionValue,
-  isJSXElement,
-} from '../../../../core/shared/element-template'
+import { gridPositionValue, isJSXElement } from '../../../../core/shared/element-template'
 import { isInfinityRectangle } from '../../../../core/shared/math-utils'
 import { absolute } from '../../../../utils/utils'
 import type { CanvasCommand } from '../../commands/commands'
@@ -241,9 +237,9 @@ export function runGridChangeElementLocation(
 
   const gridProps: Partial<GridElementProperties> = {
     gridColumnStart: gridPositionValue(targetRootCell.column),
-    gridColumnEnd: gridPositionValue(targetRootCell.column + originalCellBounds.height),
+    gridColumnEnd: gridPositionValue(targetRootCell.column + originalCellBounds.width),
     gridRowStart: gridPositionValue(targetRootCell.row),
-    gridRowEnd: gridPositionValue(targetRootCell.row + originalCellBounds.width),
+    gridRowEnd: gridPositionValue(targetRootCell.row + originalCellBounds.height),
   }
 
   // TODO: Remove this logic once there is a fix for the handling of the track end fields.
@@ -256,17 +252,30 @@ export function runGridChangeElementLocation(
       .compose(fromField('props')),
     selectedElementMetadata,
     (elementProperties) => {
-      const gridColumnEnd = getJSXAttributesAtPath(
-        elementProperties,
-        PP.create('style', 'gridColumnEnd'),
-      )
-      if (gridColumnEnd.attribute.type === 'ATTRIBUTE_NOT_FOUND') {
-        keepGridColumnEnd = false
-      }
-      const gridRowEnd = getJSXAttributesAtPath(elementProperties, PP.create('style', 'gridRowEnd'))
-      if (gridRowEnd.attribute.type === 'ATTRIBUTE_NOT_FOUND') {
-        keepGridRowEnd = false
+      function shouldKeep(shorthandProp: 'gridColumn' | 'gridRow'): boolean {
+        const longhandProp = shorthandProp === 'gridColumn' ? 'gridColumnEnd' : 'gridRowEnd'
+
+        const shorthand = getJSXAttributesAtPath(
+          elementProperties,
+          PP.create('style', shorthandProp),
+        )
+        if (
+          shorthand.attribute.type === 'ATTRIBUTE_VALUE' &&
+          typeof shorthand.attribute.value === 'string' &&
+          shorthand.attribute.value.includes('/')
+        ) {
+          return true
+        }
+
+        const longhand = getJSXAttributesAtPath(elementProperties, PP.create('style', longhandProp))
+        if (longhand.attribute.type !== 'ATTRIBUTE_NOT_FOUND') {
+          return true
+        }
+
+        return false
       }
+      keepGridColumnEnd = shouldKeep('gridColumn')
+      keepGridRowEnd = shouldKeep('gridRow')
     },
   )
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
index ed21826d1673..13fb04febe05 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
@@ -163,6 +163,29 @@ describe('grid element change location strategy', () => {
     })
   })
 
+  it('can change the location of a multicell element (shorthand)', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeReorderwithMultiCellChildShorthand,
+      'await-first-dom-report',
+    )
+
+    const testId = 'orange'
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
+      scale: 1,
+      pathString: `sb/scene/grid/${testId}`,
+      testId: testId,
+      tab: true,
+      targetCell: { row: 3, column: 1 },
+    })
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnStart: '1',
+      gridColumnEnd: '3',
+      gridRowStart: '3',
+      gridRowEnd: 'auto',
+    })
+  })
+
   it('can change the location of elements on a grid (zoom out)', async () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
@@ -1271,7 +1294,7 @@ export var storyboard = (
             height: '100%',
           }}
           data-uid='pink'
-		      data-testid='pink'
+          data-testid='pink'
           data-label='pink'
         />
         <div
@@ -1281,7 +1304,7 @@ export var storyboard = (
             height: '100%',
           }}
           data-uid='orange'
-		      data-testid='orange'
+          data-testid='orange'
           data-label='orange'
         />
         <div
@@ -1291,7 +1314,7 @@ export var storyboard = (
             height: '100%',
           }}
           data-uid='cyan'
-		      data-testid='cyan'
+          data-testid='cyan'
           data-label='cyan'
         />
         <div
@@ -1301,7 +1324,7 @@ export var storyboard = (
             height: '100%',
           }}
           data-uid='blue'
-		      data-testid='blue'
+          data-testid='blue'
           data-label='blue'
         />
       </div>
@@ -1466,3 +1489,82 @@ export var storyboard = (
   </Storyboard>
 )
 `
+
+const ProjectCodeReorderwithMultiCellChildShorthand = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 600,
+        height: 600,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 500,
+          height: 500,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr',
+          gridGap: 10,
+          padding: 10,
+        }}
+        data-testid='grid'
+        data-uid='grid'
+      >
+        <div
+          style={{
+            backgroundColor: '#f09',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='pink'
+		  data-testid='pink'
+          data-label='pink'
+        />
+        <div
+          style={{
+            backgroundColor: '#f90',
+            width: '100%',
+            height: '100%',
+            gridColumn: '2 / 4',
+          }}
+          data-uid='orange'
+		  data-testid='orange'
+          data-label='orange'
+        />
+        <div
+          style={{
+            backgroundColor: '#0f9',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='cyan'
+		  data-testid='cyan'
+          data-label='cyan'
+        />
+        <div
+          style={{
+            backgroundColor: '#09f',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='blue'
+		  data-testid='blue'
+          data-label='blue'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index c889849c6d79..fbfef128c77e 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -154,10 +154,11 @@ function getGridChildCellCoordBoundsFromProps(
     }
     return propValue.numericalPosition ?? innerFallback
   }
+
   const column = getGridProperty('gridColumnStart', fallback.column)
-  const height = getGridProperty('gridColumnEnd', fallback.column + (fallback.width ?? 1)) - column
+  const width = getGridProperty('gridColumnEnd', fallback.column + (fallback.width ?? 1)) - column
   const row = getGridProperty('gridRowStart', fallback.row)
-  const width = getGridProperty('gridRowEnd', fallback.row + (fallback.height ?? 1)) - row
+  const height = getGridProperty('gridRowEnd', fallback.row + (fallback.height ?? 1)) - row
 
   return {
     row,

From 07b81de0e369b0f4ebe25ee6b479f369caa0bb01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Mon, 11 Nov 2024 16:31:35 +0100
Subject: [PATCH 211/272] Set props through style plugin (#6599)

See https://github.com/concrete-utopia/utopia/pull/6574 for a long-form
writeup on the full background of this PR.

## The problem addressed on this PR
The normalisation step cannot easily handle commands/actions removing
properties from elements.

## Fix
Instead of working around the limitation of the normalisation step, this
PR introduces an approach where the style plugins themselves implement
setting/removing style props on elements, and the `SetProperty` /
`DeleteProperty` command uses the style plugin API to set/remove style
props. The PR deals with patching props that are removed during a canvas
interaction (details in
https://github.com/concrete-utopia/utopia/pull/6574, TLDR: if `gap` is
removed with the gap control, it needs to be set to `0px` while the
interaction is in progress, otherwise the value from the Tailwind class
will be applied which would be janky).

This is an under-the-hood PR, no user-facing functionality is added.

### Details
- Updated the `StylePlugin` interface with the `updateStyles` function,
which can be used to set/delete element styles. The inline style plugin
and the Tailwind style plugin are updated accordingly
- Injected `StylePlugin.updateStyles` into `runSetProperty` and
`runDeleteProperties` via the new `runStyleUpdateForStrategy` function.
This function encapsulates a performance-related feature: if an
interaction is ongoing, it sets props in the inline style prop (and
patches removed props), so updates are real-time, and when an
interaction is done, it uses the active plugin. This trick works because
the active strategy is re-run on interaction finish, producing the right
patches for a style update.
- The machinery dealing with zeroing props is added. The entrypoint for
adding the zeroed props is `patchRemovedProperties` (called from
`dispatch-strategies.tsx`, and the entrypoint for recording which props
need to be zeroed is `runStyleUpdateMidInteraction`
- The code related to the normalisation step is removed
- `UpdateClassListCommand` is removed and turned into a helper function
(since it's not called as a command anymore, just as a helper in the
Tailwind style plugin)

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../canvas-strategies/canvas-strategies.tsx   |  12 +-
 editor/src/components/canvas/canvas-types.ts  |   7 +
 .../components/canvas/commands/commands.ts    |   9 +-
 .../commands/delete-properties-command.ts     |  37 ++-
 .../canvas/commands/set-property-command.ts   |  57 +++--
 .../commands/update-class-list-command.ts     | 101 --------
 .../canvas/commands/utils/property-utils.ts   |  17 +-
 .../canvas/plugins/inline-style-plugin.ts     |  35 ++-
 .../canvas/plugins/style-plugins.ts           | 227 +++++++++++++++++-
 .../update-class-list.ts                      |  72 ++++++
 .../plugins/tailwind-style-plugin.spec.ts     |  76 +++---
 .../canvas/plugins/tailwind-style-plugin.ts   | 164 +++----------
 .../components/editor/actions/action-utils.ts |  74 +-----
 .../src/components/editor/actions/actions.tsx |   1 +
 .../editor/store/dispatch-strategies.tsx      |  69 +-----
 .../src/components/editor/store/dispatch.tsx  | 148 ++----------
 .../components/editor/store/editor-state.ts   |   6 +
 .../store/store-deep-equality-instances.ts    |  29 ++-
 .../store/store-hook-substore-helpers.ts      |   1 +
 19 files changed, 545 insertions(+), 597 deletions(-)
 delete mode 100644 editor/src/components/canvas/commands/update-class-list-command.ts
 create mode 100644 editor/src/components/canvas/plugins/tailwind-style-plugin-utils/update-class-list.ts

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
index 5fb54fa447a4..d40d6803b304 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -81,7 +81,7 @@ import { reparentSubjectsForInteractionTarget } from './strategies/reparent-help
 import { getReparentTargetUnified } from './strategies/reparent-helpers/reparent-strategy-parent-lookup'
 import { gridChangeElementLocationResizeKeyboardStrategy } from './strategies/grid-change-element-location-keyboard-strategy'
 import createCachedSelector from 're-reselect'
-import { getActivePlugin } from '../plugins/style-plugins'
+import { getActivePlugin, patchRemovedProperties } from '../plugins/style-plugins'
 import {
   controlsForGridPlaceholders,
   GridControls,
@@ -496,6 +496,16 @@ export function applyCanvasStrategy(
   return strategy.apply(strategyLifecycle)
 }
 
+export function applyElementsToRerenderFromStrategyResultAndPatchRemovedProps(
+  editorState: EditorState,
+  strategyResult: StrategyApplicationResult,
+): EditorState {
+  return applyElementsToRerenderFromStrategyResult(
+    patchRemovedProperties(editorState),
+    strategyResult,
+  )
+}
+
 export function applyElementsToRerenderFromStrategyResult(
   editorState: EditorState,
   strategyResult: StrategyApplicationResult,
diff --git a/editor/src/components/canvas/canvas-types.ts b/editor/src/components/canvas/canvas-types.ts
index 8477786c2cab..b9b8a2f16f7b 100644
--- a/editor/src/components/canvas/canvas-types.ts
+++ b/editor/src/components/canvas/canvas-types.ts
@@ -555,3 +555,10 @@ export interface StyleInfo {
   gap: FlexGapInfo | null
   flexDirection: FlexDirectionInfo | null
 }
+
+const emptyStyleInfo: StyleInfo = {
+  gap: null,
+  flexDirection: null,
+}
+
+export const isStyleInfoKey = (key: string): key is keyof StyleInfo => key in emptyStyleInfo
diff --git a/editor/src/components/canvas/commands/commands.ts b/editor/src/components/canvas/commands/commands.ts
index 816ad0c558cd..692863192a31 100644
--- a/editor/src/components/canvas/commands/commands.ts
+++ b/editor/src/components/canvas/commands/commands.ts
@@ -78,8 +78,6 @@ import {
   runShowGridControlsCommand,
   type ShowGridControlsCommand,
 } from './show-grid-controls-command'
-import type { UpdateClassList } from './update-class-list-command'
-import { runUpdateClassList } from './update-class-list-command'
 
 export interface CommandFunctionResult {
   editorStatePatches: Array<EditorStatePatch>
@@ -131,7 +129,6 @@ export type CanvasCommand =
   | SetActiveFrames
   | UpdateBulkProperties
   | ShowGridControlsCommand
-  | UpdateClassList
 
 export function runCanvasCommand(
   editorState: EditorState,
@@ -174,9 +171,9 @@ export function runCanvasCommand(
     case 'PUSH_INTENDED_BOUNDS_AND_UPDATE_HUGGING_ELEMENTS':
       return runPushIntendedBoundsAndUpdateHuggingElements(editorState, command)
     case 'DELETE_PROPERTIES':
-      return runDeleteProperties(editorState, command)
+      return runDeleteProperties(editorState, command, commandLifecycle)
     case 'SET_PROPERTY':
-      return runSetProperty(editorState, command)
+      return runSetProperty(editorState, command, commandLifecycle)
     case 'UPDATE_BULK_PROPERTIES':
       return runBulkUpdateProperties(editorState, command)
     case 'ADD_IMPORTS_TO_FILE':
@@ -211,8 +208,6 @@ export function runCanvasCommand(
       return runSetActiveFrames(editorState, command)
     case 'SHOW_GRID_CONTROLS':
       return runShowGridControlsCommand(editorState, command)
-    case 'UPDATE_CLASS_LIST':
-      return runUpdateClassList(editorState, command)
     default:
       const _exhaustiveCheck: never = command
       throw new Error(`Unhandled canvas command ${JSON.stringify(command)}`)
diff --git a/editor/src/components/canvas/commands/delete-properties-command.ts b/editor/src/components/canvas/commands/delete-properties-command.ts
index 65565b21d922..c7cf7652d341 100644
--- a/editor/src/components/canvas/commands/delete-properties-command.ts
+++ b/editor/src/components/canvas/commands/delete-properties-command.ts
@@ -1,16 +1,18 @@
 import type { EditorState } from '../../../components/editor/store/editor-state'
 import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
-import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+import type { BaseCommand, WhenToRun } from './commands'
 import * as EP from '../../../core/shared/element-path'
 import * as PP from '../../../core/shared/property-path'
-import { deleteValuesAtPath } from './utils/property-utils'
+import { deleteValuesAtPath, maybeCssPropertyFromInlineStyle } from './utils/property-utils'
+import type { InteractionLifecycle } from '../canvas-strategies/canvas-strategy-types'
+import { runStyleUpdateForStrategy } from '../plugins/style-plugins'
+import * as SU from '../plugins/style-plugins'
 
 export interface DeleteProperties extends BaseCommand {
   type: 'DELETE_PROPERTIES'
   element: ElementPath
   properties: Array<PropertyPath>
 }
-
 export function deleteProperties(
   whenToRun: WhenToRun,
   element: ElementPath,
@@ -24,19 +26,40 @@ export function deleteProperties(
   }
 }
 
-export const runDeleteProperties: CommandFunction<DeleteProperties> = (
+export const runDeleteProperties = (
   editorState: EditorState,
   command: DeleteProperties,
+  interactionLifecycle: InteractionLifecycle,
 ) => {
+  const propsToDelete = command.properties.reduce(
+    (acc: { styleProps: string[]; rest: PropertyPath[] }, p) => {
+      const prop = maybeCssPropertyFromInlineStyle(p)
+      if (prop == null) {
+        acc.rest.push(p)
+      } else {
+        acc.styleProps.push(prop)
+      }
+      return acc
+    },
+    { styleProps: [], rest: [] },
+  )
+
   // Apply the update to the properties.
-  const { editorStatePatch: propertyUpdatePatch } = deleteValuesAtPath(
+  const { editorStateWithChanges } = deleteValuesAtPath(
     editorState,
     command.element,
-    command.properties,
+    propsToDelete.rest,
+  )
+
+  const { editorStatePatches } = runStyleUpdateForStrategy(
+    interactionLifecycle,
+    editorStateWithChanges,
+    command.element,
+    propsToDelete.styleProps.map(SU.deleteCSSProp),
   )
 
   return {
-    editorStatePatches: [propertyUpdatePatch],
+    editorStatePatches: editorStatePatches,
     commandDescription: `Delete Properties ${command.properties
       .map(PP.toString)
       .join(',')} on ${EP.toUid(command.element)}`,
diff --git a/editor/src/components/canvas/commands/set-property-command.ts b/editor/src/components/canvas/commands/set-property-command.ts
index ca791fd81306..8add2e7c0f94 100644
--- a/editor/src/components/canvas/commands/set-property-command.ts
+++ b/editor/src/components/canvas/commands/set-property-command.ts
@@ -8,8 +8,15 @@ import type {
 } from '../../../core/shared/project-file-types'
 import * as PP from '../../../core/shared/property-path'
 import type { EditorState } from '../../editor/store/editor-state'
-import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
-import { applyValuesAtPath, deleteValuesAtPath } from './utils/property-utils'
+import type { InteractionLifecycle } from '../canvas-strategies/canvas-strategy-types'
+import { runStyleUpdateForStrategy } from '../plugins/style-plugins'
+import * as SU from '../plugins/style-plugins'
+import type { BaseCommand, CommandFunction, CommandFunctionResult, WhenToRun } from './commands'
+import {
+  applyValuesAtPath,
+  deleteValuesAtPath,
+  maybeCssPropertyFromInlineStyle,
+} from './utils/property-utils'
 
 type PositionProp = 'left' | 'top' | 'right' | 'bottom' | 'width' | 'height'
 
@@ -19,12 +26,9 @@ export interface SetProperty extends BaseCommand {
   property: PropertyPath
   value: string | number
 }
-
 export type PropertyToUpdate = PropertyToSet | PropertyToDelete
-
 type PropertyToSet = { type: 'SET'; path: PropertyPath; value: string | number }
 type PropertyToDelete = { type: 'DELETE'; path: PropertyPath }
-
 export function propertyToSet(path: PropertyPath, value: string | number): PropertyToUpdate {
   return {
     type: 'SET',
@@ -32,20 +36,17 @@ export function propertyToSet(path: PropertyPath, value: string | number): Prope
     value: value,
   }
 }
-
 export function propertyToDelete(path: PropertyPath): PropertyToUpdate {
   return {
     type: 'DELETE',
     path: path,
   }
 }
-
 export interface UpdateBulkProperties extends BaseCommand {
   type: 'UPDATE_BULK_PROPERTIES'
   element: ElementPath
   properties: PropertyToUpdate[]
 }
-
 export function setProperty<T extends PropertyPathPart>(
   whenToRun: WhenToRun,
   element: ElementPath,
@@ -60,7 +61,6 @@ export function setProperty<T extends PropertyPathPart>(
     value: value,
   }
 }
-
 export function updateBulkProperties(
   whenToRun: WhenToRun,
   element: ElementPath,
@@ -73,7 +73,6 @@ export function updateBulkProperties(
     properties: properties,
   }
 }
-
 export function setPropertyOmitNullProp<T extends PropertyPathPart>(
   whenToRun: WhenToRun,
   element: ElementPath,
@@ -87,24 +86,40 @@ export function setPropertyOmitNullProp<T extends PropertyPathPart>(
   }
 }
 
-export const runSetProperty: CommandFunction<SetProperty> = (
+function getCommandDescription(command: SetProperty) {
+  return `Set Property ${PP.toString(command.property)}=${JSON.stringify(
+    command.property,
+    null,
+    2,
+  )} on ${EP.toUid(command.element)}`
+}
+
+export const runSetProperty = (
   editorState: EditorState,
   command: SetProperty,
-) => {
-  // Apply the update to the properties.
-  const { editorStatePatch: propertyUpdatePatch } = applyValuesAtPath(
+  interactionLifecycle: InteractionLifecycle,
+): CommandFunctionResult => {
+  const prop = maybeCssPropertyFromInlineStyle(command.property)
+  if (prop == null) {
+    const { editorStatePatch } = applyValuesAtPath(editorState, command.element, [
+      { path: command.property, value: jsExpressionValue(command.value, emptyComments) },
+    ])
+    return {
+      editorStatePatches: [editorStatePatch],
+      commandDescription: getCommandDescription(command),
+    }
+  }
+
+  const { editorStatePatches } = runStyleUpdateForStrategy(
+    interactionLifecycle,
     editorState,
     command.element,
-    [{ path: command.property, value: jsExpressionValue(command.value, emptyComments) }],
+    [SU.updateCSSProp(prop, command.value)],
   )
 
   return {
-    editorStatePatches: [propertyUpdatePatch],
-    commandDescription: `Set Property ${PP.toString(command.property)}=${JSON.stringify(
-      command.property,
-      null,
-      2,
-    )} on ${EP.toUid(command.element)}`,
+    editorStatePatches: editorStatePatches,
+    commandDescription: getCommandDescription(command),
   }
 }
 
diff --git a/editor/src/components/canvas/commands/update-class-list-command.ts b/editor/src/components/canvas/commands/update-class-list-command.ts
deleted file mode 100644
index 1643ccbeea3c..000000000000
--- a/editor/src/components/canvas/commands/update-class-list-command.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { mapDropNulls } from '../../../core/shared/array-utils'
-import * as EP from '../../../core/shared/element-path'
-import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
-import type { ElementPath } from '../../../core/shared/project-file-types'
-import * as PP from '../../../core/shared/property-path'
-import type { PropertiesToUpdate } from '../../../core/tailwind/tailwind-class-list-utils'
-import {
-  addNewClasses,
-  getClassListFromParsedClassList,
-  getParsedClassList,
-  removeClasses,
-  updateExistingClasses,
-} from '../../../core/tailwind/tailwind-class-list-utils'
-import { getTailwindConfigCached } from '../../../core/tailwind/tailwind-compilation'
-import { getClassNameAttribute } from '../../../core/tailwind/tailwind-options'
-import { getElementFromProjectContents, type EditorState } from '../../editor/store/editor-state'
-import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
-import { applyValuesAtPath } from './utils/property-utils'
-
-export interface UpdateClassList extends BaseCommand {
-  type: 'UPDATE_CLASS_LIST'
-  element: ElementPath
-  classNameUpdates: ClassListUpdate[]
-}
-
-export type ClassListUpdate =
-  | { type: 'add'; property: string; value: string }
-  | { type: 'remove'; property: string }
-
-export const add = ({ property, value }: { property: string; value: string }): ClassListUpdate => ({
-  type: 'add',
-  property: property,
-  value: value,
-})
-export const remove = (property: string): ClassListUpdate => ({
-  type: 'remove',
-  property: property,
-})
-
-export function updateClassListCommand(
-  whenToRun: WhenToRun,
-  element: ElementPath,
-  classNameUpdates: ClassListUpdate[],
-): UpdateClassList {
-  return {
-    type: 'UPDATE_CLASS_LIST',
-    whenToRun: whenToRun,
-    element: element,
-    classNameUpdates: classNameUpdates,
-  }
-}
-
-export const runUpdateClassList: CommandFunction<UpdateClassList> = (
-  editorState: EditorState,
-  command: UpdateClassList,
-) => {
-  const { element, classNameUpdates } = command
-
-  const currentClassNameAttribute =
-    getClassNameAttribute(getElementFromProjectContents(element, editorState.projectContents))
-      ?.value ?? ''
-
-  const parsedClassList = getParsedClassList(
-    currentClassNameAttribute,
-    getTailwindConfigCached(editorState),
-  )
-
-  const propertiesToRemove = mapDropNulls(
-    (update) => (update.type !== 'remove' ? null : update.property),
-    classNameUpdates,
-  )
-
-  const propertiesToUpdate: PropertiesToUpdate = classNameUpdates.reduce(
-    (acc: { [property: string]: string }, val) =>
-      val.type === 'remove' ? acc : { ...acc, [val.property]: val.value },
-    {},
-  )
-
-  const updatedClassList = [
-    removeClasses(propertiesToRemove),
-    updateExistingClasses(propertiesToUpdate),
-    addNewClasses(propertiesToUpdate),
-  ].reduce((classList, fn) => fn(classList), parsedClassList)
-
-  const newClassList = getClassListFromParsedClassList(
-    updatedClassList,
-    getTailwindConfigCached(editorState),
-  )
-
-  const { editorStatePatch } = applyValuesAtPath(editorState, element, [
-    {
-      path: PP.create('className'),
-      value: jsExpressionValue(newClassList, emptyComments),
-    },
-  ])
-
-  return {
-    editorStatePatches: [editorStatePatch],
-    commandDescription: `Update class list for ${EP.toUid(element)} to ${newClassList}`,
-  }
-}
diff --git a/editor/src/components/canvas/commands/utils/property-utils.ts b/editor/src/components/canvas/commands/utils/property-utils.ts
index 0198ad74bcc7..cf615f93fec6 100644
--- a/editor/src/components/canvas/commands/utils/property-utils.ts
+++ b/editor/src/components/canvas/commands/utils/property-utils.ts
@@ -6,11 +6,16 @@ import type { EditorState, EditorStatePatch } from '../../../editor/store/editor
 import { modifyUnderlyingElementForOpenFile } from '../../../editor/store/editor-state'
 import { patchParseSuccessAtElementPath } from '../patch-utils'
 
+export interface EditorStateWithPatch {
+  editorStateWithChanges: EditorState
+  editorStatePatch: EditorStatePatch
+}
+
 export function applyValuesAtPath(
   editorState: EditorState,
   target: ElementPath,
   jsxValuesAndPathsToSet: ValueAtPath[],
-): { editorStateWithChanges: EditorState; editorStatePatch: EditorStatePatch } {
+): EditorStateWithPatch {
   const workingEditorState = modifyUnderlyingElementForOpenFile(
     target,
     editorState,
@@ -51,7 +56,7 @@ export function deleteValuesAtPath(
   editorState: EditorState,
   target: ElementPath,
   properties: Array<PropertyPath>,
-): { editorStateWithChanges: EditorState; editorStatePatch: EditorStatePatch } {
+): EditorStateWithPatch {
   const workingEditorState = modifyUnderlyingElementForOpenFile(
     target,
     editorState,
@@ -86,3 +91,11 @@ export function deleteValuesAtPath(
     editorStatePatch: editorStatePatch,
   }
 }
+
+export function maybeCssPropertyFromInlineStyle(property: PropertyPath): string | null {
+  const [maybeStyle, prop] = property.propertyElements
+  if (maybeStyle !== 'style' || prop == null || typeof prop !== 'string') {
+    return null
+  }
+  return prop
+}
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.ts b/editor/src/components/canvas/plugins/inline-style-plugin.ts
index 11bc7dfa873b..5ed4f6b03f0b 100644
--- a/editor/src/components/canvas/plugins/inline-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.ts
@@ -1,12 +1,19 @@
 import { getLayoutProperty } from '../../../core/layout/getLayoutProperty'
 import type { StyleLayoutProp } from '../../../core/layout/layout-helpers-new'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
+import { mapDropNulls } from '../../../core/shared/array-utils'
 import { defaultEither, isLeft, mapEither, right } from '../../../core/shared/either'
 import type { JSXElement } from '../../../core/shared/element-template'
-import { isJSXElement } from '../../../core/shared/element-template'
+import {
+  emptyComments,
+  isJSXElement,
+  jsExpressionValue,
+} from '../../../core/shared/element-template'
+import * as PP from '../../../core/shared/property-path'
 import { styleStringInArray } from '../../../utils/common-constants'
 import type { ParsedCSSProperties } from '../../inspector/common/css-utils'
 import { withPropertyTag, type WithPropertyTag } from '../canvas-types'
+import { applyValuesAtPath, deleteValuesAtPath } from '../commands/utils/property-utils'
 import type { StylePlugin } from './style-plugins'
 
 function getPropertyFromInstance<P extends StyleLayoutProp, T = ParsedCSSProperties[P]>(
@@ -37,5 +44,29 @@ export const InlineStylePlugin: StylePlugin = {
         flexDirection: flexDirection,
       }
     },
-  normalizeFromInlineStyle: (editor) => editor,
+  updateStyles: (editorState, elementPath, updates) => {
+    const propsToDelete = mapDropNulls(
+      (update) => (update.type === 'delete' ? PP.create('style', update.property) : null),
+      updates,
+    )
+
+    const propsToSet = mapDropNulls(
+      (update) =>
+        update.type === 'set'
+          ? {
+              path: PP.create('style', update.property),
+              value: jsExpressionValue(update.value, emptyComments),
+            }
+          : null,
+      updates,
+    )
+
+    const { editorStateWithChanges: withValuesDeleted } = deleteValuesAtPath(
+      editorState,
+      elementPath,
+      propsToDelete,
+    )
+
+    return applyValuesAtPath(withValuesDeleted, elementPath, propsToSet)
+  },
 }
diff --git a/editor/src/components/canvas/plugins/style-plugins.ts b/editor/src/components/canvas/plugins/style-plugins.ts
index b4740be5ee80..d912ac52cf85 100644
--- a/editor/src/components/canvas/plugins/style-plugins.ts
+++ b/editor/src/components/canvas/plugins/style-plugins.ts
@@ -1,33 +1,236 @@
 import type { ElementPath } from 'utopia-shared/src/types'
-import type { EditorState } from '../../editor/store/editor-state'
-import type { StyleInfoFactory } from '../canvas-strategies/canvas-strategy-types'
+import type { EditorState, EditorStatePatch } from '../../editor/store/editor-state'
+import type {
+  InteractionLifecycle,
+  StyleInfoFactory,
+} from '../canvas-strategies/canvas-strategy-types'
 import { InlineStylePlugin } from './inline-style-plugin'
 import { TailwindPlugin } from './tailwind-style-plugin'
 import {
   getTailwindConfigCached,
   isTailwindEnabled,
 } from '../../../core/tailwind/tailwind-compilation'
-import type { PropertiesWithElementPath } from '../../editor/actions/action-utils'
 import { isFeatureEnabled } from '../../../utils/feature-switches'
+import { assertNever } from '../../../core/shared/utils'
+import * as EP from '../../../core/shared/element-path'
+import type { ValueAtPath } from '../../../core/shared/jsx-attributes'
+import type { EditorStateWithPatch } from '../commands/utils/property-utils'
+import { applyValuesAtPath } from '../commands/utils/property-utils'
+import * as PP from '../../../core/shared/property-path'
+import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
+import { isStyleInfoKey, type StyleInfo } from '../canvas-types'
+
+export interface UpdateCSSProp {
+  type: 'set'
+  property: string
+  value: string | number
+}
+
+interface DeleteCSSProp {
+  type: 'delete'
+  property: string
+}
+
+export function updateCSSProp(property: string, value: string | number): UpdateCSSProp {
+  return {
+    type: 'set',
+    property: property,
+    value: value,
+  }
+}
+
+export function deleteCSSProp(property: string): DeleteCSSProp {
+  return {
+    type: 'delete',
+    property: property,
+  }
+}
+
+export type StyleUpdate = UpdateCSSProp | DeleteCSSProp
 
 export interface StylePlugin {
   name: string
   styleInfoFactory: StyleInfoFactory
-  normalizeFromInlineStyle: (
+  updateStyles: (
     editorState: EditorState,
-    elementsToNormalize: ElementPath[],
-    propertiesToRemove: PropertiesWithElementPath[],
-  ) => EditorState
+    elementPath: ElementPath,
+    updates: StyleUpdate[],
+  ) => EditorStateWithPatch
 }
 
-export const Plugins = {
-  InlineStyle: InlineStylePlugin,
-  Tailwind: TailwindPlugin,
-} as const
-
 export function getActivePlugin(editorState: EditorState): StylePlugin {
   if (isFeatureEnabled('Tailwind') && isTailwindEnabled()) {
     return TailwindPlugin(getTailwindConfigCached(editorState))
   }
   return InlineStylePlugin
 }
+
+export interface StylePropsUpdatedDuringInteraction {
+  propertiesUpdated: string[]
+  propertiesDeleted: string[]
+}
+
+export interface UpdatedProperties {
+  [elementPathString: string]: StylePropsUpdatedDuringInteraction
+}
+
+export function resetUpdatedProperties(editorState: EditorState): EditorState {
+  return { ...editorState, propertiesUpdatedDuringInteraction: {} }
+}
+
+function getPropertiesUpdatedDuringInteraction(editorState: EditorState) {
+  return editorState.propertiesUpdatedDuringInteraction
+}
+
+function ensureElementPathInUpdatedPropertiesGlobal(
+  elementPath: ElementPath,
+  updatedProperties: UpdatedProperties,
+) {
+  const updatedPropertiesToExtend = { ...updatedProperties }
+  const elementPathString = EP.toString(elementPath)
+  if (!(elementPathString in updatedPropertiesToExtend)) {
+    updatedPropertiesToExtend[elementPathString] = {
+      propertiesDeleted: [],
+      propertiesUpdated: [],
+    }
+  }
+
+  return updatedPropertiesToExtend
+}
+
+interface EditorStateWithPatches {
+  editorStateWithChanges: EditorState
+  editorStatePatches: EditorStatePatch[]
+}
+
+function runStyleUpdateMidInteraction(
+  editorState: EditorState,
+  elementPath: ElementPath,
+  updates: StyleUpdate[],
+): EditorStateWithPatches {
+  const updatedProperties = ensureElementPathInUpdatedPropertiesGlobal(
+    elementPath,
+    getPropertiesUpdatedDuringInteraction(editorState),
+  )
+  for (const update of updates) {
+    switch (update.type) {
+      case 'delete':
+        updatedProperties[EP.toString(elementPath)].propertiesDeleted.push(update.property)
+        break
+      case 'set':
+        updatedProperties[EP.toString(elementPath)].propertiesUpdated.push(update.property)
+        break
+      default:
+        assertNever(update)
+    }
+  }
+  const { editorStatePatch, editorStateWithChanges } = InlineStylePlugin.updateStyles(
+    editorState,
+    elementPath,
+    updates,
+  )
+  return {
+    editorStateWithChanges: editorStateWithChanges,
+    editorStatePatches: [
+      editorStatePatch,
+      { propertiesUpdatedDuringInteraction: { $set: updatedProperties } },
+    ],
+  }
+}
+
+const makeZeroProp = (cssProp: string, zeroValue: string = '0px'): ValueAtPath => {
+  return {
+    path: PP.create('style', cssProp),
+    value: jsExpressionValue(zeroValue, emptyComments),
+  }
+}
+
+interface PropPatcher {
+  matches: (prop: string) => boolean
+  patch: (
+    prop: keyof StyleInfo,
+    styleInfo: StyleInfo | null,
+    updatedProperties: StylePropsUpdatedDuringInteraction,
+  ) => ValueAtPath[]
+}
+
+const genericPropPatcher =
+  (zeroValue: string) =>
+  (
+    prop: keyof StyleInfo,
+    styleInfo: StyleInfo | null,
+    updatedProperties: StylePropsUpdatedDuringInteraction,
+  ) => {
+    const propIsSetOnElement = styleInfo?.[prop] != null
+    const propIsSetFromCommand = updatedProperties.propertiesUpdated.includes(prop)
+    if (!propIsSetOnElement || propIsSetFromCommand) {
+      return []
+    }
+    return [makeZeroProp(prop, zeroValue)]
+  }
+
+const patchers: PropPatcher[] = [{ matches: (p) => p === 'gap', patch: genericPropPatcher('0px') }]
+
+function getPropertiesToZero(
+  styleInfo: StyleInfo | null,
+  updatedProperties: StylePropsUpdatedDuringInteraction,
+): ValueAtPath[] {
+  return updatedProperties.propertiesDeleted.flatMap((prop): ValueAtPath[] => {
+    if (!isStyleInfoKey(prop)) {
+      console.error("Trying to zero prop that's not a handled by StyleInfo:", prop)
+      return []
+    }
+
+    const match = patchers.find((p) => p.matches(prop))
+    if (match == null) {
+      return []
+    }
+    return match.patch(prop, styleInfo, updatedProperties)
+  })
+}
+
+export function patchRemovedProperties(editorState: EditorState): EditorState {
+  const styleInfoReader = getActivePlugin(editorState).styleInfoFactory({
+    projectContents: editorState.projectContents,
+    metadata: editorState.jsxMetadata,
+    elementPathTree: editorState.elementPathTree,
+  })
+
+  const propertiesUpdatedDuringInteraction = getPropertiesUpdatedDuringInteraction(editorState)
+
+  return Object.entries(propertiesUpdatedDuringInteraction).reduce(
+    (acc, [elementPathString, updatedProperties]) => {
+      const elementPath = EP.fromString(elementPathString)
+      const styleInfo = styleInfoReader(elementPath)
+      const propsToZero = getPropertiesToZero(styleInfo, updatedProperties)
+      if (propsToZero.length === 0) {
+        return acc
+      } else {
+        return applyValuesAtPath(acc, elementPath, propsToZero).editorStateWithChanges
+      }
+    },
+    editorState,
+  )
+}
+
+export function runStyleUpdateForStrategy(
+  commandLifecycle: InteractionLifecycle,
+  editorState: EditorState,
+  elementPath: ElementPath,
+  updates: StyleUpdate[],
+): EditorStateWithPatches {
+  switch (commandLifecycle) {
+    case 'mid-interaction':
+      return runStyleUpdateMidInteraction(editorState, elementPath, updates)
+    case 'end-interaction':
+      const { editorStatePatch, editorStateWithChanges } = getActivePlugin(
+        editorState,
+      ).updateStyles(editorState, elementPath, updates)
+      return {
+        editorStateWithChanges: editorStateWithChanges,
+        editorStatePatches: [editorStatePatch],
+      }
+    default:
+      assertNever(commandLifecycle)
+  }
+}
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/update-class-list.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/update-class-list.ts
new file mode 100644
index 000000000000..b8896c93aa64
--- /dev/null
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/update-class-list.ts
@@ -0,0 +1,72 @@
+import type { ElementPath } from 'utopia-shared/src/types'
+import { emptyComments } from 'utopia-shared/src/types'
+import { mapDropNulls } from '../../../../core/shared/array-utils'
+import { jsExpressionValue } from '../../../../core/shared/element-template'
+import type { PropertiesToUpdate } from '../../../../core/tailwind/tailwind-class-list-utils'
+import {
+  getParsedClassList,
+  removeClasses,
+  updateExistingClasses,
+  addNewClasses,
+  getClassListFromParsedClassList,
+} from '../../../../core/tailwind/tailwind-class-list-utils'
+import { getClassNameAttribute } from '../../../../core/tailwind/tailwind-options'
+import type { EditorState } from '../../../editor/store/editor-state'
+import { getElementFromProjectContents } from '../../../editor/store/editor-state'
+import type { EditorStateWithPatch } from '../../commands/utils/property-utils'
+import { applyValuesAtPath } from '../../commands/utils/property-utils'
+import * as PP from '../../../../core/shared/property-path'
+import type { Config } from 'tailwindcss/types/config'
+
+export type ClassListUpdate =
+  | { type: 'add'; property: string; value: string }
+  | { type: 'remove'; property: string }
+
+export const add = ({ property, value }: { property: string; value: string }): ClassListUpdate => ({
+  type: 'add',
+  property: property,
+  value: value,
+})
+export const remove = (property: string): ClassListUpdate => ({
+  type: 'remove',
+  property: property,
+})
+
+export const runUpdateClassList = (
+  editorState: EditorState,
+  element: ElementPath,
+  classNameUpdates: ClassListUpdate[],
+  config: Config | null,
+): EditorStateWithPatch => {
+  const currentClassNameAttribute =
+    getClassNameAttribute(getElementFromProjectContents(element, editorState.projectContents))
+      ?.value ?? ''
+
+  const parsedClassList = getParsedClassList(currentClassNameAttribute, config)
+
+  const propertiesToRemove = mapDropNulls(
+    (update) => (update.type !== 'remove' ? null : update.property),
+    classNameUpdates,
+  )
+
+  const propertiesToUpdate: PropertiesToUpdate = classNameUpdates.reduce(
+    (acc: { [property: string]: string }, val) =>
+      val.type === 'remove' ? acc : { ...acc, [val.property]: val.value },
+    {},
+  )
+
+  const updatedClassList = [
+    removeClasses(propertiesToRemove),
+    updateExistingClasses(propertiesToUpdate),
+    addNewClasses(propertiesToUpdate),
+  ].reduce((classList, fn) => fn(classList), parsedClassList)
+
+  const newClassList = getClassListFromParsedClassList(updatedClassList, config)
+
+  return applyValuesAtPath(editorState, element, [
+    {
+      path: PP.create('className'),
+      value: jsExpressionValue(newClassList, emptyComments),
+    },
+  ])
+}
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts
index 1c73ea9ef373..cf1e604a3833 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts
@@ -10,9 +10,8 @@ import { createModifiedProject } from '../../../sample-projects/sample-project-u
 import { TailwindConfigPath } from '../../../core/tailwind/tailwind-config'
 import { getTailwindConfigCached } from '../../../core/tailwind/tailwind-compilation'
 
-const Project = (style: Record<string, unknown>) =>
-  createModifiedProject({
-    [StoryboardFilePath]: `
+const Project = createModifiedProject({
+  [StoryboardFilePath]: `
 import React from 'react'
 import { Scene, Storyboard } from 'utopia-api'
 export var storyboard = (
@@ -31,83 +30,62 @@ export var storyboard = (
     >
       <div
         data-uid='div'
-        style={${JSON.stringify(style)}}
+        className='flex flex-row gap-[12px]'
       />
     </Scene>
   </Storyboard>
 )
 
 `,
-    [TailwindConfigPath]: `
+  [TailwindConfigPath]: `
     const TailwindConfig = {
         content: [],
         theme: { extend: { gap: { enormous: '222px' } } }
     }
     export default TailwindConfig
 `,
-  })
+})
 
 describe('tailwind style plugin', () => {
-  it('can normalize inline style', async () => {
-    const editor = await renderTestEditorWithModel(
-      Project({
-        top: 2,
-        left: 2,
-        width: 100,
-        height: 100,
-        backgroundColor: 'blue',
-        display: 'flex',
-        flexDirection: 'row',
-        gap: '12px',
-      }),
-      'await-first-dom-report',
-    )
+  it('can set Tailwind class', async () => {
+    const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
     const target = EP.fromString('sb/scene/div')
-    const normalizedEditor = TailwindPlugin(null).normalizeFromInlineStyle(
+    const updatedEditor = TailwindPlugin(null).updateStyles(
       editor.getEditorState().editor,
-      [target],
-      [],
+      target,
+      [
+        { type: 'set', property: 'gap', value: '222px' },
+        { type: 'set', property: 'display', value: 'flex' },
+        { type: 'set', property: 'flexDirection', value: 'column' },
+      ],
     )
-
     const normalizedElement = getJSXElementFromProjectContents(
       target,
-      normalizedEditor.projectContents,
+      updatedEditor.editorStateWithChanges.projectContents,
     )!
-
     expect(formatJSXAttributes(normalizedElement.props)).toEqual({
-      className: 'flex-row gap-[12px]',
+      className: 'flex flex-col gap-[222px]',
       'data-uid': 'div',
-      style: { backgroundColor: 'blue', display: 'flex', height: 100, left: 2, top: 2, width: 100 },
     })
   })
-  it('can normalize inline style with custom Tailwind config', async () => {
-    const editor = await renderTestEditorWithModel(
-      Project({
-        top: 2,
-        left: 2,
-        width: 100,
-        height: 100,
-        backgroundColor: 'blue',
-        display: 'flex',
-        flexDirection: 'row',
-        gap: '222px',
-      }),
-      'await-first-dom-report',
-    )
+
+  it('can set Tailwind class, with custom values in the Tailwind config', async () => {
+    const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
     const target = EP.fromString('sb/scene/div')
-    const normalizedEditor = TailwindPlugin(
+    const updatedEditor = TailwindPlugin(
       getTailwindConfigCached(editor.getEditorState().editor),
-    ).normalizeFromInlineStyle(editor.getEditorState().editor, [target], [])
-
+    ).updateStyles(editor.getEditorState().editor, target, [
+      { type: 'set', property: 'gap', value: '222px' },
+      { type: 'set', property: 'display', value: 'flex' },
+      { type: 'set', property: 'flexDirection', value: 'column' },
+    ])
     const normalizedElement = getJSXElementFromProjectContents(
       target,
-      normalizedEditor.projectContents,
+      updatedEditor.editorStateWithChanges.projectContents,
     )!
-
     expect(formatJSXAttributes(normalizedElement.props)).toEqual({
-      className: 'flex-row gap-enormous',
+      className: 'flex flex-col gap-enormous',
       'data-uid': 'div',
-      style: { backgroundColor: 'blue', display: 'flex', height: 100, left: 2, top: 2, width: 100 },
     })
   })
 })
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
index 77bb8b9a32ef..b0fd596f0800 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -1,24 +1,16 @@
 import * as TailwindClassParser from '@xengine/tailwindcss-class-parser'
-import type { JSExpression, JSXAttributesEntry, PropertyPath } from 'utopia-shared/src/types'
 import { isLeft } from '../../../core/shared/either'
 import { getClassNameAttribute } from '../../../core/tailwind/tailwind-options'
-import {
-  getElementFromProjectContents,
-  getJSXElementFromProjectContents,
-} from '../../editor/store/editor-state'
+import { getElementFromProjectContents } from '../../editor/store/editor-state'
 import type { Parser } from '../../inspector/common/css-utils'
 import { cssParsers } from '../../inspector/common/css-utils'
-import { foldAndApplyCommandsSimple } from './../commands/commands'
 import { mapDropNulls } from '../../../core/shared/array-utils'
-import { deleteProperties } from './../commands/delete-properties-command'
-import * as PP from '../../../core/shared/property-path'
-import { updateClassListCommand } from './../commands/update-class-list-command'
-import * as UCL from './../commands/update-class-list-command'
 import type { StylePlugin } from './style-plugins'
 import type { WithPropertyTag } from '../canvas-types'
 import { withPropertyTag } from '../canvas-types'
 import type { Config } from 'tailwindcss/types/config'
-import type { PropertiesWithElementPath } from '../../editor/actions/action-utils'
+import * as UCL from './tailwind-style-plugin-utils/update-class-list'
+import { assertNever } from '../../../core/shared/utils'
 
 function parseTailwindProperty<T>(value: unknown, parse: Parser<T>): WithPropertyTag<T> | null {
   const parsed = parse(value, null)
@@ -28,24 +20,24 @@ function parseTailwindProperty<T>(value: unknown, parse: Parser<T>): WithPropert
   return withPropertyTag(parsed.value)
 }
 
-const TailwindPropertyMapping = {
+const TailwindPropertyMapping: Record<string, string> = {
   gap: 'gap',
   flexDirection: 'flexDirection',
-} as const
+}
 
 function isSupportedTailwindProperty(prop: unknown): prop is keyof typeof TailwindPropertyMapping {
   return typeof prop === 'string' && prop in TailwindPropertyMapping
 }
 
-function stringifiedStylePropValue(value: unknown): string | null {
-  if (typeof value === 'string') {
-    return value
-  }
-  if (typeof value === 'number') {
-    return `${value}px`
+function stringifyPropertyValue(value: string | number): string {
+  switch (typeof value) {
+    case 'number':
+      return `${value}px`
+    case 'string':
+      return value
+    default:
+      assertNever(value)
   }
-
-  return null
 }
 
 function getTailwindClassMapping(classes: string[], config: Config | null): Record<string, string> {
@@ -60,55 +52,6 @@ function getTailwindClassMapping(classes: string[], config: Config | null): Reco
   return mapping
 }
 
-function getStylePropContents(
-  styleProp: JSExpression,
-): Array<{ key: string; value: unknown }> | null {
-  if (styleProp.type === 'ATTRIBUTE_NESTED_OBJECT') {
-    return mapDropNulls(
-      (c): { key: string; value: unknown } | null =>
-        c.type === 'PROPERTY_ASSIGNMENT' &&
-        c.value.type === 'ATTRIBUTE_VALUE' &&
-        typeof c.key === 'string'
-          ? { key: c.key, value: c.value.value }
-          : null,
-      styleProp.content,
-    )
-  }
-
-  if (styleProp.type === 'ATTRIBUTE_VALUE' && typeof styleProp.value === 'object') {
-    return mapDropNulls(
-      ([key, value]) => (typeof key !== 'object' ? null : { key, value }),
-      Object.entries(styleProp.value),
-    )
-  }
-
-  return null
-}
-
-function getRemoveUpdates(properties: PropertyPath[]): UCL.ClassListUpdate[] {
-  return mapDropNulls((property) => {
-    const [maybeStyle, maybeCSSProp] = property.propertyElements
-    if (
-      maybeStyle !== 'style' ||
-      maybeCSSProp == null ||
-      !isSupportedTailwindProperty(maybeCSSProp)
-    ) {
-      return null
-    }
-    return UCL.remove(TailwindPropertyMapping[maybeCSSProp])
-  }, properties)
-}
-
-function getPropertyCleanupCommands(propertiesToRemove: PropertiesWithElementPath[]) {
-  return mapDropNulls(({ elementPath, properties }) => {
-    const removeUpdates = getRemoveUpdates(properties)
-    if (removeUpdates.length === 0) {
-      return null
-    }
-    return updateClassListCommand('always', elementPath, removeUpdates)
-  }, propertiesToRemove)
-}
-
 export const TailwindPlugin = (config: Config | null): StylePlugin => ({
   name: 'Tailwind',
   styleInfoFactory:
@@ -132,63 +75,30 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
         ),
       }
     },
-  normalizeFromInlineStyle: (editorState, elementsToNormalize, propertiesToRemove) => {
-    const commands = elementsToNormalize.flatMap((elementPath) => {
-      const element = getJSXElementFromProjectContents(elementPath, editorState.projectContents)
-      if (element == null) {
-        return []
-      }
-
-      const styleAttribute = element.props.find(
-        (prop): prop is JSXAttributesEntry =>
-          prop.type === 'JSX_ATTRIBUTES_ENTRY' && prop.key === 'style',
-      )
-      if (styleAttribute == null) {
-        return []
-      }
-
-      const styleValue = getStylePropContents(styleAttribute.value)
-      if (styleValue == null) {
-        return []
-      }
-
-      const styleProps = mapDropNulls(
-        (c): { key: keyof typeof TailwindPropertyMapping; value: unknown } | null =>
-          isSupportedTailwindProperty(c.key) ? { key: c.key, value: c.value } : null,
-        styleValue,
-      )
-
-      const stylePropConversions = mapDropNulls(({ key, value }) => {
-        const valueString = stringifiedStylePropValue(value)
-        if (valueString == null) {
-          return null
-        }
-
-        return { property: TailwindPropertyMapping[key], value: valueString }
-      }, styleProps)
-
-      return [
-        deleteProperties(
-          'always',
-          elementPath,
-          Object.keys(TailwindPropertyMapping).map((prop) => PP.create('style', prop)),
-        ),
-        updateClassListCommand(
-          'always',
-          elementPath,
-          stylePropConversions.map(({ property, value }) => UCL.add({ property, value })),
-        ),
-      ]
-    })
-
-    const commandsWithPropertyCleanup = [
-      ...commands,
-      ...getPropertyCleanupCommands(propertiesToRemove),
-    ]
-    if (commandsWithPropertyCleanup.length === 0) {
-      return editorState
-    }
+  updateStyles: (editorState, elementPath, updates) => {
+    const propsToDelete = mapDropNulls(
+      (update) =>
+        update.type !== 'delete' || TailwindPropertyMapping[update.property] == null
+          ? null
+          : UCL.remove(TailwindPropertyMapping[update.property]),
+      updates,
+    )
 
-    return foldAndApplyCommandsSimple(editorState, commandsWithPropertyCleanup)
+    const propsToSet = mapDropNulls(
+      (update) =>
+        update.type !== 'set' || TailwindPropertyMapping[update.property] == null
+          ? null
+          : UCL.add({
+              property: TailwindPropertyMapping[update.property],
+              value: stringifyPropertyValue(update.value),
+            }),
+      updates,
+    )
+    return UCL.runUpdateClassList(
+      editorState,
+      elementPath,
+      [...propsToDelete, ...propsToSet],
+      config,
+    )
   },
 })
diff --git a/editor/src/components/editor/actions/action-utils.ts b/editor/src/components/editor/actions/action-utils.ts
index aeffe3713f27..9b18421f0a9b 100644
--- a/editor/src/components/editor/actions/action-utils.ts
+++ b/editor/src/components/editor/actions/action-utils.ts
@@ -1,6 +1,4 @@
-import type { ElementPath, PropertyPath } from 'utopia-shared/src/types'
-import { mapDropNulls, safeIndex } from '../../../core/shared/array-utils'
-import type { CanvasCommand } from '../../canvas/commands/commands'
+import { safeIndex } from '../../../core/shared/array-utils'
 import type { EditorAction } from '../action-types'
 import { isFromVSCodeAction } from './actions-from-vscode'
 
@@ -368,73 +366,3 @@ export function simpleStringifyActions(
     .map((a) => simpleStringifyAction(a, indentation))
     .join(`,\n${spacing}`)}\n${spacingBeforeClose}]`
 }
-
-export function getElementsToNormalizeFromCommands(commands: CanvasCommand[]): ElementPath[] {
-  return mapDropNulls((command) => {
-    switch (command.type) {
-      case 'ADJUST_CSS_LENGTH_PROPERTY':
-      case 'SET_CSS_LENGTH_PROPERTY':
-      case 'CONVERT_CSS_PERCENT_TO_PX':
-      case 'CONVERT_TO_ABSOLUTE':
-        return command.target
-      case 'ADD_CONTAIN_LAYOUT_IF_NEEDED':
-      case 'SET_PROPERTY':
-      case 'UPDATE_BULK_PROPERTIES':
-        return command.element
-      default:
-        return null
-    }
-  }, commands)
-}
-
-export function getElementsToNormalizeFromActions(actions: EditorAction[]): ElementPath[] {
-  return actions.flatMap((action) => {
-    switch (action.action) {
-      case 'APPLY_COMMANDS':
-        return getElementsToNormalizeFromCommands(action.commands)
-      // TODO: extends this switch when we add support to non-canvas
-      // command-based edits
-      default:
-        return []
-    }
-  })
-}
-
-export interface PropertiesWithElementPath {
-  elementPath: ElementPath
-  properties: PropertyPath[]
-}
-
-export function getPropertiesToRemoveFromCommands(
-  commands: CanvasCommand[],
-): PropertiesWithElementPath[] {
-  return mapDropNulls((command) => {
-    switch (command.type) {
-      case 'DELETE_PROPERTIES':
-        return { elementPath: command.element, properties: command.properties }
-      case 'UPDATE_BULK_PROPERTIES':
-        return {
-          elementPath: command.element,
-          properties: mapDropNulls(
-            (p) => (p.type === 'DELETE' ? p.path : null),
-            command.properties,
-          ),
-        }
-      default:
-        return null
-    }
-  }, commands)
-}
-
-export function getPropertiesToRemoveFromActions(
-  actions: EditorAction[],
-): PropertiesWithElementPath[] {
-  return actions.flatMap((action) => {
-    switch (action.action) {
-      case 'APPLY_COMMANDS':
-        return getPropertiesToRemoveFromCommands(action.commands)
-      default:
-        return []
-    }
-  })
-}
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index 8ee4b3047ea8..2d158b0407b4 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -1052,6 +1052,7 @@ export function restoreEditorState(
     collaborators: currentEditor.collaborators,
     sharingDialogOpen: currentEditor.sharingDialogOpen,
     editorRemixConfig: currentEditor.editorRemixConfig,
+    propertiesUpdatedDuringInteraction: {},
   }
 }
 
diff --git a/editor/src/components/editor/store/dispatch-strategies.tsx b/editor/src/components/editor/store/dispatch-strategies.tsx
index 1f153bc0c37c..b49b3c5e3070 100644
--- a/editor/src/components/editor/store/dispatch-strategies.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.tsx
@@ -6,6 +6,7 @@ import type {
 import {
   applyCanvasStrategy,
   applyElementsToRerenderFromStrategyResult,
+  applyElementsToRerenderFromStrategyResultAndPatchRemovedProps,
   findCanvasStrategy,
   interactionInProgress,
   pickCanvasStateFromEditorState,
@@ -30,9 +31,7 @@ import type {
   StartPostActionSession,
 } from '../action-types'
 import { SelectComponents } from '../action-types'
-import type { PropertiesWithElementPath } from '../actions/action-utils'
 import {
-  getPropertiesToRemoveFromCommands,
   isClearInteractionSession,
   isCreateOrUpdateInteractionSession,
   isTransientAction,
@@ -59,40 +58,11 @@ import { isInsertMode } from '../editor-modes'
 import { patchedCreateRemixDerivedDataMemo } from './remix-derived-data'
 import { allowedToEditProject } from './collaborative-editing'
 import { canMeasurePerformance } from '../../../core/performance/performance-utils'
-import type { ElementPath } from 'utopia-shared/src/types'
-
-export interface PropertiesToPatch {
-  type: 'properties-to-patch'
-  propertiesToPatch: PropertiesWithElementPath[]
-}
-
-export const propertiesToPatch = (props: PropertiesWithElementPath[]): PropertiesToPatch => ({
-  type: 'properties-to-patch',
-  propertiesToPatch: props,
-})
-
-export interface NormalizationData {
-  type: 'normalization-data'
-  elementsToNormalize: ElementPath[]
-  propertiesToRemove: PropertiesWithElementPath[]
-}
-
-export const normalizationData = (
-  elementsToNormalize: ElementPath[],
-  propsToRemove: PropertiesWithElementPath[],
-): NormalizationData => ({
-  type: 'normalization-data',
-  elementsToNormalize: elementsToNormalize,
-  propertiesToRemove: propsToRemove,
-})
-
-export type PostProcessingData = PropertiesToPatch | NormalizationData
 
 interface HandleStrategiesResult {
   unpatchedEditorState: EditorState
   patchedEditorState: EditorState
   newStrategyState: StrategyState
-  postProcessingData: PostProcessingData | null
 }
 
 export function interactionFinished(
@@ -158,10 +128,6 @@ export function interactionFinished(
       unpatchedEditorState: finalEditor,
       patchedEditorState: finalEditor,
       newStrategyState: withClearedSession,
-      postProcessingData: normalizationData(
-        strategyResult.elementsToRerender,
-        getPropertiesToRemoveFromCommands(strategyResult.commands),
-      ),
     }
   } else {
     // Try to keep any updated metadata that may have been populated into here
@@ -177,7 +143,6 @@ export function interactionFinished(
       unpatchedEditorState: newEditorState,
       patchedEditorState: newEditorState,
       newStrategyState: withClearedSession,
-      postProcessingData: null,
     }
   }
 }
@@ -206,7 +171,6 @@ export function interactionHardReset(
       unpatchedEditorState: newEditorState,
       patchedEditorState: newEditorState,
       newStrategyState: withClearedSession,
-      postProcessingData: null,
     }
   } else {
     const resetInteractionSession = interactionSessionHardReset(interactionSession)
@@ -259,19 +223,17 @@ export function interactionHardReset(
 
       return {
         unpatchedEditorState: newEditorState,
-        patchedEditorState: applyElementsToRerenderFromStrategyResult(
+        patchedEditorState: applyElementsToRerenderFromStrategyResultAndPatchRemovedProps(
           commandResult.editorState,
           strategyResult,
         ),
         newStrategyState: newStrategyState,
-        postProcessingData: null,
       }
     } else {
       return {
         unpatchedEditorState: newEditorState,
         patchedEditorState: newEditorState,
         newStrategyState: withClearedSession,
-        postProcessingData: null,
       }
     }
   }
@@ -299,7 +261,6 @@ export function interactionUpdate(
       unpatchedEditorState: newEditorState,
       patchedEditorState: newEditorState,
       newStrategyState: result.strategyState,
-      postProcessingData: null,
     }
   } else {
     // Determine the new canvas strategy to run this time around.
@@ -382,7 +343,6 @@ export function interactionStart(
       unpatchedEditorState: newEditorState,
       patchedEditorState: newEditorState,
       newStrategyState: withClearedSession,
-      postProcessingData: null,
     }
   } else {
     // Determine the new canvas strategy to run this time around.
@@ -431,19 +391,17 @@ export function interactionStart(
 
       return {
         unpatchedEditorState: newEditorState,
-        patchedEditorState: applyElementsToRerenderFromStrategyResult(
+        patchedEditorState: applyElementsToRerenderFromStrategyResultAndPatchRemovedProps(
           commandResult.editorState,
           strategyResult,
         ),
         newStrategyState: newStrategyState,
-        postProcessingData: null,
       }
     } else {
       return {
         unpatchedEditorState: newEditorState,
         patchedEditorState: newEditorState,
         newStrategyState: withClearedSession,
-        postProcessingData: null,
       }
     }
   }
@@ -471,7 +429,6 @@ export function interactionCancel(
     unpatchedEditorState: updatedEditorState,
     patchedEditorState: updatedEditorState,
     newStrategyState: createEmptyStrategyState({}, {}, {}),
-    postProcessingData: null,
   }
 }
 
@@ -541,19 +498,17 @@ function handleUserChangedStrategy(
 
     return {
       unpatchedEditorState: newEditorState,
-      patchedEditorState: applyElementsToRerenderFromStrategyResult(
+      patchedEditorState: applyElementsToRerenderFromStrategyResultAndPatchRemovedProps(
         commandResult.editorState,
         strategyResult,
       ),
       newStrategyState: newStrategyState,
-      postProcessingData: null,
     }
   } else {
     return {
       unpatchedEditorState: newEditorState,
       patchedEditorState: newEditorState,
       newStrategyState: strategyState,
-      postProcessingData: null,
     }
   }
 }
@@ -629,12 +584,11 @@ function handleAccumulatingKeypresses(
 
       return {
         unpatchedEditorState: updatedEditorState,
-        patchedEditorState: applyElementsToRerenderFromStrategyResult(
+        patchedEditorState: applyElementsToRerenderFromStrategyResultAndPatchRemovedProps(
           commandResult.editorState,
           strategyResult,
         ),
         newStrategyState: newStrategyState,
-        postProcessingData: null,
       }
     }
   }
@@ -642,7 +596,6 @@ function handleAccumulatingKeypresses(
     unpatchedEditorState: newEditorState,
     patchedEditorState: newEditorState,
     newStrategyState: strategyState,
-    postProcessingData: null,
   }
 }
 
@@ -698,21 +651,17 @@ function handleUpdate(
     }
     return {
       unpatchedEditorState: newEditorState,
-      patchedEditorState: applyElementsToRerenderFromStrategyResult(
+      patchedEditorState: applyElementsToRerenderFromStrategyResultAndPatchRemovedProps(
         commandResult.editorState,
         strategyResult,
       ),
       newStrategyState: newStrategyState,
-      postProcessingData: propertiesToPatch(
-        getPropertiesToRemoveFromCommands(strategyResult.commands),
-      ),
     }
   } else {
     return {
       unpatchedEditorState: newEditorState,
       patchedEditorState: newEditorState,
       newStrategyState: strategyState,
-      postProcessingData: null,
     }
   }
 }
@@ -732,7 +681,6 @@ export function handleStrategies(
   let unpatchedEditorState: EditorState
   let patchedEditorState: EditorState
   let newStrategyState: StrategyState
-  let postProcessingData: PostProcessingData | null
   if (allowedToEditProject(storedState.userState.loginState, storedState.projectServerState)) {
     const strategiesResult = handleStrategiesInner(
       strategies,
@@ -743,12 +691,10 @@ export function handleStrategies(
     unpatchedEditorState = strategiesResult.unpatchedEditorState
     patchedEditorState = strategiesResult.patchedEditorState
     newStrategyState = strategiesResult.newStrategyState
-    postProcessingData = strategiesResult.postProcessingData
   } else {
     unpatchedEditorState = result.unpatchedEditor
     patchedEditorState = result.unpatchedEditor
     newStrategyState = result.strategyState
-    postProcessingData = null
   }
 
   const patchedEditorWithMetadata: EditorState = {
@@ -790,7 +736,6 @@ export function handleStrategies(
     patchedEditorState: patchedEditorWithMetadata,
     patchedDerivedState: patchedDerivedState,
     newStrategyState: newStrategyState,
-    postProcessingData: postProcessingData,
   }
 }
 
@@ -865,7 +810,6 @@ function handleStrategiesInner(
       unpatchedEditorState: result.unpatchedEditor, // we return the fresh unpatchedEditor, containing the up-to-date domMetadata and spyMetadata
       patchedEditorState: oldPatchedEditorWithNewMetadata, // the previous patched editor with updated metadata
       newStrategyState: storedState.strategyState,
-      postProcessingData: null,
     }
   } else if (storedState.unpatchedEditor.canvas.interactionSession == null) {
     if (result.unpatchedEditor.canvas.interactionSession == null) {
@@ -873,7 +817,6 @@ function handleStrategiesInner(
         unpatchedEditorState: result.unpatchedEditor,
         patchedEditorState: result.unpatchedEditor,
         newStrategyState: result.strategyState,
-        postProcessingData: null,
       }
     } else {
       return interactionStart(strategies, storedState, result)
diff --git a/editor/src/components/editor/store/dispatch.tsx b/editor/src/components/editor/store/dispatch.tsx
index 83633b5b5bbe..6934b776d1bb 100644
--- a/editor/src/components/editor/store/dispatch.tsx
+++ b/editor/src/components/editor/store/dispatch.tsx
@@ -7,7 +7,6 @@ import type { CanvasAction } from '../../canvas/canvas-types'
 import type { LocalNavigatorAction } from '../../navigator/actions'
 import type { EditorAction, EditorDispatch, UpdateMetadataInEditorState } from '../action-types'
 import { isLoggedIn } from '../action-types'
-import type { PropertiesWithElementPath } from '../actions/action-utils'
 import {
   isTransientAction,
   isUndoOrRedo,
@@ -15,8 +14,6 @@ import {
   checkAnyWorkerUpdates,
   onlyActionIsWorkerParsedUpdate,
   simpleStringifyActions,
-  getElementsToNormalizeFromActions,
-  getPropertiesToRemoveFromActions,
 } from '../actions/action-utils'
 import * as EditorActions from '../actions/action-creators'
 import * as History from '../history'
@@ -62,8 +59,7 @@ import {
   getProjectChanges,
   sendVSCodeChanges,
 } from './vscode-changes'
-import type { NormalizationData, PostProcessingData } from './dispatch-strategies'
-import { handleStrategies, normalizationData, updatePostActionState } from './dispatch-strategies'
+import { handleStrategies, updatePostActionState } from './dispatch-strategies'
 
 import type { MetaCanvasStrategy } from '../../canvas/canvas-strategies/canvas-strategies'
 import { RegisteredCanvasStrategies } from '../../canvas/canvas-strategies/canvas-strategies'
@@ -92,10 +88,7 @@ import {
   startPerformanceMeasure,
 } from '../../../core/performance/performance-utils'
 import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
-import { getActivePlugin } from '../../canvas/plugins/style-plugins'
-import { mapDropNulls } from '../../../core/shared/array-utils'
-import { propertyToSet, updateBulkProperties } from '../../canvas/commands/set-property-command'
-import { foldAndApplyCommandsSimple } from '../../canvas/commands/commands'
+import { resetUpdatedProperties } from '../../canvas/plugins/style-plugins'
 
 type DispatchResultFields = {
   nothingChanged: boolean
@@ -1002,56 +995,24 @@ function editorDispatchInner(
       )
     }
 
-    const {
-      unpatchedEditorState: unpatchedEditorStateFromStrategies,
-      patchedEditorState: patchedEditorStateFromStrategies,
-      newStrategyState,
-      patchedDerivedState,
-      postProcessingData: postProcessingDataFromStrategies,
-    } = handleStrategies(
-      strategiesToUse,
-      dispatchedActions,
-      storedState,
-      result,
-      storedState.patchedDerived,
-    )
-
-    const elementsToNormalizeFromActions = getElementsToNormalizeFromActions(dispatchedActions)
-    const propertiesToRemoveFromActions = getPropertiesToRemoveFromActions(dispatchedActions)
-
-    const elementsToNormalize = [
-      ...elementsToNormalizeFromActions,
-      ...(postProcessingDataFromStrategies?.type === 'normalization-data'
-        ? postProcessingDataFromStrategies.elementsToNormalize
-        : []),
-    ]
-
-    const propertiesToRemove = [
-      ...propertiesToRemoveFromActions,
-      ...(postProcessingDataFromStrategies?.type === 'normalization-data'
-        ? postProcessingDataFromStrategies.propertiesToRemove
-        : []),
-    ]
-
-    const unpatchedEditor = runRemovedPropertyPatchingAndNormalization(
-      unpatchedEditorStateFromStrategies,
-      normalizationData(elementsToNormalize, propertiesToRemove),
-    )
+    const storedStateForStrategies: EditorStoreFull = {
+      ...storedState,
+      patchedEditor: resetUpdatedProperties(storedState.patchedEditor),
+      unpatchedEditor: resetUpdatedProperties(storedState.unpatchedEditor),
+    }
 
-    const patchedEditor =
-      postProcessingDataFromStrategies === null
-        ? patchedEditorStateFromStrategies
-        : runRemovedPropertyPatchingAndNormalization(
-            patchedEditorStateFromStrategies,
-            addNormalizationDataFromActions(
-              postProcessingDataFromStrategies,
-              normalizationData(elementsToNormalizeFromActions, propertiesToRemoveFromActions),
-            ),
-          )
+    const { unpatchedEditorState, patchedEditorState, newStrategyState, patchedDerivedState } =
+      handleStrategies(
+        strategiesToUse,
+        dispatchedActions,
+        storedStateForStrategies,
+        result,
+        storedStateForStrategies.patchedDerived,
+      )
 
     return {
-      unpatchedEditor: unpatchedEditor,
-      patchedEditor: patchedEditor,
+      unpatchedEditor: unpatchedEditorState,
+      patchedEditor: patchedEditorState,
       unpatchedDerived: frozenDerivedState,
       patchedDerived: patchedDerivedState,
       strategyState: newStrategyState,
@@ -1109,78 +1070,3 @@ function resetUnpatchedEditorTransientFields(editor: EditorState): EditorState {
     },
   }
 }
-
-function addNormalizationDataFromActions(
-  data: PostProcessingData,
-  fromActions: NormalizationData,
-): PostProcessingData {
-  if (data.type === 'properties-to-patch') {
-    return data
-  }
-
-  return normalizationData(
-    [...data.elementsToNormalize, ...fromActions.elementsToNormalize],
-    [...data.propertiesToRemove, ...fromActions.propertiesToRemove],
-  )
-}
-
-const PropertyDefaultValues: Record<string, string> = {
-  gap: '0px',
-}
-
-function patchRemovedProperties(
-  editor: EditorState,
-  propertiesToPatch: PropertiesWithElementPath[],
-): EditorState {
-  const propertiesToSetCommands = mapDropNulls(
-    ({ elementPath, properties }) =>
-      getJSXElementFromProjectContents(elementPath, editor.projectContents) == null
-        ? null
-        : updateBulkProperties(
-            'always',
-            elementPath,
-            mapDropNulls((property) => {
-              const [maybeStyle, maybeCSSProp] = property.propertyElements
-              if (maybeStyle !== 'style' || maybeCSSProp == null) {
-                return null
-              }
-
-              const defaultValue = PropertyDefaultValues[maybeCSSProp]
-              if (defaultValue == null) {
-                return null
-              }
-              return propertyToSet(property, defaultValue)
-            }, properties),
-          ),
-    propertiesToPatch,
-  )
-  return foldAndApplyCommandsSimple(editor, propertiesToSetCommands)
-}
-
-function runRemovedPropertyPatchingAndNormalization(
-  editorState: EditorState,
-  postProcessingData: PostProcessingData,
-): EditorState {
-  if (postProcessingData.type === 'properties-to-patch') {
-    return postProcessingData.propertiesToPatch.length === 0
-      ? editorState
-      : patchRemovedProperties(editorState, postProcessingData.propertiesToPatch)
-  }
-
-  if (postProcessingData.type === 'normalization-data') {
-    if (
-      postProcessingData.elementsToNormalize.length === 0 &&
-      postProcessingData.propertiesToRemove.length === 0
-    ) {
-      return editorState
-    }
-
-    return getActivePlugin(editorState).normalizeFromInlineStyle(
-      editorState,
-      postProcessingData.elementsToNormalize,
-      postProcessingData.propertiesToRemove,
-    )
-  }
-
-  assertNever(postProcessingData)
-}
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index ed59bee44c92..bb41d85ff07a 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -198,6 +198,7 @@ import {
   emptyProjectRequirements,
   type ProjectRequirements,
 } from '../../../core/shared/import/project-health-check/utopia-requirements-types'
+import type { UpdatedProperties } from '../../canvas/plugins/style-plugins'
 import { isFeatureEnabled } from '../../../utils/feature-switches'
 
 const ObjectPathImmutable: any = OPI
@@ -1484,6 +1485,7 @@ export interface EditorState {
   collaborators: Collaborator[]
   sharingDialogOpen: boolean
   editorRemixConfig: EditorRemixConfig
+  propertiesUpdatedDuringInteraction: UpdatedProperties
 }
 
 export function editorState(
@@ -1571,6 +1573,7 @@ export function editorState(
   collaborators: Collaborator[],
   sharingDialogOpen: boolean,
   remixConfig: EditorRemixConfig,
+  propertiesUpdatedDuringInteraction: UpdatedProperties,
 ): EditorState {
   return {
     id: id,
@@ -1657,6 +1660,7 @@ export function editorState(
     collaborators: collaborators,
     sharingDialogOpen: sharingDialogOpen,
     editorRemixConfig: remixConfig,
+    propertiesUpdatedDuringInteraction: propertiesUpdatedDuringInteraction,
   }
 }
 
@@ -2743,6 +2747,7 @@ export function createEditorState(dispatch: EditorDispatch): EditorState {
     editorRemixConfig: {
       errorBoundaryHandling: 'ignore-error-boundaries',
     },
+    propertiesUpdatedDuringInteraction: {},
   }
 }
 
@@ -3113,6 +3118,7 @@ export function editorModelFromPersistentModel(
     editorRemixConfig: {
       errorBoundaryHandling: 'ignore-error-boundaries',
     },
+    propertiesUpdatedDuringInteraction: {},
   }
   return editor
 }
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 8eaab5d78983..1cf91fa4ebf5 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -657,6 +657,10 @@ import {
   newProjectRequirements,
   requirementResolution,
 } from '../../../core/shared/import/project-health-check/utopia-requirements-types'
+import type {
+  StylePropsUpdatedDuringInteraction,
+  UpdatedProperties,
+} from '../../canvas/plugins/style-plugins'
 
 export function ElementPropertyPathKeepDeepEquality(): KeepDeepEqualityCall<ElementPropertyPath> {
   return combine2EqualityCalls(
@@ -5220,6 +5224,21 @@ export const RemixConfigKeepDeepEquality: KeepDeepEqualityCall<EditorRemixConfig
     },
   )
 
+export const StylePropsUpdatedDuringInteractionKeepDeepEquality: KeepDeepEqualityCall<StylePropsUpdatedDuringInteraction> =
+  combine2EqualityCalls(
+    (data) => data.propertiesDeleted,
+    arrayDeepEquality(StringKeepDeepEquality),
+    (data) => data.propertiesUpdated,
+    arrayDeepEquality(StringKeepDeepEquality),
+    (propertiesDeleted, propertiesUpdated) => ({
+      propertiesDeleted,
+      propertiesUpdated,
+    }),
+  )
+
+export const PropertiesUpdatedDuringInteractionKeepDeepEquality: KeepDeepEqualityCall<UpdatedProperties> =
+  objectDeepEquality(StylePropsUpdatedDuringInteractionKeepDeepEquality)
+
 export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
   oldValue,
   newValue,
@@ -5537,6 +5556,12 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
     newValue.editorRemixConfig,
   )
 
+  const propertiesUpdatedDuringInteractionResults =
+    PropertiesUpdatedDuringInteractionKeepDeepEquality(
+      oldValue.propertiesUpdatedDuringInteraction,
+      newValue.propertiesUpdatedDuringInteraction,
+    )
+
   const areEqual =
     idResult.areEqual &&
     forkedFromProjectIdResult.areEqual &&
@@ -5620,7 +5645,8 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
     forkingResults.areEqual &&
     collaboratorsResults.areEqual &&
     sharingDialogOpenResults.areEqual &&
-    remixConfigResults.areEqual
+    remixConfigResults.areEqual &&
+    propertiesUpdatedDuringInteractionResults.areEqual
 
   if (areEqual) {
     return keepDeepEqualityResult(oldValue, true)
@@ -5710,6 +5736,7 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
       collaboratorsResults.value,
       sharingDialogOpenResults.value,
       remixConfigResults.value,
+      propertiesUpdatedDuringInteractionResults.value,
     )
 
     return keepDeepEqualityResult(newEditorState, false)
diff --git a/editor/src/components/editor/store/store-hook-substore-helpers.ts b/editor/src/components/editor/store/store-hook-substore-helpers.ts
index 94249fa36087..a0fb1af4feb6 100644
--- a/editor/src/components/editor/store/store-hook-substore-helpers.ts
+++ b/editor/src/components/editor/store/store-hook-substore-helpers.ts
@@ -179,4 +179,5 @@ export const EmptyEditorStateForKeysOnly: EditorState = {
   editorRemixConfig: {
     errorBoundaryHandling: 'ignore-error-boundaries',
   },
+  propertiesUpdatedDuringInteraction: {},
 }

From a668e008c59439cae5ef7bdd606839236cbe6b9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Tue, 12 Nov 2024 14:35:00 +0100
Subject: [PATCH 212/272] more granular unparsable prop detection for
 `StyleInfo` (#6631)

## Problem
The `StyleInfo` type doesn't express the state when a property is set,
but it cannot parsed in the desired format. For example, in `style={{
top: '300px', left: theme.left + 50 }}`, `top` can be parsed as a css
number, but left cannot be.

We need to be able to express this, since some code
(`AdjustCssLengthProperties` and `SetCSSLength` for example) need to
handle it. Once `AdjustCssLengthProperties` and `SetCSSLength` use this
infra, we can make more strategies Tailwind-compatible.

## Fix
Extend the `StyleInfo` type, and fix any affected code.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/components/canvas/canvas-types.ts  |  44 ++++++--
 editor/src/components/canvas/gap-utils.ts     |   7 +-
 .../plugins/inline-style-plugin.spec.ts       | 105 ++++++++++++++++++
 .../canvas/plugins/inline-style-plugin.ts     |  69 ++++++++----
 .../canvas/plugins/tailwind-style-plugin.ts   |  12 +-
 5 files changed, 198 insertions(+), 39 deletions(-)
 create mode 100644 editor/src/components/canvas/plugins/inline-style-plugin.spec.ts

diff --git a/editor/src/components/canvas/canvas-types.ts b/editor/src/components/canvas/canvas-types.ts
index b9b8a2f16f7b..53466dd1f20b 100644
--- a/editor/src/components/canvas/canvas-types.ts
+++ b/editor/src/components/canvas/canvas-types.ts
@@ -537,19 +537,47 @@ export type SelectionLocked = 'locked' | 'locked-hierarchy' | 'selectable'
 
 export type PropertyTag = { type: 'hover' } | { type: 'breakpoint'; name: string }
 
-export interface WithPropertyTag<T> {
-  tag: PropertyTag | null
+interface CSSStylePropertyNotFound {
+  type: 'not-found'
+}
+
+interface CSSStylePropertyNotParsable {
+  type: 'not-parsable'
+}
+
+interface ParsedCSSStyleProperty<T> {
+  type: 'property'
+  tags: PropertyTag[]
   value: T
 }
 
-export const withPropertyTag = <T>(value: T): WithPropertyTag<T> => ({
-  tag: null,
-  value: value,
-})
+export type CSSStyleProperty<T> =
+  | CSSStylePropertyNotFound
+  | CSSStylePropertyNotParsable
+  | ParsedCSSStyleProperty<T>
+
+export function cssStylePropertyNotFound(): CSSStylePropertyNotFound {
+  return { type: 'not-found' }
+}
+
+export function cssStylePropertyNotParsable(): CSSStylePropertyNotParsable {
+  return { type: 'not-parsable' }
+}
+
+export function cssStyleProperty<T>(value: T): ParsedCSSStyleProperty<T> {
+  return { type: 'property', tags: [], value: value }
+}
+
+export function maybePropertyValue<T>(property: CSSStyleProperty<T>): T | null {
+  if (property.type === 'property') {
+    return property.value
+  }
+  return null
+}
 
-export type FlexGapInfo = WithPropertyTag<CSSNumber>
+export type FlexGapInfo = CSSStyleProperty<CSSNumber>
 
-export type FlexDirectionInfo = WithPropertyTag<FlexDirection>
+export type FlexDirectionInfo = CSSStyleProperty<FlexDirection>
 
 export interface StyleInfo {
   gap: FlexGapInfo | null
diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
index 17387f867068..af9c5103cba4 100644
--- a/editor/src/components/canvas/gap-utils.ts
+++ b/editor/src/components/canvas/gap-utils.ts
@@ -17,7 +17,7 @@ import { canvasRectangle, isInfinityRectangle } from '../../core/shared/math-uti
 import type { ElementPath } from '../../core/shared/project-file-types'
 import { assertNever } from '../../core/shared/utils'
 import type { StyleInfo } from './canvas-types'
-import { CSSCursor } from './canvas-types'
+import { CSSCursor, maybePropertyValue } from './canvas-types'
 import type { CSSNumberWithRenderedValue } from './controls/select-mode/controls-common'
 import type { CSSNumber, FlexDirection } from '../inspector/common/css-utils'
 import type { Sides } from 'utopia-api/core'
@@ -34,6 +34,7 @@ import { treatElementAsFragmentLike } from './canvas-strategies/strategies/fragm
 import type { AllElementProps } from '../editor/store/editor-state'
 import type { GridData } from './controls/grid-controls-for-strategies'
 import { getNullableAutoOrTemplateBaseString } from './controls/grid-controls-for-strategies'
+import { optionalMap } from '../../core/shared/optional-utils'
 
 export interface PathWithBounds {
   bounds: CanvasRectangle
@@ -238,14 +239,14 @@ export function maybeFlexGapData(
   }
 
   const gap = element.specialSizeMeasurements.gap ?? 0
-  const gapFromReader = info.gap?.value
+  const gapFromReader = optionalMap(maybePropertyValue, info.gap)
 
   const flexDirection = element.specialSizeMeasurements.flexDirection ?? 'row'
 
   return {
     value: {
       renderedValuePx: gap,
-      value: gapFromReader ?? null,
+      value: gapFromReader,
     },
     direction: flexDirection,
   }
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts b/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts
new file mode 100644
index 000000000000..fefb978860c4
--- /dev/null
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts
@@ -0,0 +1,105 @@
+import * as EP from '../../../core/shared/element-path'
+import { cssNumber } from '../../inspector/common/css-utils'
+import {
+  cssStyleProperty,
+  cssStylePropertyNotFound,
+  cssStylePropertyNotParsable,
+} from '../canvas-types'
+import type { EditorRenderResult } from '../ui-jsx.test-utils'
+import { renderTestEditorWithCode } from '../ui-jsx.test-utils'
+import { InlineStylePlugin } from './inline-style-plugin'
+
+describe('inline style plugin', () => {
+  it('can parse style info from element', async () => {
+    const editor = await renderTestEditorWithCode(
+      `
+import React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='scene'
+      commentId='scene'
+      data-uid='scene'
+      style={{
+        width: 700,
+        height: 759,
+        position: 'absolute',
+        left: 212,
+        top: 128,
+      }}
+    >
+      <div
+        data-uid='div'
+        style={{ display: 'flex', flexDirection: 'column', gap: '2rem'}}
+      />
+    </Scene>
+  </Storyboard>
+)
+
+`,
+      'await-first-dom-report',
+    )
+
+    const styleInfo = getStyleInfoFromInlineStyle(editor)
+
+    expect(styleInfo).not.toBeNull()
+    const { flexDirection, gap } = styleInfo!
+    expect(flexDirection).toEqual(cssStyleProperty('column'))
+    expect(gap).toEqual(cssStyleProperty(cssNumber(2, 'rem')))
+  })
+
+  it('can parse style info with missing/unparsable props', async () => {
+    const editor = await renderTestEditorWithCode(
+      `
+  import React from 'react'
+  import { Scene, Storyboard } from 'utopia-api'
+
+  const gap = { small: '1rem' }
+
+  export var storyboard = (
+    <Storyboard data-uid='sb'>
+      <Scene
+        id='scene'
+        commentId='scene'
+        data-uid='scene'
+        style={{
+          width: 700,
+          height: 759,
+          position: 'absolute',
+          left: 212,
+          top: 128,
+        }}
+      >
+        <div
+          data-uid='div'
+          style={{ display: 'flex', gap: gap.small }}
+        />
+      </Scene>
+    </Storyboard>
+  )
+  
+  `,
+      'await-first-dom-report',
+    )
+
+    const styleInfo = getStyleInfoFromInlineStyle(editor)
+
+    expect(styleInfo).not.toBeNull()
+    const { flexDirection, gap } = styleInfo!
+    expect(flexDirection).toEqual(cssStylePropertyNotFound())
+    expect(gap).toEqual(cssStylePropertyNotParsable())
+  })
+})
+
+function getStyleInfoFromInlineStyle(editor: EditorRenderResult) {
+  const { jsxMetadata, projectContents, elementPathTree } = editor.getEditorState().editor
+
+  const styleInfoReader = InlineStylePlugin.styleInfoFactory({
+    metadata: jsxMetadata,
+    projectContents: projectContents,
+    elementPathTree: elementPathTree,
+  })
+  const styleInfo = styleInfoReader(EP.fromString('sb/scene/div'))
+  return styleInfo
+}
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.ts b/editor/src/components/canvas/plugins/inline-style-plugin.ts
index 5ed4f6b03f0b..5b22a0fb5fae 100644
--- a/editor/src/components/canvas/plugins/inline-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.ts
@@ -1,43 +1,66 @@
-import { getLayoutProperty } from '../../../core/layout/getLayoutProperty'
+import type { JSXAttributes, PropertyPath } from 'utopia-shared/src/types'
 import type { StyleLayoutProp } from '../../../core/layout/layout-helpers-new'
-import { MetadataUtils } from '../../../core/model/element-metadata-utils'
-import { mapDropNulls } from '../../../core/shared/array-utils'
-import { defaultEither, isLeft, mapEither, right } from '../../../core/shared/either'
-import type { JSXElement } from '../../../core/shared/element-template'
+import * as Either from '../../../core/shared/either'
+import {
+  getJSXAttributesAtPath,
+  jsxSimpleAttributeToValue,
+} from '../../../core/shared/jsx-attribute-utils'
+import type { ModifiableAttribute } from '../../../core/shared/jsx-attributes'
+import { getJSXElementFromProjectContents } from '../../editor/store/editor-state'
+import { cssParsers, type ParsedCSSProperties } from '../../inspector/common/css-utils'
+import { stylePropPathMappingFn } from '../../inspector/common/property-path-hooks'
+import type { CSSStyleProperty } from '../canvas-types'
 import {
-  emptyComments,
-  isJSXElement,
-  jsExpressionValue,
-} from '../../../core/shared/element-template'
+  cssStyleProperty,
+  cssStylePropertyNotParsable,
+  cssStylePropertyNotFound,
+} from '../canvas-types'
+import { mapDropNulls } from '../../../core/shared/array-utils'
+import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
 import * as PP from '../../../core/shared/property-path'
-import { styleStringInArray } from '../../../utils/common-constants'
-import type { ParsedCSSProperties } from '../../inspector/common/css-utils'
-import { withPropertyTag, type WithPropertyTag } from '../canvas-types'
 import { applyValuesAtPath, deleteValuesAtPath } from '../commands/utils/property-utils'
 import type { StylePlugin } from './style-plugins'
 
+function getPropValue(attributes: JSXAttributes, path: PropertyPath): ModifiableAttribute {
+  const result = getJSXAttributesAtPath(attributes, path)
+  if (result.remainingPath != null) {
+    return { type: 'ATTRIBUTE_NOT_FOUND' }
+  }
+  return result.attribute
+}
+
 function getPropertyFromInstance<P extends StyleLayoutProp, T = ParsedCSSProperties[P]>(
   prop: P,
-  element: JSXElement,
-): WithPropertyTag<T> | null {
-  return defaultEither(
-    null,
-    mapEither(withPropertyTag, getLayoutProperty(prop, right(element.props), styleStringInArray)),
-  ) as WithPropertyTag<T> | null
+  attributes: JSXAttributes,
+): CSSStyleProperty<NonNullable<T>> | null {
+  const attribute = getPropValue(attributes, stylePropPathMappingFn(prop, ['style']))
+  if (attribute.type === 'ATTRIBUTE_NOT_FOUND') {
+    return cssStylePropertyNotFound()
+  }
+  const simpleValue = jsxSimpleAttributeToValue(attribute)
+  if (Either.isLeft(simpleValue)) {
+    return cssStylePropertyNotParsable()
+  }
+  const parser = cssParsers[prop] as (value: unknown) => Either.Either<string, T>
+  const parsed = parser(simpleValue.value)
+  if (Either.isLeft(parsed) || parsed.value == null) {
+    return cssStylePropertyNotParsable()
+  }
+  return cssStyleProperty(parsed.value)
 }
 
 export const InlineStylePlugin: StylePlugin = {
   name: 'Inline Style',
   styleInfoFactory:
-    ({ metadata }) =>
+    ({ projectContents }) =>
     (elementPath) => {
-      const instance = MetadataUtils.findElementByElementPath(metadata, elementPath)
-      if (instance == null || isLeft(instance.element) || !isJSXElement(instance.element.value)) {
+      const element = getJSXElementFromProjectContents(elementPath, projectContents)
+      if (element == null) {
         return null
       }
 
-      const gap = getPropertyFromInstance('gap', instance.element.value)
-      const flexDirection = getPropertyFromInstance('flexDirection', instance.element.value)
+      const gap = getPropertyFromInstance('gap', element.props)
+      const flexDirection = getPropertyFromInstance('flexDirection', element.props)
 
       return {
         gap: gap,
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
index b0fd596f0800..9747c65a1e08 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -6,18 +6,20 @@ import type { Parser } from '../../inspector/common/css-utils'
 import { cssParsers } from '../../inspector/common/css-utils'
 import { mapDropNulls } from '../../../core/shared/array-utils'
 import type { StylePlugin } from './style-plugins'
-import type { WithPropertyTag } from '../canvas-types'
-import { withPropertyTag } from '../canvas-types'
 import type { Config } from 'tailwindcss/types/config'
+import { cssStyleProperty, type CSSStyleProperty } from '../canvas-types'
 import * as UCL from './tailwind-style-plugin-utils/update-class-list'
 import { assertNever } from '../../../core/shared/utils'
 
-function parseTailwindProperty<T>(value: unknown, parse: Parser<T>): WithPropertyTag<T> | null {
+function parseTailwindProperty<T>(
+  value: unknown,
+  parse: Parser<T>,
+): CSSStyleProperty<NonNullable<T>> | null {
   const parsed = parse(value, null)
-  if (isLeft(parsed)) {
+  if (isLeft(parsed) || parsed.value == null) {
     return null
   }
-  return withPropertyTag(parsed.value)
+  return cssStyleProperty(parsed.value)
 }
 
 const TailwindPropertyMapping: Record<string, string> = {

From 2daa9a761b64f58b644808547a8036e72cd85b70 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 12 Nov 2024 17:01:28 +0100
Subject: [PATCH 213/272] Parse grid spans, use `csstree` for placement parsing
 (#6629)

**Problem:**

1. Parsing an element placing does not use `csstree`
2. Spans are not parsed nor represented

This is a purely-parsing PR, laying the groundwork to have strategies
and interactions play nicely with spanning items.

**Fix:**

1. Use `csstree` to parse grid placement
2. Parse `span` coming form parsing props

Fixes #6628
---
 .../strategies/grid-helpers.ts                |  50 ++++--
 .../canvas/controls/grid-controls.tsx         |  65 ++++----
 editor/src/components/canvas/dom-walker.ts    |  89 +++++-----
 .../store/store-deep-equality-instances.ts    |  63 +++++++-
 .../inspector/common/css-utils.spec.ts        | 152 +++++++++++++++++-
 .../components/inspector/common/css-utils.ts  | 112 +++++++++++--
 .../src/components/inspector/flex-section.tsx |   9 +-
 .../grid-cell-subsection.tsx                  |  48 +++++-
 editor/src/core/shared/element-template.ts    |  61 ++++++-
 9 files changed, 518 insertions(+), 131 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index fbfef128c77e..23a1bd1e8794 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -5,14 +5,16 @@ import * as EP from '../../../../core/shared/element-path'
 import type {
   ElementInstanceMetadataMap,
   GridAutoOrTemplateBase,
+  GridPositionOrSpan,
   GridPositionValue,
+  GridSpan,
   SpecialSizeMeasurements,
 } from '../../../../core/shared/element-template'
 import {
+  isGridSpan,
   type ElementInstanceMetadata,
   type GridContainerProperties,
   type GridElementProperties,
-  type GridPosition,
 } from '../../../../core/shared/element-template'
 import type { CanvasRectangle } from '../../../../core/shared/math-utils'
 import * as PP from '../../../../core/shared/property-path'
@@ -42,10 +44,25 @@ import {
   gridCellCoordinates,
 } from './grid-cell-bounds'
 
-export function gridPositionToValue(p: GridPosition | null | undefined): string | number | null {
+export function gridPositionToValue(
+  p: GridPositionOrSpan | null | undefined,
+  spanOffset: GridPositionOrSpan | null,
+): string | number | null {
   if (p == null) {
     return null
   }
+
+  const offset = isGridSpan(spanOffset) && spanOffset.type === 'SPAN_NUMERIC' ? spanOffset.value : 0
+
+  if (isGridSpan(p)) {
+    switch (p.type) {
+      case 'SPAN_AREA':
+        return null // # TODO fill this in once we support grid areas
+      case 'SPAN_NUMERIC':
+        return p.value + offset
+    }
+  }
+
   if (isCSSKeyword(p)) {
     return p.value
   }
@@ -69,10 +86,10 @@ export function setGridPropsCommands(
       PP.create('style', 'gridRowEnd'),
     ]),
   ]
-  const columnStart = gridPositionToValue(gridProps.gridColumnStart)
-  const columnEnd = gridPositionToValue(gridProps.gridColumnEnd)
-  const rowStart = gridPositionToValue(gridProps.gridRowStart)
-  const rowEnd = gridPositionToValue(gridProps.gridRowEnd)
+  const columnStart = gridPositionToValue(gridProps.gridColumnStart, null)
+  const columnEnd = gridPositionToValue(gridProps.gridColumnEnd, gridProps.gridColumnStart ?? null)
+  const rowStart = gridPositionToValue(gridProps.gridRowStart, null)
+  const rowEnd = gridPositionToValue(gridProps.gridRowEnd, gridProps.gridRowStart ?? null)
 
   const lineColumnStart = asMaybeNamedLineOrValue(gridTemplate, 'column', columnStart)
   const lineColumnEnd = asMaybeNamedLineOrValue(gridTemplate, 'column', columnEnd)
@@ -149,7 +166,7 @@ function getGridChildCellCoordBoundsFromProps(
   // get the grid fixtures (start and end for column and row) from the element metadata
   function getGridProperty(field: keyof GridElementProperties, innerFallback: number) {
     const propValue = element.specialSizeMeasurements.elementGridProperties[field]
-    if (propValue == null || isCSSKeyword(propValue)) {
+    if (propValue == null || isCSSKeyword(propValue) || isGridSpan(propValue)) {
       return innerFallback
     }
     return propValue.numericalPosition ?? innerFallback
@@ -215,8 +232,19 @@ export function sortElementsByGridPosition(gridTemplateColumns: number) {
         return index
       }
 
-      const row = e.gridRowStart.numericalPosition ?? 1
-      const column = e.gridColumnStart.numericalPosition ?? 1
+      function maybeNumericalValue(dim: GridSpan | GridPositionValue) {
+        return isGridSpan(dim)
+          ? dim.type === 'SPAN_NUMERIC'
+            ? dim.value
+            : null
+          : dim.numericalPosition
+      }
+
+      const start = maybeNumericalValue(e.gridRowStart)
+      const end = maybeNumericalValue(e.gridColumnStart)
+
+      const row = start ?? 1
+      const column = end ?? 1
 
       return (row - 1) * gridTemplateColumns + column - 1
     }
@@ -225,8 +253,8 @@ export function sortElementsByGridPosition(gridTemplateColumns: number) {
   }
 }
 
-function isGridPositionNumericValue(p: GridPosition | null): p is GridPositionValue {
-  return p != null && !(isCSSKeyword(p) && p.value === 'auto')
+function isGridPositionNumericValue(p: GridPositionOrSpan | null): p is GridPositionValue {
+  return p != null && !(isCSSKeyword(p) && !isGridSpan(p) && p.value === 'auto')
 }
 
 export function getGridPositionIndex(props: {
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index b708bead4b9f..87bc49846aa1 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -16,9 +16,11 @@ import * as EP from '../../../core/shared/element-path'
 import type {
   ElementInstanceMetadataMap,
   GridAutoOrTemplateDimensions,
+  GridPositionOrSpan,
 } from '../../../core/shared/element-template'
 import {
   isGridAutoOrTemplateDimensions,
+  isGridSpan,
   type GridAutoOrTemplateBase,
 } from '../../../core/shared/element-template'
 import type { CanvasPoint, CanvasRectangle, LocalRectangle } from '../../../core/shared/math-utils'
@@ -30,7 +32,6 @@ import {
   pointsEqual,
   scaleRect,
   windowPoint,
-  zeroCanvasRect,
   zeroRectIfNullOrInfinity,
 } from '../../../core/shared/math-utils'
 import {
@@ -47,19 +48,9 @@ import { Modifier } from '../../../utils/modifiers'
 import { when } from '../../../utils/react-conditionals'
 import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useDispatch } from '../../editor/store/dispatch-context'
+import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
+import type { GridDimension, GridDiscreteDimension } from '../../inspector/common/css-utils'
 import {
-  Substores,
-  useEditorState,
-  useRefEditorState,
-  useSelectorWithCallback,
-} from '../../editor/store/store-hook'
-import type {
-  CSSNumber,
-  GridDimension,
-  GridDiscreteDimension,
-} from '../../inspector/common/css-utils'
-import {
-  cssNumberToString,
   isCSSKeyword,
   isDynamicGridRepeat,
   isGridCSSRepeat,
@@ -111,7 +102,7 @@ import { useResizeEdges } from './select-mode/use-resize-edges'
 import { getGridHelperStyleMatchingTargetGrid } from './grid-controls-helpers'
 import { isFillOrStretchModeAppliedOnSpecificSide } from '../../inspector/inspector-common'
 import type { PinOutlineProps } from './position-outline'
-import { PinOutline, PositionOutline, usePropsOrJSXAttributes } from './position-outline'
+import { PinOutline, usePropsOrJSXAttributes } from './position-outline'
 import { getLayoutProperty } from '../../../core/layout/getLayoutProperty'
 import { styleStringInArray } from '../../../utils/common-constants'
 
@@ -755,22 +746,24 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
 
       const columnFromProps = cell.specialSizeMeasurements.elementGridProperties.gridColumnStart
       const rowFromProps = cell.specialSizeMeasurements.elementGridProperties.gridRowStart
+
+      function getAxisValue(value: GridPositionOrSpan | null, counted: number): number {
+        if (
+          value == null ||
+          isCSSKeyword(value) ||
+          isGridSpan(value) ||
+          value.numericalPosition == null
+        ) {
+          return counted
+        }
+        return value.numericalPosition
+      }
       return {
         elementPath: cell.elementPath,
         globalFrame: cell.globalFrame,
         borderRadius: cell.specialSizeMeasurements.borderRadius,
-        column:
-          columnFromProps == null
-            ? countedColumn
-            : isCSSKeyword(columnFromProps)
-            ? countedColumn
-            : columnFromProps.numericalPosition ?? countedColumn,
-        row:
-          rowFromProps == null
-            ? countedRow
-            : isCSSKeyword(rowFromProps)
-            ? countedRow
-            : rowFromProps.numericalPosition ?? countedRow,
+        column: getAxisValue(columnFromProps, countedColumn),
+        row: getAxisValue(rowFromProps, countedRow),
         index: index,
       }
     }, children)
@@ -1933,15 +1926,23 @@ const GridElementContainingBlock = React.memo<GridElementContainingBlockProps>((
       const gridComputed = childMetadata.specialSizeMeasurements.elementGridProperties
       return {
         gridColumnStart:
-          gridPositionToValue(gridFromProps.gridColumnStart ?? gridComputed.gridColumnStart) ??
-          undefined,
+          gridPositionToValue(
+            gridFromProps.gridColumnStart ?? gridComputed.gridColumnStart,
+            null,
+          ) ?? undefined,
         gridColumnEnd:
-          gridPositionToValue(gridFromProps.gridColumnEnd ?? gridComputed.gridColumnEnd) ??
-          undefined,
+          gridPositionToValue(
+            gridFromProps.gridColumnEnd ?? gridComputed.gridColumnEnd,
+            gridFromProps.gridColumnStart ?? gridComputed.gridColumnStart,
+          ) ?? undefined,
         gridRowStart:
-          gridPositionToValue(gridFromProps.gridRowStart ?? gridComputed.gridRowStart) ?? undefined,
+          gridPositionToValue(gridFromProps.gridRowStart ?? gridComputed.gridRowStart, null) ??
+          undefined,
         gridRowEnd:
-          gridPositionToValue(gridFromProps.gridRowEnd ?? gridComputed.gridRowEnd) ?? undefined,
+          gridPositionToValue(
+            gridFromProps.gridRowEnd ?? gridComputed.gridRowEnd,
+            gridFromProps.gridRowStart ?? gridComputed.gridRowStart,
+          ) ?? undefined,
         position: childMetadata.specialSizeMeasurements.position ?? undefined,
       }
     },
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index d18f48e5d0cc..4860e9402570 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -11,6 +11,7 @@ import type {
   DomElementMetadata,
   GridAutoOrTemplateBase,
   BorderWidths,
+  GridPositionOrSpan,
 } from '../../core/shared/element-template'
 import {
   specialSizeMeasurements,
@@ -19,6 +20,7 @@ import {
   gridAutoOrTemplateFallback,
   domElementMetadata,
   gridAutoOrTemplateDimensions,
+  isGridSpan,
 } from '../../core/shared/element-template'
 import type { ElementPath } from '../../core/shared/project-file-types'
 import type { ElementCanvasRectangleCache } from '../../core/shared/dom-utils'
@@ -630,62 +632,51 @@ function getGridElementProperties(
   container: GridContainerProperties,
   elementStyle: CSSStyleDeclaration,
 ): GridElementProperties {
+  function getPlacementPin(
+    value: GridPositionOrSpan | null,
+    axis: 'row' | 'column',
+    pin: 'start' | 'end',
+    style: string,
+  ) {
+    if (isGridSpan(value) || value != null) {
+      return value
+    }
+    return defaultEither(null, parseGridPosition(container, axis, pin, value ?? null, style))
+  }
+
   const gridColumn = defaultEither(
     null,
     parseGridRange(container, 'column', elementStyle.gridColumn),
   )
-
-  const gridColumnStart =
-    gridColumn?.start ??
-    defaultEither(
-      null,
-      parseGridPosition(
-        container,
-        'column',
-        'start',
-        gridColumn?.start ?? null,
-        elementStyle.gridColumnStart,
-      ),
-    ) ??
-    null
-  const gridColumnEnd =
-    gridColumn?.end ??
-    defaultEither(
-      null,
-      parseGridPosition(
-        container,
-        'column',
-        'end',
-        gridColumn?.end ?? null,
-        elementStyle.gridColumnEnd,
-      ),
-    ) ??
-    null
+  const gridColumnStart = getPlacementPin(
+    gridColumn?.start ?? null,
+    'column',
+    'start',
+    elementStyle.gridColumnStart,
+  )
+  const gridColumnEnd = getPlacementPin(
+    gridColumn?.end ?? null,
+    'column',
+    'end',
+    elementStyle.gridColumnEnd,
+  )
   const adjustedColumnEnd =
-    isCSSKeyword(gridColumnEnd) && gridColumn?.end != null ? gridColumn.end : gridColumnEnd
+    isGridSpan(gridColumn?.end) || (isCSSKeyword(gridColumnEnd) && gridColumn?.end != null)
+      ? gridColumn.end
+      : gridColumnEnd
 
   const gridRow = defaultEither(null, parseGridRange(container, 'row', elementStyle.gridRow))
-  const gridRowStart =
-    gridRow?.start ??
-    defaultEither(
-      null,
-      parseGridPosition(
-        container,
-        'row',
-        'start',
-        gridRow?.start ?? null,
-        elementStyle.gridRowStart,
-      ),
-    ) ??
-    null
-  const gridRowEnd =
-    gridRow?.end ??
-    defaultEither(
-      null,
-      parseGridPosition(container, 'row', 'end', gridRow?.end ?? null, elementStyle.gridRowEnd),
-    ) ??
-    null
-  const adjustedRowEnd = isCSSKeyword(gridRowEnd) && gridRow?.end != null ? gridRow.end : gridRowEnd
+  const gridRowStart = getPlacementPin(
+    gridRow?.start ?? null,
+    'row',
+    'start',
+    elementStyle.gridRowStart,
+  )
+  const gridRowEnd = getPlacementPin(gridRow?.end ?? null, 'row', 'end', elementStyle.gridRowEnd)
+  const adjustedRowEnd =
+    isGridSpan(gridRow?.end) || (isCSSKeyword(gridRowEnd) && gridRow?.end != null)
+      ? gridRow.end
+      : gridRowEnd
 
   const result = gridElementProperties(
     gridColumnStart,
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 1cf91fa4ebf5..9ea58768492b 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -152,6 +152,10 @@ import type {
   GridAutoOrTemplateDimensions,
   GridAutoOrTemplateFallback,
   BorderWidths,
+  GridSpan,
+  GridSpanArea,
+  GridSpanNumeric,
+  GridPositionOrSpan,
 } from '../../../core/shared/element-template'
 import {
   elementInstanceMetadata,
@@ -223,6 +227,7 @@ import {
   gridPositionValue,
   gridAutoOrTemplateFallback,
   gridAutoOrTemplateDimensions,
+  isGridSpan,
 } from '../../../core/shared/element-template'
 import type {
   CanvasRectangle,
@@ -2169,16 +2174,66 @@ export const GridPositionKeepDeepEquality: KeepDeepEqualityCall<GridPosition> =
   }
 }
 
+export const GridSpanAreaKeepDeepEquality: KeepDeepEqualityCall<GridSpanArea> =
+  combine1EqualityCall(
+    (p) => p.value,
+    StringKeepDeepEquality,
+    (value) => ({ type: 'SPAN_AREA', value: value }),
+  )
+
+export const GridSpanNumericKeepDeepEquality: KeepDeepEqualityCall<GridSpanNumeric> =
+  combine1EqualityCall(
+    (p) => p.value,
+    NumberKeepDeepEquality,
+    (value) => ({ type: 'SPAN_NUMERIC', value: value }),
+  )
+
+export const GridSpanKeepDeepEquality: KeepDeepEqualityCall<GridSpan> = (oldValue, newValue) => {
+  switch (oldValue.type) {
+    case 'SPAN_AREA':
+      if (newValue.type === oldValue.type) {
+        return GridSpanAreaKeepDeepEquality(oldValue, newValue)
+      }
+      break
+    case 'SPAN_NUMERIC':
+      if (newValue.type === oldValue.type) {
+        return GridSpanNumericKeepDeepEquality(oldValue, newValue)
+      }
+      break
+    default:
+      assertNever(oldValue)
+  }
+  return keepDeepEqualityResult(newValue, false)
+}
+
+export const GridPositionOrSpanKeepDeepEquality: KeepDeepEqualityCall<GridPositionOrSpan> = (
+  oldValue,
+  newValue,
+) => {
+  if (isGridSpan(oldValue)) {
+    if (isGridSpan(newValue)) {
+      return GridSpanKeepDeepEquality(oldValue, newValue)
+    } else {
+      return keepDeepEqualityResult(newValue, false)
+    }
+  } else {
+    if (isGridSpan(newValue)) {
+      return keepDeepEqualityResult(newValue, false)
+    }
+    return GridPositionKeepDeepEquality(oldValue, newValue)
+  }
+}
+
 export function GridElementPropertiesKeepDeepEquality(): KeepDeepEqualityCall<GridElementProperties> {
   return combine4EqualityCalls(
     (properties) => properties.gridColumnStart,
-    nullableDeepEquality(GridPositionKeepDeepEquality),
+    nullableDeepEquality(GridPositionOrSpanKeepDeepEquality),
     (properties) => properties.gridColumnEnd,
-    nullableDeepEquality(GridPositionKeepDeepEquality),
+    nullableDeepEquality(GridPositionOrSpanKeepDeepEquality),
     (properties) => properties.gridRowStart,
-    nullableDeepEquality(GridPositionKeepDeepEquality),
+    nullableDeepEquality(GridPositionOrSpanKeepDeepEquality),
     (properties) => properties.gridRowEnd,
-    nullableDeepEquality(GridPositionKeepDeepEquality),
+    nullableDeepEquality(GridPositionOrSpanKeepDeepEquality),
     gridElementProperties,
   )
 }
diff --git a/editor/src/components/inspector/common/css-utils.spec.ts b/editor/src/components/inspector/common/css-utils.spec.ts
index 60e85271648f..b27f1c8d8303 100644
--- a/editor/src/components/inspector/common/css-utils.spec.ts
+++ b/editor/src/components/inspector/common/css-utils.spec.ts
@@ -1,6 +1,7 @@
 import { clearModifiableAttributeUniqueIDs } from '../../../core/shared/jsx-attributes'
 import type { Either } from '../../../core/shared/either'
-import { isLeft, isRight, right } from '../../../core/shared/either'
+import { isLeft, isRight, left, right } from '../../../core/shared/either'
+import type { GridContainerProperties } from '../../../core/shared/element-template'
 import {
   emptyComments,
   jsExpressionFunctionCall,
@@ -10,6 +11,12 @@ import {
   jsxTestElement,
   clearExpressionUniqueIDs,
   clearJSXElementChildUniqueIDs,
+  gridContainerProperties,
+  gridAutoOrTemplateDimensions,
+  gridPositionValue,
+  gridRange,
+  gridSpanNumeric,
+  gridSpanArea,
 } from '../../../core/shared/element-template'
 import * as PP from '../../../core/shared/property-path'
 import type {
@@ -19,6 +26,7 @@ import type {
   CSSColor,
   CSSTextShadows,
   CSSTransforms,
+  GridDimension,
 } from './css-utils'
 import {
   cssAngle,
@@ -64,6 +72,7 @@ import {
   parseConicGradient,
   parseCSSURLFunction,
   parsedCurlyBrace,
+  parseGridRange,
   parseLinearGradient,
   parseRadialGradient,
   parseTextShadow,
@@ -1985,3 +1994,144 @@ describe('printGridDimensionCSS', () => {
     ).toBe('[the-area] minmax(auto, min-content)')
   })
 })
+
+function testGridContainerProperties(
+  cols: GridDimension[],
+  rows: GridDimension[],
+): GridContainerProperties {
+  return gridContainerProperties(
+    gridAutoOrTemplateDimensions(cols),
+    gridAutoOrTemplateDimensions(rows),
+    gridAutoOrTemplateDimensions([]),
+    gridAutoOrTemplateDimensions([]),
+    null,
+  )
+}
+
+describe('parseGridRange', () => {
+  it('can parse a numerical unit', async () => {
+    const got = parseGridRange(testGridContainerProperties([], []), 'row', '3')
+    expect(got).toEqual(right(gridRange(gridPositionValue(3), null)))
+  })
+  it('can parse a numerical range', async () => {
+    const got = parseGridRange(testGridContainerProperties([], []), 'row', '3 / 4')
+    expect(got).toEqual(right(gridRange(gridPositionValue(3), gridPositionValue(4))))
+  })
+  it('can parse a line', async () => {
+    const got = parseGridRange(
+      testGridContainerProperties(
+        [],
+        [
+          gridCSSNumber(cssNumber(1, 'fr'), 'foo'),
+          gridCSSNumber(cssNumber(1, 'fr'), 'bar'),
+          gridCSSNumber(cssNumber(1, 'fr'), 'baz'),
+        ],
+      ),
+      'row',
+      'bar',
+    )
+    expect(got).toEqual(right(gridRange(gridPositionValue(2), null)))
+  })
+  it('errors if the line is not found in the template', async () => {
+    const got = parseGridRange(
+      testGridContainerProperties(
+        [],
+        [
+          gridCSSNumber(cssNumber(1, 'fr'), 'foo'),
+          gridCSSNumber(cssNumber(1, 'fr'), 'bar'),
+          gridCSSNumber(cssNumber(1, 'fr'), 'baz'),
+        ],
+      ),
+      'row',
+      'WRONG',
+    )
+    expect(got).toEqual(left('missing grid item start'))
+  })
+  it('can parse a line range', async () => {
+    const got = parseGridRange(
+      testGridContainerProperties(
+        [],
+        [
+          gridCSSNumber(cssNumber(1, 'fr'), 'foo'),
+          gridCSSNumber(cssNumber(1, 'fr'), 'bar'),
+          gridCSSNumber(cssNumber(1, 'fr'), 'baz'),
+        ],
+      ),
+      'row',
+      'bar / baz',
+    )
+    expect(got).toEqual(right(gridRange(gridPositionValue(2), gridPositionValue(3))))
+  })
+  it('can parse a line / unit mixed range', async () => {
+    const got = parseGridRange(
+      testGridContainerProperties(
+        [],
+        [
+          gridCSSNumber(cssNumber(1, 'fr'), 'foo'),
+          gridCSSNumber(cssNumber(1, 'fr'), 'bar'),
+          gridCSSNumber(cssNumber(1, 'fr'), 'baz'),
+        ],
+      ),
+      'row',
+      'bar / 3',
+    )
+    expect(got).toEqual(right(gridRange(gridPositionValue(2), gridPositionValue(3))))
+  })
+  it('can parse a numerical span', async () => {
+    const got = parseGridRange(testGridContainerProperties([], []), 'row', 'span 2')
+    expect(got).toEqual(right(gridRange(gridSpanNumeric(2), null)))
+  })
+  it('can parse a numerical span (flipped)', async () => {
+    const got = parseGridRange(testGridContainerProperties([], []), 'row', '2 span')
+    expect(got).toEqual(right(gridRange(gridSpanNumeric(2), null)))
+  })
+  it('can parse an area span', async () => {
+    const got = parseGridRange(testGridContainerProperties([], []), 'row', 'span some-area')
+    expect(got).toEqual(right(gridRange(gridSpanArea('some-area'), null)))
+  })
+  it('can parse an area span (flipped)', async () => {
+    const got = parseGridRange(testGridContainerProperties([], []), 'row', 'some-area span')
+    expect(got).toEqual(right(gridRange(gridSpanArea('some-area'), null)))
+  })
+  it('can parse a span numerical range', async () => {
+    const got = parseGridRange(testGridContainerProperties([], []), 'row', 'span 2 / span 3')
+    expect(got).toEqual(right(gridRange(gridSpanNumeric(2), gridSpanNumeric(3))))
+  })
+  it('can parse an area span range', async () => {
+    const got = parseGridRange(
+      testGridContainerProperties([], []),
+      'row',
+      'span some-area / span some-other-area',
+    )
+    expect(got).toEqual(
+      right(gridRange(gridSpanArea('some-area'), gridSpanArea('some-other-area'))),
+    )
+  })
+  it('can parse a mixed span range', async () => {
+    const got = parseGridRange(
+      testGridContainerProperties([], []),
+      'row',
+      'span some-area / span 3',
+    )
+    expect(got).toEqual(right(gridRange(gridSpanArea('some-area'), gridSpanNumeric(3))))
+  })
+  it('can parse a mixed span and numerical range', async () => {
+    const got = parseGridRange(testGridContainerProperties([], []), 'row', 'span some-area / 3')
+    expect(got).toEqual(right(gridRange(gridSpanArea('some-area'), gridPositionValue(3))))
+  })
+  it('can parse a mixed span and line range', async () => {
+    const got = parseGridRange(
+      testGridContainerProperties(
+        [],
+        [
+          gridCSSNumber(cssNumber(1, 'fr'), 'foo'),
+          gridCSSNumber(cssNumber(1, 'fr'), 'bar'),
+          gridCSSNumber(cssNumber(1, 'fr'), 'baz'),
+        ],
+      ),
+      'row',
+      'span some-area / bar',
+    )
+    expect(got).toEqual(right(gridRange(gridSpanArea('some-area'), gridPositionValue(2))))
+  })
+})
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index 0e7d0c444c54..4a381243fdc5 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -14,7 +14,6 @@ import type { LayoutPropertyTypes, StyleLayoutProp } from '../../../core/layout/
 import { findLastIndex } from '../../../core/shared/array-utils'
 import type { Either, Right as EitherRight } from '../../../core/shared/either'
 import {
-  applicative2Either,
   bimapEither,
   eitherToMaybe,
   flatMapEither,
@@ -34,6 +33,7 @@ import type {
   GridRange,
   GridAutoOrTemplateBase,
   GridContainerProperties,
+  GridSpan,
 } from '../../../core/shared/element-template'
 import {
   emptyComments,
@@ -45,6 +45,8 @@ import {
   jsExpressionValue,
   gridPositionValue,
   gridRange,
+  gridSpanArea,
+  gridSpanNumeric,
 } from '../../../core/shared/element-template'
 import type { ModifiableAttribute } from '../../../core/shared/jsx-attributes'
 import {
@@ -1198,23 +1200,34 @@ export function parseGridRange(
   axis: 'row' | 'column',
   input: unknown,
 ): Either<string, GridRange> {
-  if (typeof input === 'string') {
-    if (input.includes('/')) {
-      const splitInput = input.split('/')
-      const startParsed = parseGridPosition(container, axis, 'start', null, splitInput[0])
-      const endParsed = parseGridPosition(container, axis, 'end', null, splitInput[1])
-      return applicative2Either(gridRange, startParsed, endParsed)
-    } else {
-      const startParsed = parseGridPosition(container, axis, 'start', null, input)
-      return mapEither((start) => {
-        const end =
-          !isCSSKeyword(start) && start.numericalPosition != null ? cssKeyword('auto') : null
-        return gridRange(start, end)
-      }, startParsed)
-    }
-  } else {
-    return left('Not a valid grid range.')
+  if (typeof input !== 'string') {
+    return left('invalid grid item')
+  }
+
+  const parsed = csstree.parse(input, { context: 'value' })
+  if (parsed.type !== 'Value') {
+    return left('invalid grid item value')
+  }
+
+  const children = parsed.children.toArray()
+  const slashIndex = children.findIndex((c) => c.type === 'Operator' && c.value === '/')
+
+  const isRange = slashIndex >= 0
+  const start = isRange ? children.slice(0, slashIndex) : children
+  const end = isRange ? children.slice(slashIndex + 1) : []
+
+  if (start.length === 0) {
+    return left('invalid grid item start')
+  }
+
+  const maybeStart = maybeParseGridSpan(start) ?? maybeParseGridLine(start, axis, container)
+  if (maybeStart == null) {
+    return left('missing grid item start')
   }
+
+  const maybeEnd = maybeParseGridSpan(end) ?? maybeParseGridLine(end, axis, container)
+
+  return right(gridRange(maybeStart, maybeEnd))
 }
 
 export function parseGridAutoOrTemplateBase(
@@ -5902,3 +5915,68 @@ function parseRepeatTimes(firstChild: csstree.CssNode) {
       return null
   }
 }
+
+export function maybeParseGridSpan(nodes: csstree.CssNode[]): GridSpan | null {
+  if (nodes.length !== 2) {
+    return null
+  }
+
+  const spanIndex = nodes.findIndex((node) => node.type === 'Identifier' && node.name === 'span')
+  if (spanIndex < 0) {
+    return null
+  }
+
+  const valueNodes = nodes.slice(0, spanIndex).concat(nodes.slice(spanIndex + 1))
+
+  const numericValue: csstree.NumberNode | null =
+    valueNodes.find((node) => node.type === 'Number') ?? null
+  const areaValue: csstree.Identifier | null =
+    valueNodes.find((node) => node.type === 'Identifier') ?? null
+
+  if (numericValue != null) {
+    return gridSpanNumeric(parseInt(numericValue.value))
+  } else if (areaValue != null) {
+    return gridSpanArea(areaValue.name)
+  } else {
+    return null
+  }
+}
+
+export function maybeParseGridLine(
+  nodes: csstree.CssNode[],
+  axis: 'row' | 'column',
+  container: GridContainerProperties,
+): GridPosition | null {
+  if (nodes.length !== 1) {
+    return null
+  }
+
+  const firstNode = nodes[0]
+  switch (firstNode.type) {
+    case 'Number':
+      return gridPositionValue(parseInt(firstNode.value))
+    case 'Identifier':
+      // the identifier can either be a keyword…
+      if (isValidGridDimensionKeyword(firstNode.name)) {
+        return cssKeyword(firstNode.name)
+      }
+
+      // …or a line name, in which case look it up in the template and return its index
+      const targetTracks =
+        axis === 'column' ? container.gridTemplateColumns : container.gridTemplateRows
+      // TODO important! this behavior is currently incorrect, as this needs to find the _first_ lineName (in case of repeats)
+      // or otherwise relative (even backwards).
+      const maybeLineFromName =
+        targetTracks?.type === 'DIMENSIONS'
+          ? targetTracks.dimensions.findIndex((dim) => dim.lineName === firstNode.name)
+          : null
+      if (maybeLineFromName == null || maybeLineFromName < 0) {
+        // line name not found
+        return null
+      }
+
+      return gridPositionValue(maybeLineFromName + 1) // tracks are 1-indexed
+    default:
+      return null
+  }
+}
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 5b5410823dc0..6912329ed34b 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -60,9 +60,13 @@ import {
   setProperty,
 } from '../canvas/commands/set-property-command'
 import * as PP from '../../core/shared/property-path'
-import type { GridContainerProperties, GridPosition } from '../../core/shared/element-template'
+import type {
+  GridContainerProperties,
+  GridPositionOrSpan,
+} from '../../core/shared/element-template'
 import {
   gridPositionValue,
+  isGridSpan,
   type ElementInstanceMetadata,
   type GridElementProperties,
 } from '../../core/shared/element-template'
@@ -322,9 +326,10 @@ const TemplateDimensionControl = React.memo(
             ...child.specialSizeMeasurements.elementGridPropertiesFromProps,
           }
 
-          function needsAdjusting(pos: GridPosition | null, bound: number) {
+          function needsAdjusting(pos: GridPositionOrSpan | null, bound: number) {
             return pos != null &&
               !isCSSKeyword(pos) &&
+              !isGridSpan(pos) && // TODO support grid spans
               pos.numericalPosition != null &&
               pos.numericalPosition >= bound
               ? pos.numericalPosition
diff --git a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
index 15141b3f314a..f672852d4394 100644
--- a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
+++ b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
@@ -6,11 +6,13 @@ import type {
   ElementInstanceMetadata,
   GridContainerProperties,
   GridElementProperties,
+  GridPositionOrSpan,
   GridPositionValue,
   ValidGridPositionKeyword,
 } from '../../../../../core/shared/element-template'
 import {
   gridPositionValue,
+  isGridSpan,
   isValidGridPositionKeyword,
   type GridPosition,
 } from '../../../../../core/shared/element-template'
@@ -247,6 +249,7 @@ const DimensionsControls = React.memo(
             case 'width':
               if (
                 !isCSSKeyword(newValues.gridColumnStart) &&
+                !isGridSpan(newValues.gridColumnStart) && // TODO support grid spans
                 newValues.gridColumnStart?.numericalPosition != null &&
                 isCSSNumber(e)
               ) {
@@ -258,6 +261,7 @@ const DimensionsControls = React.memo(
             case 'height':
               if (
                 !isCSSKeyword(newValues.gridRowStart) &&
+                !isGridSpan(newValues.gridRowStart) && // TODO support grid spans
                 newValues.gridRowStart?.numericalPosition != null &&
                 isCSSNumber(e)
               ) {
@@ -277,6 +281,7 @@ const DimensionsControls = React.memo(
     const columnStartValue = React.useMemo(() => {
       return getValueWithAlias(
         cell.specialSizeMeasurements.elementGridProperties.gridColumnStart,
+        cell.specialSizeMeasurements.elementGridProperties.gridColumnEnd,
         columnLabels,
       )
     }, [cell, columnLabels])
@@ -284,6 +289,7 @@ const DimensionsControls = React.memo(
     const rowStartValue = React.useMemo(() => {
       return getValueWithAlias(
         cell.specialSizeMeasurements.elementGridProperties.gridRowStart,
+        cell.specialSizeMeasurements.elementGridProperties.gridRowEnd,
         rowLabels,
       )
     }, [cell, rowLabels])
@@ -399,6 +405,7 @@ const BoundariesControls = React.memo(
     const columnStartValue = React.useMemo(() => {
       return getValueWithAlias(
         cell.specialSizeMeasurements.elementGridProperties.gridColumnStart,
+        cell.specialSizeMeasurements.elementGridProperties.gridColumnEnd,
         columnLabels,
       )
     }, [cell, columnLabels])
@@ -406,6 +413,7 @@ const BoundariesControls = React.memo(
     const columnEndValue = React.useMemo(() => {
       return getValueWithAlias(
         cell.specialSizeMeasurements.elementGridProperties.gridColumnEnd,
+        null,
         columnLabels,
       )
     }, [cell, columnLabels])
@@ -413,6 +421,7 @@ const BoundariesControls = React.memo(
     const rowStartValue = React.useMemo(() => {
       return getValueWithAlias(
         cell.specialSizeMeasurements.elementGridProperties.gridRowStart,
+        cell.specialSizeMeasurements.elementGridProperties.gridRowEnd,
         rowLabels,
       )
     }, [cell, rowLabels])
@@ -420,6 +429,7 @@ const BoundariesControls = React.memo(
     const rowEndValue = React.useMemo(() => {
       return getValueWithAlias(
         cell.specialSizeMeasurements.elementGridProperties.gridRowEnd,
+        null,
         rowLabels,
       )
     }, [cell, rowLabels])
@@ -494,8 +504,14 @@ const BoundariesControls = React.memo(
 )
 BoundariesControls.displayName = 'BoundariesControls'
 
-function getValue(pos: GridPosition | null): CSSNumber | null {
-  if (pos == null || isCSSKeyword(pos) || pos.numericalPosition == null) {
+function getValue(pos: GridPositionOrSpan | null, maybeOffset: number = 0): CSSNumber | null {
+  if (pos == null || isCSSKeyword(pos)) {
+    return null
+  }
+  if (isGridSpan(pos)) {
+    return pos.type === 'SPAN_AREA' ? null : cssNumber(pos.value + maybeOffset)
+  }
+  if (pos.numericalPosition == null) {
     return null
   }
   return cssNumber(pos.numericalPosition)
@@ -503,11 +519,14 @@ function getValue(pos: GridPosition | null): CSSNumber | null {
 
 function getWidthOrHeight(props: GridElementProperties, dimension: 'width' | 'height') {
   const start = getValue(dimension === 'width' ? props.gridColumnStart : props.gridRowStart)
-  const end = getValue(dimension === 'width' ? props.gridColumnEnd : props.gridRowEnd)
+  const end = getValue(
+    dimension === 'width' ? props.gridColumnEnd : props.gridRowEnd,
+    start?.value ?? 0,
+  )
   if (start == null || end == null) {
-    return 1
+    return Math.max(1, start?.value ?? 0, end?.value ?? 0)
   }
-  return end.value - start.value
+  return Math.max(1, end.value - start.value)
 }
 
 function getLabelsFromTemplate(gridTemplate: GridContainerProperties) {
@@ -559,10 +578,23 @@ function maybeValueFromLineName(
 }
 
 function getValueWithAlias(
-  position: GridPosition | null,
+  start: GridPositionOrSpan | null,
+  end: GridPositionOrSpan | null,
   labels: { lineName: string; position: number }[],
-) {
-  const value = getValue(position) ?? cssKeyword('auto')
+): {
+  value: CSSNumber | CSSKeyword
+  alias?: string
+} {
+  if (isGridSpan(start)) {
+    if (isGridSpan(end)) {
+      return start.type === 'SPAN_NUMERIC'
+        ? { value: cssNumber(start.value) }
+        : { value: cssKeyword('auto') }
+    } else {
+      return { value: cssKeyword('auto') }
+    }
+  }
+  const value = getValue(start) ?? cssKeyword('auto')
   if (isCSSKeyword(value)) {
     return { value: value }
   }
diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts
index fdf067c9b8c6..840a7fe872e1 100644
--- a/editor/src/core/shared/element-template.ts
+++ b/editor/src/core/shared/element-template.ts
@@ -2680,21 +2680,21 @@ export const isValidGridPositionKeyword =
   }
 
 export interface GridRange {
-  start: GridPosition
-  end: GridPosition | null
+  start: GridPositionOrSpan
+  end: GridPositionOrSpan | null
 }
 
-export function gridRange(start: GridPosition, end: GridPosition | null): GridRange {
+export function gridRange(start: GridPositionOrSpan, end: GridPositionOrSpan | null): GridRange {
   return {
     start: start,
     end: end,
   }
 }
 
-export type GridColumnStart = GridPosition
-export type GridColumnEnd = GridPosition
-export type GridRowStart = GridPosition
-export type GridRowEnd = GridPosition
+export type GridColumnStart = GridPositionOrSpan
+export type GridColumnEnd = GridPositionOrSpan
+export type GridRowStart = GridPositionOrSpan
+export type GridRowEnd = GridPositionOrSpan
 
 export interface GridAutoOrTemplateFallback {
   type: 'FALLBACK'
@@ -3229,3 +3229,50 @@ export function clearJSArbitraryStatementSourceMaps(
       assertNever(statement)
   }
 }
+
+export type GridPositionOrSpan = GridPosition | GridSpan
+
+export type GridSpan = GridSpanNumeric | GridSpanArea
+
+export function isGridSpan(u: unknown): u is GridSpan {
+  const maybe = u as GridSpan
+  return (
+    maybe != null && typeof u === 'object' && (isGridSpanNumeric(maybe) || isGridSpanArea(maybe))
+  )
+}
+
+export function stringifyGridSpan(span: GridSpan): string {
+  return `span ${span.value}`
+}
+
+export type GridSpanNumeric = {
+  type: 'SPAN_NUMERIC'
+  value: number
+}
+
+export function gridSpanNumeric(value: number): GridSpanNumeric {
+  return {
+    type: 'SPAN_NUMERIC',
+    value: value,
+  }
+}
+
+function isGridSpanNumeric(span: GridSpan): span is GridSpanNumeric {
+  return span.type === 'SPAN_NUMERIC'
+}
+
+export type GridSpanArea = {
+  type: 'SPAN_AREA'
+  value: string
+}
+
+export function gridSpanArea(areaName: string): GridSpanArea {
+  return {
+    type: 'SPAN_AREA',
+    value: areaName,
+  }
+}
+
+function isGridSpanArea(span: GridSpan): span is GridSpanArea {
+  return span.type === 'SPAN_AREA'
+}

From b0fa40f007492b8130b123305aad76d00fdd62e0 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 13 Nov 2024 10:25:13 +0000
Subject: [PATCH 214/272] refactor(grids) Direct grid lookup. (#6627)

- Moved some fields from `GridData` up to `GridMeasurementHelperData`.
- Implemented `gridMeasurementHelperDataFromElement` and
`getGridMeasurementHelperData`, which perform the calculations needed by
the controls.
- `useGridMeasurementHelperData` now reimplemented to use
`getGridMeasurementHelperData`.
- `useGridData` now reimplemented to use `getGridMeasurementHelperData`.
- Implemented `getFromElement` as a hopefully reusable function for
similar solutions.
- Implemented `useMonitorChangesToElements` as a solution for how to
trigger the re-renders.
---
 .../controls/grid-controls-for-strategies.tsx | 282 +++++++++++-------
 .../canvas/controls/grid-controls-helpers.ts  |  21 +-
 .../canvas/controls/grid-controls.tsx         |  25 +-
 .../grid-gap-control-component.tsx            |   8 +-
 .../components/canvas/direct-dom-lookups.ts   |  28 ++
 editor/src/components/canvas/dom-walker.ts    |  14 +-
 .../components/editor/store/store-monitor.ts  |  33 ++
 editor/src/core/shared/dom-utils.ts           |  44 +--
 8 files changed, 291 insertions(+), 164 deletions(-)
 create mode 100644 editor/src/components/canvas/direct-dom-lookups.ts
 create mode 100644 editor/src/components/editor/store/store-monitor.ts

diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index e76428030af7..c6cfb8990b24 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -1,9 +1,13 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import fastDeepEqual from 'fast-deep-equal'
-import type { Sides } from 'utopia-api/core'
+import { sides, type Sides } from 'utopia-api/core'
 import type { ElementPath } from 'utopia-shared/src/types'
-import { isStaticGridRepeat, printGridAutoOrTemplateBase } from '../../inspector/common/css-utils'
+import {
+  isStaticGridRepeat,
+  parseCSSLength,
+  printGridAutoOrTemplateBase,
+} from '../../inspector/common/css-utils'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { mapDropNulls } from '../../../core/shared/array-utils'
 import * as EP from '../../../core/shared/element-path'
@@ -21,6 +25,7 @@ import { controlForStrategyMemoized } from '../canvas-strategies/canvas-strategy
 import type { GridResizeEdge } from '../canvas-strategies/interaction-state'
 import type { EdgePosition } from '../canvas-types'
 import {
+  CanvasContainerID,
   EdgePositionBottom,
   EdgePositionLeft,
   EdgePositionRight,
@@ -33,7 +38,24 @@ import {
 } from './grid-controls'
 import { isEdgePositionOnSide } from '../canvas-utils'
 import { findOriginalGrid } from '../canvas-strategies/strategies/grid-helpers'
-import type { AlignContent, FlexJustifyContent } from '../../inspector/inspector-common'
+import {
+  getAlignContent,
+  getFlexJustifyContent,
+  type AlignContent,
+  type FlexJustifyContent,
+} from '../../inspector/inspector-common'
+import { getFromElement } from '../direct-dom-lookups'
+import {
+  applicativeSidesPxTransform,
+  getGridContainerProperties,
+  isDynamicGridTemplate,
+} from '../dom-walker'
+import { applicative4Either, defaultEither, isRight, mapEither } from '../../../core/shared/either'
+import { domRectToScaledCanvasRectangle, getRoundingFn } from '../../../core/shared/dom-utils'
+import Utils from '../../../utils/utils'
+import { useMonitorChangesToEditor } from '../../../components/editor/store/store-monitor'
+import { useKeepReferenceEqualityIfPossible } from '../../../utils/react-performance'
+import type { CSSProperties } from 'react'
 
 export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`
 
@@ -66,144 +88,200 @@ export function getNullableAutoOrTemplateBaseString(
 
 export type GridMeasurementHelperData = {
   frame: CanvasRectangle
+  rows: number
+  columns: number
+  cells: number
+  computedStyling: CSSProperties
   gridTemplateColumns: GridAutoOrTemplateBase | null
   gridTemplateRows: GridAutoOrTemplateBase | null
+  gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null
+  gridTemplateRowsFromProps: GridAutoOrTemplateBase | null
+  border: BorderWidths
   gap: number | null
   rowGap: number | null
   columnGap: number | null
-  justifyContent: FlexJustifyContent | null
-  alignContent: AlignContent | null
   padding: Sides
-  columns: number
-  cells: number
-  border: BorderWidths
 }
 
-export function useGridMeasurentHelperData(
+export function getGridMeasurementHelperData(
   elementPath: ElementPath,
-): GridMeasurementHelperData | null {
-  return useEditorState(
-    Substores.metadata,
-    (store) => {
-      const element = MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, elementPath)
-
-      const targetGridContainer = MetadataUtils.isGridLayoutedContainer(element) ? element : null
-
-      if (
-        targetGridContainer == null ||
-        targetGridContainer.globalFrame == null ||
-        !isFiniteRectangle(targetGridContainer.globalFrame)
-      ) {
-        return null
-      }
-
-      const columns = getCellsCount(
-        targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns,
-      )
-      const rows = getCellsCount(
-        targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows,
-      )
-
-      return {
-        frame: targetGridContainer.globalFrame,
-        gridTemplateColumns:
-          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns,
-        gridTemplateRows:
-          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows,
-        gap: targetGridContainer.specialSizeMeasurements.gap,
-        rowGap: targetGridContainer.specialSizeMeasurements.rowGap,
-        columnGap: targetGridContainer.specialSizeMeasurements.columnGap,
-        justifyContent: targetGridContainer.specialSizeMeasurements.justifyContent,
-        alignContent: targetGridContainer.specialSizeMeasurements.alignContent,
-        padding: targetGridContainer.specialSizeMeasurements.padding,
-        columns: columns,
-        cells: rows * columns,
-        border: targetGridContainer.specialSizeMeasurements.borderWidths,
-      }
-    },
-    'useGridMeasurentHelperData',
-    fastDeepEqual, //TODO: this should not be needed, but it seems EditorStateKeepDeepEquality is not running, and metadata reference is always updated
+  scale: number,
+): GridMeasurementHelperData | undefined {
+  return getFromElement(elementPath, gridMeasurementHelperDataFromElement(scale))
+}
+
+function getStylingSubset(styling: CSSStyleDeclaration): CSSProperties {
+  // Fields chosen to not overlap with any others, so as to not make React complain.
+  return {
+    gridAutoFlow: styling.gridAutoFlow,
+    gridAutoColumns: styling.gridAutoColumns,
+    gridAutoRows: styling.gridAutoRows,
+    gridTemplateColumns: styling.gridTemplateColumns,
+    gridTemplateRows: styling.gridTemplateRows,
+    gridColumn: styling.gridColumn,
+    gridRow: styling.gridRow,
+    gap: styling.gap,
+    rowGap: styling.rowGap,
+    columnGap: styling.columnGap,
+    justifyContent: styling.justifyContent,
+    alignContent: styling.alignContent,
+    padding: styling.padding,
+    paddingTop: styling.paddingTop,
+    paddingLeft: styling.paddingLeft,
+    paddingBottom: styling.paddingBottom,
+    paddingRight: styling.paddingRight,
+    borderTop: styling.borderTopWidth,
+    borderLeft: styling.borderLeftWidth,
+    borderBottom: styling.borderBottomWidth,
+    borderRight: styling.borderRightWidth,
+  }
+}
+
+export function gridMeasurementHelperDataFromElement(
+  scale: number,
+): (element: HTMLElement) => GridMeasurementHelperData | undefined {
+  return (element) => {
+    const canvasRootContainer = document.getElementById(CanvasContainerID)
+    if (canvasRootContainer == null) {
+      return undefined
+    }
+
+    const computedStyle = getComputedStyle(element)
+    const boundingRectangle = element.getBoundingClientRect()
+
+    const computedStyling: CSSProperties = getStylingSubset(computedStyle)
+
+    const containerGridProperties = getGridContainerProperties(computedStyle)
+    const containerGridPropertiesFromProps = getGridContainerProperties(element.style)
+
+    const columns = getCellsCount(containerGridProperties.gridTemplateColumns)
+    const rows = getCellsCount(containerGridProperties.gridTemplateRows)
+    const borderTopWidth = parseCSSLength(computedStyle.borderTopWidth)
+    const borderRightWidth = parseCSSLength(computedStyle.borderRightWidth)
+    const borderBottomWidth = parseCSSLength(computedStyle.borderBottomWidth)
+    const borderLeftWidth = parseCSSLength(computedStyle.borderLeftWidth)
+    const border: BorderWidths = {
+      top: isRight(borderTopWidth) ? borderTopWidth.value.value : 0,
+      right: isRight(borderRightWidth) ? borderRightWidth.value.value : 0,
+      bottom: isRight(borderBottomWidth) ? borderBottomWidth.value.value : 0,
+      left: isRight(borderLeftWidth) ? borderLeftWidth.value.value : 0,
+    }
+    const padding = defaultEither(
+      sides(undefined, undefined, undefined, undefined),
+      applicative4Either(
+        applicativeSidesPxTransform,
+        parseCSSLength(computedStyle.paddingTop),
+        parseCSSLength(computedStyle.paddingRight),
+        parseCSSLength(computedStyle.paddingBottom),
+        parseCSSLength(computedStyle.paddingLeft),
+      ),
+    )
+    const gap = defaultEither(
+      null,
+      mapEither((n) => n.value, parseCSSLength(computedStyle.gap)),
+    )
+
+    const rowGap = defaultEither(
+      null,
+      mapEither((n) => n.value, parseCSSLength(computedStyle.rowGap)),
+    )
+
+    const columnGap = defaultEither(
+      null,
+      mapEither((n) => n.value, parseCSSLength(computedStyle.columnGap)),
+    )
+
+    const elementRect = domRectToScaledCanvasRectangle(
+      boundingRectangle,
+      1 / scale,
+      getRoundingFn('nearest-half'),
+    )
+    const parentRect = domRectToScaledCanvasRectangle(
+      canvasRootContainer.getBoundingClientRect(),
+      1 / scale,
+      getRoundingFn('nearest-half'),
+    )
+    const frame = Utils.offsetRect(elementRect, Utils.negate(parentRect))
+
+    return {
+      frame: frame,
+      gridTemplateColumns: containerGridProperties.gridTemplateColumns,
+      gridTemplateRows: containerGridProperties.gridTemplateRows,
+      gridTemplateColumnsFromProps: containerGridPropertiesFromProps.gridTemplateColumns,
+      gridTemplateRowsFromProps: containerGridPropertiesFromProps.gridTemplateRows,
+      border: border,
+      padding: padding,
+      gap: gap,
+      rowGap: rowGap,
+      columnGap: columnGap,
+      rows: rows,
+      columns: columns,
+      cells: columns * rows,
+      computedStyling: computedStyling,
+    }
+  }
+}
+
+export function useGridMeasurementHelperData(
+  elementPath: ElementPath,
+): GridMeasurementHelperData | undefined {
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'useGridMeasurementHelperData scale',
   )
+
+  useMonitorChangesToEditor()
+
+  return useKeepReferenceEqualityIfPossible(getGridMeasurementHelperData(elementPath, scale))
 }
 
 export type GridData = GridMeasurementHelperData & {
   elementPath: ElementPath
-  gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null
-  gridTemplateRowsFromProps: GridAutoOrTemplateBase | null
-  rows: number
-  cells: number
-  metadata: ElementInstanceMetadata
 }
 
 export function useGridData(elementPaths: ElementPath[]): GridData[] {
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'useGridData scale',
+  )
+
   const grids = useEditorState(
     Substores.metadata,
     (store) => {
       return mapDropNulls((view) => {
         const originalGridPath = findOriginalGrid(store.editor.jsxMetadata, view)
+        if (originalGridPath == null) {
+          return null
+        }
+
         const element = MetadataUtils.findElementByElementPath(
           store.editor.jsxMetadata,
           originalGridPath,
         )
 
         const targetGridContainer = MetadataUtils.isGridLayoutedContainer(element) ? element : null
-
-        if (
-          targetGridContainer == null ||
-          targetGridContainer.globalFrame == null ||
-          !isFiniteRectangle(targetGridContainer.globalFrame)
-        ) {
+        if (targetGridContainer == null) {
           return null
         }
 
-        const gap = targetGridContainer.specialSizeMeasurements.gap
-        const rowGap = targetGridContainer.specialSizeMeasurements.rowGap
-        const columnGap = targetGridContainer.specialSizeMeasurements.columnGap
-        const padding = targetGridContainer.specialSizeMeasurements.padding
-
-        const gridTemplateColumns =
-          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns
-        const gridTemplateRows =
-          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows
-        const gridTemplateColumnsFromProps =
-          targetGridContainer.specialSizeMeasurements.containerGridPropertiesFromProps
-            .gridTemplateColumns
-        const gridTemplateRowsFromProps =
-          targetGridContainer.specialSizeMeasurements.containerGridPropertiesFromProps
-            .gridTemplateRows
-
-        const columns = getCellsCount(
-          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns,
-        )
-        const rows = getCellsCount(
-          targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows,
-        )
+        const helperData = getGridMeasurementHelperData(originalGridPath, scale)
+        if (helperData == null) {
+          return null
+        }
 
-        return {
+        const gridData: GridData = {
+          ...helperData,
           elementPath: view,
-          metadata: targetGridContainer,
-          frame: targetGridContainer.globalFrame,
-          gridTemplateColumns: gridTemplateColumns,
-          gridTemplateRows: gridTemplateRows,
-          gridTemplateColumnsFromProps: gridTemplateColumnsFromProps,
-          gridTemplateRowsFromProps: gridTemplateRowsFromProps,
-          gap: gap,
-          rowGap: rowGap,
-          columnGap: columnGap,
-          justifyContent: targetGridContainer.specialSizeMeasurements.justifyContent,
-          alignContent: targetGridContainer.specialSizeMeasurements.alignContent,
-          padding: padding,
-          rows: rows,
-          columns: columns,
-          cells: rows * columns,
-          border: targetGridContainer.specialSizeMeasurements.borderWidths,
         }
+        return gridData
       }, elementPaths)
     },
     'useGridData',
   )
 
-  return grids
+  return useKeepReferenceEqualityIfPossible(grids)
 }
 
 interface GridRowColumnResizingControlsProps {
diff --git a/editor/src/components/canvas/controls/grid-controls-helpers.ts b/editor/src/components/canvas/controls/grid-controls-helpers.ts
index 9cd0282c550f..46dea6427985 100644
--- a/editor/src/components/canvas/controls/grid-controls-helpers.ts
+++ b/editor/src/components/canvas/controls/grid-controls-helpers.ts
@@ -1,26 +1,18 @@
 import type { CSSProperties } from 'react'
 import type { GridMeasurementHelperData } from './grid-controls-for-strategies'
-import { getNullableAutoOrTemplateBaseString } from './grid-controls-for-strategies'
 
 export function getGridHelperStyleMatchingTargetGrid(
   grid: GridMeasurementHelperData,
 ): CSSProperties {
   let style: CSSProperties = {
+    ...grid.computedStyling,
     position: 'absolute',
     top: grid.frame.y,
     left: grid.frame.x,
     width: grid.frame.width,
     height: grid.frame.height,
     display: 'grid',
-    gridTemplateColumns: getNullableAutoOrTemplateBaseString(grid.gridTemplateColumns),
-    gridTemplateRows: getNullableAutoOrTemplateBaseString(grid.gridTemplateRows),
-    justifyContent: grid.justifyContent ?? 'initial',
-    alignContent: grid.alignContent ?? 'initial',
     pointerEvents: 'none',
-    padding:
-      grid.padding == null
-        ? 0
-        : `${grid.padding.top}px ${grid.padding.right}px ${grid.padding.bottom}px ${grid.padding.left}px`,
     borderTop: `${grid.border?.top}px solid transparent`,
     borderLeft: `${grid.border?.left}px solid transparent`,
     borderBottom: `${grid.border?.bottom}px solid transparent`,
@@ -32,16 +24,7 @@ export function getGridHelperStyleMatchingTargetGrid(
   if (grid.rowGap != null && grid.columnGap != null) {
     style.rowGap = grid.rowGap
     style.columnGap = grid.columnGap
-  } else {
-    if (grid.gap != null) {
-      style.gap = grid.gap
-    }
-    if (grid.rowGap != null) {
-      style.rowGap = grid.rowGap
-    }
-    if (grid.columnGap != null) {
-      style.columnGap = grid.columnGap
-    }
+    delete style['gap']
   }
 
   return style
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 87bc49846aa1..b57ad580677a 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -95,7 +95,7 @@ import {
   GridMeasurementHelperKey,
   GridMeasurementHelpersKey,
   useGridData,
-  useGridMeasurentHelperData,
+  useGridMeasurementHelperData,
 } from './grid-controls-for-strategies'
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 import { useResizeEdges } from './select-mode/use-resize-edges'
@@ -352,17 +352,11 @@ interface GridResizingProps {
   axis: Axis
   gap: number | null
   padding: Sides | null
-  justifyContent: string | null
-  alignContent: string | null
+  justifyContent: string | undefined
+  alignContent: string | undefined
 }
 
 const GridResizing = React.memo((props: GridResizingProps) => {
-  const canvasScale = useEditorState(
-    Substores.canvasOffset,
-    (store) => store.editor.canvas.scale,
-    'GridResizing canvasScale',
-  )
-
   const fromProps = React.useMemo((): GridAutoOrTemplateDimensions | null => {
     if (props.fromPropsAxisValues?.type !== 'DIMENSIONS') {
       return null
@@ -585,8 +579,8 @@ export const GridRowColumnResizingControlsComponent = ({
               getStripedAreaLength(grid.gridTemplateRows, grid.rowGap ?? grid.gap ?? 0) ??
               grid.frame.height
             }
-            alignContent={grid.justifyContent}
-            justifyContent={grid.alignContent}
+            alignContent={grid.computedStyling.justifyContent}
+            justifyContent={grid.computedStyling.alignContent}
           />
         )
       })}
@@ -605,8 +599,8 @@ export const GridRowColumnResizingControlsComponent = ({
               getStripedAreaLength(grid.gridTemplateColumns, grid.columnGap ?? grid.gap ?? 0) ??
               grid.frame.width
             }
-            alignContent={grid.alignContent}
-            justifyContent={grid.justifyContent}
+            alignContent={grid.computedStyling.alignContent}
+            justifyContent={grid.computedStyling.justifyContent}
           />
         )
       })}
@@ -1050,8 +1044,7 @@ export interface GridMeasurementHelperProps {
 }
 
 const GridMeasurementHelper = React.memo<{ elementPath: ElementPath }>(({ elementPath }) => {
-  const gridData = useGridMeasurentHelperData(elementPath)
-
+  const gridData = useGridMeasurementHelperData(elementPath)
   if (gridData == null) {
     return null
   }
@@ -1895,7 +1888,7 @@ export interface GridElementContainingBlockProps {
 }
 
 const GridElementContainingBlock = React.memo<GridElementContainingBlockProps>((props) => {
-  const gridData = useGridMeasurentHelperData(props.gridPath)
+  const gridData = useGridMeasurementHelperData(props.gridPath)
   const scale = useEditorState(
     Substores.canvas,
     (store) => store.editor.canvas.scale,
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
index c17bc5716353..b9921982eb4c 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
@@ -198,8 +198,8 @@ export const GridPaddingOutlineForDimension = (props: {
             beingDragged={beingDragged}
             onMouseOver={onMouseOver}
             elementHovered={elementHovered}
-            gridJustifyContent={grid.justifyContent}
-            gridAlignContent={grid.alignContent}
+            gridJustifyContent={grid.computedStyling.justifyContent}
+            gridAlignContent={grid.computedStyling.alignContent}
             draggedOutlineColor={draggedOutlineColor}
           />
         )
@@ -220,8 +220,8 @@ const GridRowOrColumnHighlight = (props: {
   beingDragged: boolean
   onMouseOver: () => void
   elementHovered: boolean
-  gridJustifyContent: FlexJustifyContent | null
-  gridAlignContent: AlignContent | null
+  gridJustifyContent: string | undefined
+  gridAlignContent: string | undefined
   draggedOutlineColor?: UtopiColor
 }) => {
   const {
diff --git a/editor/src/components/canvas/direct-dom-lookups.ts b/editor/src/components/canvas/direct-dom-lookups.ts
new file mode 100644
index 000000000000..431f006e7df4
--- /dev/null
+++ b/editor/src/components/canvas/direct-dom-lookups.ts
@@ -0,0 +1,28 @@
+import { UTOPIA_PATH_KEY } from '../../core/model/utopia-constants'
+import { CanvasContainerID } from './canvas-types'
+import { getDeepestPathOnDomElement } from '../../core/shared/uid-utils'
+import * as EP from '../../core/shared/element-path'
+import type { ElementPath } from 'utopia-shared/src/types'
+
+export type FromElement<T> = (element: HTMLElement) => T
+
+export function getFromElement<T>(path: ElementPath, fromElement: FromElement<T>): T | undefined {
+  const pathString = EP.toString(path)
+  const elements = document.querySelectorAll(
+    `#${CanvasContainerID} [${UTOPIA_PATH_KEY}^="${pathString}"]`,
+  )
+  for (const element of Array.from(elements)) {
+    const pathFromElement = getDeepestPathOnDomElement(element)
+    if (
+      (EP.pathsEqual(path, pathFromElement) &&
+        pathFromElement != null &&
+        !EP.isRootElementOfInstance(pathFromElement)) ||
+      EP.isRootElementOf(pathFromElement, path)
+    ) {
+      if (element instanceof HTMLElement) {
+        return fromElement(element)
+      }
+    }
+  }
+  return undefined
+}
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 4860e9402570..b96f1a660948 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -154,7 +154,12 @@ function isElementAContainingBlockForAbsolute(computedStyle: CSSStyleDeclaration
   return false
 }
 
-const applicativeSidesPxTransform = (t: CSSNumber, r: CSSNumber, b: CSSNumber, l: CSSNumber) =>
+export const applicativeSidesPxTransform = (
+  t: CSSNumber,
+  r: CSSNumber,
+  b: CSSNumber,
+  l: CSSNumber,
+) =>
   sides(
     t.unit === 'px' ? t.value : undefined,
     r.unit === 'px' ? r.value : undefined,
@@ -561,7 +566,7 @@ export function collectDomElementMetadataForElement(
   )
 }
 
-function getGridContainerProperties(
+export function getGridContainerProperties(
   elementStyle: CSSStyleDeclaration | null,
   options?: {
     dynamicCols: boolean
@@ -907,8 +912,6 @@ function getSpecialMeasurements(
     globalFrame,
   )
 
-  const parentContainerGridProperties = getGridContainerProperties(parentElementStyle)
-
   const paddingValue = isRight(padding)
     ? padding.value
     : sides(undefined, undefined, undefined, undefined)
@@ -940,6 +943,7 @@ function getSpecialMeasurements(
     dynamicRows: isDynamicGridTemplate(containerGridPropertiesFromProps.gridTemplateRows),
   })
 
+  const parentContainerGridProperties = getGridContainerProperties(parentElementStyle)
   const containerElementPropertiesFromProps = getGridElementProperties(
     parentContainerGridProperties,
     element.style,
@@ -1011,7 +1015,7 @@ function getSpecialMeasurements(
   )
 }
 
-function isDynamicGridTemplate(template: GridAutoOrTemplateBase | null) {
+export function isDynamicGridTemplate(template: GridAutoOrTemplateBase | null) {
   return template?.type === 'DIMENSIONS' && template.dimensions.some((d) => isDynamicGridRepeat(d))
 }
 
diff --git a/editor/src/components/editor/store/store-monitor.ts b/editor/src/components/editor/store/store-monitor.ts
new file mode 100644
index 000000000000..9d6b39284443
--- /dev/null
+++ b/editor/src/components/editor/store/store-monitor.ts
@@ -0,0 +1,33 @@
+import type { ElementPath } from 'utopia-shared/src/types'
+import { Substores, useEditorState } from './store-hook'
+import { mapDropNulls } from '../../../core/shared/array-utils'
+import { withUnderlyingTarget } from './editor-state'
+
+export function useMonitorChangesToElements(elementPaths: Array<ElementPath>): void {
+  useEditorState(
+    Substores.projectContents,
+    (store) => {
+      return mapDropNulls((elementPath) => {
+        return withUnderlyingTarget(
+          elementPath,
+          store.editor.projectContents,
+          null,
+          (_, element) => {
+            return element
+          },
+        )
+      }, elementPaths)
+    },
+    'useMonitorChangesToElements',
+  )
+}
+
+export function useMonitorChangesToEditor(): void {
+  useEditorState(
+    Substores.fullStore,
+    (store) => {
+      return { editor: store.editor, derived: store.derived }
+    },
+    'useMonitorChangesToEditor',
+  )
+}
diff --git a/editor/src/core/shared/dom-utils.ts b/editor/src/core/shared/dom-utils.ts
index 75edf7a06fb7..0b8edb83747e 100644
--- a/editor/src/core/shared/dom-utils.ts
+++ b/editor/src/core/shared/dom-utils.ts
@@ -1,5 +1,5 @@
 import type { ReactDOM } from 'react'
-import type { CanvasRectangle, MaybeInfinityCanvasRectangle } from './math-utils'
+import type { CanvasRectangle, MaybeInfinityCanvasRectangle, SimpleRectangle } from './math-utils'
 import {
   boundingRectangle,
   boundingRectangleArray,
@@ -266,7 +266,7 @@ export function setDOMAttribute(element: Element, attributeName: string, value:
   element.attributes.setNamedItemNS(attr)
 }
 
-function getRoundingFn(rounding: 'nearest-half' | 'no-rounding') {
+export function getRoundingFn(rounding: 'nearest-half' | 'no-rounding') {
   switch (rounding) {
     case 'nearest-half':
       return roundToNearestHalf
@@ -279,6 +279,23 @@ function getRoundingFn(rounding: 'nearest-half' | 'no-rounding') {
 
 export type ElementCanvasRectangleCache = Map<HTMLElement, { [key: string]: CanvasRectangle }>
 
+export function domRectToScaledCanvasRectangle(
+  rect: SimpleRectangle,
+  scale: number,
+  roundingFn: (value: number) => number,
+): CanvasRectangle {
+  // canvas container uses scale for <1 zoom level, it should not affect the frame of the element.
+  return scaleRect(
+    canvasRectangle({
+      x: roundingFn(rect.x),
+      y: roundingFn(rect.y),
+      width: roundingFn(rect.width),
+      height: roundingFn(rect.height),
+    }),
+    scale,
+  )
+}
+
 export function getCanvasRectangleFromElement(
   element: HTMLElement,
   canvasScale: number,
@@ -308,23 +325,10 @@ export function getCanvasRectangleFromElement(
 
   const roundingFn = getRoundingFn(rounding)
 
-  const domRectToScaledCanvasRectangle = (rect: DOMRect) => {
-    // canvas container uses scale for <1 zoom level, it should not affect the frame of the element.
-    return scaleRect(
-      canvasRectangle({
-        x: roundingFn(rect.left),
-        y: roundingFn(rect.top),
-        width: roundingFn(rect.width),
-        height: roundingFn(rect.height),
-      }),
-      scale,
-    )
-  }
-
   switch (withContent) {
     case 'without-text-content': {
       const boundingRect = element.getBoundingClientRect()
-      const elementRect = domRectToScaledCanvasRectangle(boundingRect)
+      const elementRect = domRectToScaledCanvasRectangle(boundingRect, scale, roundingFn)
       return returnAddToCache(elementRect)
     }
     case 'only-text-content':
@@ -336,12 +340,16 @@ export function getCanvasRectangleFromElement(
           // this is needed because jsdom can throw an error on the range.getBoundingClientRect() call, see https://github.com/jsdom/jsdom/issues/3002
           if (typeof range.getBoundingClientRect === 'function') {
             range.selectNode(childNode)
-            rectangles.push(domRectToScaledCanvasRectangle(range.getBoundingClientRect()))
+            rectangles.push(
+              domRectToScaledCanvasRectangle(range.getBoundingClientRect(), scale, roundingFn),
+            )
           }
         }
       }
       if (withContent === 'with-text-content') {
-        rectangles.push(domRectToScaledCanvasRectangle(element.getBoundingClientRect()))
+        rectangles.push(
+          domRectToScaledCanvasRectangle(element.getBoundingClientRect(), scale, roundingFn),
+        )
       }
       return returnAddToCache(
         boundingRectangleArray(rectangles) ?? canvasRectangle({ x: 0, y: 0, width: 0, height: 0 }),

From 9e34bde077fbb324e4bb2fcbf9ffc067e680aa60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Wed, 13 Nov 2024 14:05:04 +0100
Subject: [PATCH 215/272] Read style props through `StyleInfo` in 
 `AdjustCssLengthProperties` (#6632)

## Problem
The padding strategy relies on the `AdjustCssLengthProperties` command
to update elements, both for reading and writing styles. In order for
that to work in Tailwind projects, where elements don't have an inline
style prop, `AdjustCssLengthProperties` needs to read element styles
from the "right" property, otherwise the command wouldn't work as
intended.

## Fix
Use the `StyleInfo` system from to read the element style info.

### Details
- Refactored `AdjustCssLengthProperties` to read elements styles through
`styleInfo`
- Created a bespoke prop, `LengthProperty`, to track which props are
addressed by `LengthPropertyToAdjust`. This way it's easy to tell which
props need to be supported by `StyleInfo` to have
`AdjustCssLengthProperties` working well
- Extended `StyleInfo` to support the props read by
`AdjustCssLengthProperties`
- Updated the style plugins to support the new `StyleInfo` props

### Manual Tests:
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/components/canvas/canvas-types.ts  |  22 +-
 .../commands/adjust-css-length-command.ts     | 473 +++++++-----------
 .../components/canvas/commands/commands.ts    |   4 +-
 .../commands/set-css-length-command.spec.tsx  |   3 +-
 .../canvas/commands/set-css-length-command.ts |  11 +-
 .../canvas/commands/utils/property-utils.ts   |  27 +
 .../canvas/plugins/inline-style-plugin.ts     |  14 +
 .../canvas/plugins/tailwind-style-plugin.ts   |  17 +
 8 files changed, 263 insertions(+), 308 deletions(-)

diff --git a/editor/src/components/canvas/canvas-types.ts b/editor/src/components/canvas/canvas-types.ts
index 53466dd1f20b..f9202cf37cb6 100644
--- a/editor/src/components/canvas/canvas-types.ts
+++ b/editor/src/components/canvas/canvas-types.ts
@@ -576,17 +576,37 @@ export function maybePropertyValue<T>(property: CSSStyleProperty<T>): T | null {
 }
 
 export type FlexGapInfo = CSSStyleProperty<CSSNumber>
-
 export type FlexDirectionInfo = CSSStyleProperty<FlexDirection>
+export type LeftInfo = CSSStyleProperty<CSSNumber>
+export type RightInfo = CSSStyleProperty<CSSNumber>
+export type TopInfo = CSSStyleProperty<CSSNumber>
+export type BottomInfo = CSSStyleProperty<CSSNumber>
+export type WidthInfo = CSSStyleProperty<CSSNumber>
+export type HeightInfo = CSSStyleProperty<CSSNumber>
+export type FlexBasisInfo = CSSStyleProperty<CSSNumber>
 
 export interface StyleInfo {
   gap: FlexGapInfo | null
   flexDirection: FlexDirectionInfo | null
+  left: LeftInfo | null
+  right: RightInfo | null
+  top: TopInfo | null
+  bottom: BottomInfo | null
+  width: WidthInfo | null
+  height: HeightInfo | null
+  flexBasis: FlexBasisInfo | null
 }
 
 const emptyStyleInfo: StyleInfo = {
   gap: null,
   flexDirection: null,
+  left: null,
+  right: null,
+  top: null,
+  bottom: null,
+  width: null,
+  height: null,
+  flexBasis: null,
 }
 
 export const isStyleInfoKey = (key: string): key is keyof StyleInfo => key in emptyStyleInfo
diff --git a/editor/src/components/canvas/commands/adjust-css-length-command.ts b/editor/src/components/canvas/commands/adjust-css-length-command.ts
index c7186760ec23..aa5df344358f 100644
--- a/editor/src/components/canvas/commands/adjust-css-length-command.ts
+++ b/editor/src/components/canvas/commands/adjust-css-length-command.ts
@@ -1,41 +1,34 @@
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
-import type { Either } from '../../../core/shared/either'
-import { foldEither, isLeft, isRight, left, mapEither } from '../../../core/shared/either'
 import * as EP from '../../../core/shared/element-path'
-import type { JSXAttributes, JSXElement } from '../../../core/shared/element-template'
-import {
-  emptyComments,
-  isJSXElement,
-  jsExpressionValue,
-} from '../../../core/shared/element-template'
-import type { ValueAtPath } from '../../../core/shared/jsx-attributes'
-import { setJSXValuesAtPaths, unsetJSXValuesAtPaths } from '../../../core/shared/jsx-attributes'
-import {
-  getModifiableJSXAttributeAtPath,
-  jsxSimpleAttributeToValue,
-} from '../../../core/shared/jsx-attribute-utils'
 import { roundTo, roundToNearestWhole } from '../../../core/shared/math-utils'
 import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
 import * as PP from '../../../core/shared/property-path'
 import type { EditorState } from '../../editor/store/editor-state'
-import { modifyUnderlyingForOpenFile } from '../../editor/store/editor-state'
 import type { CSSNumber, FlexDirection } from '../../inspector/common/css-utils'
-import { parseCSSPercent, parseCSSPx, printCSSNumber } from '../../inspector/common/css-utils'
-import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
-import { patchParseSuccessAtElementPath } from './patch-utils'
-import { deleteValuesAtPath } from './utils/property-utils'
+import { printCSSNumber } from '../../inspector/common/css-utils'
+import type { BaseCommand, CommandFunctionResult, WhenToRun } from './commands'
+import { mapDropNulls } from '../../../core/shared/array-utils'
+import { getCSSNumberFromStyleInfo, maybeCssPropertyFromInlineStyle } from './utils/property-utils'
+import type { StyleUpdate } from '../plugins/style-plugins'
+import { getActivePlugin, runStyleUpdateForStrategy } from '../plugins/style-plugins'
+import type { InteractionLifecycle } from '../canvas-strategies/canvas-strategy-types'
+import type { StyleInfo } from '../canvas-types'
 
 export type CreateIfNotExistant = 'create-if-not-existing' | 'do-not-create-if-doesnt-exist'
 
+type LengthProperty = 'left' | 'right' | 'bottom' | 'top' | 'width' | 'height' | 'flexBasis'
+
+type LengthPropertyPath = PropertyPath<['style', LengthProperty]>
+
 export interface LengthPropertyToAdjust {
-  property: PropertyPath
+  property: LengthPropertyPath
   valuePx: number
   parentDimensionPx: number | undefined
   createIfNonExistant: CreateIfNotExistant
 }
 
 export function lengthPropertyToAdjust(
-  property: PropertyPath,
+  property: LengthPropertyPath,
   valuePx: number,
   parentDimensionPx: number | undefined,
   createIfNonExistant: CreateIfNotExistant,
@@ -70,237 +63,153 @@ export function adjustCssLengthProperties(
   }
 }
 
-interface UpdatedPropsAndCommandDescription {
-  updatedProps: JSXAttributes
-  commandDescription: string
-}
-
-export const runAdjustCssLengthProperties: CommandFunction<AdjustCssLengthProperties> = (
+export const runAdjustCssLengthProperties = (
   editorState: EditorState,
   command: AdjustCssLengthProperties,
-) => {
-  let commandDescriptions: Array<string> = []
-  const updatedEditorState: EditorState = modifyUnderlyingForOpenFile(
-    command.target,
+  interactionLifecycle: InteractionLifecycle,
+): CommandFunctionResult => {
+  const withConflictingPropertiesRemoved = deleteConflictingPropsForWidthHeight(
+    interactionLifecycle,
     editorState,
-    (element) => {
-      if (isJSXElement(element)) {
-        return command.properties.reduce((workingElement, property) => {
-          // Remove any conflicting properties...
-          const attributesWithConflictingPropsDeleted =
-            deleteConflictingPropsForWidthHeightFromAttributes(
-              workingElement.props,
-              property.property,
-              command.parentFlexDirection,
-            )
-          // ...If we were unable to remove those properties, then bail out as we could break something.
-          if (isLeft(attributesWithConflictingPropsDeleted)) {
-            commandDescriptions.push(attributesWithConflictingPropsDeleted.value)
-            return workingElement
-          }
-
-          // Get the current value of the property...
-          const currentValue = getModifiableJSXAttributeAtPath(
-            attributesWithConflictingPropsDeleted.value,
-            property.property,
-          )
-          // ...If the value is not writeable then escape out.
-          if (isLeft(currentValue)) {
-            commandDescriptions.push(
-              `Adjust Css Length Prop: ${EP.toUid(command.target)}/${PP.toString(
-                property.property,
-              )} not applied as value is not writeable.`,
-            )
-            return workingElement
-          }
-
-          // ...Determine some other facts about the current value.
-          const currentModifiableValue = currentValue.value
-          const simpleValueResult = jsxSimpleAttributeToValue(currentModifiableValue)
-          const valueProbablyExpression = isLeft(simpleValueResult)
-          const targetPropertyNonExistant: boolean =
-            currentModifiableValue.type === 'ATTRIBUTE_NOT_FOUND'
-
-          // ...If the current value does not exist and we shouldn't create it if it doesn't exist
-          // then exit early from handling this property.
-          if (
-            targetPropertyNonExistant &&
-            property.createIfNonExistant === 'do-not-create-if-doesnt-exist'
-          ) {
-            commandDescriptions.push(
-              `Adjust Css Length Prop: ${EP.toUid(command.target)}/${PP.toString(
-                property.property,
-              )} not applied as the property does not exist.`,
-            )
-            return workingElement
-          }
-
-          // ...If the value is an expression then we can't update it.
-          if (valueProbablyExpression) {
-            // TODO add option to override expressions!!!
-            commandDescriptions.push(
-              `Adjust Css Length Prop: ${EP.toUid(command.target)}/${PP.toString(
-                property.property,
-              )} not applied as the property is an expression we did not want to override.`,
-            )
-            return workingElement
-          }
-
-          // Commonly used function for handling the updates.
-          function handleUpdateResult(
-            result: Either<string, UpdatedPropsAndCommandDescription>,
-          ): JSXElement {
-            return foldEither(
-              (error) => {
-                commandDescriptions.push(error)
-                return workingElement
-              },
-              (updatedProps) => {
-                commandDescriptions.push(updatedProps.commandDescription)
-                return {
-                  ...workingElement,
-                  props: updatedProps.updatedProps,
-                }
-              },
-              result,
-            )
-          }
-
-          // Parse the current value as a pixel value...
-          const parsePxResult = parseCSSPx(simpleValueResult.value) // TODO make type contain px
-          // ...If the value can be parsed as a pixel value then update it.
-          if (isRight(parsePxResult)) {
-            return handleUpdateResult(
-              updatePixelValueByPixel(
-                attributesWithConflictingPropsDeleted.value,
-                command.target,
-                property.property,
-                parsePxResult.value,
-                property.valuePx,
-              ),
-            )
-          }
-
-          // Parse the current value as a percentage value...
-          const parsePercentResult = parseCSSPercent(simpleValueResult.value) // TODO make type contain %
-          // ...If the value can be parsed as a percentage value then update it.
-          if (isRight(parsePercentResult)) {
-            return handleUpdateResult(
-              updatePercentageValueByPixel(
-                attributesWithConflictingPropsDeleted.value,
-                command.target,
-                property.property,
-                property.parentDimensionPx,
-                parsePercentResult.value,
-                property.valuePx,
-              ),
-            )
-          }
-
-          // Otherwise if it is permitted to create it if it doesn't exist, then do so.
-          if (property.createIfNonExistant === 'create-if-not-existing') {
-            return handleUpdateResult(
-              setPixelValue(
-                attributesWithConflictingPropsDeleted.value,
-                command.target,
-                property.property,
-                property.valuePx,
-              ),
-            )
-          }
-
-          // Updating the props fallback.
-          commandDescriptions.push(
-            `Adjust Css Length Prop: ${EP.toUid(command.target)}/${PP.toString(
-              property.property,
-            )} not applied as the property is in a CSS unit we do not support. (${
-              simpleValueResult.value
-            })`,
-          )
-          return workingElement
-        }, element)
-      }
-
-      // Final fallback.
-      return element
-    },
+    command.target,
+    command.properties.map((p) => p.property),
+    command.parentFlexDirection,
   )
 
-  if (commandDescriptions.length === 0) {
-    // Cater for no updates at all happened.
+  const styleInfoReader = getActivePlugin(withConflictingPropertiesRemoved).styleInfoFactory({
+    projectContents: withConflictingPropertiesRemoved.projectContents,
+    metadata: withConflictingPropertiesRemoved.jsxMetadata,
+    elementPathTree: withConflictingPropertiesRemoved.elementPathTree,
+  })
+
+  const styleInfo = styleInfoReader(command.target)
+  if (styleInfo == null) {
     return {
       editorStatePatches: [],
-      commandDescription: `No JSXElement was found at path ${EP.toString(command.target)}.`,
+      commandDescription: `Adjust CSS Length Properties: Element at ${EP.toString(
+        command.target,
+      )} not found`,
     }
-  } else {
-    if (updatedEditorState === editorState) {
-      // As the `EditorState` never changed, return an empty patch.
-      return {
-        editorStatePatches: [],
-        commandDescription: commandDescriptions.join('\n'),
-      }
-    } else {
-      // Build the patch for the changes.
-      const editorStatePatch = patchParseSuccessAtElementPath(
+  }
+
+  let commandDescriptions: Array<string> = []
+
+  const propsToUpdate: StyleUpdate[] = mapDropNulls((propertyUpdate) => {
+    const property = propertyUpdate.property.propertyElements[1] // the safety of propertyElements[1] is guaranteed by the LengthPropertyPath type
+
+    const currentValue = getCSSNumberFromStyleInfo(styleInfo, property)
+    if (currentValue.type === 'not-css-number') {
+      commandDescriptions.push(
+        `Adjust Css Length Prop: ${EP.toUid(command.target)}/${PP.toString(
+          propertyUpdate.property,
+        )} not applied as value is not writeable.`,
+      )
+      return null
+    }
+
+    if (
+      currentValue.type === 'not-found' &&
+      propertyUpdate.createIfNonExistant === 'do-not-create-if-doesnt-exist'
+    ) {
+      commandDescriptions.push(
+        `Adjust Css Length Prop: ${EP.toUid(command.target)}/${PP.toString(
+          propertyUpdate.property,
+        )} not applied as the property does not exist.`,
+      )
+      return null
+    }
+
+    if (
+      currentValue.type === 'css-number' &&
+      (currentValue.number.unit == null || currentValue.number.unit === 'px')
+    ) {
+      const { commandDescription, styleUpdate } = updatePixelValueByPixel(
         command.target,
-        updatedEditorState,
-        (success) => {
-          return {
-            topLevelElements: {
-              $set: success.topLevelElements,
-            },
-            imports: {
-              $set: success.imports,
-            },
-          }
-        },
+        property,
+        currentValue.number,
+        propertyUpdate.valuePx,
       )
-      return {
-        editorStatePatches: [editorStatePatch],
-        commandDescription: commandDescriptions.join('\n'),
-      }
+      commandDescriptions.push(commandDescription)
+      return styleUpdate
+    }
+
+    if (currentValue.type === 'css-number' && currentValue.number.unit === '%') {
+      const { commandDescription, styleUpdate } = updatePercentageValueByPixel(
+        command.target,
+        property,
+        propertyUpdate.parentDimensionPx,
+        currentValue.number,
+        propertyUpdate.valuePx,
+      )
+      commandDescriptions.push(commandDescription)
+      return styleUpdate ?? null
     }
+
+    if (
+      currentValue.type === 'not-found' &&
+      propertyUpdate.createIfNonExistant === 'create-if-not-existing'
+    ) {
+      const { commandDescription, styleUpdate } = setPixelValue(
+        command.target,
+        property,
+        propertyUpdate.valuePx,
+      )
+      commandDescriptions.push(commandDescription)
+      return styleUpdate
+    }
+
+    commandDescriptions.push(
+      `Adjust Css Length Prop: ${EP.toUid(command.target)}/${PP.toString(
+        propertyUpdate.property,
+      )} not applied as the property is in a CSS unit we do not support.`,
+    )
+    return null
+  }, command.properties)
+
+  if (propsToUpdate.length === 0) {
+    return { editorStatePatches: [], commandDescription: 'No props to update' }
+  }
+
+  const { editorStatePatches } = runStyleUpdateForStrategy(
+    interactionLifecycle,
+    withConflictingPropertiesRemoved,
+    command.target,
+    propsToUpdate,
+  )
+
+  return {
+    editorStatePatches: editorStatePatches,
+    commandDescription: commandDescriptions.join('\n'),
   }
 }
 
+type TargetProperty = keyof StyleInfo
+
 function setPixelValue(
-  properties: JSXAttributes,
   targetElement: ElementPath,
-  targetProperty: PropertyPath,
+  targetProperty: TargetProperty,
   value: number,
-): Either<string, UpdatedPropsAndCommandDescription> {
+): { commandDescription: string; styleUpdate: StyleUpdate } {
   const newValueCssNumber: CSSNumber = {
     value: value,
     unit: null,
   }
   const newValue = printCSSNumber(newValueCssNumber, null)
 
-  const propsToUpdate: Array<ValueAtPath> = [
-    {
-      path: targetProperty,
-      value: jsExpressionValue(newValue, emptyComments),
-    },
-  ]
-
-  const updatePropsResult = setJSXValuesAtPaths(properties, propsToUpdate)
-
-  return mapEither((updatedProps) => {
-    return {
-      updatedProps: updatedProps,
-      commandDescription: `Set css Length Prop: ${EP.toUid(targetElement)}/${PP.toString(
-        targetProperty,
-      )} to ${value}.`,
-    }
-  }, updatePropsResult)
+  return {
+    styleUpdate: { type: 'set', property: targetProperty, value: newValue },
+    commandDescription: `Set css Length Prop: ${EP.toUid(
+      targetElement,
+    )}/${targetProperty} to ${value}.`,
+  }
 }
 
 function updatePixelValueByPixel(
-  properties: JSXAttributes,
   targetElement: ElementPath,
-  targetProperty: PropertyPath,
+  targetProperty: TargetProperty,
   currentValue: CSSNumber,
   byValue: number,
-): Either<string, UpdatedPropsAndCommandDescription> {
+): { commandDescription: string; styleUpdate: StyleUpdate } {
   if (currentValue.unit != null && currentValue.unit !== 'px') {
     throw new Error('updatePixelValueByPixel called with a non-pixel cssnumber')
   }
@@ -311,48 +220,37 @@ function updatePixelValueByPixel(
   }
   const newValue = printCSSNumber(newValueCssNumber, null)
 
-  const propsToUpdate: Array<ValueAtPath> = [
-    {
-      path: targetProperty,
-      value: jsExpressionValue(newValue, emptyComments),
-    },
-  ]
-  const updatePropsResult = setJSXValuesAtPaths(properties, propsToUpdate)
-
-  return mapEither((updatedProps) => {
-    return {
-      updatedProps: updatedProps,
-      commandDescription: `Adjust Css Length Prop: ${EP.toUid(targetElement)}/${PP.toString(
-        targetProperty,
-      )} by ${byValue}`,
-    }
-  }, updatePropsResult)
+  return {
+    styleUpdate: { type: 'set', property: targetProperty, value: newValue },
+    commandDescription: `Adjust Css Length Prop: ${EP.toUid(
+      targetElement,
+    )}/${targetProperty} by ${byValue}`,
+  }
 }
 
 function updatePercentageValueByPixel(
-  properties: JSXAttributes,
   targetElement: ElementPath,
-  targetProperty: PropertyPath,
+  targetProperty: TargetProperty,
   parentDimensionPx: number | undefined,
   currentValue: CSSNumber, // TODO restrict to percentage numbers
   byValue: number,
-): Either<string, UpdatedPropsAndCommandDescription> {
+): { commandDescription: string; styleUpdate?: StyleUpdate } {
   if (currentValue.unit == null || currentValue.unit !== '%') {
     throw new Error('updatePercentageValueByPixel called with a non-percentage cssnumber')
   }
   if (parentDimensionPx == null) {
-    return left(
-      `Adjust Css Length Prop: ${EP.toUid(targetElement)}/${PP.toString(
-        targetProperty,
-      )} not applied because the parent dimensions are unknown for some reason.`,
-    )
+    return {
+      commandDescription: `Adjust Css Length Prop: ${EP.toUid(
+        targetElement,
+      )}/${targetProperty} not applied because the parent dimensions are unknown for some reason.`,
+    }
   }
   if (parentDimensionPx === 0) {
-    return left(
-      `Adjust Css Length Prop: ${EP.toUid(targetElement)}/${PP.toString(
-        targetProperty,
-      )} not applied because the parent dimension is 0.`,
-    )
+    return {
+      commandDescription: `Adjust Css Length Prop: ${EP.toUid(
+        targetElement,
+      )}/${targetProperty} not applied because the parent dimension is 0.`,
+    }
   }
   const currentValuePercent = currentValue.value
   const offsetInPercent = (byValue / parentDimensionPx) * 100
@@ -362,23 +260,12 @@ function updatePercentageValueByPixel(
   }
   const newValue = printCSSNumber(newValueCssNumber, null)
 
-  const propsToUpdate: Array<ValueAtPath> = [
-    {
-      path: targetProperty,
-      value: jsExpressionValue(newValue, emptyComments),
-    },
-  ]
-
-  const updatePropsResult = setJSXValuesAtPaths(properties, propsToUpdate)
-
-  return mapEither((updatedProps) => {
-    return {
-      updatedProps: updatedProps,
-      commandDescription: `Adjust Css Length Prop: ${EP.toUid(targetElement)}/${PP.toString(
-        targetProperty,
-      )} by ${byValue}`,
-    }
-  }, updatePropsResult)
+  return {
+    styleUpdate: { type: 'set', property: targetProperty, value: newValue },
+    commandDescription: `Adjust Css Length Prop: ${EP.toUid(
+      targetElement,
+    )}/${targetProperty} by ${byValue}`,
+  }
 }
 
 const FlexSizeProperties: Array<PropertyPath> = [
@@ -391,7 +278,7 @@ const FlexSizeProperties: Array<PropertyPath> = [
 function getConflictingPropertiesToDelete(
   parentFlexDirection: FlexDirection | null,
   propertyPath: PropertyPath,
-): Array<PropertyPath> {
+): Array<string> {
   let propertiesToDelete: Array<PropertyPath> = []
 
   const parentFlexDimension =
@@ -413,41 +300,27 @@ function getConflictingPropertiesToDelete(
       }
       break
   }
-  return propertiesToDelete
-}
-
-function deleteConflictingPropsForWidthHeightFromAttributes(
-  attributes: JSXAttributes,
-  propertyPath: PropertyPath,
-  parentFlexDirection: FlexDirection | null,
-): Either<string, JSXAttributes> {
-  const propertiesToDelete: Array<PropertyPath> = getConflictingPropertiesToDelete(
-    parentFlexDirection,
-    propertyPath,
-  )
-  return unsetJSXValuesAtPaths(attributes, propertiesToDelete)
+  return mapDropNulls(maybeCssPropertyFromInlineStyle, propertiesToDelete)
 }
 
 export function deleteConflictingPropsForWidthHeight(
+  interactionLifecycle: InteractionLifecycle,
   editorState: EditorState,
-  target: ElementPath,
-  propertyPath: PropertyPath,
+  elementPath: ElementPath,
+  propertyPaths: PropertyPath[],
   parentFlexDirection: FlexDirection | null,
 ): EditorState {
-  const propertiesToDelete: Array<PropertyPath> = getConflictingPropertiesToDelete(
-    parentFlexDirection,
-    propertyPath,
-  )
-
-  if (propertiesToDelete.length === 0) {
-    return editorState
-  } else {
-    const { editorStateWithChanges: editorStateWithPropsDeleted } = deleteValuesAtPath(
-      editorState,
-      target,
-      propertiesToDelete,
-    )
+  return propertyPaths.reduce((editor, propertyPath) => {
+    const propertiesToDelete = getConflictingPropertiesToDelete(parentFlexDirection, propertyPath)
+    if (propertiesToDelete.length === 0) {
+      return editor
+    }
 
-    return editorStateWithPropsDeleted
-  }
+    return runStyleUpdateForStrategy(
+      interactionLifecycle,
+      editor,
+      elementPath,
+      propertiesToDelete.map((p) => ({ type: 'delete', property: p })),
+    ).editorStateWithChanges
+  }, editorState)
 }
diff --git a/editor/src/components/canvas/commands/commands.ts b/editor/src/components/canvas/commands/commands.ts
index 692863192a31..7ce5e9b1e6ae 100644
--- a/editor/src/components/canvas/commands/commands.ts
+++ b/editor/src/components/canvas/commands/commands.ts
@@ -143,7 +143,7 @@ export function runCanvasCommand(
     case 'STRATEGY_SWITCHED':
       return runStrategySwitchedCommand(command)
     case 'ADJUST_CSS_LENGTH_PROPERTY':
-      return runAdjustCssLengthProperties(editorState, command)
+      return runAdjustCssLengthProperties(editorState, command, commandLifecycle)
     case 'REPARENT_ELEMENT':
       return runReparentElement(editorState, command)
     case 'DUPLICATE_ELEMENT':
@@ -157,7 +157,7 @@ export function runCanvasCommand(
     case 'CONVERT_TO_ABSOLUTE':
       return runConvertToAbsolute(editorState, command)
     case 'SET_CSS_LENGTH_PROPERTY':
-      return runSetCssLengthProperty(editorState, command)
+      return runSetCssLengthProperty(editorState, command, commandLifecycle)
     case 'REORDER_ELEMENT':
       return runReorderElement(editorState, command)
     case 'SHOW_OUTLINE_HIGHLIGHT':
diff --git a/editor/src/components/canvas/commands/set-css-length-command.spec.tsx b/editor/src/components/canvas/commands/set-css-length-command.spec.tsx
index cb624278ce0c..0960f89062ed 100644
--- a/editor/src/components/canvas/commands/set-css-length-command.spec.tsx
+++ b/editor/src/components/canvas/commands/set-css-length-command.spec.tsx
@@ -51,6 +51,7 @@ describe('setCssLengthProperty', () => {
     const result = runSetCssLengthProperty(
       renderResult.getEditorState().editor,
       setCSSPropertyCommand,
+      'end-interaction',
     )
 
     const patchedEditor = updateEditorStateWithPatches(
@@ -227,7 +228,7 @@ function runCommandUpdateEditor(
   store: EditorStorePatched,
   command: SetCssLengthProperty,
 ): EditorState {
-  const result = runSetCssLengthProperty(store.editor, command)
+  const result = runSetCssLengthProperty(store.editor, command, 'end-interaction')
 
   return updateEditorStateWithPatches(store.editor, result.editorStatePatches)
 }
diff --git a/editor/src/components/canvas/commands/set-css-length-command.ts b/editor/src/components/canvas/commands/set-css-length-command.ts
index 0a4bafc4d315..83f540870260 100644
--- a/editor/src/components/canvas/commands/set-css-length-command.ts
+++ b/editor/src/components/canvas/commands/set-css-length-command.ts
@@ -25,9 +25,10 @@ import {
 } from '../../inspector/common/css-utils'
 import type { CreateIfNotExistant } from './adjust-css-length-command'
 import { deleteConflictingPropsForWidthHeight } from './adjust-css-length-command'
-import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+import type { BaseCommand, CommandFunctionResult, WhenToRun } from './commands'
 import { addToastPatch } from './show-toast-command'
 import { applyValuesAtPath } from './utils/property-utils'
+import type { InteractionLifecycle } from '../canvas-strategies/canvas-strategy-types'
 
 type CssNumberOrKeepOriginalUnit =
   | { type: 'EXPLICIT_CSS_NUMBER'; value: CSSNumber | CSSKeyword }
@@ -75,15 +76,17 @@ export function setCssLengthProperty(
   }
 }
 
-export const runSetCssLengthProperty: CommandFunction<SetCssLengthProperty> = (
+export const runSetCssLengthProperty = (
   editorState: EditorState,
   command: SetCssLengthProperty,
-) => {
+  interactionLifecycle: InteractionLifecycle,
+): CommandFunctionResult => {
   // in case of width or height change, delete min, max and flex props
   const editorStateWithPropsDeleted = deleteConflictingPropsForWidthHeight(
+    interactionLifecycle,
     editorState,
     command.target,
-    command.property,
+    [command.property],
     command.parentFlexDirection,
   )
 
diff --git a/editor/src/components/canvas/commands/utils/property-utils.ts b/editor/src/components/canvas/commands/utils/property-utils.ts
index cf615f93fec6..f1d9ce9a5935 100644
--- a/editor/src/components/canvas/commands/utils/property-utils.ts
+++ b/editor/src/components/canvas/commands/utils/property-utils.ts
@@ -5,6 +5,9 @@ import { setJSXValuesAtPaths, unsetJSXValuesAtPaths } from '../../../../core/sha
 import type { EditorState, EditorStatePatch } from '../../../editor/store/editor-state'
 import { modifyUnderlyingElementForOpenFile } from '../../../editor/store/editor-state'
 import { patchParseSuccessAtElementPath } from '../patch-utils'
+import type { CSSNumber } from '../../../inspector/common/css-utils'
+import { isCSSNumber } from '../../../inspector/common/css-utils'
+import { type StyleInfo, isStyleInfoKey } from '../../canvas-types'
 
 export interface EditorStateWithPatch {
   editorStateWithChanges: EditorState
@@ -99,3 +102,27 @@ export function maybeCssPropertyFromInlineStyle(property: PropertyPath): string
   }
   return prop
 }
+
+export type GetCSSNumberFromStyleInfoResult =
+  | { type: 'not-found' }
+  | { type: 'not-css-number' }
+  | { type: 'css-number'; number: CSSNumber }
+
+export function getCSSNumberFromStyleInfo(
+  styleInfo: StyleInfo,
+  property: string,
+): GetCSSNumberFromStyleInfoResult {
+  if (!isStyleInfoKey(property)) {
+    return { type: 'not-found' }
+  }
+
+  const prop = styleInfo[property]
+  if (prop == null || prop.type === 'not-found') {
+    return { type: 'not-found' }
+  }
+
+  if (prop.type === 'not-parsable' || !isCSSNumber(prop.value)) {
+    return { type: 'not-css-number' }
+  }
+  return { type: 'css-number', number: prop.value }
+}
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.ts b/editor/src/components/canvas/plugins/inline-style-plugin.ts
index 5b22a0fb5fae..f3b9350f44ff 100644
--- a/editor/src/components/canvas/plugins/inline-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.ts
@@ -61,10 +61,24 @@ export const InlineStylePlugin: StylePlugin = {
 
       const gap = getPropertyFromInstance('gap', element.props)
       const flexDirection = getPropertyFromInstance('flexDirection', element.props)
+      const left = getPropertyFromInstance('left', element.props)
+      const right = getPropertyFromInstance('right', element.props)
+      const top = getPropertyFromInstance('top', element.props)
+      const bottom = getPropertyFromInstance('bottom', element.props)
+      const width = getPropertyFromInstance('width', element.props)
+      const height = getPropertyFromInstance('height', element.props)
+      const flexBasis = getPropertyFromInstance('flexBasis', element.props)
 
       return {
         gap: gap,
         flexDirection: flexDirection,
+        left: left,
+        right: right,
+        top: top,
+        bottom: bottom,
+        width: width,
+        height: height,
+        flexBasis: flexBasis,
       }
     },
   updateStyles: (editorState, elementPath, updates) => {
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
index 9747c65a1e08..7aa2ae4c1f01 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -25,6 +25,13 @@ function parseTailwindProperty<T>(
 const TailwindPropertyMapping: Record<string, string> = {
   gap: 'gap',
   flexDirection: 'flexDirection',
+  left: 'positionLeft',
+  right: 'positionRight',
+  top: 'positionTop',
+  bottom: 'positionBottom',
+  width: 'width',
+  height: 'height',
+  flexBasis: 'flexBasis',
 }
 
 function isSupportedTailwindProperty(prop: unknown): prop is keyof typeof TailwindPropertyMapping {
@@ -75,6 +82,16 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
           mapping[TailwindPropertyMapping.flexDirection],
           cssParsers.flexDirection,
         ),
+        left: parseTailwindProperty(mapping[TailwindPropertyMapping.left], cssParsers.left),
+        right: parseTailwindProperty(mapping[TailwindPropertyMapping.right], cssParsers.right),
+        top: parseTailwindProperty(mapping[TailwindPropertyMapping.top], cssParsers.top),
+        bottom: parseTailwindProperty(mapping[TailwindPropertyMapping.bottom], cssParsers.bottom),
+        width: parseTailwindProperty(mapping[TailwindPropertyMapping.width], cssParsers.width),
+        height: parseTailwindProperty(mapping[TailwindPropertyMapping.height], cssParsers.height),
+        flexBasis: parseTailwindProperty(
+          mapping[TailwindPropertyMapping.flexBasis],
+          cssParsers.flexBasis,
+        ),
       }
     },
   updateStyles: (editorState, elementPath, updates) => {

From f196d144bb78639dadba8a11091544f0fadb3280 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Wed, 13 Nov 2024 15:30:52 +0100
Subject: [PATCH 216/272] Remove unnecessary props from `StyleInfoFactory`
 context param (#6634)

## Problem
`metadata` and `elementPathTree` are required by the context param of
`StylePlugin.styleInfoFactory`, but they weren't used by the plugins.
Because of this, having to pass `metadata` and `elementPathTree` in the
context param created unnecessary boilerplate

## Fix
Remove `metadata` and `elementPathTree` from the context param of
`StylePlugin.styleInfoFactory`, but keep the context param itself so
other data can be added to the context later on.
---
 .../components/canvas/canvas-strategies/canvas-strategies.tsx | 4 ----
 .../canvas/canvas-strategies/canvas-strategy-types.ts         | 2 --
 .../components/canvas/commands/adjust-css-length-command.ts   | 2 --
 .../canvas/controls/select-mode/flex-gap-control.tsx          | 2 --
 .../canvas/controls/select-mode/subdued-flex-gap-controls.tsx | 2 --
 .../src/components/canvas/plugins/inline-style-plugin.spec.ts | 2 --
 editor/src/components/canvas/plugins/style-plugins.ts         | 2 --
 7 files changed, 16 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
index d40d6803b304..484d4c9cd659 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -225,8 +225,6 @@ export function pickCanvasStateFromEditorState(
     propertyControlsInfo: editorState.propertyControlsInfo,
     styleInfoReader: activePlugin.styleInfoFactory({
       projectContents: editorState.projectContents,
-      metadata: editorState.jsxMetadata,
-      elementPathTree: editorState.elementPathTree,
     }),
   }
 }
@@ -254,8 +252,6 @@ export function pickCanvasStateFromEditorStateWithMetadata(
     propertyControlsInfo: editorState.propertyControlsInfo,
     styleInfoReader: activePlugin.styleInfoFactory({
       projectContents: editorState.projectContents,
-      metadata: metadata,
-      elementPathTree: editorState.elementPathTree,
     }),
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
index e2ab2905af65..6bf08da6cde1 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
@@ -110,8 +110,6 @@ export type StyleInfoReader = (elementPath: ElementPath) => StyleInfo | null
 
 export type StyleInfoFactory = (context: {
   projectContents: ProjectContentTreeRoot
-  metadata: ElementInstanceMetadataMap
-  elementPathTree: ElementPathTrees
 }) => StyleInfoReader
 
 export interface InteractionCanvasState {
diff --git a/editor/src/components/canvas/commands/adjust-css-length-command.ts b/editor/src/components/canvas/commands/adjust-css-length-command.ts
index aa5df344358f..9c5137c5cc2a 100644
--- a/editor/src/components/canvas/commands/adjust-css-length-command.ts
+++ b/editor/src/components/canvas/commands/adjust-css-length-command.ts
@@ -78,8 +78,6 @@ export const runAdjustCssLengthProperties = (
 
   const styleInfoReader = getActivePlugin(withConflictingPropertiesRemoved).styleInfoFactory({
     projectContents: withConflictingPropertiesRemoved.projectContents,
-    metadata: withConflictingPropertiesRemoved.jsxMetadata,
-    elementPathTree: withConflictingPropertiesRemoved.elementPathTree,
   })
 
   const styleInfo = styleInfoReader(command.target)
diff --git a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
index f210ec1e0621..672e28d2f801 100644
--- a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
@@ -139,8 +139,6 @@ export const FlexGapControl = controlForStrategyMemoized<FlexGapControlProps>((p
       maybeFlexGapData(
         getActivePlugin(store.editor).styleInfoFactory({
           projectContents: store.editor.projectContents,
-          metadata: metadata,
-          elementPathTree: store.editor.elementPathTree,
         })(selectedElement),
         MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, selectedElement),
       ),
diff --git a/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx b/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx
index ea4b03eb8455..539d082cc253 100644
--- a/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx
+++ b/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx
@@ -43,8 +43,6 @@ export const SubduedFlexGapControl = React.memo<SubduedFlexGapControlProps>((pro
       maybeFlexGapData(
         getActivePlugin(store.editor).styleInfoFactory({
           projectContents: store.editor.projectContents,
-          metadata: store.editor.jsxMetadata,
-          elementPathTree: store.editor.elementPathTree,
         })(selectedElement),
         MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, selectedElement),
       ),
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts b/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts
index fefb978860c4..7be9e9103a53 100644
--- a/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts
@@ -96,9 +96,7 @@ function getStyleInfoFromInlineStyle(editor: EditorRenderResult) {
   const { jsxMetadata, projectContents, elementPathTree } = editor.getEditorState().editor
 
   const styleInfoReader = InlineStylePlugin.styleInfoFactory({
-    metadata: jsxMetadata,
     projectContents: projectContents,
-    elementPathTree: elementPathTree,
   })
   const styleInfo = styleInfoReader(EP.fromString('sb/scene/div'))
   return styleInfo
diff --git a/editor/src/components/canvas/plugins/style-plugins.ts b/editor/src/components/canvas/plugins/style-plugins.ts
index d912ac52cf85..87e771bb8118 100644
--- a/editor/src/components/canvas/plugins/style-plugins.ts
+++ b/editor/src/components/canvas/plugins/style-plugins.ts
@@ -192,8 +192,6 @@ function getPropertiesToZero(
 export function patchRemovedProperties(editorState: EditorState): EditorState {
   const styleInfoReader = getActivePlugin(editorState).styleInfoFactory({
     projectContents: editorState.projectContents,
-    metadata: editorState.jsxMetadata,
-    elementPathTree: editorState.elementPathTree,
   })
 
   const propertiesUpdatedDuringInteraction = getPropertiesUpdatedDuringInteraction(editorState)

From 72d682baccee400e6f727d3b9bbe368c0b80dae1 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Thu, 14 Nov 2024 10:16:35 +0100
Subject: [PATCH 217/272] Grid component support preparation (#6636)

**Problem:**
This PR is a preparation step to support strategies for grid items in
the following scenario:

- the grid is in a component
- the grid renders the component's children
- the grid is not the root element of the component

The main issue is that we still identify the grid control using the
element path of the grid, even though that grid doesn't have a path in
this case. We need to be able to show and manage a grid control using
the element path of one of its items.

**Fix:**
Instead of storing the element path of the `GridControlData`, I
introduced a new type `GridIdentifier` which can identify a grid either
by its container element path, or an item's element path.

I updated the strategies and commands to use this grid identifier, and
also made sure the strategies for grid items identify using the item,
and do not refer to the parent path as the grid. (For reparent we can
not really do that, because the item is not in the grid yet. Solving
that is not in scope now).

What is missing:
I still use mostly the old control implementations, it only works now
because the `useGridData` hook converts GridItemIdentifier-s to a
GridContainerIdentifier-s (using parentPath). So this PR is just a
preparation, it does not solve the component problem yet. Next step is
to make sure the control can render on the parent element when it
receives a GridItemIdentifier.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../canvas-strategies/canvas-strategies.tsx   |  3 +-
 .../strategies/basic-resize-strategy.tsx      |  4 +-
 ...nge-element-location-duplicate-strategy.ts | 27 +-----
 ...ange-element-location-keyboard-strategy.ts | 12 +--
 .../grid-change-element-location-strategy.ts  | 37 +++-----
 .../grid-draw-to-insert-strategy.tsx          |  5 +-
 .../strategies/grid-move-absolute.ts          | 43 ++++------
 .../strategies/grid-reorder-strategy.ts       | 37 +++-----
 .../strategies/grid-reparent-strategy.tsx     |  7 +-
 .../grid-resize-element-strategy.ts           | 15 +---
 .../strategies/resize-grid-strategy.ts        |  5 +-
 .../strategies/set-grid-gap-strategy.tsx      |  3 +-
 .../commands/show-grid-controls-command.ts    |  7 +-
 .../controls/grid-controls-for-strategies.tsx | 41 ++++-----
 .../canvas/controls/grid-controls.tsx         | 84 +++++++++++--------
 .../grid-gap-control-component.tsx            |  3 +-
 .../select-mode/subdued-grid-gap-controls.tsx |  5 +-
 .../components/editor/store/editor-state.ts   | 36 +++++++-
 .../store/store-deep-equality-instances.ts    | 45 +++++++++-
 .../src/core/model/element-metadata-utils.ts  | 13 +++
 20 files changed, 231 insertions(+), 201 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
index 484d4c9cd659..5f31076f29bf 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -7,6 +7,7 @@ import type {
   EditorState,
   EditorStatePatch,
   EditorStorePatched,
+  GridIdentifier,
 } from '../../editor/store/editor-state'
 import { Substores, useEditorState, useSelectorWithCallback } from '../../editor/store/store-hook'
 import type {
@@ -676,7 +677,7 @@ export function combineApplicableControls(
   }
 
   // Sift the instances of `GridControls`, storing their targets by when they should be shown.
-  let gridControlsTargets: Map<WhenToShowControl, Array<ElementPath>> = new Map()
+  let gridControlsTargets: Map<WhenToShowControl, Array<GridIdentifier>> = new Map()
   for (const control of gridControlsInstances) {
     if (isGridControlsProps(control.props)) {
       const possibleTargets = gridControlsTargets.get(control.show)
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
index 1bef2cc9ef87..ffc0f97ef0ed 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -13,7 +13,7 @@ import {
 } from '../../../../core/shared/math-utils'
 import * as PP from '../../../../core/shared/property-path'
 import { styleStringInArray } from '../../../../utils/common-constants'
-import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
+import { gridItemIdentifier, trueUpGroupElementChanged } from '../../../editor/store/editor-state'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
 import { isFillOrStretchModeApplied } from '../../../inspector/inspector-common'
 import type { EdgePosition } from '../../canvas-types'
@@ -122,7 +122,7 @@ export function basicResizeStrategy(
         key: 'parent-bounds-control',
         show: 'visible-only-while-active',
       }),
-      ...(isGridCell ? [controlsForGridPlaceholders(EP.parentPath(selectedElement))] : []),
+      ...(isGridCell ? [controlsForGridPlaceholders(gridItemIdentifier(selectedElement))] : []),
     ],
     fitness:
       interactionSession != null &&
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
index a60713a30bd5..ffa2066191ae 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
@@ -1,7 +1,6 @@
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { generateUidWithExistingComponents } from '../../../../core/model/element-template-utils'
 import * as EP from '../../../../core/shared/element-path'
-import { isInfinityRectangle } from '../../../../core/shared/math-utils'
 import { CSSCursor } from '../../../../uuiui-deps'
 import { duplicateElement } from '../../commands/duplicate-element-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
@@ -19,11 +18,11 @@ import {
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
 import {
-  findOriginalGrid,
   getParentGridTemplatesFromChildMeasurements,
   gridMoveStrategiesExtraCommands,
 } from './grid-helpers'
 import { runGridChangeElementLocation } from './grid-change-element-location-strategy'
+import { gridItemIdentifier } from '../../../editor/store/editor-state'
 
 export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -72,22 +71,6 @@ export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory =
     return null
   }
 
-  const parentGridPath = findOriginalGrid(
-    canvasState.startingMetadata,
-    EP.parentPath(selectedElement),
-  ) // TODO don't use EP.parentPath
-  if (parentGridPath == null) {
-    return null
-  }
-
-  const gridFrame = MetadataUtils.findElementByElementPath(
-    canvasState.startingMetadata,
-    parentGridPath,
-  )?.globalFrame
-  if (gridFrame == null || isInfinityRectangle(gridFrame)) {
-    return null
-  }
-
   return {
     id: 'grid-change-element-location-duplicate-strategy',
     name: 'Change Location (Duplicate)',
@@ -96,7 +79,7 @@ export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory =
       category: 'tools',
       type: 'pointer',
     },
-    controlsToRender: [controlsForGridPlaceholders(parentGridPath)],
+    controlsToRender: [controlsForGridPlaceholders(gridItemIdentifier(selectedElement))],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 3),
     apply: () => {
       if (
@@ -117,8 +100,7 @@ export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory =
         duplicatedElementNewUids[oldUid] = newUid
       }
 
-      const targetElement = EP.appendToPath(parentGridPath, newUid)
-
+      const targetElement = EP.appendToPath(EP.parentPath(selectedElement), newUid)
       const { parentGridCellGlobalFrames, parentContainerGridProperties } =
         selectedElementMetadata.specialSizeMeasurements
       if (parentGridCellGlobalFrames == null) {
@@ -129,14 +111,13 @@ export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory =
         canvasState.startingMetadata,
         interactionSession.interactionData,
         selectedElementMetadata,
-        parentGridPath,
         parentGridCellGlobalFrames,
         parentContainerGridProperties,
         null,
       )
 
       const { midInteractionCommands, onCompleteCommands } = gridMoveStrategiesExtraCommands(
-        parentGridPath,
+        EP.parentPath(selectedElement), // TODO: don't use EP.parentPath
         initialTemplates,
       )
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
index bdddd13ba5cc..3fcda3e09695 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
@@ -10,9 +10,10 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { findOriginalGrid, setGridPropsCommands } from './grid-helpers'
+import { setGridPropsCommands } from './grid-helpers'
 import { getGridChildCellCoordBoundsFromCanvas } from './grid-cell-bounds'
 import { accumulatePresses } from './shared-keyboard-strategy-helpers'
+import { gridItemIdentifier } from '../../../editor/store/editor-state'
 
 export function gridChangeElementLocationResizeKeyboardStrategy(
   canvasState: InteractionCanvasState,
@@ -41,11 +42,6 @@ export function gridChangeElementLocationResizeKeyboardStrategy(
     return null
   }
 
-  const parentGridPath = findOriginalGrid(canvasState.startingMetadata, EP.parentPath(target)) // TODO don't use EP.parentPath
-  if (parentGridPath == null) {
-    return null
-  }
-
   const gridTemplate = cell.specialSizeMeasurements.parentContainerGridProperties
   const gridCellGlobalFrames = cell.specialSizeMeasurements.parentGridCellGlobalFrames
 
@@ -72,7 +68,7 @@ export function gridChangeElementLocationResizeKeyboardStrategy(
       category: 'modalities',
       type: 'reorder-large',
     },
-    controlsToRender: [controlsForGridPlaceholders(parentGridPath)],
+    controlsToRender: [controlsForGridPlaceholders(gridItemIdentifier(target))],
     fitness: fitness(interactionSession),
     apply: () => {
       if (interactionSession == null || interactionSession.interactionData.type !== 'KEYBOARD') {
@@ -131,7 +127,7 @@ export function gridChangeElementLocationResizeKeyboardStrategy(
           gridRowStart,
           gridRowEnd,
         }),
-        [parentGridPath],
+        [EP.parentPath(target)],
       )
     },
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
index 9d6b99516b3e..b9afa1388885 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
@@ -26,7 +26,6 @@ import {
 import type { DragInteractionData, InteractionSession } from '../interaction-state'
 import type { GridCellGlobalFrames, SortableGridElementProperties } from './grid-helpers'
 import {
-  findOriginalGrid,
   getOriginalElementGridConfiguration,
   getParentGridTemplatesFromChildMeasurements,
   gridMoveStrategiesExtraCommands,
@@ -41,6 +40,7 @@ import {
   fromTypeGuard,
 } from '../../../../core/shared/optics/optic-creators'
 import { getJSXAttributesAtPath } from '../../../..//core/shared/jsx-attribute-utils'
+import { gridItemIdentifier } from '../../../editor/store/editor-state'
 
 export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -88,22 +88,6 @@ export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const parentGridPath = findOriginalGrid(
-    canvasState.startingMetadata,
-    EP.parentPath(selectedElement),
-  ) // TODO don't use EP.parentPath
-  if (parentGridPath == null) {
-    return null
-  }
-
-  const gridFrame = MetadataUtils.findElementByElementPath(
-    canvasState.startingMetadata,
-    parentGridPath,
-  )?.globalFrame
-  if (gridFrame == null || isInfinityRectangle(gridFrame)) {
-    return null
-  }
-
   if (MetadataUtils.isPositionAbsolute(selectedElementMetadata)) {
     return null
   }
@@ -116,7 +100,9 @@ export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
       category: 'tools',
       type: 'pointer',
     },
-    controlsToRender: [controlsForGridPlaceholders(parentGridPath, 'visible-only-while-active')],
+    controlsToRender: [
+      controlsForGridPlaceholders(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
+    ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 2),
     apply: () => {
       if (
@@ -132,14 +118,13 @@ export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
         canvasState,
         interactionSession.interactionData,
         selectedElement,
-        parentGridPath,
       )
       if (commands.length === 0) {
         return emptyStrategyApplicationResult
       }
 
       const { midInteractionCommands, onCompleteCommands } = gridMoveStrategiesExtraCommands(
-        parentGridPath,
+        EP.parentPath(selectedElement), // TODO: don't use EP.parentPath
         initialTemplates,
       )
 
@@ -155,7 +140,6 @@ function getCommandsAndPatchForGridChangeElementLocation(
   canvasState: InteractionCanvasState,
   interactionData: DragInteractionData,
   selectedElement: ElementPath,
-  gridPath: ElementPath,
 ): {
   commands: CanvasCommand[]
   elementsToRerender: ElementPath[]
@@ -182,7 +166,6 @@ function getCommandsAndPatchForGridChangeElementLocation(
     canvasState.startingMetadata,
     interactionData,
     selectedElementMetadata,
-    gridPath,
     parentGridCellGlobalFrames,
     parentContainerGridProperties,
     null,
@@ -190,7 +173,7 @@ function getCommandsAndPatchForGridChangeElementLocation(
 
   return {
     commands: commands,
-    elementsToRerender: [gridPath, selectedElement],
+    elementsToRerender: [EP.parentPath(selectedElement), selectedElement],
   }
 }
 
@@ -198,7 +181,6 @@ export function runGridChangeElementLocation(
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
   selectedElementMetadata: ElementInstanceMetadata,
-  gridPath: ElementPath,
   gridCellGlobalFrames: GridCellGlobalFrames,
   gridTemplate: GridContainerProperties,
   newPathAfterReparent: ElementPath | null,
@@ -298,7 +280,10 @@ export function runGridChangeElementLocation(
   })
 
   // The siblings of the grid element being moved
-  const siblings = MetadataUtils.getChildrenUnordered(jsxMetadata, gridPath)
+  const siblings = MetadataUtils.getSiblingsUnordered(
+    jsxMetadata,
+    newPathAfterReparent ?? selectedElementMetadata.elementPath,
+  )
     .filter((s) => !EP.pathsEqual(s.elementPath, selectedElementMetadata.elementPath))
     .map(
       (s, index): SortableGridElementProperties => ({
@@ -333,7 +318,7 @@ export function runGridChangeElementLocation(
 
   const updateGridControlsCommand = showGridControls(
     'mid-interaction',
-    gridPath,
+    gridItemIdentifier(selectedElementMetadata.elementPath),
     targetCellCoords,
     targetRootCell,
   )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index e9eaad7b1255..67cd1ee92d96 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -48,6 +48,7 @@ import { newReparentSubjects } from './reparent-helpers/reparent-strategy-helper
 import { getReparentTargetUnified } from './reparent-helpers/reparent-strategy-parent-lookup'
 import { getGridCellUnderMouseFromMetadata } from './grid-cell-bounds'
 import { nukeAllAbsolutePositioningPropsCommands } from '../../../inspector/inspector-common'
+import { gridContainerIdentifier } from '../../../editor/store/editor-state'
 
 export const gridDrawToInsertText: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -149,7 +150,7 @@ const gridDrawToInsertStrategyInner =
         category: 'tools',
         type: 'pointer',
       },
-      controlsToRender: [controlsForGridPlaceholders(targetParent)],
+      controlsToRender: [controlsForGridPlaceholders(gridContainerIdentifier(targetParent))],
       fitness: 5,
       apply: (strategyLifecycle) => {
         const canvasPointToUse =
@@ -165,7 +166,7 @@ const gridDrawToInsertStrategyInner =
               }),
               showGridControls(
                 'mid-interaction',
-                targetParent,
+                gridContainerIdentifier(targetParent),
                 newTargetCell?.gridCellCoordinates ?? null,
                 null,
               ),
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
index 332a35c3df98..a25d7f521a37 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
@@ -13,6 +13,7 @@ import {
   offsetPoint,
   pointDifference,
   zeroRectangle,
+  zeroRectIfNullOrInfinity,
 } from '../../../../core/shared/math-utils'
 import * as PP from '../../../../core/shared/property-path'
 import { cssNumber } from '../../../inspector/common/css-utils'
@@ -32,7 +33,6 @@ import {
 import type { DragInteractionData, InteractionSession } from '../interaction-state'
 import type { GridCellGlobalFrames } from './grid-helpers'
 import {
-  findOriginalGrid,
   getGlobalFrameOfGridCell,
   getOriginalElementGridConfiguration,
   getParentGridTemplatesFromChildMeasurements,
@@ -40,6 +40,7 @@ import {
 } from './grid-helpers'
 import { runGridChangeElementLocation } from './grid-change-element-location-strategy'
 import { getTargetGridCellData } from '../../../inspector/grid-helpers'
+import { gridItemIdentifier } from '../../../editor/store/editor-state'
 
 export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -76,22 +77,6 @@ export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const parentGridPath = findOriginalGrid(
-    canvasState.startingMetadata,
-    EP.parentPath(selectedElement),
-  ) // TODO don't use EP.parentPath
-  if (parentGridPath == null) {
-    return null
-  }
-
-  const gridFrame = MetadataUtils.findElementByElementPath(
-    canvasState.startingMetadata,
-    parentGridPath,
-  )?.globalFrame
-  if (gridFrame == null || isInfinityRectangle(gridFrame)) {
-    return null
-  }
-
   if (!MetadataUtils.isPositionAbsolute(selectedElementMetadata)) {
     return null
   }
@@ -104,7 +89,9 @@ export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
       category: 'tools',
       type: 'pointer',
     },
-    controlsToRender: [controlsForGridPlaceholders(parentGridPath, 'visible-only-while-active')],
+    controlsToRender: [
+      controlsForGridPlaceholders(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
+    ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 2),
     apply: () => {
       if (
@@ -120,14 +107,13 @@ export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
         canvasState,
         interactionSession.interactionData,
         selectedElement,
-        parentGridPath,
       )
       if (commands.length === 0) {
         return emptyStrategyApplicationResult
       }
 
       const { midInteractionCommands, onCompleteCommands } = gridMoveStrategiesExtraCommands(
-        parentGridPath,
+        EP.parentPath(selectedElement), // TODO: don't use EP.parentPath
         initialTemplates,
       )
       return strategyApplicationResult(
@@ -142,7 +128,6 @@ function getCommandsAndPatchForGridAbsoluteMove(
   canvasState: InteractionCanvasState,
   interactionData: DragInteractionData,
   selectedElement: ElementPath,
-  gridPath: ElementPath,
 ): {
   commands: CanvasCommand[]
   elementsToRerender: ElementPath[]
@@ -169,14 +154,13 @@ function getCommandsAndPatchForGridAbsoluteMove(
     canvasState.startingMetadata,
     interactionData,
     selectedElementMetadata,
-    gridPath,
     parentGridCellGlobalFrames,
     parentContainerGridProperties,
   )
 
   return {
     commands: commands,
-    elementsToRerender: [gridPath, selectedElement],
+    elementsToRerender: [EP.parentPath(selectedElement), selectedElement],
   }
 }
 
@@ -184,7 +168,6 @@ function runGridMoveAbsolute(
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
   selectedElementMetadata: ElementInstanceMetadata,
-  gridPath: ElementPath,
   gridCellGlobalFrames: GridCellGlobalFrames,
   gridTemplate: GridContainerProperties,
 ): CanvasCommand[] {
@@ -216,10 +199,17 @@ function runGridMoveAbsolute(
   // props, do not set them at all.
   if (MetadataUtils.hasNoGridItemPositioning(selectedElementMetadata.specialSizeMeasurements)) {
     return [
-      showGridControls('mid-interaction', gridPath, targetCellCoords, targetRootCell),
+      showGridControls(
+        'mid-interaction',
+        gridItemIdentifier(selectedElementMetadata.elementPath),
+        targetCellCoords,
+        targetRootCell,
+      ),
       ...gridChildAbsoluteMoveCommands(
         selectedElementMetadata,
-        MetadataUtils.getFrameOrZeroRectInCanvasCoords(gridPath, jsxMetadata),
+        zeroRectIfNullOrInfinity(
+          selectedElementMetadata.specialSizeMeasurements.immediateParentBounds,
+        ),
         interactionData,
       ),
     ]
@@ -231,7 +221,6 @@ function runGridMoveAbsolute(
       jsxMetadata,
       interactionData,
       selectedElementMetadata,
-      gridPath,
       gridCellGlobalFrames,
       gridTemplate,
       null,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
index 3bae3997c180..bee89383e297 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
@@ -25,7 +25,6 @@ import {
 import type { DragInteractionData, InteractionSession } from '../interaction-state'
 import type { GridCellGlobalFrames } from './grid-helpers'
 import {
-  findOriginalGrid,
   getGridElementPinState,
   getGridPositionIndex,
   getOriginalElementGridConfiguration,
@@ -34,6 +33,7 @@ import {
   isFlowGridChild,
 } from './grid-helpers'
 import { getTargetGridCellData } from '../../../inspector/grid-helpers'
+import { gridItemIdentifier } from '../../../editor/store/editor-state'
 
 export const gridReorderStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -75,22 +75,6 @@ export const gridReorderStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const parentGridPath = findOriginalGrid(
-    canvasState.startingMetadata,
-    EP.parentPath(selectedElement),
-  ) // TODO don't use EP.parentPath
-  if (parentGridPath == null) {
-    return null
-  }
-
-  const gridFrame = MetadataUtils.findElementByElementPath(
-    canvasState.startingMetadata,
-    parentGridPath,
-  )?.globalFrame
-  if (gridFrame == null || isInfinityRectangle(gridFrame)) {
-    return null
-  }
-
   const elementGridPropertiesFromProps =
     selectedElementMetadata.specialSizeMeasurements.elementGridPropertiesFromProps
 
@@ -105,7 +89,9 @@ export const gridReorderStrategy: CanvasStrategyFactory = (
       category: 'tools',
       type: 'pointer',
     },
-    controlsToRender: [controlsForGridPlaceholders(parentGridPath, 'visible-only-while-active')],
+    controlsToRender: [
+      controlsForGridPlaceholders(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
+    ],
     fitness: onlyFitWhenDraggingThisControl(
       interactionSession,
       'GRID_CELL_HANDLE',
@@ -125,14 +111,13 @@ export const gridReorderStrategy: CanvasStrategyFactory = (
         canvasState,
         interactionSession.interactionData,
         selectedElement,
-        parentGridPath,
       )
       if (commands.length === 0) {
         return emptyStrategyApplicationResult
       }
 
       const { midInteractionCommands, onCompleteCommands } = gridMoveStrategiesExtraCommands(
-        parentGridPath,
+        EP.parentPath(selectedElement), // TODO: don't use EP.parentPath
         initialTemplates,
       )
 
@@ -148,7 +133,6 @@ function getCommandsAndPatchForGridReorder(
   canvasState: InteractionCanvasState,
   interactionData: DragInteractionData,
   selectedElement: ElementPath,
-  gridPath: ElementPath,
 ): {
   commands: CanvasCommand[]
   elementsToRerender: ElementPath[]
@@ -175,14 +159,13 @@ function getCommandsAndPatchForGridReorder(
     canvasState.startingMetadata,
     interactionData,
     selectedElementMetadata,
-    gridPath,
     parentGridCellGlobalFrames,
     parentContainerGridProperties,
   )
 
   return {
     commands: commands,
-    elementsToRerender: [gridPath, selectedElement],
+    elementsToRerender: [EP.parentPath(selectedElement), selectedElement],
   }
 }
 
@@ -190,7 +173,6 @@ function runGridReorder(
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
   selectedElementMetadata: ElementInstanceMetadata,
-  gridPath: ElementPath,
   gridCellGlobalFrames: GridCellGlobalFrames,
   gridTemplate: GridContainerProperties,
 ): CanvasCommand[] {
@@ -222,7 +204,10 @@ function runGridReorder(
       ? gridTemplate.gridTemplateColumns.dimensions.length
       : 1
 
-  const gridChildren = MetadataUtils.getChildrenUnordered(jsxMetadata, gridPath)
+  const gridChildren = MetadataUtils.getSiblingsUnordered(
+    jsxMetadata,
+    selectedElementMetadata.elementPath,
+  )
   const gridFlowChildrenCount = gridChildren.filter(isFlowGridChild).length
 
   // The "pure" index in the grid children for the cell under mouse
@@ -236,7 +221,7 @@ function runGridReorder(
 
   const updateGridControlsCommand = showGridControls(
     'mid-interaction',
-    gridPath,
+    gridItemIdentifier(selectedElementMetadata.elementPath),
     targetCellCoords,
     canReorderToIndex ? targetRootCell : null,
   )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
index 6ed9c0e6785c..4606575caac4 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx
@@ -9,7 +9,7 @@ import type { CanvasRectangle } from '../../../../core/shared/math-utils'
 import { isInfinityRectangle } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 import * as PP from '../../../../core/shared/property-path'
-import type { AllElementProps } from '../../../editor/store/editor-state'
+import { gridContainerIdentifier, type AllElementProps } from '../../../editor/store/editor-state'
 import type { InsertionPath } from '../../../editor/store/insertion-path'
 import { CSSCursor } from '../../canvas-types'
 import { setCursorCommand } from '../../commands/set-cursor-command'
@@ -130,7 +130,9 @@ export function controlsForGridReparent(reparentTarget: ReparentTarget): Control
       key: 'zero-size-control',
       show: 'visible-only-while-active',
     }),
-    controlsForGridPlaceholders(reparentTarget.newParent.intendedParentPath),
+    controlsForGridPlaceholders(
+      gridContainerIdentifier(reparentTarget.newParent.intendedParentPath),
+    ),
   ]
 }
 
@@ -287,7 +289,6 @@ function gridReparentCommands(
     jsxMetadata,
     interactionData,
     targetElement,
-    targetParent.elementPath,
     gridCellGlobalFrames,
     gridTemplate,
     newPath,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index fc93be276dbf..dc75ed69ef55 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -5,6 +5,7 @@ import {
   isInfinityRectangle,
   rectangleIntersection,
 } from '../../../../core/shared/math-utils'
+import { gridContainerIdentifier, gridItemIdentifier } from '../../../editor/store/editor-state'
 import { isFillOrStretchModeAppliedOnAnySide } from '../../../inspector/inspector-common'
 import {
   controlsForGridPlaceholders,
@@ -60,14 +61,6 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const parentGridPath = findOriginalGrid(
-    canvasState.startingMetadata,
-    EP.parentPath(selectedElement),
-  ) // TODO don't use EP.parentPath
-  if (parentGridPath == null) {
-    return null
-  }
-
   return {
     id: 'GRID-CELL-RESIZE-STRATEGY',
     name: 'Resize Grid Cell',
@@ -79,11 +72,11 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
     controlsToRender: [
       {
         control: GridResizeControls,
-        props: { target: selectedElement },
+        props: { target: gridContainerIdentifier(selectedElement) },
         key: `grid-resize-controls-${EP.toString(selectedElement)}`,
         show: 'always-visible',
       },
-      controlsForGridPlaceholders(parentGridPath),
+      controlsForGridPlaceholders(gridItemIdentifier(selectedElement)),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_RESIZE_HANDLE', 1),
     apply: () => {
@@ -122,7 +115,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
 
       return strategyApplicationResult(
         setGridPropsCommands(selectedElement, gridTemplate, gridProps),
-        [parentGridPath],
+        [EP.parentPath(selectedElement)],
       )
     },
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
index 5de4ce4c0461..fd441a32dea0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts
@@ -49,6 +49,7 @@ import { CSSCursor } from '../../canvas-types'
 import type { CanvasCommand } from '../../commands/commands'
 import type { Axis } from '../../gap-utils'
 import { getComponentDescriptorForTarget } from '../../../../core/property-controls/property-controls-utils'
+import { gridContainerIdentifier } from '../../../editor/store/editor-state'
 
 export const resizeGridStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -105,11 +106,11 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
     controlsToRender: [
       {
         control: GridRowColumnResizingControls,
-        props: { target: gridPath },
+        props: { target: gridContainerIdentifier(gridPath) },
         key: `grid-row-col-resize-controls-${EP.toString(gridPath)}`,
         show: 'always-visible',
       },
-      controlsForGridPlaceholders(gridPath),
+      controlsForGridPlaceholders(gridContainerIdentifier(gridPath)),
     ],
     fitness: supportsStyleProp
       ? onlyFitWhenDraggingThisControl(interactionSession, 'GRID_AXIS_HANDLE', 1)
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
index 742839522e89..36b1a71e6ba6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx
@@ -45,6 +45,7 @@ import { GridGapControl } from '../../controls/select-mode/grid-gap-control'
 import type { GridControlsProps } from '../../controls/grid-controls-for-strategies'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
 import { getComponentDescriptorForTarget } from '../../../../core/property-controls/property-controls-utils'
+import { gridContainerIdentifier } from '../../../editor/store/editor-state'
 
 const SetGridGapStrategyId = 'SET_GRID_GAP_STRATEGY'
 
@@ -152,7 +153,7 @@ export const setGridGapStrategy: CanvasStrategyFactory = (
 
   // when the drag is ongoing, keep showing the grid cells
   if (isDragOngoing(interactionSession)) {
-    controlsToRender.push(controlsForGridPlaceholders(selectedElement))
+    controlsToRender.push(controlsForGridPlaceholders(gridContainerIdentifier(selectedElement)))
   }
 
   return {
diff --git a/editor/src/components/canvas/commands/show-grid-controls-command.ts b/editor/src/components/canvas/commands/show-grid-controls-command.ts
index 0d1e4b07d1b8..4c5caed06cad 100644
--- a/editor/src/components/canvas/commands/show-grid-controls-command.ts
+++ b/editor/src/components/canvas/commands/show-grid-controls-command.ts
@@ -1,18 +1,17 @@
-import type { ElementPath } from 'utopia-shared/src/types'
 import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
-import type { EditorState, EditorStatePatch } from '../../editor/store/editor-state'
+import type { EditorState, EditorStatePatch, GridIdentifier } from '../../editor/store/editor-state'
 import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
 
 export interface ShowGridControlsCommand extends BaseCommand {
   type: 'SHOW_GRID_CONTROLS'
-  target: ElementPath
+  target: GridIdentifier
   targetCell: GridCellCoordinates | null
   rootCell: GridCellCoordinates | null
 }
 
 export function showGridControls(
   whenToRun: WhenToRun,
-  target: ElementPath,
+  target: GridIdentifier,
   targetCell: GridCellCoordinates | null,
   rootCell: GridCellCoordinates | null,
 ): ShowGridControlsCommand {
diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index c6cfb8990b24..fc98962db0b2 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -1,6 +1,5 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import fastDeepEqual from 'fast-deep-equal'
 import { sides, type Sides } from 'utopia-api/core'
 import type { ElementPath } from 'utopia-shared/src/types'
 import {
@@ -11,10 +10,9 @@ import {
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { mapDropNulls } from '../../../core/shared/array-utils'
 import * as EP from '../../../core/shared/element-path'
-import type { BorderWidths, ElementInstanceMetadata } from '../../../core/shared/element-template'
+import type { BorderWidths } from '../../../core/shared/element-template'
 import { type GridAutoOrTemplateBase } from '../../../core/shared/element-template'
 import type { CanvasRectangle } from '../../../core/shared/math-utils'
-import { isFiniteRectangle } from '../../../core/shared/math-utils'
 import { assertNever } from '../../../core/shared/utils'
 import { Substores, useEditorState } from '../../editor/store/store-hook'
 import type {
@@ -37,25 +35,16 @@ import {
   GridRowColumnResizingControlsComponent,
 } from './grid-controls'
 import { isEdgePositionOnSide } from '../canvas-utils'
-import { findOriginalGrid } from '../canvas-strategies/strategies/grid-helpers'
-import {
-  getAlignContent,
-  getFlexJustifyContent,
-  type AlignContent,
-  type FlexJustifyContent,
-} from '../../inspector/inspector-common'
 import { getFromElement } from '../direct-dom-lookups'
-import {
-  applicativeSidesPxTransform,
-  getGridContainerProperties,
-  isDynamicGridTemplate,
-} from '../dom-walker'
+import { applicativeSidesPxTransform, getGridContainerProperties } from '../dom-walker'
 import { applicative4Either, defaultEither, isRight, mapEither } from '../../../core/shared/either'
 import { domRectToScaledCanvasRectangle, getRoundingFn } from '../../../core/shared/dom-utils'
 import Utils from '../../../utils/utils'
 import { useMonitorChangesToEditor } from '../../../components/editor/store/store-monitor'
 import { useKeepReferenceEqualityIfPossible } from '../../../utils/react-performance'
 import type { CSSProperties } from 'react'
+import { gridContainerIdentifier, type GridIdentifier } from '../../editor/store/editor-state'
+import { findOriginalGrid } from '../canvas-strategies/strategies/grid-helpers'
 
 export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`
 
@@ -237,10 +226,10 @@ export function useGridMeasurementHelperData(
 }
 
 export type GridData = GridMeasurementHelperData & {
-  elementPath: ElementPath
+  identifier: GridIdentifier
 }
 
-export function useGridData(elementPaths: ElementPath[]): GridData[] {
+export function useGridData(gridIdentifiers: GridIdentifier[]): GridData[] {
   const scale = useEditorState(
     Substores.canvas,
     (store) => store.editor.canvas.scale,
@@ -251,11 +240,13 @@ export function useGridData(elementPaths: ElementPath[]): GridData[] {
     Substores.metadata,
     (store) => {
       return mapDropNulls((view) => {
-        const originalGridPath = findOriginalGrid(store.editor.jsxMetadata, view)
+        const originalGridPath = findOriginalGrid(
+          store.editor.jsxMetadata,
+          view.type === 'GRID_ITEM' ? EP.parentPath(view.path) : view.path, // TODO: this is temporary, we will need to handle showing a grid control on the parent dom element of a grid item
+        )
         if (originalGridPath == null) {
           return null
         }
-
         const element = MetadataUtils.findElementByElementPath(
           store.editor.jsxMetadata,
           originalGridPath,
@@ -273,10 +264,10 @@ export function useGridData(elementPaths: ElementPath[]): GridData[] {
 
         const gridData: GridData = {
           ...helperData,
-          elementPath: view,
+          identifier: gridContainerIdentifier(originalGridPath),
         }
         return gridData
-      }, elementPaths)
+      }, gridIdentifiers)
     },
     'useGridData',
   )
@@ -285,7 +276,7 @@ export function useGridData(elementPaths: ElementPath[]): GridData[] {
 }
 
 interface GridRowColumnResizingControlsProps {
-  target: ElementPath
+  target: GridIdentifier
 }
 
 export const GridRowColumnResizingControls =
@@ -309,7 +300,7 @@ export interface GridControlProps {
 
 export interface GridControlsProps {
   type: 'GRID_CONTROLS_PROPS'
-  targets: ElementPath[]
+  targets: GridIdentifier[]
 }
 
 export function isGridControlsProps(props: unknown): props is GridControlsProps {
@@ -319,7 +310,7 @@ export function isGridControlsProps(props: unknown): props is GridControlsProps
 export const GridControls = controlForStrategyMemoized<GridControlsProps>(GridControlsComponent)
 
 interface GridResizeControlProps {
-  target: ElementPath
+  target: GridIdentifier
 }
 
 export const GridResizeControls = controlForStrategyMemoized<GridResizeControlProps>(
@@ -358,7 +349,7 @@ export function edgePositionToGridResizeEdge(position: EdgePosition): GridResize
 }
 
 export function controlsForGridPlaceholders(
-  gridPath: ElementPath | Array<ElementPath>,
+  gridPath: GridIdentifier | Array<GridIdentifier>,
   whenToShow: WhenToShowControl = 'always-visible',
   suffix: string | null = null,
 ): ControlWithProps<any> {
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index b57ad580677a..b47891511c1e 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -105,6 +105,11 @@ import type { PinOutlineProps } from './position-outline'
 import { PinOutline, usePropsOrJSXAttributes } from './position-outline'
 import { getLayoutProperty } from '../../../core/layout/getLayoutProperty'
 import { styleStringInArray } from '../../../utils/common-constants'
+import {
+  gridContainerIdentifier,
+  gridIdentifierSimilar,
+  type GridIdentifier,
+} from '../../editor/store/editor-state'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -497,7 +502,7 @@ const GridResizing = React.memo((props: GridResizingProps) => {
 GridResizing.displayName = 'GridResizing'
 
 interface GridRowColumnResizingControlsProps {
-  target: ElementPath
+  target: GridIdentifier
 }
 
 export const GridRowColumnResizingControlsComponent = ({
@@ -567,7 +572,7 @@ export const GridRowColumnResizingControlsComponent = ({
       {gridsWithVisibleResizeControls.flatMap((grid) => {
         return (
           <GridResizing
-            key={`grid-resizing-column-${EP.toString(grid.elementPath)}`}
+            key={`grid-resizing-column-${EP.toString(grid.identifier.path)}`}
             targetGrid={grid}
             axisValues={grid.gridTemplateColumns}
             fromPropsAxisValues={grid.gridTemplateColumnsFromProps}
@@ -587,7 +592,7 @@ export const GridRowColumnResizingControlsComponent = ({
       {gridsWithVisibleResizeControls.flatMap((grid) => {
         return (
           <GridResizing
-            key={`grid-resizing-row-${EP.toString(grid.elementPath)}`}
+            key={`grid-resizing-row-${EP.toString(grid.identifier.path)}`}
             targetGrid={grid}
             axisValues={grid.gridTemplateRows}
             fromPropsAxisValues={grid.gridTemplateRowsFromProps}
@@ -730,7 +735,10 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
   )
 
   const cells = React.useMemo(() => {
-    const children = MetadataUtils.getChildrenUnordered(jsxMetadata, grid.elementPath)
+    const children =
+      grid.identifier.type === 'GRID_CONTAINER'
+        ? MetadataUtils.getChildrenUnordered(jsxMetadata, grid.identifier.path)
+        : MetadataUtils.getSiblingsUnordered(jsxMetadata, grid.identifier.path)
     return mapDropNulls((cell, index) => {
       if (cell == null || cell.globalFrame == null || !isFiniteRectangle(cell.globalFrame)) {
         return null
@@ -892,25 +900,25 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
   const dontShowActiveCellHighlight =
     (!targetsAreCellsWithPositioning && anyTargetAbsolute) ||
     (anyTargetNotPinned && !targetRootCellIsValidTarget)
-
   return (
     <React.Fragment>
       {/* grid lines */}
       <div
-        key={gridKeyFromPath(grid.elementPath)}
-        id={gridKeyFromPath(grid.elementPath)}
-        data-grid-path={EP.toString(grid.elementPath)}
+        key={gridKeyFromPath(grid.identifier.path)}
+        id={gridKeyFromPath(grid.identifier.path)}
+        data-grid-path={EP.toString(grid.identifier.path)}
         style={style}
       >
         {placeholders.map((cell) => {
           const countedRow = Math.floor(cell / grid.columns) + 1
           const countedColumn = Math.floor(cell % grid.columns) + 1
-          const id = gridCellTargetId(grid.elementPath, countedRow, countedColumn)
+          const id = gridCellTargetId(grid.identifier.path, countedRow, countedColumn)
           const borderID = `${id}-border`
 
           const isActiveGrid =
-            (dragging != null && EP.isParentOf(grid.elementPath, dragging)) ||
-            (currentHoveredGrid != null && EP.pathsEqual(grid.elementPath, currentHoveredGrid))
+            (dragging != null && EP.isParentOf(grid.identifier.path, dragging)) ||
+            (currentHoveredGrid != null &&
+              EP.pathsEqual(grid.identifier.path, currentHoveredGrid.path))
           const isActiveCell =
             isActiveGrid &&
             countedColumn === currentHoveredCell?.column &&
@@ -1085,18 +1093,20 @@ GridMeasurementHelper.displayName = 'GridMeasurementHelper'
 
 export const GridControlsComponent = ({ targets }: GridControlsProps) => {
   const ancestorPaths = React.useMemo(() => {
-    return targets.flatMap((target) => EP.getAncestors(target))
+    return targets.flatMap((target) => EP.getAncestors(target.path))
   }, [targets])
-  const ancestorGrids: Array<ElementPath> = useEditorState(
+  const ancestorGrids: Array<GridIdentifier> = useEditorState(
     Substores.metadata,
     (store) => {
-      return ancestorPaths.filter((ancestorPath) => {
-        const ancestorMetadata = MetadataUtils.findElementByElementPath(
-          store.editor.jsxMetadata,
-          ancestorPath,
-        )
-        return MetadataUtils.isGridLayoutedContainer(ancestorMetadata)
-      })
+      return ancestorPaths
+        .filter((ancestorPath) => {
+          const ancestorMetadata = MetadataUtils.findElementByElementPath(
+            store.editor.jsxMetadata,
+            ancestorPath,
+          )
+          return MetadataUtils.isGridLayoutedContainer(ancestorMetadata)
+        })
+        .map((p) => gridContainerIdentifier(p))
     },
     'GridControlsComponent ancestorGrids',
   )
@@ -1113,17 +1123,17 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
     'GridControlsComponent hoveredGrids',
   )
 
-  const gridsWithVisibleControls: Array<ElementPath> = [...targets, ...hoveredGrids]
+  const gridsWithVisibleControls: Array<GridIdentifier> = [...targets, ...hoveredGrids]
 
   // Uniqify the grid paths, and then sort them by depth.
   // With the lowest depth grid at the end so that it renders on top and catches the events
   // before those above it in the hierarchy.
   const grids = useGridData(
-    uniqBy([...gridsWithVisibleControls, ...ancestorGrids], (a, b) => EP.pathsEqual(a, b)).sort(
-      (a, b) => {
-        return EP.fullDepth(a) - EP.fullDepth(b)
-      },
-    ),
+    uniqBy([...gridsWithVisibleControls, ...ancestorGrids], gridIdentifierSimilar).sort((a, b) => {
+      const aDepth = a.type === 'GRID_CONTAINER' ? EP.fullDepth(a.path) : EP.fullDepth(a.path) - 1
+      const bDepth = a.type === 'GRID_CONTAINER' ? EP.fullDepth(b.path) : EP.fullDepth(b.path) - 1
+      return aDepth - bDepth
+    }),
   )
 
   if (grids.length === 0) {
@@ -1134,13 +1144,18 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
     <div id={'grid-controls'}>
       <CanvasOffsetWrapper>
         {grids.map((grid) => {
-          const shouldHaveVisibleControls = EP.containsPath(
-            grid.elementPath,
-            gridsWithVisibleControls,
-          )
+          const gridPath =
+            grid.identifier.type === 'GRID_CONTAINER'
+              ? grid.identifier.path
+              : EP.parentPath(grid.identifier.path)
+          const shouldHaveVisibleControls = gridsWithVisibleControls.some((g) => {
+            const visibleControlPath = g.type === 'GRID_CONTAINER' ? g.path : EP.parentPath(g.path)
+            return EP.pathsEqual(gridPath, visibleControlPath)
+          })
+
           return (
             <GridControl
-              key={GridControlKey(grid.elementPath)}
+              key={GridControlKey(grid.identifier.path)}
               grid={grid}
               controlsVisible={shouldHaveVisibleControls ? 'visible' : 'not-visible'}
             />
@@ -1582,15 +1597,16 @@ function useMouseMove(activelyDraggingOrResizingCell: string | null) {
 }
 
 interface GridResizeControlProps {
-  target: ElementPath
+  target: GridIdentifier
 }
 
 export const GridResizeControlsComponent = ({ target }: GridResizeControlProps) => {
+  const gridTarget = target.type === 'GRID_CONTAINER' ? target.path : EP.parentPath(target.path)
   const colorTheme = useColorTheme()
 
   const element = useEditorState(
     Substores.metadata,
-    (store) => MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, target),
+    (store) => MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, gridTarget),
     'GridResizeControls element',
   )
 
@@ -1703,7 +1719,7 @@ export const GridResizeControlsComponent = ({ target }: GridResizeControlProps)
     [element, startResizeInteraction],
   )
 
-  const resizeEdges = useResizeEdges([target], {
+  const resizeEdges = useResizeEdges([gridTarget], {
     onEdgeDoubleClick: () => NO_OP,
     onEdgeMouseMove: NO_OP,
     onEdgeMouseDown: onEdgeMouseDown,
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
index b9921982eb4c..5e37876d801a 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
@@ -27,6 +27,7 @@ import type { CSSNumberWithRenderedValue } from './controls-common'
 import { CanvasLabel, PillHandle, useHoverWithDelay } from './controls-common'
 import { startGapControlInteraction } from './grid-gap-control-helpers'
 import type { AlignContent, FlexJustifyContent } from '../../../inspector/inspector-common'
+import { gridContainerIdentifier } from '../../../editor/store/editor-state'
 
 export interface GridGapControlProps {
   selectedElement: ElementPath
@@ -67,7 +68,7 @@ export const GridGapControlComponent = React.memo<GridGapControlProps>((props) =
       'GridGapControlComponent elementHovered',
     ) ?? false
 
-  const grid = useGridData([selectedElement]).at(0)
+  const grid = useGridData([gridContainerIdentifier(selectedElement)]).at(0)
 
   const activeDraggingAxis = useEditorState(
     Substores.canvas,
diff --git a/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx b/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
index 3b45f1dcb3d7..079cfb32238f 100644
--- a/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
+++ b/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
@@ -8,6 +8,7 @@ import { unitlessCSSNumberWithRenderedValue } from './controls-common'
 import { NO_OP } from '../../../../core/shared/utils'
 import * as EP from '../../../../core/shared/element-path'
 import { GridPaddingOutlineForDimension } from './grid-gap-control-component'
+import { gridContainerIdentifier } from '../../../editor/store/editor-state'
 
 export interface SubduedGridGapControlProps {
   hoveredOrFocused: 'hovered' | 'focused'
@@ -19,7 +20,7 @@ export const SubduedGridGapControl = React.memo<SubduedGridGapControlProps>((pro
   const colorTheme = useColorTheme()
   const targets = useEditorState(
     Substores.selectedViews,
-    (store) => store.editor.selectedViews,
+    (store) => store.editor.selectedViews.map(gridContainerIdentifier),
     'SubduedGridGapControl selectedViews',
   )
 
@@ -33,7 +34,7 @@ export const SubduedGridGapControl = React.memo<SubduedGridGapControlProps>((pro
     <CanvasOffsetWrapper>
       {gridRowColumnInfo.map((gridData) => {
         return (
-          <React.Fragment key={`grid-gap-${EP.toString(gridData.elementPath)}`}>
+          <React.Fragment key={`grid-gap-${EP.toString(gridData.identifier.path)}`}>
             <GridPaddingOutlineForDimension
               grid={gridData}
               dimension={'rows'}
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index bb41d85ff07a..53e39973849b 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -822,8 +822,42 @@ export interface DragToMoveIndicatorFlags {
   ancestor: boolean
 }
 
+export type GridIdentifier = GridContainerIdentifier | GridItemIdentifier
+
+export interface GridContainerIdentifier {
+  type: 'GRID_CONTAINER'
+  path: ElementPath
+}
+
+export function gridContainerIdentifier(path: ElementPath): GridContainerIdentifier {
+  return {
+    type: 'GRID_CONTAINER',
+    path: path,
+  }
+}
+
+export interface GridItemIdentifier {
+  type: 'GRID_ITEM'
+  path: ElementPath
+}
+
+export function gridItemIdentifier(path: ElementPath): GridItemIdentifier {
+  return {
+    type: 'GRID_ITEM',
+    path: path,
+  }
+}
+
+export function gridIdentifierSimilar(a: GridIdentifier, b: GridIdentifier): boolean {
+  return (
+    (a.type === b.type && EP.pathsEqual(a.path, b.path)) ||
+    (a.type === 'GRID_ITEM' && b.type === 'GRID_CONTAINER' && EP.isParentOf(b.path, a.path)) ||
+    (a.type === 'GRID_CONTAINER' && b.type === 'GRID_ITEM' && EP.isParentOf(a.path, b.path))
+  )
+}
+
 export interface GridControlData {
-  grid: ElementPath
+  grid: GridIdentifier
   targetCell: GridCellCoordinates | null // the cell under the mouse
   rootCell: GridCellCoordinates | null // the top-left cell of the target child
 }
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 9ea58768492b..36f987d95400 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -368,6 +368,9 @@ import type {
   EditorRemixConfig,
   ErrorBoundaryHandling,
   GridControlData,
+  GridIdentifier,
+  GridContainerIdentifier,
+  GridItemIdentifier,
 } from './editor-state'
 import {
   trueUpGroupElementChanged,
@@ -380,6 +383,8 @@ import {
   newGithubData,
   renderedAtPropertyPath,
   renderedAtChildNode,
+  gridContainerIdentifier,
+  gridItemIdentifier,
 } from './editor-state'
 import {
   editorStateNodeModules,
@@ -2849,10 +2854,46 @@ export const GridCellCoordinatesKeepDeepEquality: KeepDeepEqualityCall<GridCellC
     (row, column) => ({ row, column }),
   )
 
-export const GridControlDataKeepDeepEquality: KeepDeepEqualityCall<GridControlData> =
+export const GridContainerIdentifierKeepDeepEquality: KeepDeepEqualityCall<GridContainerIdentifier> =
+  combine1EqualityCall(
+    (identifier) => identifier.path,
+    ElementPathKeepDeepEquality,
+    gridContainerIdentifier,
+  )
+
+export const GridItemIdentifierKeepDeepEquality: KeepDeepEqualityCall<GridItemIdentifier> =
+  combine1EqualityCall(
+    (identifier) => identifier.path,
+    ElementPathKeepDeepEquality,
+    gridItemIdentifier,
+  )
+
+export const GridIdentifierKeepDeepEquality: KeepDeepEqualityCall<GridIdentifier> = (
+  oldValue,
+  newValue,
+) => {
+  switch (oldValue.type) {
+    case 'GRID_CONTAINER':
+      if (newValue.type === oldValue.type) {
+        return GridContainerIdentifierKeepDeepEquality(oldValue, newValue)
+      }
+      break
+    case 'GRID_ITEM':
+      if (newValue.type === oldValue.type) {
+        return GridItemIdentifierKeepDeepEquality(oldValue, newValue)
+      }
+      break
+    default:
+      const _exhaustiveCheck: never = oldValue
+      throw new Error(`Unhandled type ${JSON.stringify(oldValue)}`)
+  }
+  return keepDeepEqualityResult(newValue, false)
+}
+
+const GridControlDataKeepDeepEquality: KeepDeepEqualityCall<GridControlData> =
   combine3EqualityCalls(
     (data) => data.grid,
-    ElementPathKeepDeepEquality,
+    GridIdentifierKeepDeepEquality,
     (data) => data.targetCell,
     nullableDeepEquality(GridCellCoordinatesKeepDeepEquality),
     (data) => data.rootCell,
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index e55959495b93..062ec6344a04 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -793,6 +793,19 @@ export const MetadataUtils = {
     }
     return result
   },
+  getSiblingsUnordered(
+    metadata: ElementInstanceMetadataMap,
+    target: ElementPath | null,
+  ): ElementInstanceMetadata[] {
+    if (target == null) {
+      return []
+    }
+    const parentPath = EP.parentPath(target)
+    const siblings = EP.isRootElementOfInstance(target)
+      ? MetadataUtils.getRootViewsUnordered(metadata, parentPath)
+      : MetadataUtils.getChildrenUnordered(metadata, parentPath)
+    return siblings
+  },
   getChildrenOrdered(
     elements: ElementInstanceMetadataMap,
     pathTree: ElementPathTrees,

From 3676dd28f194d9c9b95db91d861052f46a769e7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Thu, 14 Nov 2024 10:26:29 +0100
Subject: [PATCH 218/272] Do not run property patching when the inline style
 plugin is active (#6635)

## Problem

https://github.com/concrete-utopia/utopia/blob/9e34bde077fbb324e4bb2fcbf9ffc067e680aa60/editor/src/components/canvas/plugins/style-plugins.ts#L180

Since `StyleInfo` only supports a subset of the style props that the
editor updates/deletes, this error is triggered many times during normal
editor use. When the inline style plugin is active (which is always the
case when the Tailwind feature flag isn't expressly turned on), this
error isn't signalling an actual error, since removed properties don't
have to be zeroed when the project only uses inline styles.

## Fix
Do not run the zeroing code if the inline style plugin is active, since
it's not actually needed in that case

### Manual Tests
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/components/canvas/plugins/style-plugins.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/editor/src/components/canvas/plugins/style-plugins.ts b/editor/src/components/canvas/plugins/style-plugins.ts
index 87e771bb8118..651671aa2f05 100644
--- a/editor/src/components/canvas/plugins/style-plugins.ts
+++ b/editor/src/components/canvas/plugins/style-plugins.ts
@@ -190,7 +190,12 @@ function getPropertiesToZero(
 }
 
 export function patchRemovedProperties(editorState: EditorState): EditorState {
-  const styleInfoReader = getActivePlugin(editorState).styleInfoFactory({
+  const activePlugin = getActivePlugin(editorState)
+  if (activePlugin.name === InlineStylePlugin.name) {
+    return editorState
+  }
+
+  const styleInfoReader = activePlugin.styleInfoFactory({
     projectContents: editorState.projectContents,
   })
 

From 6a652a32408c4873ea7984704423cdb6f7b0b49e Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 14 Nov 2024 12:01:24 +0100
Subject: [PATCH 219/272] Preserve span when changing grid item position
 (#6633)

**Problem:**

`span` values for grid child positioning props are wiped when using
`gridChangeElementLocationStrategy`.

**Fix:**

Rework the way grid element props are calculated when changing element
location pins, so that `spans` are respected and kept in place if
present.

The behavior is now so that:
- when it makes sense to do so, return shorthand versions of grid
positioning props
- when moving an element with `span` values, support moving them when
the span is in the starting prop as well as the ending prop

Examples for moving a item one cell to the right:

| Initial config | Result |
|------------|------------|
| `gridColumn: 'span 2'` | `gridColumn: 'span 2 / 4'` |
| `gridColumn: '2 / span 2'` | `gridColumn: '3 / span 2'` |
| `gridColumnStart: 'span 2'` | `gridColumn: 'span 2 / 4'` |
| `gridColumnEnd: 'span 2'` | `gridColumn: '3 / span 2'` |

**Note:** a subsequent PR will take care of also keepign `span` intact
for the reorder strategy.

Fixes #6639
---
 ...ange-element-location-keyboard-strategy.ts |   4 +-
 .../grid-change-element-location-strategy.ts  | 140 ++++++------
 .../grid-draw-to-insert-strategy.tsx          |   4 +-
 ...change-location-strategy.spec.browser2.tsx | 215 +++++++++++++++++-
 .../strategies/grid-helpers.ts                | 196 +++++++++-------
 ...-resize-element-strategy.spec.browser2.tsx |   3 +-
 .../grid-resize-element-strategy.ts           |   4 +-
 .../src/components/inspector/flex-section.tsx |   8 +-
 .../grid-cell-subsection.tsx                  |  16 +-
 9 files changed, 415 insertions(+), 175 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
index 3fcda3e09695..0bee8900873a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
@@ -10,7 +10,7 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { setGridPropsCommands } from './grid-helpers'
+import { getCommandsForGridItemPlacement } from './grid-helpers'
 import { getGridChildCellCoordBoundsFromCanvas } from './grid-cell-bounds'
 import { accumulatePresses } from './shared-keyboard-strategy-helpers'
 import { gridItemIdentifier } from '../../../editor/store/editor-state'
@@ -121,7 +121,7 @@ export function gridChangeElementLocationResizeKeyboardStrategy(
       }
 
       return strategyApplicationResult(
-        setGridPropsCommands(target, gridTemplate, {
+        getCommandsForGridItemPlacement(target, gridTemplate, {
           gridColumnStart,
           gridColumnEnd,
           gridRowStart,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
index b9afa1388885..fcef295fbbba 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
@@ -1,16 +1,18 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
-import * as PP from '../../../../core/shared/property-path'
 import type {
   ElementInstanceMetadata,
   ElementInstanceMetadataMap,
   GridContainerProperties,
   GridElementProperties,
+  GridPositionOrSpan,
 } from '../../../../core/shared/element-template'
-import { gridPositionValue, isJSXElement } from '../../../../core/shared/element-template'
-import { isInfinityRectangle } from '../../../../core/shared/math-utils'
+import { gridPositionValue, isGridSpan } from '../../../../core/shared/element-template'
 import { absolute } from '../../../../utils/utils'
+import { gridItemIdentifier } from '../../../editor/store/editor-state'
+import { cssKeyword } from '../../../inspector/common/css-utils'
+import { getTargetGridCellData } from '../../../inspector/grid-helpers'
 import type { CanvasCommand } from '../../commands/commands'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { showGridControls } from '../../commands/show-grid-controls-command'
@@ -29,18 +31,10 @@ import {
   getOriginalElementGridConfiguration,
   getParentGridTemplatesFromChildMeasurements,
   gridMoveStrategiesExtraCommands,
-  setGridPropsCommands,
+  isAutoGridPin,
+  getCommandsForGridItemPlacement,
   sortElementsByGridPosition,
 } from './grid-helpers'
-import { getTargetGridCellData } from '../../../inspector/grid-helpers'
-import { forEachOf } from '../../../../core/shared/optics/optic-utilities'
-import {
-  eitherRight,
-  fromField,
-  fromTypeGuard,
-} from '../../../../core/shared/optics/optic-creators'
-import { getJSXAttributesAtPath } from '../../../..//core/shared/jsx-attribute-utils'
-import { gridItemIdentifier } from '../../../editor/store/editor-state'
 
 export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -217,67 +211,83 @@ export function runGridChangeElementLocation(
   }
   const { targetCellCoords, targetRootCell } = targetGridCellData
 
-  const gridProps: Partial<GridElementProperties> = {
-    gridColumnStart: gridPositionValue(targetRootCell.column),
-    gridColumnEnd: gridPositionValue(targetRootCell.column + originalCellBounds.width),
-    gridRowStart: gridPositionValue(targetRootCell.row),
-    gridRowEnd: gridPositionValue(targetRootCell.row + originalCellBounds.height),
-  }
-
-  // TODO: Remove this logic once there is a fix for the handling of the track end fields.
-  let keepGridColumnEnd: boolean = true
-  let keepGridRowEnd: boolean = true
-  forEachOf(
-    fromField<ElementInstanceMetadata, 'element'>('element')
-      .compose(eitherRight())
-      .compose(fromTypeGuard(isJSXElement))
-      .compose(fromField('props')),
-    selectedElementMetadata,
-    (elementProperties) => {
-      function shouldKeep(shorthandProp: 'gridColumn' | 'gridRow'): boolean {
-        const longhandProp = shorthandProp === 'gridColumn' ? 'gridColumnEnd' : 'gridRowEnd'
+  const elementGridProperties =
+    selectedElementMetadata.specialSizeMeasurements.elementGridProperties
 
-        const shorthand = getJSXAttributesAtPath(
-          elementProperties,
-          PP.create('style', shorthandProp),
-        )
-        if (
-          shorthand.attribute.type === 'ATTRIBUTE_VALUE' &&
-          typeof shorthand.attribute.value === 'string' &&
-          shorthand.attribute.value.includes('/')
-        ) {
-          return true
+  function getUpdatedPins(
+    start: GridPositionOrSpan | null,
+    end: GridPositionOrSpan | null,
+    axis: 'row' | 'column',
+    dimension: number,
+  ): {
+    start: GridPositionOrSpan
+    end: GridPositionOrSpan
+  } {
+    const isSpanning = isGridSpan(start) || isGridSpan(end)
+    if (isSpanning) {
+      if (isGridSpan(start)) {
+        const isEndGridSpanArea = isGridSpan(end) || start.type === 'SPAN_AREA'
+        if (!isEndGridSpanArea) {
+          return {
+            start: start,
+            end: gridPositionValue(start.value + targetRootCell[axis]),
+          }
         }
-
-        const longhand = getJSXAttributesAtPath(elementProperties, PP.create('style', longhandProp))
-        if (longhand.attribute.type !== 'ATTRIBUTE_NOT_FOUND') {
-          return true
+      } else if (isGridSpan(end)) {
+        return {
+          start: gridPositionValue(targetRootCell[axis]),
+          end: end,
         }
-
-        return false
       }
-      keepGridColumnEnd = shouldKeep('gridColumn')
-      keepGridRowEnd = shouldKeep('gridRow')
-    },
+    } else {
+      const shouldSetEndPosition = end != null && !isAutoGridPin(end)
+      if (shouldSetEndPosition) {
+        return {
+          start: gridPositionValue(targetRootCell[axis]),
+          end:
+            dimension === 1
+              ? cssKeyword('auto')
+              : gridPositionValue(targetRootCell[axis] + dimension),
+        }
+      }
+      return {
+        start: gridPositionValue(targetRootCell[axis]),
+        end: cssKeyword('auto'),
+      }
+    }
+
+    return {
+      start: cssKeyword('auto'),
+      end: cssKeyword('auto'),
+    }
+  }
+
+  const columnBounds = getUpdatedPins(
+    elementGridProperties.gridColumnStart,
+    elementGridProperties.gridColumnEnd,
+    'column',
+    originalCellBounds.width,
+  )
+
+  const rowBounds = getUpdatedPins(
+    elementGridProperties.gridRowStart,
+    elementGridProperties.gridRowEnd,
+    'row',
+    originalCellBounds.height,
   )
 
-  const gridCellMoveCommands = setGridPropsCommands(
+  const gridProps: GridElementProperties = {
+    gridColumnStart: columnBounds.start,
+    gridColumnEnd: columnBounds.end,
+    gridRowStart: rowBounds.start,
+    gridRowEnd: rowBounds.end,
+  }
+
+  const gridCellMoveCommands = getCommandsForGridItemPlacement(
     pathForCommands,
     gridTemplate,
     gridProps,
-  ).filter((command) => {
-    if (command.type === 'SET_PROPERTY') {
-      if (PP.pathsEqual(command.property, PP.create('style', 'gridColumnEnd'))) {
-        return keepGridColumnEnd
-      } else if (PP.pathsEqual(command.property, PP.create('style', 'gridRowEnd'))) {
-        return keepGridRowEnd
-      } else {
-        return true
-      }
-    } else {
-      return true
-    }
-  })
+  )
 
   // The siblings of the grid element being moved
   const siblings = MetadataUtils.getSiblingsUnordered(
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
index 67cd1ee92d96..530ad70803d7 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -43,7 +43,7 @@ import {
   getStyleAttributesForFrameInAbsolutePosition,
   updateInsertionSubjectWithAttributes,
 } from './draw-to-insert-metastrategy'
-import { setGridPropsCommands } from './grid-helpers'
+import { getCommandsForGridItemPlacement } from './grid-helpers'
 import { newReparentSubjects } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentTargetUnified } from './reparent-helpers/reparent-strategy-parent-lookup'
 import { getGridCellUnderMouseFromMetadata } from './grid-cell-bounds'
@@ -212,7 +212,7 @@ const gridDrawToInsertStrategyInner =
           [
             insertionCommand,
             ...nukeAllAbsolutePositioningPropsCommands(insertedElementPath), // do not use absolute positioning in grid cells
-            ...setGridPropsCommands(insertedElementPath, gridTemplate, {
+            ...getCommandsForGridItemPlacement(insertedElementPath, gridTemplate, {
               gridRowStart: { numericalPosition: gridCellCoordinates.row },
               gridColumnStart: { numericalPosition: gridCellCoordinates.column },
               gridRowEnd: { numericalPosition: gridCellCoordinates.row + 1 },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
index 13fb04febe05..3251f3a7136b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
@@ -174,7 +174,6 @@ describe('grid element change location strategy', () => {
       scale: 1,
       pathString: `sb/scene/grid/${testId}`,
       testId: testId,
-      tab: true,
       targetCell: { row: 3, column: 1 },
     })
 
@@ -220,6 +219,112 @@ describe('grid element change location strategy', () => {
     })
   })
 
+  it('can change the location of an element with span (from start, implicit end)', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeWithSpanningItems,
+      'await-first-dom-report',
+    )
+
+    const testId = 'pink'
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
+      scale: 1,
+      pathString: `sb/scene/grid/${testId}`,
+      testId: testId,
+    })
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '5',
+      gridColumnStart: 'span 2',
+      gridRowEnd: 'auto',
+      gridRowStart: '2',
+    })
+  })
+
+  it('can change the location of an element with span (from start, explicit end)', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeWithSpanningItems,
+      'await-first-dom-report',
+    )
+
+    const testId = 'cyan'
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
+      scale: 1,
+      pathString: `sb/scene/grid/${testId}`,
+      testId: testId,
+    })
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '5',
+      gridColumnStart: 'span 2',
+      gridRowEnd: 'auto',
+      gridRowStart: '2',
+    })
+  })
+
+  it('can change the location of an element with span (from end, explicit start)', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeWithSpanningItems,
+      'await-first-dom-report',
+    )
+
+    const testId = 'orange'
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
+      scale: 1,
+      pathString: `sb/scene/grid/${testId}`,
+      testId: testId,
+      targetCell: { row: 3, column: 2 },
+    })
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: 'span 3',
+      gridColumnStart: '2',
+      gridRowEnd: 'auto',
+      gridRowStart: '3',
+    })
+  })
+
+  it('can change the location of an element with span (longhand start)', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeWithSpanningItems,
+      'await-first-dom-report',
+    )
+
+    const testId = 'blue'
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
+      scale: 1,
+      pathString: `sb/scene/grid/${testId}`,
+      testId: testId,
+    })
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '5',
+      gridColumnStart: 'span 2',
+      gridRowEnd: 'auto',
+      gridRowStart: '2',
+    })
+  })
+
+  it('can change the location of an element with span (longhand end)', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeWithSpanningItems,
+      'await-first-dom-report',
+    )
+
+    const testId = 'purple'
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
+      scale: 1,
+      pathString: `sb/scene/grid/${testId}`,
+      testId: testId,
+    })
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: 'span 2',
+      gridColumnStart: '3',
+      gridRowEnd: 'auto',
+      gridRowStart: '2',
+    })
+  })
+
   describe('grids within grids', () => {
     it('can move a grid child that is a grid itself', async () => {
       const editor = await renderTestEditorWithCode(
@@ -594,9 +699,9 @@ export var storyboard = (
             child.style
           expect({ top, left, gridColumnStart, gridColumnEnd, gridRowStart, gridRowEnd }).toEqual({
             gridColumnStart: '1',
-            gridColumnEnd: '',
+            gridColumnEnd: 'auto',
             gridRowStart: '1',
-            gridRowEnd: '',
+            gridRowEnd: 'auto',
             left: '59px',
             top: '59.5px',
           })
@@ -866,13 +971,7 @@ export var storyboard = (
         'await-first-dom-report',
       )
 
-      const result = await runReorderTest(
-        editor,
-        'sb/scene/grid',
-        'orange',
-        { row: 1, column: 1 },
-        { tab: true },
-      )
+      const result = await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 1 })
       expect({
         gridRowStart: result.gridRowStart,
         gridRowEnd: result.gridRowEnd,
@@ -1568,3 +1667,99 @@ export var storyboard = (
   </Storyboard>
 )
 `
+
+const ProjectCodeWithSpanningItems = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 600,
+        height: 600,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 500,
+          height: 500,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr 1fr',
+          gridGap: 10,
+          padding: 10,
+        }}
+        data-testid='grid'
+        data-uid='grid'
+      >
+        <div
+          style={{
+            backgroundColor: '#f09',
+            width: '100%',
+            height: '100%',
+            gridColumn: 'span 2',
+          }}
+          data-uid='pink'
+          data-testid='pink'
+          data-label='pink'
+        />
+        <div
+          style={{
+            backgroundColor: '#f90',
+            width: '100%',
+            height: '100%',
+            gridColumn: '2 / span 3',
+          }}
+          data-uid='orange'
+          data-testid='orange'
+          data-label='orange'
+        />
+        <div
+          style={{
+            backgroundColor: '#0f9',
+            width: '100%',
+            height: '100%',
+            gridColumn: 'span 2 / 4',
+            gridRow: 3,
+          }}
+          data-uid='cyan'
+          data-testid='cyan'
+          data-label='cyan'
+        />
+        <div
+          style={{
+            backgroundColor: '#09f',
+            width: '100%',
+            height: '100%',
+            gridColumnStart: 'span 2',
+            gridRow: 4,
+          }}
+          data-uid='blue'
+          data-testid='blue'
+          data-label='blue'
+        />
+        <div
+          style={{
+            backgroundColor: '#90f',
+            width: '100%',
+            height: '100%',
+            gridColumnEnd: 'span 2',
+            gridRow: 4,
+          }}
+          data-uid='purple'
+          data-testid='purple'
+          data-label='purple'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 23a1bd1e8794..1bf896aac5d7 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -12,6 +12,7 @@ import type {
 } from '../../../../core/shared/element-template'
 import {
   isGridSpan,
+  stringifyGridSpan,
   type ElementInstanceMetadata,
   type GridContainerProperties,
   type GridElementProperties,
@@ -21,6 +22,7 @@ import * as PP from '../../../../core/shared/property-path'
 import { assertNever } from '../../../../core/shared/utils'
 import type { GridDimension } from '../../../inspector/common/css-utils'
 import {
+  cssKeyword,
   gridCSSRepeat,
   isCSSKeyword,
   isGridCSSRepeat,
@@ -70,7 +72,11 @@ export function gridPositionToValue(
   return p.numericalPosition
 }
 
-export function setGridPropsCommands(
+export function isAutoGridPin(v: GridPositionOrSpan): boolean {
+  return isCSSKeyword(v) && v.value === 'auto'
+}
+
+export function getCommandsForGridItemPlacement(
   elementPath: ElementPath,
   gridTemplate: GridContainerProperties,
   gridProps: Partial<GridElementProperties>,
@@ -86,66 +92,105 @@ export function setGridPropsCommands(
       PP.create('style', 'gridRowEnd'),
     ]),
   ]
-  const columnStart = gridPositionToValue(gridProps.gridColumnStart, null)
-  const columnEnd = gridPositionToValue(gridProps.gridColumnEnd, gridProps.gridColumnStart ?? null)
-  const rowStart = gridPositionToValue(gridProps.gridRowStart, null)
-  const rowEnd = gridPositionToValue(gridProps.gridRowEnd, gridProps.gridRowStart ?? null)
-
-  const lineColumnStart = asMaybeNamedLineOrValue(gridTemplate, 'column', columnStart)
-  const lineColumnEnd = asMaybeNamedLineOrValue(gridTemplate, 'column', columnEnd)
-  const lineRowStart = asMaybeNamedLineOrValue(gridTemplate, 'row', rowStart)
-  const lineRowEnd = asMaybeNamedLineOrValue(gridTemplate, 'row', rowEnd)
-
-  if (columnStart != null && columnStart === columnEnd) {
-    commands.push(
-      setProperty('always', elementPath, PP.create('style', 'gridColumn'), lineColumnStart),
-    )
-  } else if (
-    columnStart != null &&
-    typeof columnStart === 'number' &&
-    columnEnd != null &&
-    typeof columnEnd === 'number' &&
-    columnStart === columnEnd - 1
-  ) {
-    commands.push(
-      setProperty('always', elementPath, PP.create('style', 'gridColumn'), lineColumnStart),
-    )
-  } else {
-    if (columnStart != null) {
-      commands.push(
-        setProperty('always', elementPath, PP.create('style', 'gridColumnStart'), lineColumnStart),
-      )
+
+  function printPin(pin: GridPositionOrSpan, axis: 'row' | 'column'): string | number {
+    if (isGridSpan(pin)) {
+      return stringifyGridSpan(pin)
     }
-    if (columnEnd != null) {
-      commands.push(
-        setProperty('always', elementPath, PP.create('style', 'gridColumnEnd'), lineColumnEnd),
-      )
+    if (isCSSKeyword(pin)) {
+      return pin.value
     }
+    const tracks =
+      axis === 'column' ? gridTemplate.gridTemplateColumns : gridTemplate.gridTemplateRows
+    const maybeLineName =
+      tracks?.type === 'DIMENSIONS'
+        ? tracks.dimensions.find((_, index) => index + 1 === pin.numericalPosition)?.lineName
+        : null
+    if (maybeLineName != null) {
+      return maybeLineName
+    }
+    return pin.numericalPosition ?? 'auto'
   }
 
-  if (rowStart != null && rowStart === rowEnd) {
-    commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), lineRowStart))
-  } else if (
-    rowStart != null &&
-    typeof rowStart === 'number' &&
-    rowEnd != null &&
-    typeof rowEnd === 'number' &&
-    rowStart === rowEnd - 1
-  ) {
-    commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), lineRowStart))
-  } else {
-    if (rowStart != null) {
-      commands.push(
-        setProperty('always', elementPath, PP.create('style', 'gridRowStart'), lineRowStart),
-      )
+  function serializeAxis(
+    startPosition: GridPositionOrSpan,
+    endPosition: GridPositionOrSpan,
+    axis: 'row' | 'column',
+  ): {
+    property:
+      | 'gridColumn'
+      | 'gridColumnStart'
+      | 'gridColumnEnd'
+      | 'gridRow'
+      | 'gridRowStart'
+      | 'gridRowEnd'
+    value: string | number
+  } {
+    const startValue = printPin(startPosition, axis)
+    const endValue = printPin(endPosition, axis)
+
+    if (isAutoGridPin(startPosition) && !isAutoGridPin(endPosition)) {
+      return {
+        property: axis === 'column' ? 'gridColumnEnd' : 'gridRowEnd',
+        value: endValue,
+      }
     }
-    if (rowEnd != null) {
-      commands.push(
-        setProperty('always', elementPath, PP.create('style', 'gridRowEnd'), lineRowEnd),
-      )
+
+    function shouldReturnSingleValue(): boolean {
+      const isAutoPin = isAutoGridPin(endPosition)
+      if (isAutoPin) {
+        return true
+      }
+
+      const printedValuedEqual = startValue === endValue
+      if (printedValuedEqual) {
+        return true
+      }
+
+      const positionsAreNumeric =
+        isGridPositionNumericValue(endPosition) && isGridPositionNumericValue(startPosition)
+      if (positionsAreNumeric) {
+        const startNumericPosition = startPosition.numericalPosition ?? 0
+        const endNumericPosition = endPosition.numericalPosition ?? 0
+        const positionsDeltaAtMostOne =
+          endNumericPosition >= startNumericPosition &&
+          endNumericPosition - startNumericPosition <= 1
+        if (positionsDeltaAtMostOne) {
+          return true
+        }
+      }
+
+      return false
+    }
+    if (shouldReturnSingleValue()) {
+      return {
+        property: axis === 'column' ? 'gridColumn' : 'gridRow',
+        value: startValue,
+      }
+    }
+
+    return {
+      property: axis === 'column' ? 'gridColumn' : 'gridRow',
+      value: `${startValue} / ${endValue}`,
     }
   }
 
+  const gridColumn = serializeAxis(
+    gridProps.gridColumnStart ?? cssKeyword('auto'),
+    gridProps.gridColumnEnd ?? cssKeyword('auto'),
+    'column',
+  )
+  const gridColumnProp = PP.create('style', gridColumn.property)
+  commands.push(setProperty('always', elementPath, gridColumnProp, gridColumn.value))
+
+  const gridRow = serializeAxis(
+    gridProps.gridRowStart ?? cssKeyword('auto'),
+    gridProps.gridRowEnd ?? cssKeyword('auto'),
+    'row',
+  )
+  const gridRowProp = PP.create('style', gridRow.property)
+  commands.push(setProperty('always', elementPath, gridRowProp, gridRow.value))
+
   return commands
 }
 
@@ -195,26 +240,6 @@ function getCellCoordsDelta(
   return gridCellCoordinates(rowDiff, columnDiff)
 }
 
-function asMaybeNamedLineOrValue(
-  grid: GridContainerProperties,
-  axis: 'row' | 'column',
-  value: number | string | null,
-): string | number {
-  if (value == null) {
-    return 1
-  } else if (typeof value === 'number') {
-    const template = axis === 'row' ? grid.gridTemplateRows : grid.gridTemplateColumns
-    if (template?.type === 'DIMENSIONS') {
-      const maybeLineStart = template.dimensions.at(value - 1)
-      if (maybeLineStart != null && maybeLineStart.lineName != null) {
-        return maybeLineStart.lineName
-      }
-    }
-    return value === 0 ? 1 : value
-  }
-  return value
-}
-
 export type SortableGridElementProperties = GridElementProperties & {
   path: ElementPath
   index: number
@@ -254,7 +279,7 @@ export function sortElementsByGridPosition(gridTemplateColumns: number) {
 }
 
 function isGridPositionNumericValue(p: GridPositionOrSpan | null): p is GridPositionValue {
-  return p != null && !(isCSSKeyword(p) && !isGridSpan(p) && p.value === 'auto')
+  return p != null && !isGridSpan(p) && !(isCSSKeyword(p) && p.value === 'auto')
 }
 
 export function getGridPositionIndex(props: {
@@ -537,18 +562,22 @@ export function getGridElementPinState(
   elementGridPropertiesFromProps: GridElementProperties | null,
 ): GridElementPinState {
   if (
-    elementGridPropertiesFromProps?.gridColumnEnd == null ||
-    elementGridPropertiesFromProps?.gridColumnStart == null ||
-    elementGridPropertiesFromProps?.gridRowEnd == null ||
+    elementGridPropertiesFromProps?.gridColumnEnd == null &&
+    elementGridPropertiesFromProps?.gridColumnStart == null &&
+    elementGridPropertiesFromProps?.gridRowEnd == null &&
     elementGridPropertiesFromProps?.gridRowStart == null
   ) {
     return 'not-pinned'
   }
   if (
-    isGridPositionNumericValue(elementGridPropertiesFromProps?.gridColumnEnd ?? null) ||
-    isGridPositionNumericValue(elementGridPropertiesFromProps?.gridColumnStart ?? null) ||
-    isGridPositionNumericValue(elementGridPropertiesFromProps?.gridRowEnd ?? null) ||
-    isGridPositionNumericValue(elementGridPropertiesFromProps?.gridRowStart ?? null)
+    isGridPositionNumericValue(elementGridPropertiesFromProps?.gridColumnEnd) ||
+    isGridSpan(elementGridPropertiesFromProps?.gridColumnEnd) ||
+    isGridPositionNumericValue(elementGridPropertiesFromProps?.gridColumnStart) ||
+    isGridSpan(elementGridPropertiesFromProps?.gridColumnStart) ||
+    isGridPositionNumericValue(elementGridPropertiesFromProps?.gridRowEnd) ||
+    isGridSpan(elementGridPropertiesFromProps?.gridRowEnd) ||
+    isGridPositionNumericValue(elementGridPropertiesFromProps?.gridRowStart) ||
+    isGridSpan(elementGridPropertiesFromProps?.gridRowStart)
   ) {
     return 'pinned'
   }
@@ -556,10 +585,7 @@ export function getGridElementPinState(
 }
 
 export function isFlowGridChild(child: ElementInstanceMetadata) {
-  return (
-    getGridElementPinState(child.specialSizeMeasurements.elementGridPropertiesFromProps) !==
-    'pinned'
-  )
+  return getGridElementPinState(child.specialSizeMeasurements.elementGridProperties) !== 'pinned'
 }
 
 function restoreGridTemplateFromProps(params: {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 7b37b16fa49b..44de26cbb02c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -527,8 +527,7 @@ describe('grid resize element strategy', () => {
       ['backgroundColor', '#db48f6'],
       ['width', '100%'],
       ['height', '100%'],
-      ['gridColumnStart', 7],
-      ['gridColumnEnd', 11],
+      ['gridColumn', '7 / 11'],
       ['gridRow', 2],
     ])
   })
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index dc75ed69ef55..8fe12fcc8849 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -21,7 +21,7 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { findOriginalGrid, setGridPropsCommands } from './grid-helpers'
+import { findOriginalGrid, getCommandsForGridItemPlacement } from './grid-helpers'
 import { resizeBoundingBoxFromSide } from './resize-helpers'
 
 export const gridResizeElementStrategy: CanvasStrategyFactory = (
@@ -114,7 +114,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         selectedElementMetadata.specialSizeMeasurements.parentContainerGridProperties
 
       return strategyApplicationResult(
-        setGridPropsCommands(selectedElement, gridTemplate, gridProps),
+        getCommandsForGridItemPlacement(selectedElement, gridTemplate, gridProps),
         [EP.parentPath(selectedElement)],
       )
     },
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 6912329ed34b..5e3a768f4237 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -72,7 +72,7 @@ import {
 } from '../../core/shared/element-template'
 import {
   isJustAutoGridDimension,
-  setGridPropsCommands,
+  getCommandsForGridItemPlacement,
 } from '../canvas/canvas-strategies/strategies/grid-helpers'
 import { type CanvasCommand } from '../canvas/commands/commands'
 import type { DropdownMenuItem } from '../../uuiui/radix-components'
@@ -357,7 +357,9 @@ const TemplateDimensionControl = React.memo(
             }
           }
 
-          commands.push(...setGridPropsCommands(child.elementPath, adjustedGridTemplate, updated))
+          commands.push(
+            ...getCommandsForGridItemPlacement(child.elementPath, adjustedGridTemplate, updated),
+          )
         }
 
         dispatch([applyCommandsAction(commands)])
@@ -434,7 +436,7 @@ const TemplateDimensionControl = React.memo(
         const children = MetadataUtils.getChildrenUnordered(metadataRef.current, grid.elementPath)
         for (const child of children) {
           commands.push(
-            ...setGridPropsCommands(
+            ...getCommandsForGridItemPlacement(
               child.elementPath,
               adjustedGridTemplate,
               child.specialSizeMeasurements.elementGridPropertiesFromProps,
diff --git a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
index f672852d4394..81c23e952892 100644
--- a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
+++ b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx
@@ -27,7 +27,7 @@ import {
 } from '../../../../../uuiui'
 import type { KeywordForControl } from '../../../../../uuiui/inputs/number-or-keyword-control'
 import { NumberOrKeywordControl } from '../../../../../uuiui/inputs/number-or-keyword-control'
-import { setGridPropsCommands } from '../../../../canvas/canvas-strategies/strategies/grid-helpers'
+import { getCommandsForGridItemPlacement } from '../../../../canvas/canvas-strategies/strategies/grid-helpers'
 import { applyCommandsAction } from '../../../../editor/actions/action-creators'
 import { useDispatch } from '../../../../editor/store/dispatch-context'
 import { Substores, useEditorState } from '../../../../editor/store/store-hook'
@@ -97,7 +97,7 @@ export const GridPlacementSubsection = React.memo(() => {
       return
     }
 
-    const commands = setGridPropsCommands(
+    const commands = getCommandsForGridItemPlacement(
       cell.elementPath,
       gridTemplate,
       cell.specialSizeMeasurements.elementGridProperties,
@@ -271,7 +271,11 @@ const DimensionsControls = React.memo(
               }
               break
           }
-          const commands = setGridPropsCommands(cell.elementPath, gridTemplate, newValues)
+          const commands = getCommandsForGridItemPlacement(
+            cell.elementPath,
+            gridTemplate,
+            newValues,
+          )
 
           dispatch([applyCommandsAction(commands)])
         },
@@ -395,7 +399,11 @@ const BoundariesControls = React.memo(
             ...cell.specialSizeMeasurements.elementGridProperties,
             [dimension]: value,
           }
-          const commands = setGridPropsCommands(cell.elementPath, gridTemplate, newValues)
+          const commands = getCommandsForGridItemPlacement(
+            cell.elementPath,
+            gridTemplate,
+            newValues,
+          )
 
           dispatch([applyCommandsAction(commands)])
         },

From 0bd1759e27a70793619cc257a805531793d66b8a Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 14 Nov 2024 16:46:12 +0100
Subject: [PATCH 220/272] Keep span when reordering grid items (#6642)

**Problem:**

Spans (or otherwise 1+ sized elements) are not preserved when using
`gridReorderStrategy`.

**Fix:**

When running the reorder strategy, instead of nuking all positioning
props only nuke the ones which are not used and, for elements that
occupy multiple cells, set the respective width or height using the
`span` syntax on the correct shorthand.

I also took this chance to move the reorder tests to their own file (and
added the new tests there).

Fixes #6641
---
 ...change-location-strategy.spec.browser2.tsx | 707 +++---------------
 .../grid-reorder-strategy.spec.browser2.tsx   | 576 ++++++++++++++
 .../strategies/grid-reorder-strategy.ts       |  47 +-
 .../strategies/grid.test-utils.ts             |  82 ++
 4 files changed, 796 insertions(+), 616 deletions(-)
 create mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx
 create mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid.test-utils.ts

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
index 3251f3a7136b..cca92c289c76 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
@@ -1,7 +1,4 @@
-import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
-import { isLeft } from '../../../../core/shared/either'
 import * as EP from '../../../../core/shared/element-path'
-import { isJSXElement } from '../../../../core/shared/element-template'
 import {
   getRectCenter,
   localRectangle,
@@ -11,28 +8,24 @@ import {
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 import CanvasActions from '../../canvas-actions'
 import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
-import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
-import {
-  keyDown,
-  mouseDownAtPoint,
-  mouseMoveToPoint,
-  mouseUpAtPoint,
-} from '../../event-helpers.test-utils'
-import type { EditorRenderResult } from '../../ui-jsx.test-utils'
+import { mouseDownAtPoint, mouseMoveToPoint, mouseUpAtPoint } from '../../event-helpers.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
-import type { GridCellCoordinates } from './grid-cell-bounds'
 import { gridCellTargetId } from './grid-cell-bounds'
+import { runGridMoveTest } from './grid.test-utils'
 
 describe('grid element change location strategy', () => {
   it('can change the location of elements on a grid', async () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
     const testId = 'aaa'
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-      scale: 1,
-      pathString: `sb/scene/grid/${testId}`,
-      testId: testId,
-    })
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 1,
+        pathString: `sb/scene/grid/${testId}`,
+        testId: testId,
+      },
+    )
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnEnd: '7',
       gridColumnStart: '3',
@@ -55,7 +48,7 @@ describe('grid element change location strategy', () => {
         'await-first-dom-report',
       )
       const testId = 'aaa'
-      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
         editor,
         {
           scale: 1,
@@ -82,7 +75,7 @@ describe('grid element change location strategy', () => {
       )
 
       const testId = 'aaa'
-      await runMoveTest(
+      await runGridMoveTest(
         editor,
         {
           scale: 1,
@@ -111,11 +104,14 @@ describe('grid element change location strategy', () => {
     )
 
     const testId = 'aaa'
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-      scale: 1,
-      pathString: `sb/scene/grid/${testId}`,
-      testId: testId,
-    })
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 1,
+        pathString: `sb/scene/grid/${testId}`,
+        testId: testId,
+      },
+    )
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnEnd: '7',
       gridColumnStart: '3',
@@ -129,13 +125,16 @@ describe('grid element change location strategy', () => {
 
     const testId = 'aaa'
     // moving a multi-cell element to the left, but it is already on the left of the grid
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-      scale: 1,
-      pathString: `sb/scene/grid/${testId}`,
-      testId: testId,
-      targetCell: { row: 2, column: 1 },
-      draggedCell: { row: 2, column: 2 },
-    })
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 1,
+        pathString: `sb/scene/grid/${testId}`,
+        testId: testId,
+        targetCell: { row: 2, column: 1 },
+        draggedCell: { row: 2, column: 2 },
+      },
+    )
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnEnd: '5',
       gridColumnStart: '1',
@@ -148,12 +147,15 @@ describe('grid element change location strategy', () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
     const testId = 'bbb'
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-      scale: 1,
-      pathString: `sb/scene/grid/${testId}`,
-      testId: testId,
-      tab: true,
-    })
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 1,
+        pathString: `sb/scene/grid/${testId}`,
+        testId: testId,
+        tab: true,
+      },
+    )
 
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnEnd: 'auto',
@@ -170,12 +172,15 @@ describe('grid element change location strategy', () => {
     )
 
     const testId = 'orange'
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-      scale: 1,
-      pathString: `sb/scene/grid/${testId}`,
-      testId: testId,
-      targetCell: { row: 3, column: 1 },
-    })
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 1,
+        pathString: `sb/scene/grid/${testId}`,
+        testId: testId,
+        targetCell: { row: 3, column: 1 },
+      },
+    )
 
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnStart: '1',
@@ -189,11 +194,14 @@ describe('grid element change location strategy', () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
     const testId = 'aaa'
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-      scale: 0.5,
-      pathString: `sb/scene/grid/${testId}`,
-      testId: testId,
-    })
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 0.5,
+        pathString: `sb/scene/grid/${testId}`,
+        testId: testId,
+      },
+    )
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnEnd: '7',
       gridColumnStart: '3',
@@ -206,11 +214,14 @@ describe('grid element change location strategy', () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
     const testId = 'aaa'
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-      scale: 2,
-      pathString: `sb/scene/grid/${testId}`,
-      testId: testId,
-    })
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 2,
+        pathString: `sb/scene/grid/${testId}`,
+        testId: testId,
+      },
+    )
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnEnd: '7',
       gridColumnStart: '3',
@@ -226,11 +237,14 @@ describe('grid element change location strategy', () => {
     )
 
     const testId = 'pink'
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-      scale: 1,
-      pathString: `sb/scene/grid/${testId}`,
-      testId: testId,
-    })
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 1,
+        pathString: `sb/scene/grid/${testId}`,
+        testId: testId,
+      },
+    )
 
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnEnd: '5',
@@ -247,11 +261,14 @@ describe('grid element change location strategy', () => {
     )
 
     const testId = 'cyan'
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-      scale: 1,
-      pathString: `sb/scene/grid/${testId}`,
-      testId: testId,
-    })
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 1,
+        pathString: `sb/scene/grid/${testId}`,
+        testId: testId,
+      },
+    )
 
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnEnd: '5',
@@ -268,12 +285,15 @@ describe('grid element change location strategy', () => {
     )
 
     const testId = 'orange'
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-      scale: 1,
-      pathString: `sb/scene/grid/${testId}`,
-      testId: testId,
-      targetCell: { row: 3, column: 2 },
-    })
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 1,
+        pathString: `sb/scene/grid/${testId}`,
+        testId: testId,
+        targetCell: { row: 3, column: 2 },
+      },
+    )
 
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnEnd: 'span 3',
@@ -290,11 +310,14 @@ describe('grid element change location strategy', () => {
     )
 
     const testId = 'blue'
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-      scale: 1,
-      pathString: `sb/scene/grid/${testId}`,
-      testId: testId,
-    })
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 1,
+        pathString: `sb/scene/grid/${testId}`,
+        testId: testId,
+      },
+    )
 
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnEnd: '5',
@@ -311,11 +334,14 @@ describe('grid element change location strategy', () => {
     )
 
     const testId = 'purple'
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-      scale: 1,
-      pathString: `sb/scene/grid/${testId}`,
-      testId: testId,
-    })
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 1,
+        pathString: `sb/scene/grid/${testId}`,
+        testId: testId,
+      },
+    )
 
     expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
       gridColumnEnd: 'span 2',
@@ -801,296 +827,8 @@ export var storyboard = (
       })
     })
   })
-
-  describe('reorder', () => {
-    it('reorders an element without setting positioning (inside contiguous area)', async () => {
-      const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
-      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
-        await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 3 })
-
-      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
-        gridColumnEnd: '',
-        gridColumnStart: '',
-        gridRowEnd: '',
-        gridRowStart: '',
-      })
-
-      expect(cells).toEqual(['pink', 'cyan', 'orange', 'blue'])
-    })
-    it('reorders a component (which does not take style props) inside contiguous area', async () => {
-      const editor = await renderTestEditorWithCode(
-        ProjectCodeReorderWithComponentItem,
-        'await-first-dom-report',
-      )
-      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
-        await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 3 })
-
-      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
-        gridColumnEnd: '',
-        gridColumnStart: '',
-        gridRowEnd: '',
-        gridRowStart: '',
-      })
-
-      expect(cells).toEqual(['pink', 'cyan', 'orange', 'blue'])
-    })
-    it('reorders an element without setting positioning (edge of contiguous area)', async () => {
-      const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
-
-      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
-        await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 2, column: 1 })
-
-      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
-        gridColumnEnd: '',
-        gridColumnStart: '',
-        gridRowEnd: '',
-        gridRowStart: '',
-      })
-
-      expect(cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
-    })
-    it('reorders an element setting positioning when outside of contiguous area', async () => {
-      const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
-
-      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
-        await runReorderTest(
-          editor,
-          'sb/scene/grid',
-          'orange',
-          { row: 2, column: 2 },
-          { tab: true },
-        )
-
-      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
-        gridColumnEnd: 'auto',
-        gridColumnStart: '2',
-        gridRowEnd: 'auto',
-        gridRowStart: '2',
-      })
-
-      expect(cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
-    })
-    it('reorders an element setting positioning also relative to other fixed elements', async () => {
-      const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
-
-      const first = await runReorderTest(
-        editor,
-        'sb/scene/grid',
-        'orange',
-        { row: 2, column: 2 },
-        { tab: true },
-      )
-
-      expect({
-        gridRowStart: first.gridRowStart,
-        gridRowEnd: first.gridRowEnd,
-        gridColumnStart: first.gridColumnStart,
-        gridColumnEnd: first.gridColumnEnd,
-      }).toEqual({
-        gridColumnEnd: 'auto',
-        gridColumnStart: '2',
-        gridRowEnd: 'auto',
-        gridRowStart: '2',
-      })
-
-      expect(first.cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
-
-      const second = await runReorderTest(
-        editor,
-        'sb/scene/grid',
-        'pink',
-        { row: 2, column: 3 },
-        { tab: true },
-      )
-
-      expect({
-        gridRowStart: second.gridRowStart,
-        gridRowEnd: second.gridRowEnd,
-        gridColumnStart: second.gridColumnStart,
-        gridColumnEnd: second.gridColumnEnd,
-      }).toEqual({
-        gridColumnEnd: 'auto',
-        gridColumnStart: '3',
-        gridRowEnd: 'auto',
-        gridRowStart: '2',
-      })
-
-      expect(second.cells).toEqual(['cyan', 'blue', 'orange', 'pink'])
-    })
-
-    it('reorders and removes positioning when moving back to contiguous', async () => {
-      const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
-
-      const first = await runReorderTest(
-        editor,
-        'sb/scene/grid',
-        'orange',
-        { row: 2, column: 2 },
-        { tab: true },
-      )
-      expect({
-        gridRowStart: first.gridRowStart,
-        gridRowEnd: first.gridRowEnd,
-        gridColumnStart: first.gridColumnStart,
-        gridColumnEnd: first.gridColumnEnd,
-      }).toEqual({
-        gridColumnEnd: 'auto',
-        gridColumnStart: '2',
-        gridRowEnd: 'auto',
-        gridRowStart: '2',
-      })
-
-      expect(first.cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
-
-      const second = await runReorderTest(
-        editor,
-        'sb/scene/grid',
-        'orange',
-        { row: 1, column: 1 },
-        { tab: true },
-      )
-
-      expect({
-        gridRowStart: second.gridRowStart,
-        gridRowEnd: second.gridRowEnd,
-        gridColumnStart: second.gridColumnStart,
-        gridColumnEnd: second.gridColumnEnd,
-      }).toEqual({
-        gridColumnEnd: '',
-        gridColumnStart: '',
-        gridRowEnd: '',
-        gridRowStart: '',
-      })
-
-      expect(second.cells).toEqual(['orange', 'pink', 'cyan', 'blue'])
-    })
-
-    it('doesnt reorder when element occupies multiple cells', async () => {
-      const editor = await renderTestEditorWithCode(
-        ProjectCodeReorderwithMultiCellChild,
-        'await-first-dom-report',
-      )
-
-      const result = await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 1 })
-      expect({
-        gridRowStart: result.gridRowStart,
-        gridRowEnd: result.gridRowEnd,
-        gridColumnStart: result.gridColumnStart,
-        gridColumnEnd: result.gridColumnEnd,
-      }).toEqual({
-        gridColumnEnd: '3',
-        gridColumnStart: '1',
-        gridRowEnd: 'auto',
-        gridRowStart: '1',
-      })
-
-      expect(result.cells).toEqual(['pink', 'orange', 'cyan', 'blue'])
-    })
-  })
 })
 
-async function runMoveTest(
-  editor: EditorRenderResult,
-  props: {
-    scale: number
-    pathString: string
-    testId: string
-    targetCell?: GridCellCoordinates
-    draggedCell?: GridCellCoordinates
-    tab?: boolean
-  },
-  midDragCallback?: (editor: EditorRenderResult) => void,
-) {
-  const elementPathToDrag = EP.fromString(props.pathString)
-
-  await selectComponentsForTest(editor, [elementPathToDrag])
-
-  if (props.scale !== 1) {
-    await editor.dispatch([CanvasActions.zoom(props.scale)], true)
-  }
-
-  const sourceGridCell = editor.renderedDOM.getByTestId(
-    props.draggedCell == null
-      ? GridCellTestId(elementPathToDrag)
-      : gridCellTargetId(
-          EP.fromString('sb/scene/grid'),
-          props.draggedCell.row,
-          props.draggedCell.column,
-        ),
-  )
-  const targetGridCell = editor.renderedDOM.getByTestId(
-    gridCellTargetId(
-      EP.fromString('sb/scene/grid'),
-      props.targetCell?.row ?? 2,
-      props.targetCell?.column ?? 3,
-    ),
-  )
-
-  const sourceRect = sourceGridCell.getBoundingClientRect()
-  const targetRect = targetGridCell.getBoundingClientRect()
-
-  const dragFrom = {
-    x: sourceRect.x + 10,
-    y: sourceRect.y + 10,
-  }
-  const endPoint = getRectCenter(
-    localRectangle({
-      x: targetRect.x,
-      y: targetRect.y,
-      width: targetRect.width,
-      height: targetRect.height,
-    }),
-  )
-
-  await mouseDownAtPoint(sourceGridCell, dragFrom)
-  await mouseMoveToPoint(sourceGridCell, endPoint)
-  if (props.tab) {
-    await keyDown('Tab')
-  }
-  if (midDragCallback != null) {
-    midDragCallback(editor)
-  }
-
-  await mouseUpAtPoint(editor.renderedDOM.getByTestId(CanvasControlsContainerID), endPoint)
-
-  return editor.renderedDOM.getByTestId(props.testId).style
-}
-
-async function runReorderTest(
-  editor: EditorRenderResult,
-  gridTestId: string,
-  testId: string,
-  targetCell: GridCellCoordinates,
-  options?: { tab?: boolean },
-) {
-  const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runMoveTest(editor, {
-    scale: 1,
-    pathString: `${gridTestId}/${testId}`,
-    testId: testId,
-    targetCell: targetCell,
-    tab: options?.tab,
-  })
-
-  const element = editor.getEditorState().editor.jsxMetadata[gridTestId]
-  if (isLeft(element.element) || !isJSXElement(element.element.value)) {
-    throw new Error('expected jsx element')
-  }
-
-  const cells = MetadataUtils.getChildrenOrdered(
-    editor.getEditorState().editor.jsxMetadata,
-    editor.getEditorState().editor.elementPathTree,
-    element.elementPath,
-  )
-
-  return {
-    gridRowStart: gridRowStart,
-    gridRowEnd: gridRowEnd,
-    gridColumnStart: gridColumnStart,
-    gridColumnEnd: gridColumnEnd,
-    cells: cells.map((c) => EP.toUid(c.elementPath)),
-  }
-}
-
 const ProjectCode = `import * as React from 'react'
 import { Scene, Storyboard, Placeholder } from 'utopia-api'
 
@@ -1354,241 +1092,6 @@ export function Grid(props) {
 }
 `
 
-const ProjectCodeReorder = `import * as React from 'react'
-import { Scene, Storyboard } from 'utopia-api'
-
-export var storyboard = (
-  <Storyboard data-uid='sb'>
-    <Scene
-      id='playground-scene'
-      commentId='playground-scene'
-      style={{
-        width: 600,
-        height: 600,
-        position: 'absolute',
-        left: 0,
-        top: 0,
-      }}
-      data-label='Playground'
-      data-uid='scene'
-    >
-      <div
-        style={{
-          backgroundColor: '#aaaaaa33',
-          width: 500,
-          height: 500,
-          display: 'grid',
-          gridTemplateColumns: '1fr 1fr 1fr',
-          gridTemplateRows: '1fr 1fr 1fr',
-          gridGap: 10,
-          padding: 10,
-        }}
-        data-testid='grid'
-        data-uid='grid'
-      >
-        <div
-          style={{
-            backgroundColor: '#f09',
-            width: '100%',
-            height: '100%',
-          }}
-          data-uid='pink'
-          data-testid='pink'
-          data-label='pink'
-        />
-        <div
-          style={{
-            backgroundColor: '#f90',
-            width: '100%',
-            height: '100%',
-          }}
-          data-uid='orange'
-          data-testid='orange'
-          data-label='orange'
-        />
-        <div
-          style={{
-            backgroundColor: '#0f9',
-            width: '100%',
-            height: '100%',
-          }}
-          data-uid='cyan'
-          data-testid='cyan'
-          data-label='cyan'
-        />
-        <div
-          style={{
-            backgroundColor: '#09f',
-            width: '100%',
-            height: '100%',
-          }}
-          data-uid='blue'
-          data-testid='blue'
-          data-label='blue'
-        />
-      </div>
-    </Scene>
-  </Storyboard>
-)
-`
-
-const ProjectCodeReorderWithComponentItem = `import * as React from 'react'
-import { Scene, Storyboard } from 'utopia-api'
-
-export var storyboard = (
-  <Storyboard data-uid='sb'>
-    <Scene
-      id='playground-scene'
-      commentId='playground-scene'
-      style={{
-        width: 600,
-        height: 600,
-        position: 'absolute',
-        left: 0,
-        top: 0,
-      }}
-      data-label='Playground'
-      data-uid='scene'
-    >
-      <div
-        style={{
-          backgroundColor: '#aaaaaa33',
-          width: 500,
-          height: 500,
-          display: 'grid',
-          gridTemplateColumns: '1fr 1fr 1fr',
-          gridTemplateRows: '1fr 1fr 1fr',
-          gridGap: 10,
-          padding: 10,
-        }}
-        data-testid='grid'
-        data-uid='grid'
-      >
-        <Item
-          backgroundColor='#f09'
-          data-uid='pink'
-          data-testid='pink'
-          data-label='pink'
-        />
-        <Item
-          backgroundColor='#f90'
-          data-uid='orange'
-          data-testid='orange'
-          data-label='orange'
-        />
-        <Item
-          backgroundColor='#0f9'
-          data-uid='cyan'
-          data-testid='cyan'
-          data-label='cyan'
-        />
-        <Item
-          backgroundColor='#09f'
-          data-uid='blue'
-          data-testid='blue'
-          data-label='blue'
-        />
-      </div>
-    </Scene>
-  </Storyboard>
-)
-
-export function Item(props) {
-  return (
-    <div
-      style={{
-        backgroundColor: props.backgroundColor,
-        width: '100%',
-        height: '100%',
-      }}
-      data-uid={props['data-uid']}
-      data-testid={props['data-testid']}
-      data-label={props['data-label']}
-    />
-  )
-}
-`
-
-const ProjectCodeReorderwithMultiCellChild = `import * as React from 'react'
-import { Scene, Storyboard } from 'utopia-api'
-
-export var storyboard = (
-  <Storyboard data-uid='sb'>
-    <Scene
-      id='playground-scene'
-      commentId='playground-scene'
-      style={{
-        width: 600,
-        height: 600,
-        position: 'absolute',
-        left: 0,
-        top: 0,
-      }}
-      data-label='Playground'
-      data-uid='scene'
-    >
-      <div
-        style={{
-          backgroundColor: '#aaaaaa33',
-          width: 500,
-          height: 500,
-          display: 'grid',
-          gridTemplateColumns: '1fr 1fr 1fr',
-          gridTemplateRows: '1fr 1fr 1fr',
-          gridGap: 10,
-          padding: 10,
-        }}
-        data-testid='grid'
-        data-uid='grid'
-      >
-        <div
-          style={{
-            backgroundColor: '#f09',
-            width: '100%',
-            height: '100%',
-          }}
-          data-uid='pink'
-		  data-testid='pink'
-          data-label='pink'
-        />
-        <div
-          style={{
-            backgroundColor: '#f90',
-            width: '100%',
-            height: '100%',
-            gridColumnStart: 2,
-            gridColumnEnd: 4,
-          }}
-          data-uid='orange'
-		  data-testid='orange'
-          data-label='orange'
-        />
-        <div
-          style={{
-            backgroundColor: '#0f9',
-            width: '100%',
-            height: '100%',
-          }}
-          data-uid='cyan'
-		  data-testid='cyan'
-          data-label='cyan'
-        />
-        <div
-          style={{
-            backgroundColor: '#09f',
-            width: '100%',
-            height: '100%',
-          }}
-          data-uid='blue'
-		  data-testid='blue'
-          data-label='blue'
-        />
-      </div>
-    </Scene>
-  </Storyboard>
-)
-`
-
 const ProjectCodeReorderwithMultiCellChildShorthand = `import * as React from 'react'
 import { Scene, Storyboard } from 'utopia-api'
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx
new file mode 100644
index 000000000000..9fffc31d25bd
--- /dev/null
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx
@@ -0,0 +1,576 @@
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import { isLeft } from '../../../../core/shared/either'
+import { isJSXElement } from '../../../../core/shared/element-template'
+import type { EditorRenderResult } from '../../ui-jsx.test-utils'
+import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
+import type { GridCellCoordinates } from './grid-cell-bounds'
+import { runGridMoveTest } from './grid.test-utils'
+import * as EP from '../../../../core/shared/element-path'
+
+describe('grid reorder', () => {
+  it('reorders an element without setting positioning (inside contiguous area)', async () => {
+    const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
+      await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 3 })
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '',
+      gridColumnStart: '',
+      gridRowEnd: '',
+      gridRowStart: '',
+    })
+
+    expect(cells).toEqual(['pink', 'cyan', 'orange', 'blue'])
+  })
+  it('reorders a component (which does not take style props) inside contiguous area', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeReorderWithComponentItem,
+      'await-first-dom-report',
+    )
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
+      await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 3 })
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '',
+      gridColumnStart: '',
+      gridRowEnd: '',
+      gridRowStart: '',
+    })
+
+    expect(cells).toEqual(['pink', 'cyan', 'orange', 'blue'])
+  })
+  it('reorders an element without setting positioning (edge of contiguous area)', async () => {
+    const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
+
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
+      await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 2, column: 1 })
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '',
+      gridColumnStart: '',
+      gridRowEnd: '',
+      gridRowStart: '',
+    })
+
+    expect(cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
+  })
+  it('reorders an element setting positioning when outside of contiguous area', async () => {
+    const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
+
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
+      await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 2, column: 2 }, { tab: true })
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: 'auto',
+      gridColumnStart: '2',
+      gridRowEnd: 'auto',
+      gridRowStart: '2',
+    })
+
+    expect(cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
+  })
+  it('reorders an element setting positioning also relative to other fixed elements', async () => {
+    const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
+
+    const first = await runReorderTest(
+      editor,
+      'sb/scene/grid',
+      'orange',
+      { row: 2, column: 2 },
+      { tab: true },
+    )
+
+    expect({
+      gridRowStart: first.gridRowStart,
+      gridRowEnd: first.gridRowEnd,
+      gridColumnStart: first.gridColumnStart,
+      gridColumnEnd: first.gridColumnEnd,
+    }).toEqual({
+      gridColumnEnd: 'auto',
+      gridColumnStart: '2',
+      gridRowEnd: 'auto',
+      gridRowStart: '2',
+    })
+
+    expect(first.cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
+
+    const second = await runReorderTest(
+      editor,
+      'sb/scene/grid',
+      'pink',
+      { row: 2, column: 3 },
+      { tab: true },
+    )
+
+    expect({
+      gridRowStart: second.gridRowStart,
+      gridRowEnd: second.gridRowEnd,
+      gridColumnStart: second.gridColumnStart,
+      gridColumnEnd: second.gridColumnEnd,
+    }).toEqual({
+      gridColumnEnd: 'auto',
+      gridColumnStart: '3',
+      gridRowEnd: 'auto',
+      gridRowStart: '2',
+    })
+
+    expect(second.cells).toEqual(['cyan', 'blue', 'orange', 'pink'])
+  })
+
+  it('reorders and removes positioning when moving back to contiguous', async () => {
+    const editor = await renderTestEditorWithCode(ProjectCodeReorder, 'await-first-dom-report')
+
+    const first = await runReorderTest(
+      editor,
+      'sb/scene/grid',
+      'orange',
+      { row: 2, column: 2 },
+      { tab: true },
+    )
+    expect({
+      gridRowStart: first.gridRowStart,
+      gridRowEnd: first.gridRowEnd,
+      gridColumnStart: first.gridColumnStart,
+      gridColumnEnd: first.gridColumnEnd,
+    }).toEqual({
+      gridColumnEnd: 'auto',
+      gridColumnStart: '2',
+      gridRowEnd: 'auto',
+      gridRowStart: '2',
+    })
+
+    expect(first.cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
+
+    const second = await runReorderTest(
+      editor,
+      'sb/scene/grid',
+      'orange',
+      { row: 1, column: 1 },
+      { tab: true },
+    )
+
+    expect({
+      gridRowStart: second.gridRowStart,
+      gridRowEnd: second.gridRowEnd,
+      gridColumnStart: second.gridColumnStart,
+      gridColumnEnd: second.gridColumnEnd,
+    }).toEqual({
+      gridColumnEnd: '',
+      gridColumnStart: '',
+      gridRowEnd: '',
+      gridRowStart: '',
+    })
+
+    expect(second.cells).toEqual(['orange', 'pink', 'cyan', 'blue'])
+  })
+
+  it('reorders when element occupies multiple cells', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeReorderWithMultiCellChild,
+      'await-first-dom-report',
+    )
+
+    const result = await runReorderTest(
+      editor,
+      'sb/scene/grid',
+      'orange',
+      { row: 1, column: 1 },
+      { tab: true },
+    )
+
+    expect({
+      gridRowStart: result.gridRowStart,
+      gridRowEnd: result.gridRowEnd,
+      gridColumnStart: result.gridColumnStart,
+      gridColumnEnd: result.gridColumnEnd,
+    }).toEqual({
+      gridColumnEnd: 'auto',
+      gridColumnStart: 'span 2',
+      gridRowEnd: '',
+      gridRowStart: '',
+    })
+
+    expect(result.cells).toEqual(['orange', 'pink', 'cyan', 'blue'])
+  })
+
+  it('reordering a spanning element keeps its size', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeReorderWithSpanningChild,
+      'await-first-dom-report',
+    )
+
+    const result = await runReorderTest(
+      editor,
+      'sb/scene/grid',
+      'orange',
+      { row: 3, column: 2 },
+      { tab: true },
+    )
+
+    expect({
+      gridRowStart: result.gridRowStart,
+      gridRowEnd: result.gridRowEnd,
+      gridColumnStart: result.gridColumnStart,
+      gridColumnEnd: result.gridColumnEnd,
+    }).toEqual({
+      gridColumnEnd: 'auto',
+      gridColumnStart: 'span 3',
+      gridRowEnd: '',
+      gridRowStart: '',
+    })
+
+    expect(result.cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
+  })
+})
+
+async function runReorderTest(
+  editor: EditorRenderResult,
+  gridTestId: string,
+  testId: string,
+  targetCell: GridCellCoordinates,
+  options?: { tab?: boolean },
+) {
+  const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+    editor,
+    {
+      scale: 1,
+      pathString: `${gridTestId}/${testId}`,
+      testId: testId,
+      targetCell: targetCell,
+      tab: options?.tab,
+    },
+  )
+
+  const element = editor.getEditorState().editor.jsxMetadata[gridTestId]
+  if (isLeft(element.element) || !isJSXElement(element.element.value)) {
+    throw new Error('expected jsx element')
+  }
+
+  const cells = MetadataUtils.getChildrenOrdered(
+    editor.getEditorState().editor.jsxMetadata,
+    editor.getEditorState().editor.elementPathTree,
+    element.elementPath,
+  )
+
+  return {
+    gridRowStart: gridRowStart,
+    gridRowEnd: gridRowEnd,
+    gridColumnStart: gridColumnStart,
+    gridColumnEnd: gridColumnEnd,
+    cells: cells.map((c) => EP.toUid(c.elementPath)),
+  }
+}
+
+const ProjectCodeReorder = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 600,
+        height: 600,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 500,
+          height: 500,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr',
+          gridGap: 10,
+          padding: 10,
+        }}
+        data-testid='grid'
+        data-uid='grid'
+      >
+        <div
+          style={{
+            backgroundColor: '#f09',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='pink'
+          data-testid='pink'
+          data-label='pink'
+        />
+        <div
+          style={{
+            backgroundColor: '#f90',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='orange'
+          data-testid='orange'
+          data-label='orange'
+        />
+        <div
+          style={{
+            backgroundColor: '#0f9',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='cyan'
+          data-testid='cyan'
+          data-label='cyan'
+        />
+        <div
+          style={{
+            backgroundColor: '#09f',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='blue'
+          data-testid='blue'
+          data-label='blue'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`
+
+const ProjectCodeReorderWithComponentItem = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 600,
+        height: 600,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 500,
+          height: 500,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr',
+          gridGap: 10,
+          padding: 10,
+        }}
+        data-testid='grid'
+        data-uid='grid'
+      >
+        <Item
+          backgroundColor='#f09'
+          data-uid='pink'
+          data-testid='pink'
+          data-label='pink'
+        />
+        <Item
+          backgroundColor='#f90'
+          data-uid='orange'
+          data-testid='orange'
+          data-label='orange'
+        />
+        <Item
+          backgroundColor='#0f9'
+          data-uid='cyan'
+          data-testid='cyan'
+          data-label='cyan'
+        />
+        <Item
+          backgroundColor='#09f'
+          data-uid='blue'
+          data-testid='blue'
+          data-label='blue'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+
+export function Item(props) {
+  return (
+    <div
+      style={{
+        backgroundColor: props.backgroundColor,
+        width: '100%',
+        height: '100%',
+      }}
+      data-uid={props['data-uid']}
+      data-testid={props['data-testid']}
+      data-label={props['data-label']}
+    />
+  )
+}
+`
+
+const ProjectCodeReorderWithMultiCellChild = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 600,
+        height: 600,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 500,
+          height: 500,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr',
+          gridGap: 10,
+          padding: 10,
+        }}
+        data-testid='grid'
+        data-uid='grid'
+      >
+        <div
+          style={{
+            backgroundColor: '#f09',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='pink'
+		  data-testid='pink'
+          data-label='pink'
+        />
+        <div
+          style={{
+            backgroundColor: '#f90',
+            width: '100%',
+            height: '100%',
+            gridColumnStart: 2,
+            gridColumnEnd: 4,
+          }}
+          data-uid='orange'
+		  data-testid='orange'
+          data-label='orange'
+        />
+        <div
+          style={{
+            backgroundColor: '#0f9',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='cyan'
+		  data-testid='cyan'
+          data-label='cyan'
+        />
+        <div
+          style={{
+            backgroundColor: '#09f',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='blue'
+		  data-testid='blue'
+          data-label='blue'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`
+
+const ProjectCodeReorderWithSpanningChild = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 600,
+        height: 600,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          width: 500,
+          height: 500,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr',
+          gridGap: 10,
+          padding: 10,
+        }}
+        data-testid='grid'
+        data-uid='grid'
+      >
+        <div
+          style={{
+            backgroundColor: '#f09',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='pink'
+		  data-testid='pink'
+          data-label='pink'
+        />
+        <div
+          style={{
+            backgroundColor: '#f90',
+            width: '100%',
+            height: '100%',
+            gridColumn: 'span 3',
+          }}
+          data-uid='orange'
+		  data-testid='orange'
+          data-label='orange'
+        />
+        <div
+          style={{
+            backgroundColor: '#0f9',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='cyan'
+		  data-testid='cyan'
+          data-label='cyan'
+        />
+        <div
+          style={{
+            backgroundColor: '#09f',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='blue'
+		  data-testid='blue'
+          data-label='blue'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
index bee89383e297..abec7c1437cd 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
@@ -1,16 +1,14 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
-import type {
-  ElementInstanceMetadata,
-  ElementInstanceMetadataMap,
-  GridContainerProperties,
+import {
+  type ElementInstanceMetadata,
+  type ElementInstanceMetadataMap,
+  type GridContainerProperties,
 } from '../../../../core/shared/element-template'
-import { isInfinityRectangle } from '../../../../core/shared/math-utils'
 import * as PP from '../../../../core/shared/property-path'
 import { absolute } from '../../../../utils/utils'
 import type { CanvasCommand } from '../../commands/commands'
-import { deleteProperties } from '../../commands/delete-properties-command'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { showGridControls } from '../../commands/show-grid-controls-command'
 import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
@@ -34,6 +32,12 @@ import {
 } from './grid-helpers'
 import { getTargetGridCellData } from '../../../inspector/grid-helpers'
 import { gridItemIdentifier } from '../../../editor/store/editor-state'
+import type { PropertyToUpdate } from '../../commands/set-property-command'
+import {
+  propertyToDelete,
+  propertyToSet,
+  updateBulkProperties,
+} from '../../commands/set-property-command'
 
 export const gridReorderStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -226,16 +230,31 @@ function runGridReorder(
     canReorderToIndex ? targetRootCell : null,
   )
 
+  const gridConfig = getOriginalElementGridConfiguration(
+    gridCellGlobalFrames,
+    interactionData,
+    selectedElementMetadata,
+  )
+
+  const width = gridConfig?.originalCellBounds.width ?? 1
+  const height = gridConfig?.originalCellBounds.height ?? 1
+
+  const propsToUpdate: PropertyToUpdate[] = [
+    propertyToDelete(PP.create('style', 'gridColumnStart')),
+    propertyToDelete(PP.create('style', 'gridColumnEnd')),
+    propertyToDelete(PP.create('style', 'gridRowStart')),
+    propertyToDelete(PP.create('style', 'gridRowEnd')),
+    ...(width > 1
+      ? [propertyToSet(PP.create('style', 'gridColumn'), `span ${width}`)]
+      : [propertyToDelete(PP.create('style', 'gridColumn'))]),
+    ...(height > 1
+      ? [propertyToSet(PP.create('style', 'gridRow'), `span ${height}`)]
+      : [propertyToDelete(PP.create('style', 'gridRow'))]),
+  ]
+
   return [
     reorderElement('always', selectedElementMetadata.elementPath, absolute(possiblyReorderIndex)),
-    deleteProperties('always', selectedElementMetadata.elementPath, [
-      PP.create('style', 'gridColumn'),
-      PP.create('style', 'gridRow'),
-      PP.create('style', 'gridColumnStart'),
-      PP.create('style', 'gridColumnEnd'),
-      PP.create('style', 'gridRowStart'),
-      PP.create('style', 'gridRowEnd'),
-    ]),
+    updateBulkProperties('always', selectedElementMetadata.elementPath, propsToUpdate),
     updateGridControlsCommand,
   ]
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid.test-utils.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid.test-utils.ts
new file mode 100644
index 000000000000..26eae7685310
--- /dev/null
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid.test-utils.ts
@@ -0,0 +1,82 @@
+import { getRectCenter, localRectangle } from '../../../../core/shared/math-utils'
+import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
+import CanvasActions from '../../canvas-actions'
+import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
+import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
+import {
+  mouseDownAtPoint,
+  mouseMoveToPoint,
+  keyDown,
+  mouseUpAtPoint,
+} from '../../event-helpers.test-utils'
+import type { EditorRenderResult } from '../../ui-jsx.test-utils'
+import type { GridCellCoordinates } from './grid-cell-bounds'
+import { gridCellTargetId } from './grid-cell-bounds'
+import * as EP from '../../../../core/shared/element-path'
+
+export async function runGridMoveTest(
+  editor: EditorRenderResult,
+  props: {
+    scale: number
+    pathString: string
+    testId: string
+    targetCell?: GridCellCoordinates
+    draggedCell?: GridCellCoordinates
+    tab?: boolean
+  },
+  midDragCallback?: (editor: EditorRenderResult) => void,
+) {
+  const elementPathToDrag = EP.fromString(props.pathString)
+
+  await selectComponentsForTest(editor, [elementPathToDrag])
+
+  if (props.scale !== 1) {
+    await editor.dispatch([CanvasActions.zoom(props.scale)], true)
+  }
+
+  const sourceGridCell = editor.renderedDOM.getByTestId(
+    props.draggedCell == null
+      ? GridCellTestId(elementPathToDrag)
+      : gridCellTargetId(
+          EP.fromString('sb/scene/grid'),
+          props.draggedCell.row,
+          props.draggedCell.column,
+        ),
+  )
+  const targetGridCell = editor.renderedDOM.getByTestId(
+    gridCellTargetId(
+      EP.fromString('sb/scene/grid'),
+      props.targetCell?.row ?? 2,
+      props.targetCell?.column ?? 3,
+    ),
+  )
+
+  const sourceRect = sourceGridCell.getBoundingClientRect()
+  const targetRect = targetGridCell.getBoundingClientRect()
+
+  const dragFrom = {
+    x: sourceRect.x + 10,
+    y: sourceRect.y + 10,
+  }
+  const endPoint = getRectCenter(
+    localRectangle({
+      x: targetRect.x,
+      y: targetRect.y,
+      width: targetRect.width,
+      height: targetRect.height,
+    }),
+  )
+
+  await mouseDownAtPoint(sourceGridCell, dragFrom)
+  await mouseMoveToPoint(sourceGridCell, endPoint)
+  if (props.tab) {
+    await keyDown('Tab')
+  }
+  if (midDragCallback != null) {
+    midDragCallback(editor)
+  }
+
+  await mouseUpAtPoint(editor.renderedDOM.getByTestId(CanvasControlsContainerID), endPoint)
+
+  return editor.renderedDOM.getByTestId(props.testId).style
+}

From 35148f924553ebeeb307ae15bf19c3a0d4bcb066 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Fri, 15 Nov 2024 14:13:03 +0100
Subject: [PATCH 221/272] Tailwind aware padding (#6637)

## Problem
The padding controls cannot be used to read/write values in projects
that use Tailwind for styling.

## Fix
Use the style plugins and the `StyleInfo` system to make this possible.

Specifically,
- Add the padding shorthand prop/padding longhand prop to the
`StyleInfo` interface
- Update `InlineStylePlugin` and `TailwindStylePlugin` to support the
new props in `StyleInfo`
- Refactor the padding strategy, the padding control handle and the
subdued padding control to read element styles through a
`StyleInfoReader` instance
- Add a new property patcher in `style-plugins@patchers` to take care of
patching removed padding props
- Add tests with a tailwind project to the padding strategy test suite

### Out of scope
The jump in the bounding box after the interaction ends
([video](https://screenshot.click/14-02-e9ktf-say96.mp4)) will be
addressed on a follow-up PR

### Manual Tests
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/package.json                           |  2 +-
 editor/pnpm-lock.yaml                         |  8 +-
 .../set-padding-strategy.spec.browser2.tsx    | 96 ++++++++++++++++++-
 .../strategies/set-padding-strategy.tsx       | 23 +++--
 editor/src/components/canvas/canvas-types.ts  | 14 ++-
 .../select-mode/padding-resize-control.tsx    | 17 +++-
 .../select-mode/subdued-padding-control.tsx   | 15 ++-
 .../src/components/canvas/padding-utils.tsx   | 46 ++-------
 .../canvas/plugins/inline-style-plugin.ts     | 10 ++
 .../canvas/plugins/style-plugins.ts           | 21 +++-
 .../canvas/plugins/tailwind-style-plugin.ts   | 27 ++++++
 11 files changed, 222 insertions(+), 57 deletions(-)

diff --git a/editor/package.json b/editor/package.json
index 7a033b0527d7..3d0ee093c66b 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -171,7 +171,7 @@
     "@types/w3c-css-typed-object-model-level-1": "20180410.0.5",
     "@use-it/interval": "0.1.3",
     "@vercel/stega": "0.1.0",
-    "@xengine/tailwindcss-class-parser": "1.1.17",
+    "@xengine/tailwindcss-class-parser": "1.1.18",
     "ajv": "6.4.0",
     "anser": "2.1.0",
     "antd": "4.3.5",
diff --git a/editor/pnpm-lock.yaml b/editor/pnpm-lock.yaml
index 875ccee8c72d..d8b1271e1892 100644
--- a/editor/pnpm-lock.yaml
+++ b/editor/pnpm-lock.yaml
@@ -150,7 +150,7 @@ specifiers:
   '@vercel/stega': 0.1.0
   '@vitejs/plugin-react': 4.0.4
   '@welldone-software/why-did-you-render': 5.0.0-rc.1
-  '@xengine/tailwindcss-class-parser': 1.1.17
+  '@xengine/tailwindcss-class-parser': 1.1.18
   ajv: 6.4.0
   anser: 2.1.0
   antd: 4.3.5
@@ -390,7 +390,7 @@ dependencies:
   '@types/w3c-css-typed-object-model-level-1': 20180410.0.5
   '@use-it/interval': 0.1.3_react@18.1.0
   '@vercel/stega': 0.1.0
-  '@xengine/tailwindcss-class-parser': 1.1.17_tailwindcss@3.4.13
+  '@xengine/tailwindcss-class-parser': 1.1.18_tailwindcss@3.4.13
   ajv: 6.4.0
   anser: 2.1.0
   antd: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
@@ -6002,8 +6002,8 @@ packages:
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
     dev: true
 
-  /@xengine/tailwindcss-class-parser/1.1.17_tailwindcss@3.4.13:
-    resolution: {integrity: sha512-LRod5tEDSpr3T2I8R3U0bRH4O18MDfAdybxQRLSbcIta4AboQEeIUrNVsz6wRmJcsrBXtQYbwP4k9zsE+QnKAg==}
+  /@xengine/tailwindcss-class-parser/1.1.18_tailwindcss@3.4.13:
+    resolution: {integrity: sha512-BUH8MY4cAV7H1mHXIF1cny63VOiI4HXQD5z2q3SJ2seE1dcMWpUH7PvJ3cq8iO8cJ1q81qDTKUp9nlmRU7Gn6A==}
     peerDependencies:
       tailwindcss: '*'
     dependencies:
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.spec.browser2.tsx
index 286cbe95f566..d5d791ff98f6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.spec.browser2.tsx
@@ -1,7 +1,16 @@
+import * as EP from '../../../../core/shared/element-path'
 import { assertNever } from '../../../../core/shared/utils'
+import { TailwindConfigPath } from '../../../../core/tailwind/tailwind-config'
+import { createModifiedProject } from '../../../../sample-projects/sample-project-utils.test-utils'
 import type { Modifiers } from '../../../../utils/modifiers'
-import { cmdModifier, shiftModifier } from '../../../../utils/modifiers'
-import { expectSingleUndo2Saves, wait } from '../../../../utils/utils.test-utils'
+import { cmdModifier } from '../../../../utils/modifiers'
+import {
+  expectSingleUndo2Saves,
+  selectComponentsForTest,
+  setFeatureForBrowserTestsUseInDescribeBlockOnly,
+  wait,
+} from '../../../../utils/utils.test-utils'
+import { StoryboardFilePath } from '../../../editor/store/editor-state'
 import { cssNumber } from '../../../inspector/common/css-utils'
 import type { EdgePiece } from '../../canvas-types'
 import { isHorizontalEdgePiece } from '../../canvas-types'
@@ -39,6 +48,7 @@ import {
   getPrintedUiJsCode,
   makeTestProjectCodeWithSnippet,
   renderTestEditorWithCode,
+  renderTestEditorWithModel,
 } from '../../ui-jsx.test-utils'
 import { PaddingTearThreshold, SetPaddingStrategyName } from './set-padding-strategy'
 
@@ -745,6 +755,88 @@ describe('Padding resize strategy', () => {
       })
     })
   })
+
+  describe('Tailwind', () => {
+    setFeatureForBrowserTestsUseInDescribeBlockOnly('Tailwind', true)
+
+    const TailwindProject = (classes: string) =>
+      createModifiedProject({
+        [StoryboardFilePath]: `
+    import React from 'react'
+    import { Scene, Storyboard } from 'utopia-api'
+    export var storyboard = (
+      <Storyboard data-uid='sb'>
+        <Scene
+          id='scene'
+          commentId='scene'
+          data-uid='scene'
+          style={{
+            width: 700,
+            height: 759,
+            position: 'absolute',
+            left: 212,
+            top: 128,
+          }}
+        >
+          <div
+            data-uid='mydiv'
+            data-testid='mydiv'
+            className='top-10 left-10 absolute flex flex-row ${classes}'
+          >
+            <div className='bg-red-500 w-10 h-10' data-uid='child-1' />
+            <div className='bg-red-500 w-10 h-10' data-uid='child-2' />
+          </div>  
+        </Scene>
+      </Storyboard>
+    )
+    
+    `,
+        [TailwindConfigPath]: `
+        const TailwindConfig = { }
+        export default TailwindConfig
+    `,
+        'app.css': `
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;`,
+      })
+
+    it('can set tailwind padding', async () => {
+      const editor = await renderTestEditorWithModel(
+        TailwindProject('p-12'),
+        'await-first-dom-report',
+      )
+      await selectComponentsForTest(editor, [EP.fromString('sb/scene/mydiv')])
+      await testPaddingResizeForEdge(editor, 50, 'top', 'precise')
+      await editor.getDispatchFollowUpActionsFinished()
+      const div = editor.renderedDOM.getByTestId('mydiv')
+      expect(div.className).toEqual('top-10 left-10 absolute flex flex-row p-[6rem_3rem_3rem_3rem]')
+    })
+
+    it('can remove tailwind padding', async () => {
+      const editor = await renderTestEditorWithModel(
+        TailwindProject('p-4'),
+        'await-first-dom-report',
+      )
+      await selectComponentsForTest(editor, [EP.fromString('sb/scene/mydiv')])
+      await testPaddingResizeForEdge(editor, -150, 'top', 'precise')
+      await editor.getDispatchFollowUpActionsFinished()
+      const div = editor.renderedDOM.getByTestId('mydiv')
+      expect(div.className).toEqual('top-10 left-10 absolute flex flex-row pb-4 pl-4 pr-4')
+    })
+
+    it('can set tailwind padding longhand', async () => {
+      const editor = await renderTestEditorWithModel(
+        TailwindProject('pt-12'),
+        'await-first-dom-report',
+      )
+      await selectComponentsForTest(editor, [EP.fromString('sb/scene/mydiv')])
+      await testPaddingResizeForEdge(editor, 50, 'top', 'precise')
+      await editor.getDispatchFollowUpActionsFinished()
+      const div = editor.renderedDOM.getByTestId('mydiv')
+      expect(div.className).toEqual('top-10 left-10 absolute flex flex-row pt-24')
+    })
+  })
 })
 
 async function testAdjustIndividualPaddingValue(edge: EdgePiece, precision: AdjustPrecision) {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
index 607524af53b9..c8672ef6c272 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
@@ -32,11 +32,11 @@ import {
   paddingPropForEdge,
   paddingToPaddingString,
   printCssNumberWithDefaultUnit,
-  simplePaddingFromMetadata,
+  simplePaddingFromStyleInfo,
 } from '../../padding-utils'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
-import type { InteractionCanvasState } from '../canvas-strategy-types'
+import type { InteractionCanvasState, StyleInfoReader } from '../canvas-strategy-types'
 import {
   controlWithProps,
   emptyStrategyApplicationResult,
@@ -114,6 +114,7 @@ export const setPaddingStrategy: CanvasStrategyFactory = (canvasState, interacti
       canvasState.startingMetadata,
       canvasState.startingElementPathTree,
       selectedElements[0],
+      canvasState.styleInfoReader,
     )
   ) {
     return null
@@ -180,7 +181,11 @@ export const setPaddingStrategy: CanvasStrategyFactory = (canvasState, interacti
 
       const edgePiece = interactionSession.activeControl.edgePiece
       const drag = interactionSession.interactionData.drag ?? canvasVector({ x: 0, y: 0 })
-      const padding = simplePaddingFromMetadata(canvasState.startingMetadata, selectedElement)
+      const padding = simplePaddingFromStyleInfo(
+        canvasState.startingMetadata,
+        selectedElement,
+        canvasState.styleInfoReader(selectedElement),
+      )
       const paddingPropInteractedWith = paddingPropForEdge(edgePiece)
       const currentPadding = padding[paddingPropInteractedWith]?.renderedValuePx ?? 0
       const rawDelta = deltaFromEdge(drag, edgePiece)
@@ -347,6 +352,7 @@ function supportsPaddingControls(
   metadata: ElementInstanceMetadataMap,
   pathTrees: ElementPathTrees,
   path: ElementPath,
+  styleInfoReader: StyleInfoReader,
 ): boolean {
   const element = MetadataUtils.findElementByElementPath(metadata, path)
   if (element == null) {
@@ -361,7 +367,7 @@ function supportsPaddingControls(
     return false
   }
 
-  const padding = simplePaddingFromMetadata(metadata, path)
+  const padding = simplePaddingFromStyleInfo(metadata, path, styleInfoReader(path))
   const { top, right, bottom, left } = element.specialSizeMeasurements.padding
   const elementHasNonzeroPaddingFromMeasurements = [top, right, bottom, left].some(
     (s) => s != null && s > 0,
@@ -426,9 +432,10 @@ function paddingValueIndicatorProps(
 
   const edgePiece = interactionSession.activeControl.edgePiece
 
-  const padding = simplePaddingFromMetadata(
+  const padding = simplePaddingFromStyleInfo(
     canvasState.startingMetadata,
     filteredSelectedElements[0],
+    canvasState.styleInfoReader(filteredSelectedElements[0]),
   )
   const currentPadding =
     padding[paddingPropForEdge(edgePiece)] ?? unitlessCSSNumberWithRenderedValue(0)
@@ -554,7 +561,11 @@ function calculateAdjustDelta(
 
   const edgePiece = interactionSession.activeControl.edgePiece
   const drag = interactionSession.interactionData.drag ?? canvasVector({ x: 0, y: 0 })
-  const padding = simplePaddingFromMetadata(canvasState.startingMetadata, selectedElement)
+  const padding = simplePaddingFromStyleInfo(
+    canvasState.startingMetadata,
+    selectedElement,
+    canvasState.styleInfoReader(selectedElement),
+  )
   const paddingPropInteractedWith = paddingPropForEdge(edgePiece)
   const currentPadding = padding[paddingPropForEdge(edgePiece)]?.renderedValuePx ?? 0
   const rawDelta = deltaFromEdge(drag, edgePiece)
diff --git a/editor/src/components/canvas/canvas-types.ts b/editor/src/components/canvas/canvas-types.ts
index f9202cf37cb6..2d3e29e102b8 100644
--- a/editor/src/components/canvas/canvas-types.ts
+++ b/editor/src/components/canvas/canvas-types.ts
@@ -26,7 +26,7 @@ import type {
 import { InteractionSession } from './canvas-strategies/interaction-state'
 import type { CanvasStrategyId } from './canvas-strategies/canvas-strategy-types'
 import type { MouseButtonsPressed } from '../../utils/mouse'
-import type { CSSNumber, FlexDirection } from '../inspector/common/css-utils'
+import type { CSSNumber, CSSPadding, FlexDirection } from '../inspector/common/css-utils'
 
 export const CanvasContainerID = 'canvas-container'
 
@@ -584,6 +584,8 @@ export type BottomInfo = CSSStyleProperty<CSSNumber>
 export type WidthInfo = CSSStyleProperty<CSSNumber>
 export type HeightInfo = CSSStyleProperty<CSSNumber>
 export type FlexBasisInfo = CSSStyleProperty<CSSNumber>
+export type PaddingInfo = CSSStyleProperty<CSSPadding>
+export type PaddingSideInfo = CSSStyleProperty<CSSNumber>
 
 export interface StyleInfo {
   gap: FlexGapInfo | null
@@ -595,6 +597,11 @@ export interface StyleInfo {
   width: WidthInfo | null
   height: HeightInfo | null
   flexBasis: FlexBasisInfo | null
+  padding: PaddingInfo | null
+  paddingTop: PaddingSideInfo | null
+  paddingRight: PaddingSideInfo | null
+  paddingBottom: PaddingSideInfo | null
+  paddingLeft: PaddingSideInfo | null
 }
 
 const emptyStyleInfo: StyleInfo = {
@@ -607,6 +614,11 @@ const emptyStyleInfo: StyleInfo = {
   width: null,
   height: null,
   flexBasis: null,
+  padding: null,
+  paddingTop: null,
+  paddingRight: null,
+  paddingBottom: null,
+  paddingLeft: null,
 }
 
 export const isStyleInfoKey = (key: string): key is keyof StyleInfo => key in emptyStyleInfo
diff --git a/editor/src/components/canvas/controls/select-mode/padding-resize-control.tsx b/editor/src/components/canvas/controls/select-mode/padding-resize-control.tsx
index 0951eb5597ac..c9d8906e69ba 100644
--- a/editor/src/components/canvas/controls/select-mode/padding-resize-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/padding-resize-control.tsx
@@ -34,7 +34,7 @@ import {
   paddingAdjustMode,
   paddingFromSpecialSizeMeasurements,
   PaddingIndictorOffset,
-  simplePaddingFromMetadata,
+  simplePaddingFromStyleInfo,
 } from '../../padding-utils'
 import { useBoundingBox } from '../bounding-box-hooks'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
@@ -43,6 +43,7 @@ import type { CSSNumberWithRenderedValue } from './controls-common'
 import { CanvasLabel, fallbackEmptyValue, PillHandle, useHoverWithDelay } from './controls-common'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { mapDropNulls } from '../../../../core/shared/array-utils'
+import { getActivePlugin } from '../../plugins/style-plugins'
 
 export const paddingControlTestId = (edge: EdgePiece): string => `padding-control-${edge}`
 export const paddingControlHandleTestId = (edge: EdgePiece): string =>
@@ -358,12 +359,22 @@ export const PaddingResizeControl = controlForStrategyMemoized((props: PaddingCo
     }
   }, [hoveredViews, selectedElements])
 
+  const styleInfoReaderRef = useRefEditorState((store) =>
+    getActivePlugin(store.editor).styleInfoFactory({
+      projectContents: store.editor.projectContents,
+    }),
+  )
+
   const currentPadding = React.useMemo(() => {
     return combinePaddings(
       paddingFromSpecialSizeMeasurements(elementMetadata, selectedElements[0]),
-      simplePaddingFromMetadata(elementMetadata, selectedElements[0]),
+      simplePaddingFromStyleInfo(
+        elementMetadata,
+        selectedElements[0],
+        styleInfoReaderRef.current(selectedElements[0]),
+      ),
     )
-  }, [elementMetadata, selectedElements])
+  }, [elementMetadata, selectedElements, styleInfoReaderRef])
 
   const shownByParent = selectedElementHovered || anyControlHovered
 
diff --git a/editor/src/components/canvas/controls/select-mode/subdued-padding-control.tsx b/editor/src/components/canvas/controls/select-mode/subdued-padding-control.tsx
index d46615b6ad39..766a180c9386 100644
--- a/editor/src/components/canvas/controls/select-mode/subdued-padding-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/subdued-padding-control.tsx
@@ -2,9 +2,10 @@ import React from 'react'
 import { useColorTheme } from '../../../../uuiui'
 import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook'
 import type { EdgePiece } from '../../canvas-types'
-import { paddingPropForEdge, simplePaddingFromMetadata } from '../../padding-utils'
+import { paddingPropForEdge, simplePaddingFromStyleInfo } from '../../padding-utils'
 import { useBoundingBox } from '../bounding-box-hooks'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
+import { getActivePlugin } from '../../plugins/style-plugins'
 
 export interface SubduedPaddingControlProps {
   side: EdgePiece
@@ -25,9 +26,19 @@ export const SubduedPaddingControl = React.memo<SubduedPaddingControlProps>((pro
   const isVerticalPadding = !isHorizontalPadding
   const paddingKey = paddingPropForEdge(side)
 
+  const styleInfoReaderRef = useRefEditorState((store) =>
+    getActivePlugin(store.editor).styleInfoFactory({
+      projectContents: store.editor.projectContents,
+    }),
+  )
+
   // TODO Multiselect
   const sideRef = useBoundingBox(targets, (ref, boundingBox) => {
-    const padding = simplePaddingFromMetadata(elementMetadata.current, targets[0])
+    const padding = simplePaddingFromStyleInfo(
+      elementMetadata.current,
+      targets[0],
+      styleInfoReaderRef.current(targets[0]),
+    )
     const paddingValue = padding[paddingKey]?.renderedValuePx ?? 0
 
     const { x, y, width, height } = boundingBox
diff --git a/editor/src/components/canvas/padding-utils.tsx b/editor/src/components/canvas/padding-utils.tsx
index 7f2247aeeaed..117e0f35973f 100644
--- a/editor/src/components/canvas/padding-utils.tsx
+++ b/editor/src/components/canvas/padding-utils.tsx
@@ -1,9 +1,6 @@
 import { styleStringInArray } from '../../utils/common-constants'
-import { getLayoutProperty } from '../../core/layout/getLayoutProperty'
 import { MetadataUtils } from '../../core/model/element-metadata-utils'
-import { defaultEither, isLeft, right } from '../../core/shared/either'
 import type { ElementInstanceMetadataMap } from '../../core/shared/element-template'
-import { isJSXElement } from '../../core/shared/element-template'
 import type { CanvasVector, Size } from '../../core/shared/math-utils'
 import { numberIsZero, roundTo, zeroRectIfNullOrInfinity } from '../../core/shared/math-utils'
 import { optionalMap } from '../../core/shared/optional-utils'
@@ -11,7 +8,7 @@ import type { ElementPath } from '../../core/shared/project-file-types'
 import { assertNever } from '../../core/shared/utils'
 import type { CSSNumber, CSSNumberUnit, CSSPadding } from '../inspector/common/css-utils'
 import { printCSSNumber } from '../inspector/common/css-utils'
-import type { EdgePiece } from './canvas-types'
+import { maybePropertyValue, type EdgePiece, type StyleInfo } from './canvas-types'
 import type {
   AdjustPrecision,
   CSSNumberWithRenderedValue,
@@ -58,12 +55,11 @@ export function paddingFromSpecialSizeMeasurements(
   return paddingMappedMeasurements
 }
 
-export function simplePaddingFromMetadata(
+export function simplePaddingFromStyleInfo(
   metadata: ElementInstanceMetadataMap,
   elementPath: ElementPath,
+  styleInfo: StyleInfo | null,
 ): CSSPaddingMappedValues<CSSNumberWithRenderedValue | undefined> {
-  const element = MetadataUtils.findElementByElementPath(metadata, elementPath)
-
   const defaults: CSSPaddingMappedValues<CSSNumber | undefined> = {
     paddingTop: undefined,
     paddingRight: undefined,
@@ -71,39 +67,15 @@ export function simplePaddingFromMetadata(
     paddingLeft: undefined,
   }
 
-  if (element == null || isLeft(element.element) || !isJSXElement(element.element.value)) {
-    return {
-      paddingTop: undefined,
-      paddingRight: undefined,
-      paddingBottom: undefined,
-      paddingLeft: undefined,
-    }
-  }
-
   const paddingNumbers = paddingFromSpecialSizeMeasurements(metadata, elementPath)
 
-  const padding: CSSPadding | undefined = defaultEither(
-    undefined,
-    getLayoutProperty('padding', right(element.element.value.props), styleStringInArray),
-  )
+  const padding = optionalMap(maybePropertyValue, styleInfo?.padding)
 
-  const paddingLonghands: CSSPaddingMappedValues<CSSNumber | undefined> = {
-    paddingTop: defaultEither(
-      undefined,
-      getLayoutProperty('paddingTop', right(element.element.value.props), styleStringInArray),
-    ),
-    paddingBottom: defaultEither(
-      undefined,
-      getLayoutProperty('paddingBottom', right(element.element.value.props), styleStringInArray),
-    ),
-    paddingLeft: defaultEither(
-      undefined,
-      getLayoutProperty('paddingLeft', right(element.element.value.props), styleStringInArray),
-    ),
-    paddingRight: defaultEither(
-      undefined,
-      getLayoutProperty('paddingRight', right(element.element.value.props), styleStringInArray),
-    ),
+  const paddingLonghands: CSSPaddingMappedValues<CSSNumber | null> = {
+    paddingTop: optionalMap(maybePropertyValue, styleInfo?.paddingTop),
+    paddingBottom: optionalMap(maybePropertyValue, styleInfo?.paddingBottom),
+    paddingLeft: optionalMap(maybePropertyValue, styleInfo?.paddingLeft),
+    paddingRight: optionalMap(maybePropertyValue, styleInfo?.paddingRight),
   }
 
   const make = (prop: CSSPaddingKey): CSSNumberWithRenderedValue | undefined => {
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.ts b/editor/src/components/canvas/plugins/inline-style-plugin.ts
index f3b9350f44ff..0d8e6890fcb6 100644
--- a/editor/src/components/canvas/plugins/inline-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.ts
@@ -68,6 +68,11 @@ export const InlineStylePlugin: StylePlugin = {
       const width = getPropertyFromInstance('width', element.props)
       const height = getPropertyFromInstance('height', element.props)
       const flexBasis = getPropertyFromInstance('flexBasis', element.props)
+      const padding = getPropertyFromInstance('padding', element.props)
+      const paddingTop = getPropertyFromInstance('paddingTop', element.props)
+      const paddingBottom = getPropertyFromInstance('paddingBottom', element.props)
+      const paddingLeft = getPropertyFromInstance('paddingLeft', element.props)
+      const paddingRight = getPropertyFromInstance('paddingRight', element.props)
 
       return {
         gap: gap,
@@ -79,6 +84,11 @@ export const InlineStylePlugin: StylePlugin = {
         width: width,
         height: height,
         flexBasis: flexBasis,
+        padding: padding,
+        paddingTop: paddingTop,
+        paddingBottom: paddingBottom,
+        paddingLeft: paddingLeft,
+        paddingRight: paddingRight,
       }
     },
   updateStyles: (editorState, elementPath, updates) => {
diff --git a/editor/src/components/canvas/plugins/style-plugins.ts b/editor/src/components/canvas/plugins/style-plugins.ts
index 651671aa2f05..5fa2e0aed628 100644
--- a/editor/src/components/canvas/plugins/style-plugins.ts
+++ b/editor/src/components/canvas/plugins/style-plugins.ts
@@ -169,7 +169,26 @@ const genericPropPatcher =
     return [makeZeroProp(prop, zeroValue)]
   }
 
-const patchers: PropPatcher[] = [{ matches: (p) => p === 'gap', patch: genericPropPatcher('0px') }]
+const PaddingLonghands = ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight']
+
+const patchers: PropPatcher[] = [
+  { matches: (p) => p === 'gap', patch: genericPropPatcher('0px') },
+  {
+    matches: (p) => p === 'padding',
+    patch: (_, styleInfo, updatedProperties) => {
+      const propIsSetOnElement = styleInfo?.padding != null
+
+      if (!propIsSetOnElement) {
+        return []
+      }
+
+      return PaddingLonghands.filter((p) => !updatedProperties.propertiesUpdated.includes(p)).map(
+        (p) => makeZeroProp(p),
+      )
+    },
+  },
+  { matches: (p) => PaddingLonghands.includes(p), patch: genericPropPatcher('0px') },
+]
 
 function getPropertiesToZero(
   styleInfo: StyleInfo | null,
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
index 7aa2ae4c1f01..a0ff407504c8 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -32,6 +32,11 @@ const TailwindPropertyMapping: Record<string, string> = {
   width: 'width',
   height: 'height',
   flexBasis: 'flexBasis',
+  padding: 'padding',
+  paddingTop: 'paddingTop',
+  paddingRight: 'paddingRight',
+  paddingBottom: 'paddingBottom',
+  paddingLeft: 'paddingLeft',
 }
 
 function isSupportedTailwindProperty(prop: unknown): prop is keyof typeof TailwindPropertyMapping {
@@ -61,6 +66,8 @@ function getTailwindClassMapping(classes: string[], config: Config | null): Reco
   return mapping
 }
 
+const underscoresToSpaces = (s: string | undefined) => s?.replace(/[-_]/g, ' ')
+
 export const TailwindPlugin = (config: Config | null): StylePlugin => ({
   name: 'Tailwind',
   styleInfoFactory:
@@ -92,6 +99,26 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
           mapping[TailwindPropertyMapping.flexBasis],
           cssParsers.flexBasis,
         ),
+        padding: parseTailwindProperty(
+          underscoresToSpaces(mapping[TailwindPropertyMapping.padding]),
+          cssParsers.padding,
+        ),
+        paddingTop: parseTailwindProperty(
+          mapping[TailwindPropertyMapping.paddingTop],
+          cssParsers.paddingTop,
+        ),
+        paddingRight: parseTailwindProperty(
+          mapping[TailwindPropertyMapping.paddingRight],
+          cssParsers.paddingRight,
+        ),
+        paddingBottom: parseTailwindProperty(
+          mapping[TailwindPropertyMapping.paddingBottom],
+          cssParsers.paddingBottom,
+        ),
+        paddingLeft: parseTailwindProperty(
+          mapping[TailwindPropertyMapping.paddingLeft],
+          cssParsers.paddingLeft,
+        ),
       }
     },
   updateStyles: (editorState, elementPath, updates) => {

From 7b85cb312e0de96248da08fb931276ac5786141b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Mon, 18 Nov 2024 10:37:23 +0100
Subject: [PATCH 222/272] Remove unused PaddingControls element (#6648)

## Problem
`PaddingControls` is not used to control paddings anywhere

## Fix
Remove it
---
 .../canvas/controls/padding-controls.tsx      | 127 ------------------
 1 file changed, 127 deletions(-)
 delete mode 100644 editor/src/components/canvas/controls/padding-controls.tsx

diff --git a/editor/src/components/canvas/controls/padding-controls.tsx b/editor/src/components/canvas/controls/padding-controls.tsx
deleted file mode 100644
index 9ef3c9ad16a2..000000000000
--- a/editor/src/components/canvas/controls/padding-controls.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import React from 'react'
-import type { Sides } from 'utopia-api/core'
-import type { CanvasRectangle, CanvasPoint } from '../../../core/shared/math-utils'
-import { useColorTheme } from '../../../uuiui'
-
-interface PaddingControlsProps {
-  padding: Partial<Sides> | null
-  frame: CanvasRectangle
-  canvasOffset: CanvasPoint
-  scale: number
-}
-
-export const PaddingControls = React.memo((props: PaddingControlsProps) => {
-  const colorTheme = useColorTheme()
-  if (props.padding == null) {
-    return null
-  } else {
-    const leftElement =
-      props.padding.left != null && props.padding.left !== 0 ? (
-        <div
-          key='padding-left'
-          className=' roleFlexPaddingControl'
-          style={{
-            fontSize: 10,
-            fontWeight: 5,
-            textAlign: 'center',
-            overflow: 'visible',
-            background: colorTheme.paddingFillTranslucent.value,
-            color: colorTheme.paddingForeground.value,
-            position: 'absolute',
-            left: props.frame.x + props.canvasOffset.x,
-            top: props.frame.y + props.canvasOffset.y,
-            width: props.padding.left,
-            height: props.frame.height,
-            lineHeight: props.frame.height + 'px',
-          }}
-        >
-          {props.padding.left}
-        </div>
-      ) : null
-    const topElement =
-      props.padding.top != null && props.padding.top !== 0 ? (
-        <div
-          key='padding-top'
-          style={{
-            fontSize: 10,
-            fontWeight: 500,
-            textAlign: 'center',
-            overflow: 'visible',
-            background: colorTheme.paddingFillTranslucent.value,
-            color: colorTheme.paddingForeground.value,
-            position: 'absolute',
-            left: props.frame.x + props.canvasOffset.x + (props.padding.left ?? 0),
-            top: props.frame.y + props.canvasOffset.y,
-            width: props.frame.width - (props.padding.left ?? 0) - (props.padding.right ?? 0),
-            height: props.padding.top,
-            lineHeight: props.padding.top + 'px',
-          }}
-        >
-          {props.padding.top}
-        </div>
-      ) : null
-    const rightElement =
-      props.padding.right != null && props.padding.right !== 0 ? (
-        <div
-          key='padding-right'
-          style={{
-            fontSize: 10,
-            fontWeight: 500,
-            textAlign: 'center',
-            overflow: 'visible',
-            background: colorTheme.paddingFillTranslucent.value,
-            color: colorTheme.paddingForeground.value,
-            position: 'absolute',
-            left: props.frame.x + props.canvasOffset.x + props.frame.width - props.padding.right,
-            top: props.frame.y + props.canvasOffset.y,
-            width: props.padding.right,
-            height: props.frame.height,
-            lineHeight: props.frame.height + 'px',
-          }}
-        >
-          {props.padding.right}
-        </div>
-      ) : null
-    const bottomElement =
-      props.padding.bottom != null && props.padding.bottom !== 0 ? (
-        <div
-          key='padding-bottom'
-          style={{
-            fontSize: 10,
-            fontWeight: 500,
-            textAlign: 'center',
-            overflow: 'visible',
-            background: colorTheme.paddingFillTranslucent.value,
-            color: colorTheme.paddingForeground.value,
-            position: 'absolute',
-            left: props.frame.x + props.canvasOffset.x + (props.padding.left ?? 0),
-            top: props.frame.y + props.canvasOffset.y + props.frame.height - props.padding.bottom,
-            width: props.frame.width - (props.padding.left ?? 0) - (props.padding.right ?? 0),
-            height: props.padding.bottom,
-            lineHeight: props.padding.bottom + 'px',
-          }}
-        >
-          {props.padding.bottom}
-        </div>
-      ) : null
-    const innerDiv =
-      leftElement == null &&
-      topElement == null &&
-      rightElement == null &&
-      bottomElement == null ? null : (
-        <div
-          key='padding-inner-div'
-          style={{
-            background: 'transparent',
-            position: 'absolute',
-            pointerEvents: 'none',
-            left: props.frame.x + props.canvasOffset.x + (props.padding.left ?? 0),
-            top: props.frame.y + props.canvasOffset.y + (props.padding.top ?? 0),
-            width: props.frame.width - (props.padding.left ?? 0) - (props.padding.right ?? 0),
-            height: props.frame.height - (props.padding.top ?? 0) - (props.padding.bottom ?? 0),
-          }}
-        />
-      )
-    return <>{[leftElement, topElement, rightElement, bottomElement, innerDiv]}</>
-  }
-})

From 85df996db6df4964ee651855e1bc9a354ec2aff0 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Mon, 18 Nov 2024 10:53:50 +0100
Subject: [PATCH 223/272] Grid component support (#6640)

**Problem:**
Followup to https://github.com/concrete-utopia/utopia/pull/6636

The goal is to support interaction with grid item in the following
scenario:
- the grid is in a component
- the grid renders the component's children
- the grid is not the root element of the component

**Fix:**
In https://github.com/concrete-utopia/utopia/pull/6636 I introduced a
way to indentify a grid using the element path of its item (which is
necessary because when the grid is in a non-focused component).

- `GridMeasurementHelper` collects the grids from the metadata. These
grids in non-focused components are not in the metadata, so they are not
collected. I fixed this by collecting component items from the grids
too.
- To get the measurement data for these grids which identified by their
items, I added a new parameter to `getGridMeasurementHelperData` so it
can get the styling of the parentElement of the item's element.
- The measurement helper was identified by its element path, and the
dom-sampler could retrieve the helper from the dom using that. However,
this is again not a good solution for these grids in non-focused
components, so I added global WeakMap which stores the pairing between
HTMLElements of grids and the id attribute of their
GridMeasurementHelper.
- I updated the `path` fiels names of `GridContainerIdentifier` and
`GridItemIdentifier`: it was not a good idea to use the same name in the
two paths, because it was possible to not check the type and use the
path field.

**Missing:**
`gridMoveStrategiesExtraCommands` still tries to set grid props on the
parent, and when it is a component, those can be absolutely useless. We
should detect when that is the case, and not generate these commands.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 ...change-location-strategy.spec.browser2.tsx |  89 ++++-----
 .../strategies/grid-helpers.ts                |  38 ++++
 .../grid-reorder-strategy.spec.browser2.tsx   | 120 ++++++++++++
 ...-resize-element-strategy.spec.browser2.tsx |  24 ++-
 .../controls/grid-controls-for-strategies.tsx |  95 +++++++---
 .../canvas/controls/grid-controls.tsx         | 172 +++++++++++-------
 .../select-mode/subdued-grid-gap-controls.tsx |   6 +-
 .../components/canvas/direct-dom-lookups.ts   |  22 ++-
 editor/src/components/canvas/dom-walker.ts    |  24 +--
 .../components/editor/store/editor-state.ts   |  16 +-
 .../store/store-deep-equality-instances.ts    |   4 +-
 .../src/core/model/element-metadata-utils.ts  |   5 +
 12 files changed, 429 insertions(+), 186 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
index cca92c289c76..293e304d1a18 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
@@ -97,26 +97,28 @@ describe('grid element change location strategy', () => {
     })
   })
 
-  it('can change the location of elements in a grid component', async () => {
-    const editor = await renderTestEditorWithCode(
-      ProjectCodeGridComponent,
-      'await-first-dom-report',
-    )
+  describe('grid component', () => {
+    it('can change the location of elements in a grid component', async () => {
+      const editor = await renderTestEditorWithCode(
+        ProjectCodeGridComponent,
+        'await-first-dom-report',
+      )
 
-    const testId = 'aaa'
-    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
-      editor,
-      {
-        scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
-        testId: testId,
-      },
-    )
-    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
-      gridColumnEnd: '7',
-      gridColumnStart: '3',
-      gridRowEnd: '4',
-      gridRowStart: '2',
+      const testId = 'aaa'
+      const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+        editor,
+        {
+          scale: 1,
+          pathString: `sb/scene/grid/${testId}`,
+          testId: testId,
+        },
+      )
+      expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+        gridColumnEnd: '7',
+        gridColumnStart: '3',
+        gridRowEnd: '4',
+        gridRowStart: '2',
+      })
     })
   })
 
@@ -1013,13 +1015,6 @@ export var storyboard = (
     >
       <Grid
         style={{
-          display: 'grid',
-          gridTemplateRows: '75px 75px 75px 75px',
-          gridTemplateColumns:
-            '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
-          gridGap: 16,
-          height: 482,
-          width: 786,
           position: 'absolute',
           left: 31,
           top: 0,
@@ -1029,22 +1024,20 @@ export var storyboard = (
         <div
           style={{
             minHeight: 0,
-            backgroundColor: '#f3785f',
-            gridColumnEnd: 5,
-            gridColumnStart: 1,
-            gridRowEnd: 3,
-            gridRowStart: 1,
+            backgroundColor: '#23565b',
           }}
-          data-uid='aaa'
-          data-testid='aaa'
+          data-uid='bbb'
+          data-testid='bbb'
         />
         <div
           style={{
             minHeight: 0,
-            backgroundColor: '#23565b',
+            backgroundColor: '#f3785f',
+            gridColumn: '1 / 5',
+            gridRow: '1 / 3',
           }}
-          data-uid='bbb'
-          data-testid='bbb'
+          data-uid='aaa'
+          data-testid='aaa'
         />
         <Placeholder
           style={{
@@ -1075,18 +1068,26 @@ export var storyboard = (
 export function Grid(props) {
   return (
     <div
-      {...props}
       style={{
         ...props.style,
-        display: 'grid',
-        gridTemplateRows: '75px 75px 75px 75px',
-        gridTemplateColumns:
-          '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
-        gridGap: 16,
+        display: 'flex',
+        flexDirection: 'column',
       }}
-      data-uid='f84914f31dbc6c5d9b44c11ae54139ef'
     >
-      {props.children}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateRows: '75px 75px 75px 75px',
+          gridTemplateColumns:
+            '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
+          gridGap: 16,
+        }}
+      >
+        {props.children}
+      </div>
+      <div
+        style={{ height: 100 }}
+      />
     </div>
   )
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 1bf896aac5d7..a8e2b35a4b1f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -45,6 +45,7 @@ import {
   getGridChildCellCoordBoundsFromCanvas,
   gridCellCoordinates,
 } from './grid-cell-bounds'
+import type { GridIdentifier } from '../../../editor/store/editor-state'
 
 export function gridPositionToValue(
   p: GridPositionOrSpan | null | undefined,
@@ -684,3 +685,40 @@ export function gridMoveStrategiesExtraCommands(
 
   return { midInteractionCommands, onCompleteCommands }
 }
+
+export function getGridIdentifierContainerOrComponentPath(identifier: GridIdentifier): ElementPath {
+  switch (identifier.type) {
+    case 'GRID_CONTAINER':
+      return identifier.container
+    case 'GRID_ITEM':
+      return EP.parentPath(identifier.item)
+    default:
+      assertNever(identifier)
+  }
+}
+
+export function gridIdentifiersSimilar(a: GridIdentifier, b: GridIdentifier): boolean {
+  switch (a.type) {
+    case 'GRID_CONTAINER':
+      return b.type === 'GRID_CONTAINER'
+        ? EP.pathsEqual(a.container, b.container)
+        : EP.isParentOf(a.container, b.item)
+    case 'GRID_ITEM':
+      return b.type === 'GRID_ITEM'
+        ? EP.pathsEqual(a.item, b.item)
+        : EP.isParentOf(b.container, a.item)
+    default:
+      assertNever(a)
+  }
+}
+
+export function gridIdentifierToString(identifier: GridIdentifier): string {
+  switch (identifier.type) {
+    case 'GRID_CONTAINER':
+      return `${identifier.type}-${EP.toString(identifier.container)}`
+    case 'GRID_ITEM':
+      return `${identifier.type}-${EP.toString(identifier.item)}`
+    default:
+      assertNever(identifier)
+  }
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx
index 9fffc31d25bd..8361c3668036 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx
@@ -22,6 +22,23 @@ describe('grid reorder', () => {
 
     expect(cells).toEqual(['pink', 'cyan', 'orange', 'blue'])
   })
+  it('reorders an element in a grid component without setting positioning (inside contiguous area)', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeReorderGridComponent,
+      'await-first-dom-report',
+    )
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd, cells } =
+      await runReorderTest(editor, 'sb/scene/grid', 'orange', { row: 1, column: 3 })
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '',
+      gridColumnStart: '',
+      gridRowEnd: '',
+      gridRowStart: '',
+    })
+
+    expect(cells).toEqual(['pink', 'cyan', 'orange', 'blue'])
+  })
   it('reorders a component (which does not take style props) inside contiguous area', async () => {
     const editor = await renderTestEditorWithCode(
       ProjectCodeReorderWithComponentItem,
@@ -339,6 +356,109 @@ export var storyboard = (
 )
 `
 
+const ProjectCodeReorderGridComponent = `import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 600,
+        height: 600,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <Grid
+        style={{
+          backgroundColor: '#aaaaaa33',
+        }}
+        data-testid='grid'
+        data-uid='grid'
+      >
+        <div
+          style={{
+            backgroundColor: '#f09',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='pink'
+          data-testid='pink'
+          data-label='pink'
+        />
+        <div
+          style={{
+            backgroundColor: '#f90',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='orange'
+          data-testid='orange'
+          data-label='orange'
+        />
+        <div
+          style={{
+            backgroundColor: '#0f9',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='cyan'
+          data-testid='cyan'
+          data-label='cyan'
+        />
+        <div
+          style={{
+            backgroundColor: '#09f',
+            width: '100%',
+            height: '100%',
+          }}
+          data-uid='blue'
+          data-testid='blue'
+          data-label='blue'
+        />
+      </Grid>
+    </Scene>
+  </Storyboard>
+)
+
+export function Grid(props) {
+  return (
+    <div
+      style={{
+        ...props.style,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+      data-uid='43adc9c0cf5a0bbf66c67e2e37466c18'
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr',
+          gridGap: 10,
+          width: 500,
+          height: 500,
+          padding: 10,
+        }}
+        data-uid='f84914f31dbc6c5d9b44c11ae54139ef'
+      >
+        {props.children}
+      </div>
+      <div
+        style={{ height: 100 }}
+        data-uid='f5827ce0f04916c792a1da2bd69b6cad'
+      />
+    </div>
+  )
+}
+`
+
 const ProjectCodeReorderWithComponentItem = `import * as React from 'react'
 import { Scene, Storyboard } from 'utopia-api'
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 44de26cbb02c..d4f8319e350a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -867,18 +867,26 @@ export var storyboard = (
 export function Grid(props) {
   return (
     <div
-      {...props}
       style={{
         ...props.style,
-        display: 'grid',
-        gridTemplateRows: '75px 75px 75px 75px',
-        gridTemplateColumns:
-          '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
-        gridGap: 16,
+        display: 'flex',
+        flexDirection: 'column',
       }}
-      data-uid='f84914f31dbc6c5d9b44c11ae54139ef'
     >
-      {props.children}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateRows: '75px 75px 75px 75px',
+          gridTemplateColumns:
+            '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
+          gridGap: 16,
+        }}
+      >
+        {props.children}
+      </div>
+      <div
+        style={{ height: 100 }}
+      />
     </div>
   )
 }
diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index fc98962db0b2..6c04372ff5fb 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -43,9 +43,15 @@ import Utils from '../../../utils/utils'
 import { useMonitorChangesToEditor } from '../../../components/editor/store/store-monitor'
 import { useKeepReferenceEqualityIfPossible } from '../../../utils/react-performance'
 import type { CSSProperties } from 'react'
-import { gridContainerIdentifier, type GridIdentifier } from '../../editor/store/editor-state'
+import {
+  gridContainerIdentifier,
+  gridItemIdentifier,
+  type GridIdentifier,
+} from '../../editor/store/editor-state'
 import { findOriginalGrid } from '../canvas-strategies/strategies/grid-helpers'
 
+export const GridMeasurementHelperMap = { current: new WeakMap<HTMLElement, string>() }
+
 export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`
 
 function getCellsCount(template: GridAutoOrTemplateBase | null): number {
@@ -90,13 +96,17 @@ export type GridMeasurementHelperData = {
   rowGap: number | null
   columnGap: number | null
   padding: Sides
+  element: HTMLElement
 }
 
+export type ElementOrParent = 'parent' | 'element'
+
 export function getGridMeasurementHelperData(
   elementPath: ElementPath,
   scale: number,
+  source: ElementOrParent,
 ): GridMeasurementHelperData | undefined {
-  return getFromElement(elementPath, gridMeasurementHelperDataFromElement(scale))
+  return getFromElement(elementPath, gridMeasurementHelperDataFromElement(scale), source)
 }
 
 function getStylingSubset(styling: CSSStyleDeclaration): CSSProperties {
@@ -207,12 +217,14 @@ export function gridMeasurementHelperDataFromElement(
       columns: columns,
       cells: columns * rows,
       computedStyling: computedStyling,
+      element: element,
     }
   }
 }
 
 export function useGridMeasurementHelperData(
   elementPath: ElementPath,
+  source: ElementOrParent,
 ): GridMeasurementHelperData | undefined {
   const scale = useEditorState(
     Substores.canvas,
@@ -222,7 +234,9 @@ export function useGridMeasurementHelperData(
 
   useMonitorChangesToEditor()
 
-  return useKeepReferenceEqualityIfPossible(getGridMeasurementHelperData(elementPath, scale))
+  return useKeepReferenceEqualityIfPossible(
+    getGridMeasurementHelperData(elementPath, scale, source),
+  )
 }
 
 export type GridData = GridMeasurementHelperData & {
@@ -240,33 +254,56 @@ export function useGridData(gridIdentifiers: GridIdentifier[]): GridData[] {
     Substores.metadata,
     (store) => {
       return mapDropNulls((view) => {
-        const originalGridPath = findOriginalGrid(
-          store.editor.jsxMetadata,
-          view.type === 'GRID_ITEM' ? EP.parentPath(view.path) : view.path, // TODO: this is temporary, we will need to handle showing a grid control on the parent dom element of a grid item
-        )
-        if (originalGridPath == null) {
-          return null
-        }
-        const element = MetadataUtils.findElementByElementPath(
-          store.editor.jsxMetadata,
-          originalGridPath,
-        )
-
-        const targetGridContainer = MetadataUtils.isGridLayoutedContainer(element) ? element : null
-        if (targetGridContainer == null) {
-          return null
-        }
-
-        const helperData = getGridMeasurementHelperData(originalGridPath, scale)
-        if (helperData == null) {
-          return null
-        }
-
-        const gridData: GridData = {
-          ...helperData,
-          identifier: gridContainerIdentifier(originalGridPath),
+        switch (view.type) {
+          case 'GRID_CONTAINER': {
+            const originalGridPath = findOriginalGrid(store.editor.jsxMetadata, view.container)
+            if (originalGridPath == null) {
+              return null
+            }
+            const element = MetadataUtils.findElementByElementPath(
+              store.editor.jsxMetadata,
+              originalGridPath,
+            )
+
+            const targetGridContainer = MetadataUtils.isGridLayoutedContainer(element)
+              ? element
+              : null
+            if (targetGridContainer == null) {
+              return null
+            }
+
+            const helperData = getGridMeasurementHelperData(originalGridPath, scale, 'element')
+            if (helperData == null) {
+              return null
+            }
+
+            const gridData: GridData = {
+              ...helperData,
+              identifier: gridContainerIdentifier(originalGridPath),
+            }
+            return gridData
+          }
+          case 'GRID_ITEM':
+            const item = MetadataUtils.isGridItem(store.editor.jsxMetadata, view.item)
+              ? MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, view.item)
+              : null
+            if (item == null) {
+              return null
+            }
+
+            const helperData = getGridMeasurementHelperData(view.item, scale, 'parent')
+            if (helperData == null) {
+              return null
+            }
+
+            const gridData: GridData = {
+              ...helperData,
+              identifier: gridItemIdentifier(view.item),
+            }
+            return gridData
+          default:
+            assertNever(view)
         }
-        return gridData
       }, gridIdentifiers)
     },
     'useGridData',
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index b47891511c1e..2940f9cf3b9e 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -2,6 +2,7 @@
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
 import { jsx } from '@emotion/react'
+import { v4 as UUID } from 'uuid'
 import type { AnimationControls } from 'framer-motion'
 import { motion, useAnimationControls } from 'framer-motion'
 import type { CSSProperties } from 'react'
@@ -72,6 +73,9 @@ import {
   getGridRelatedIndexes,
   getGridElementPinState,
   gridPositionToValue,
+  getGridIdentifierContainerOrComponentPath,
+  gridIdentifierToString,
+  gridIdentifiersSimilar,
 } from '../canvas-strategies/strategies/grid-helpers'
 import { canResizeGridTemplate } from '../canvas-strategies/strategies/resize-grid-strategy'
 import { resizeBoundingBoxFromSide } from '../canvas-strategies/strategies/resize-helpers'
@@ -93,6 +97,7 @@ import {
   gridEdgeToEdgePosition,
   GridElementContainingBlockKey,
   GridMeasurementHelperKey,
+  GridMeasurementHelperMap,
   GridMeasurementHelpersKey,
   useGridData,
   useGridMeasurementHelperData,
@@ -105,11 +110,7 @@ import type { PinOutlineProps } from './position-outline'
 import { PinOutline, usePropsOrJSXAttributes } from './position-outline'
 import { getLayoutProperty } from '../../../core/layout/getLayoutProperty'
 import { styleStringInArray } from '../../../utils/common-constants'
-import {
-  gridContainerIdentifier,
-  gridIdentifierSimilar,
-  type GridIdentifier,
-} from '../../editor/store/editor-state'
+import { gridContainerIdentifier, type GridIdentifier } from '../../editor/store/editor-state'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -572,7 +573,7 @@ export const GridRowColumnResizingControlsComponent = ({
       {gridsWithVisibleResizeControls.flatMap((grid) => {
         return (
           <GridResizing
-            key={`grid-resizing-column-${EP.toString(grid.identifier.path)}`}
+            key={`grid-resizing-column-${gridIdentifierToString(grid.identifier)}}`}
             targetGrid={grid}
             axisValues={grid.gridTemplateColumns}
             fromPropsAxisValues={grid.gridTemplateColumnsFromProps}
@@ -592,7 +593,7 @@ export const GridRowColumnResizingControlsComponent = ({
       {gridsWithVisibleResizeControls.flatMap((grid) => {
         return (
           <GridResizing
-            key={`grid-resizing-row-${EP.toString(grid.identifier.path)}`}
+            key={`grid-resizing-row-${gridIdentifierToString(grid.identifier)}}`}
             targetGrid={grid}
             axisValues={grid.gridTemplateRows}
             fromPropsAxisValues={grid.gridTemplateRowsFromProps}
@@ -735,10 +736,16 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
   )
 
   const cells = React.useMemo(() => {
-    const children =
-      grid.identifier.type === 'GRID_CONTAINER'
-        ? MetadataUtils.getChildrenUnordered(jsxMetadata, grid.identifier.path)
-        : MetadataUtils.getSiblingsUnordered(jsxMetadata, grid.identifier.path)
+    const children = (() => {
+      switch (grid.identifier.type) {
+        case 'GRID_CONTAINER':
+          return MetadataUtils.getChildrenUnordered(jsxMetadata, grid.identifier.container)
+        case 'GRID_ITEM':
+          return MetadataUtils.getSiblingsUnordered(jsxMetadata, grid.identifier.item)
+        default:
+          assertNever(grid.identifier)
+      }
+    })()
     return mapDropNulls((cell, index) => {
       if (cell == null || cell.globalFrame == null || !isFiniteRectangle(cell.globalFrame)) {
         return null
@@ -900,25 +907,27 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
   const dontShowActiveCellHighlight =
     (!targetsAreCellsWithPositioning && anyTargetAbsolute) ||
     (anyTargetNotPinned && !targetRootCellIsValidTarget)
+
+  const gridContainerOrComponentPath = getGridIdentifierContainerOrComponentPath(grid.identifier)
   return (
     <React.Fragment>
       {/* grid lines */}
       <div
-        key={gridKeyFromPath(grid.identifier.path)}
-        id={gridKeyFromPath(grid.identifier.path)}
-        data-grid-path={EP.toString(grid.identifier.path)}
+        key={gridKeyFromPath(gridContainerOrComponentPath)}
+        id={gridKeyFromPath(gridContainerOrComponentPath)}
+        data-grid-path={gridContainerOrComponentPath}
         style={style}
       >
         {placeholders.map((cell) => {
           const countedRow = Math.floor(cell / grid.columns) + 1
           const countedColumn = Math.floor(cell % grid.columns) + 1
-          const id = gridCellTargetId(grid.identifier.path, countedRow, countedColumn)
+          const id = gridCellTargetId(gridContainerOrComponentPath, countedRow, countedColumn)
           const borderID = `${id}-border`
 
           const isActiveGrid =
-            (dragging != null && EP.isParentOf(grid.identifier.path, dragging)) ||
+            (dragging != null && EP.isParentOf(gridContainerOrComponentPath, dragging)) ||
             (currentHoveredGrid != null &&
-              EP.pathsEqual(grid.identifier.path, currentHoveredGrid.path))
+              gridIdentifiersSimilar(grid.identifier, currentHoveredGrid))
           const isActiveCell =
             isActiveGrid &&
             countedColumn === currentHoveredCell?.column &&
@@ -1035,13 +1044,24 @@ export const GridMeasurementHelpers = React.memo(() => {
     'GridMeasurementHelpers metadata',
   )
 
-  const grids = useAllGrids(metadata)
+  const { grids, gridItems } = useAllGrids(metadata)
 
   return (
     <CanvasOffsetWrapper>
-      {grids.map((grid) => {
-        return <GridMeasurementHelper key={GridMeasurementHelpersKey(grid)} elementPath={grid} />
-      })}
+      {grids.map((grid) => (
+        <GridMeasurementHelper
+          key={GridMeasurementHelpersKey(grid)}
+          elementPath={grid}
+          source='element'
+        />
+      ))}
+      {gridItems.map((gridItem) => (
+        <GridMeasurementHelper
+          key={GridMeasurementHelpersKey(gridItem)}
+          elementPath={gridItem}
+          source='parent'
+        />
+      ))}
     </CanvasOffsetWrapper>
   )
 })
@@ -1049,51 +1069,54 @@ GridMeasurementHelpers.displayName = 'GridMeasurementHelpers'
 
 export interface GridMeasurementHelperProps {
   elementPath: ElementPath
+  source: 'parent' | 'element'
 }
 
-const GridMeasurementHelper = React.memo<{ elementPath: ElementPath }>(({ elementPath }) => {
-  const gridData = useGridMeasurementHelperData(elementPath)
-  if (gridData == null) {
-    return null
-  }
+export const GridMeasurementHelper = React.memo<GridMeasurementHelperProps>(
+  ({ elementPath, source }) => {
+    const gridData = useGridMeasurementHelperData(elementPath, source)
+    if (gridData == null) {
+      return null
+    }
 
-  const placeholders = range(0, gridData.cells)
+    const placeholders = range(0, gridData.cells)
 
-  const style: CSSProperties = {
-    ...getGridHelperStyleMatchingTargetGrid(gridData),
-    opacity: 1,
-  }
+    const style: CSSProperties = {
+      ...getGridHelperStyleMatchingTargetGrid(gridData),
+      opacity: 1,
+    }
 
-  return (
-    <div
-      id={GridMeasurementHelperKey(elementPath)}
-      data-grid-path={EP.toString(elementPath)}
-      style={style}
-    >
-      {placeholders.map((cell) => {
-        const countedRow = Math.floor(cell / gridData.columns) + 1
-        const countedColumn = Math.floor(cell % gridData.columns) + 1
-        const id = `${GridMeasurementHelperKey(elementPath)}-${countedRow}-${countedColumn}`
-        return (
-          <div
-            key={id}
-            style={{
-              position: 'relative',
-              pointerEvents: 'none',
-            }}
-            data-grid-row={countedRow}
-            data-grid-column={countedColumn}
-          />
-        )
-      })}
-    </div>
-  )
-})
+    const uid = UUID()
+    GridMeasurementHelperMap.current.set(gridData.element, uid)
+    return (
+      <div id={uid} data-grid-path={EP.toString(elementPath)} style={style}>
+        {placeholders.map((cell) => {
+          const countedRow = Math.floor(cell / gridData.columns) + 1
+          const countedColumn = Math.floor(cell % gridData.columns) + 1
+          const id = `${GridMeasurementHelperKey(elementPath)}-${countedRow}-${countedColumn}`
+          return (
+            <div
+              key={id}
+              style={{
+                position: 'relative',
+                pointerEvents: 'none',
+              }}
+              data-grid-row={countedRow}
+              data-grid-column={countedColumn}
+            />
+          )
+        })}
+      </div>
+    )
+  },
+)
 GridMeasurementHelper.displayName = 'GridMeasurementHelper'
 
 export const GridControlsComponent = ({ targets }: GridControlsProps) => {
   const ancestorPaths = React.useMemo(() => {
-    return targets.flatMap((target) => EP.getAncestors(target.path))
+    return targets.flatMap((target) =>
+      EP.getAncestors(getGridIdentifierContainerOrComponentPath(target)),
+    )
   }, [targets])
   const ancestorGrids: Array<GridIdentifier> = useEditorState(
     Substores.metadata,
@@ -1129,9 +1152,11 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
   // With the lowest depth grid at the end so that it renders on top and catches the events
   // before those above it in the hierarchy.
   const grids = useGridData(
-    uniqBy([...gridsWithVisibleControls, ...ancestorGrids], gridIdentifierSimilar).sort((a, b) => {
-      const aDepth = a.type === 'GRID_CONTAINER' ? EP.fullDepth(a.path) : EP.fullDepth(a.path) - 1
-      const bDepth = a.type === 'GRID_CONTAINER' ? EP.fullDepth(b.path) : EP.fullDepth(b.path) - 1
+    uniqBy([...gridsWithVisibleControls, ...ancestorGrids], gridIdentifiersSimilar).sort((a, b) => {
+      const aDepth =
+        a.type === 'GRID_CONTAINER' ? EP.fullDepth(a.container) : EP.fullDepth(a.item) - 1
+      const bDepth =
+        b.type === 'GRID_CONTAINER' ? EP.fullDepth(b.container) : EP.fullDepth(b.item) - 1
       return aDepth - bDepth
     }),
   )
@@ -1144,18 +1169,17 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
     <div id={'grid-controls'}>
       <CanvasOffsetWrapper>
         {grids.map((grid) => {
-          const gridPath =
-            grid.identifier.type === 'GRID_CONTAINER'
-              ? grid.identifier.path
-              : EP.parentPath(grid.identifier.path)
+          const gridContainerOrComponentPath = getGridIdentifierContainerOrComponentPath(
+            grid.identifier,
+          )
           const shouldHaveVisibleControls = gridsWithVisibleControls.some((g) => {
-            const visibleControlPath = g.type === 'GRID_CONTAINER' ? g.path : EP.parentPath(g.path)
-            return EP.pathsEqual(gridPath, visibleControlPath)
+            const visibleControlPath = getGridIdentifierContainerOrComponentPath(g)
+            return EP.pathsEqual(gridContainerOrComponentPath, visibleControlPath)
           })
 
           return (
             <GridControl
-              key={GridControlKey(grid.identifier.path)}
+              key={GridControlKey(gridContainerOrComponentPath)}
               grid={grid}
               controlsVisible={shouldHaveVisibleControls ? 'visible' : 'not-visible'}
             />
@@ -1601,7 +1625,7 @@ interface GridResizeControlProps {
 }
 
 export const GridResizeControlsComponent = ({ target }: GridResizeControlProps) => {
-  const gridTarget = target.type === 'GRID_CONTAINER' ? target.path : EP.parentPath(target.path)
+  const gridTarget = getGridIdentifierContainerOrComponentPath(target)
   const colorTheme = useColorTheme()
 
   const element = useEditorState(
@@ -1904,7 +1928,7 @@ export interface GridElementContainingBlockProps {
 }
 
 const GridElementContainingBlock = React.memo<GridElementContainingBlockProps>((props) => {
-  const gridData = useGridMeasurementHelperData(props.gridPath)
+  const gridData = useGridMeasurementHelperData(props.gridPath, 'element')
   const scale = useEditorState(
     Substores.canvas,
     (store) => store.editor.canvas.scale,
@@ -2075,6 +2099,14 @@ function gridPlaceholderWidthOrHeight(scale: number): string {
 
 function useAllGrids(metadata: ElementInstanceMetadataMap) {
   return React.useMemo(() => {
-    return MetadataUtils.getAllGrids(metadata)
+    const gridPaths = MetadataUtils.getAllGrids(metadata)
+    const gridItemPaths = MetadataUtils.getAllGridItems(metadata)
+    const gridItemPathsWithoutGridPaths = gridItemPaths.filter(
+      (path) => !gridPaths.some((gridPath) => EP.isParentOf(gridPath, path)),
+    )
+    return {
+      grids: gridPaths,
+      gridItems: gridItemPathsWithoutGridPaths,
+    }
   }, [metadata])
 }
diff --git a/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx b/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
index 079cfb32238f..a0d08fe9d7f0 100644
--- a/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
+++ b/editor/src/components/canvas/controls/select-mode/subdued-grid-gap-controls.tsx
@@ -9,6 +9,7 @@ import { NO_OP } from '../../../../core/shared/utils'
 import * as EP from '../../../../core/shared/element-path'
 import { GridPaddingOutlineForDimension } from './grid-gap-control-component'
 import { gridContainerIdentifier } from '../../../editor/store/editor-state'
+import { getGridIdentifierContainerOrComponentPath } from '../../canvas-strategies/strategies/grid-helpers'
 
 export interface SubduedGridGapControlProps {
   hoveredOrFocused: 'hovered' | 'focused'
@@ -33,8 +34,11 @@ export const SubduedGridGapControl = React.memo<SubduedGridGapControlProps>((pro
   return (
     <CanvasOffsetWrapper>
       {gridRowColumnInfo.map((gridData) => {
+        const gridContainerOrComponent = getGridIdentifierContainerOrComponentPath(
+          gridData.identifier,
+        )
         return (
-          <React.Fragment key={`grid-gap-${EP.toString(gridData.identifier.path)}`}>
+          <React.Fragment key={`grid-gap-${EP.toString(gridContainerOrComponent)}`}>
             <GridPaddingOutlineForDimension
               grid={gridData}
               dimension={'rows'}
diff --git a/editor/src/components/canvas/direct-dom-lookups.ts b/editor/src/components/canvas/direct-dom-lookups.ts
index 431f006e7df4..f3da4e2325f3 100644
--- a/editor/src/components/canvas/direct-dom-lookups.ts
+++ b/editor/src/components/canvas/direct-dom-lookups.ts
@@ -3,10 +3,16 @@ import { CanvasContainerID } from './canvas-types'
 import { getDeepestPathOnDomElement } from '../../core/shared/uid-utils'
 import * as EP from '../../core/shared/element-path'
 import type { ElementPath } from 'utopia-shared/src/types'
+import type { ElementOrParent } from './controls/grid-controls-for-strategies'
+import { assertNever } from '../../core/shared/utils'
 
 export type FromElement<T> = (element: HTMLElement) => T
 
-export function getFromElement<T>(path: ElementPath, fromElement: FromElement<T>): T | undefined {
+export function getFromElement<T>(
+  path: ElementPath,
+  fromElement: FromElement<T>,
+  elementOrParent: ElementOrParent,
+): T | undefined {
   const pathString = EP.toString(path)
   const elements = document.querySelectorAll(
     `#${CanvasContainerID} [${UTOPIA_PATH_KEY}^="${pathString}"]`,
@@ -19,8 +25,18 @@ export function getFromElement<T>(path: ElementPath, fromElement: FromElement<T>
         !EP.isRootElementOfInstance(pathFromElement)) ||
       EP.isRootElementOf(pathFromElement, path)
     ) {
-      if (element instanceof HTMLElement) {
-        return fromElement(element)
+      const realElement = (() => {
+        switch (elementOrParent) {
+          case 'element':
+            return element
+          case 'parent':
+            return element.parentElement
+          default:
+            assertNever(elementOrParent)
+        }
+      })()
+      if (realElement instanceof HTMLElement) {
+        return fromElement(realElement)
       }
     }
   }
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index b96f1a660948..ab3f2962f950 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -62,11 +62,7 @@ import {
 import type { UtopiaStoreAPI } from '../editor/store/store-hook'
 import { UTOPIA_SCENE_ID_KEY, UTOPIA_UID_KEY } from '../../core/model/utopia-constants'
 import { emptySet } from '../../core/shared/set-utils'
-import {
-  getDeepestPathOnDomElement,
-  getPathsOnDomElement,
-  getPathStringsOnDomElement,
-} from '../../core/shared/uid-utils'
+import { getDeepestPathOnDomElement, getPathStringsOnDomElement } from '../../core/shared/uid-utils'
 import { forceNotNull } from '../../core/shared/optional-utils'
 import { fastForEach } from '../../core/shared/utils'
 import type { EditorState, EditorStorePatched } from '../editor/store/editor-state'
@@ -83,7 +79,7 @@ import { runDOMWalker } from '../editor/actions/action-creators'
 import { CanvasContainerOuterId } from './canvas-component-entry'
 import { ElementsToRerenderGLOBAL } from './ui-jsx-canvas'
 import type { GridCellGlobalFrames } from './canvas-strategies/strategies/grid-helpers'
-import { GridMeasurementHelperKey } from './controls/grid-controls-for-strategies'
+import { GridMeasurementHelperMap } from './controls/grid-controls-for-strategies'
 
 export const ResizeObserver =
   window.ResizeObserver ?? ResizeObserverSyntheticDefault.default ?? ResizeObserverSyntheticDefault
@@ -1079,18 +1075,12 @@ function measureGlobalFramesOfGridCells(
   containerRectLazy: CanvasPoint | (() => CanvasPoint),
   elementCanvasRectangleCache: ElementCanvasRectangleCache,
 ): GridCellGlobalFrames | null {
-  const paths = getPathsOnDomElement(element)
-
   let gridCellGlobalFrames: GridCellGlobalFrames | null = null
-  const gridControlElement = (() => {
-    for (let p of paths) {
-      const maybeGridControlElement = document.getElementById(GridMeasurementHelperKey(p))
-      if (maybeGridControlElement != null) {
-        return maybeGridControlElement
-      }
-    }
-    return null
-  })()
+
+  const gridMeasurementHelperId = GridMeasurementHelperMap.current.get(element)
+
+  const gridControlElement =
+    gridMeasurementHelperId != null ? document.getElementById(gridMeasurementHelperId) : null
 
   if (gridControlElement != null) {
     gridCellGlobalFrames = []
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index 53e39973849b..91b563ddc7e8 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -826,36 +826,28 @@ export type GridIdentifier = GridContainerIdentifier | GridItemIdentifier
 
 export interface GridContainerIdentifier {
   type: 'GRID_CONTAINER'
-  path: ElementPath
+  container: ElementPath
 }
 
 export function gridContainerIdentifier(path: ElementPath): GridContainerIdentifier {
   return {
     type: 'GRID_CONTAINER',
-    path: path,
+    container: path,
   }
 }
 
 export interface GridItemIdentifier {
   type: 'GRID_ITEM'
-  path: ElementPath
+  item: ElementPath
 }
 
 export function gridItemIdentifier(path: ElementPath): GridItemIdentifier {
   return {
     type: 'GRID_ITEM',
-    path: path,
+    item: path,
   }
 }
 
-export function gridIdentifierSimilar(a: GridIdentifier, b: GridIdentifier): boolean {
-  return (
-    (a.type === b.type && EP.pathsEqual(a.path, b.path)) ||
-    (a.type === 'GRID_ITEM' && b.type === 'GRID_CONTAINER' && EP.isParentOf(b.path, a.path)) ||
-    (a.type === 'GRID_CONTAINER' && b.type === 'GRID_ITEM' && EP.isParentOf(a.path, b.path))
-  )
-}
-
 export interface GridControlData {
   grid: GridIdentifier
   targetCell: GridCellCoordinates | null // the cell under the mouse
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 36f987d95400..0879447458ca 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -2856,14 +2856,14 @@ export const GridCellCoordinatesKeepDeepEquality: KeepDeepEqualityCall<GridCellC
 
 export const GridContainerIdentifierKeepDeepEquality: KeepDeepEqualityCall<GridContainerIdentifier> =
   combine1EqualityCall(
-    (identifier) => identifier.path,
+    (identifier) => identifier.container,
     ElementPathKeepDeepEquality,
     gridContainerIdentifier,
   )
 
 export const GridItemIdentifierKeepDeepEquality: KeepDeepEqualityCall<GridItemIdentifier> =
   combine1EqualityCall(
-    (identifier) => identifier.path,
+    (identifier) => identifier.item,
     ElementPathKeepDeepEquality,
     gridItemIdentifier,
   )
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index 062ec6344a04..7c3661bbcc77 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -416,6 +416,11 @@ export const MetadataUtils = {
       .filter((m) => MetadataUtils.isGridLayoutedContainer(m))
       .map((m) => m.elementPath)
   },
+  getAllGridItems(metadata: ElementInstanceMetadataMap): Array<ElementPath> {
+    return Object.values(metadata)
+      .filter((m) => MetadataUtils.isGridItem(metadata, m.elementPath))
+      .map((m) => m.elementPath)
+  },
   isComponentInstanceFromMetadata(
     metadata: ElementInstanceMetadataMap,
     path: ElementPath,

From 15676a35ca72b0f701facce9938e612d5582db73 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 18 Nov 2024 12:00:25 +0100
Subject: [PATCH 224/272] Only show grid lines when selecting grid or during
 child interaction (#6647)

**Problem:**

Grid lines are shown all the time whether a grid or a grid child is
selected. The grid sizing pills are also shown all the time.

**Fix:**

Only show the grid lines if:
- the grid itself is selected
- a grid child is selected **and** an interaction is in progress

Only show the grid sizing pills if:
- the grid itself is selected

**Note:** I enabled the grid lines also for absolute resize of grid
children because they can be affected by the grid so I thought it would
be good to have them, but lmk if you feel otherwise.


https://github.com/user-attachments/assets/eba83673-fe5d-43a2-8dcf-aba7bcc2cca1



Fixes #6645
---
 ...change-location-strategy.spec.browser2.tsx | 70 ++++----------
 .../grid-reorder-strategy.spec.browser2.tsx   | 13 ++-
 ...-resize-element-strategy.spec.browser2.tsx |  5 +-
 .../strategies/grid.test-utils.ts             | 95 ++++++++++++-------
 .../resize-grid-strategy.spec.browser2.tsx    | 12 +--
 .../canvas/controls/grid-controls.tsx         | 45 +++++++++
 6 files changed, 142 insertions(+), 98 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
index 293e304d1a18..a0774e94e142 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
@@ -1,16 +1,10 @@
 import * as EP from '../../../../core/shared/element-path'
-import {
-  getRectCenter,
-  localRectangle,
-  offsetPoint,
-  windowPoint,
-} from '../../../../core/shared/math-utils'
+import { offsetPoint, windowPoint } from '../../../../core/shared/math-utils'
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 import CanvasActions from '../../canvas-actions'
 import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
 import { mouseDownAtPoint, mouseMoveToPoint, mouseUpAtPoint } from '../../event-helpers.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
-import { gridCellTargetId } from './grid-cell-bounds'
 import { runGridMoveTest } from './grid.test-utils'
 
 describe('grid element change location strategy', () => {
@@ -22,7 +16,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -52,7 +46,7 @@ describe('grid element change location strategy', () => {
         editor,
         {
           scale: 1,
-          pathString: `sb/scene/grid/${testId}`,
+          gridPath: 'sb/scene/grid',
           testId: testId,
         },
       )
@@ -79,7 +73,7 @@ describe('grid element change location strategy', () => {
         editor,
         {
           scale: 1,
-          pathString: `sb/scene/grid/${testId}`,
+          gridPath: 'sb/scene/grid',
           testId: testId,
         },
         (ed) => {
@@ -109,7 +103,7 @@ describe('grid element change location strategy', () => {
         editor,
         {
           scale: 1,
-          pathString: `sb/scene/grid/${testId}`,
+          gridPath: 'sb/scene/grid/',
           testId: testId,
         },
       )
@@ -131,7 +125,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
         targetCell: { row: 2, column: 1 },
         draggedCell: { row: 2, column: 2 },
@@ -153,7 +147,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
         tab: true,
       },
@@ -178,7 +172,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
         targetCell: { row: 3, column: 1 },
       },
@@ -200,7 +194,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 0.5,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -220,7 +214,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 2,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -243,7 +237,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -267,7 +261,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -291,7 +285,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
         targetCell: { row: 3, column: 2 },
       },
@@ -316,7 +310,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -340,7 +334,7 @@ describe('grid element change location strategy', () => {
       editor,
       {
         scale: 1,
-        pathString: `sb/scene/grid/${testId}`,
+        gridPath: 'sb/scene/grid',
         testId: testId,
       },
     )
@@ -366,8 +360,6 @@ export var storyboard = (
       data-testid='grid'
       style={{
         position: 'absolute',
-        left: -94,
-        top: 698,
         display: 'grid',
         gap: 10,
         width: 600,
@@ -428,33 +420,11 @@ export var storyboard = (
       )
 
       const testId = 'grid-inside-grid'
-      const elementPathToDrag = EP.fromString(`sb/grid/${testId}`)
-
-      await selectComponentsForTest(editor, [elementPathToDrag])
-
-      const sourceGridCell = editor.renderedDOM.getByTestId(GridCellTestId(elementPathToDrag))
-      const targetGridCell = editor.renderedDOM.getByTestId(
-        gridCellTargetId(EP.fromString('sb/grid'), 2, 3),
-      )
-
-      const sourceRect = sourceGridCell.getBoundingClientRect()
-      const targetRect = targetGridCell.getBoundingClientRect()
-
-      const dragFrom = {
-        x: sourceRect.x + 10,
-        y: sourceRect.y + 10,
-      }
-      const dragTo = getRectCenter(
-        localRectangle({
-          x: targetRect.x,
-          y: targetRect.y,
-          width: targetRect.width,
-          height: targetRect.height,
-        }),
-      )
-      await mouseDownAtPoint(sourceGridCell, dragFrom)
-      await mouseMoveToPoint(sourceGridCell, dragTo)
-      await mouseUpAtPoint(sourceGridCell, dragTo)
+      await runGridMoveTest(editor, {
+        scale: 1,
+        gridPath: 'sb/grid',
+        testId: testId,
+      })
 
       const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
         editor.renderedDOM.getByTestId(testId).style
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx
index 8361c3668036..30699b6b2d84 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx
@@ -6,6 +6,7 @@ import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 import { runGridMoveTest } from './grid.test-utils'
 import * as EP from '../../../../core/shared/element-path'
+import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 
 describe('grid reorder', () => {
   it('reorders an element without setting positioning (inside contiguous area)', async () => {
@@ -111,6 +112,8 @@ describe('grid reorder', () => {
 
     expect(first.cells).toEqual(['pink', 'cyan', 'blue', 'orange'])
 
+    await selectComponentsForTest(editor, [])
+
     const second = await runReorderTest(
       editor,
       'sb/scene/grid',
@@ -242,7 +245,7 @@ describe('grid reorder', () => {
 
 async function runReorderTest(
   editor: EditorRenderResult,
-  gridTestId: string,
+  gridPath: string,
   testId: string,
   targetCell: GridCellCoordinates,
   options?: { tab?: boolean },
@@ -251,22 +254,22 @@ async function runReorderTest(
     editor,
     {
       scale: 1,
-      pathString: `${gridTestId}/${testId}`,
+      gridPath: gridPath,
       testId: testId,
       targetCell: targetCell,
       tab: options?.tab,
     },
   )
 
-  const element = editor.getEditorState().editor.jsxMetadata[gridTestId]
-  if (isLeft(element.element) || !isJSXElement(element.element.value)) {
+  const grid = editor.getEditorState().editor.jsxMetadata[gridPath]
+  if (isLeft(grid.element) || !isJSXElement(grid.element.value)) {
     throw new Error('expected jsx element')
   }
 
   const cells = MetadataUtils.getChildrenOrdered(
     editor.getEditorState().editor.jsxMetadata,
     editor.getEditorState().editor.elementPathTree,
-    element.elementPath,
+    EP.fromString(gridPath),
   )
 
   return {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index d4f8319e350a..2ddbdf0315ce 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -15,7 +15,7 @@ import {
   offsetPoint,
 } from '../../../../core/shared/math-utils'
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
-import { mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
+import { mouseDownAtPoint, mouseDragFromPointToPoint } from '../../event-helpers.test-utils'
 import type { EditorRenderResult } from '../../ui-jsx.test-utils'
 import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
 import type { GridResizeEdge } from '../interaction-state'
@@ -34,6 +34,9 @@ async function runCellResizeTest(
   const resizeControl = editor.renderedDOM.getByTestId(
     ResizePointTestId(gridEdgeToEdgePosition(edge)),
   )
+
+  const resizeControlBox = resizeControl.getBoundingClientRect()
+  await mouseDownAtPoint(resizeControl, { x: resizeControlBox.x + 5, y: resizeControlBox.y + 5 })
   const targetGridCell = editor.renderedDOM.getByTestId(dragToCellTestId)
 
   await mouseDragFromPointToPoint(
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid.test-utils.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid.test-utils.ts
index 26eae7685310..2250a04742af 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid.test-utils.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid.test-utils.ts
@@ -2,7 +2,6 @@ import { getRectCenter, localRectangle } from '../../../../core/shared/math-util
 import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 import CanvasActions from '../../canvas-actions'
 import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
-import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
 import {
   mouseDownAtPoint,
   mouseMoveToPoint,
@@ -13,12 +12,14 @@ import type { EditorRenderResult } from '../../ui-jsx.test-utils'
 import type { GridCellCoordinates } from './grid-cell-bounds'
 import { gridCellTargetId } from './grid-cell-bounds'
 import * as EP from '../../../../core/shared/element-path'
+import type { ElementPath } from 'utopia-shared/src/types'
+import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
 
 export async function runGridMoveTest(
   editor: EditorRenderResult,
   props: {
     scale: number
-    pathString: string
+    gridPath: string
     testId: string
     targetCell?: GridCellCoordinates
     draggedCell?: GridCellCoordinates
@@ -26,7 +27,7 @@ export async function runGridMoveTest(
   },
   midDragCallback?: (editor: EditorRenderResult) => void,
 ) {
-  const elementPathToDrag = EP.fromString(props.pathString)
+  const elementPathToDrag = EP.appendToPath(EP.fromString(props.gridPath), props.testId)
 
   await selectComponentsForTest(editor, [elementPathToDrag])
 
@@ -34,41 +35,19 @@ export async function runGridMoveTest(
     await editor.dispatch([CanvasActions.zoom(props.scale)], true)
   }
 
-  const sourceGridCell = editor.renderedDOM.getByTestId(
-    props.draggedCell == null
-      ? GridCellTestId(elementPathToDrag)
-      : gridCellTargetId(
-          EP.fromString('sb/scene/grid'),
-          props.draggedCell.row,
-          props.draggedCell.column,
-        ),
-  )
-  const targetGridCell = editor.renderedDOM.getByTestId(
-    gridCellTargetId(
-      EP.fromString('sb/scene/grid'),
-      props.targetCell?.row ?? 2,
-      props.targetCell?.column ?? 3,
-    ),
-  )
-
-  const sourceRect = sourceGridCell.getBoundingClientRect()
-  const targetRect = targetGridCell.getBoundingClientRect()
-
-  const dragFrom = {
-    x: sourceRect.x + 10,
-    y: sourceRect.y + 10,
-  }
-  const endPoint = getRectCenter(
-    localRectangle({
-      x: targetRect.x,
-      y: targetRect.y,
-      width: targetRect.width,
-      height: targetRect.height,
-    }),
+  // trigger the grid controls so we know where to find the cells
+  const { sourceGridCell, dragFrom, dragTo } = await getSafeGridMoveTestEndpoints(
+    editor,
+    elementPathToDrag,
+    props.gridPath,
+    {
+      draggedCell: props.draggedCell,
+      targetCell: props.targetCell,
+    },
   )
 
   await mouseDownAtPoint(sourceGridCell, dragFrom)
-  await mouseMoveToPoint(sourceGridCell, endPoint)
+  await mouseMoveToPoint(sourceGridCell, dragTo)
   if (props.tab) {
     await keyDown('Tab')
   }
@@ -76,7 +55,51 @@ export async function runGridMoveTest(
     midDragCallback(editor)
   }
 
-  await mouseUpAtPoint(editor.renderedDOM.getByTestId(CanvasControlsContainerID), endPoint)
+  await mouseUpAtPoint(editor.renderedDOM.getByTestId(CanvasControlsContainerID), dragTo)
 
   return editor.renderedDOM.getByTestId(props.testId).style
 }
+
+export async function getSafeGridMoveTestEndpoints(
+  editor: EditorRenderResult,
+  elementPathToDrag: ElementPath,
+  gridPath: string,
+  props?: {
+    draggedCell?: GridCellCoordinates
+    targetCell?: GridCellCoordinates
+  },
+) {
+  const gridCellTestId = GridCellTestId(elementPathToDrag)
+  const gridCellBaseElement = editor.renderedDOM.getByTestId(gridCellTestId)
+  const gridCellBaseElementBox = gridCellBaseElement.getBoundingClientRect()
+  const testPoint = getRectCenter(localRectangle(gridCellBaseElementBox))
+
+  await mouseDownAtPoint(gridCellBaseElement, testPoint)
+
+  const sourceGridCell = editor.renderedDOM.getByTestId(
+    props?.draggedCell == null
+      ? gridCellTestId
+      : gridCellTargetId(
+          EP.fromString(gridPath),
+          props?.draggedCell.row,
+          props?.draggedCell.column,
+        ),
+  )
+
+  const targetGridCell = editor.renderedDOM.getByTestId(
+    gridCellTargetId(
+      EP.fromString(gridPath),
+      props?.targetCell?.row ?? 2,
+      props?.targetCell?.column ?? 3,
+    ),
+  )
+  const sourceRect = sourceGridCell.getBoundingClientRect()
+  const dragFrom = { x: sourceRect.x + 5, y: sourceRect.y + 5 }
+
+  const targetRect = targetGridCell.getBoundingClientRect()
+  const dragTo = { x: targetRect.x + 5, y: targetRect.y + 5 }
+
+  await mouseUpAtPoint(editor.renderedDOM.getByTestId(CanvasControlsContainerID), testPoint)
+
+  return { sourceGridCell, dragFrom, dragTo }
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
index a8bc6730953f..5a83237fe0ec 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
@@ -140,7 +140,7 @@ describe('resize a grid', () => {
       makeTestProject({ columns: '2.4fr 1fr 1fr', rows: '99px 109px 90px', shorthand: null }),
       'await-first-dom-report',
     )
-    const target = EP.fromString(`sb/grid/row-1-column-2`)
+    const target = EP.fromString(`sb/grid`)
     await renderResult.dispatch(selectComponents([target], false), true)
     await renderResult.getDispatchFollowUpActionsFinished()
     const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
@@ -316,7 +316,7 @@ export var storyboard = (
       makeTestProject({ columns: '2.4fr 1fr 1fr', rows: '99px 109px 90px', shorthand: null }),
       'await-first-dom-report',
     )
-    const target = EP.fromString(`sb/grid/row-1-column-2`)
+    const target = EP.fromString(`sb/grid`)
     await renderResult.dispatch(selectComponents([target], false), true)
     await renderResult.getDispatchFollowUpActionsFinished()
     const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
@@ -431,7 +431,7 @@ export var storyboard = (
       makeTestProject({ columns: 'repeat(3, 1fr)', rows: '99px 109px 90px', shorthand: null }),
       'await-first-dom-report',
     )
-    const target = EP.fromString(`sb/grid/row-1-column-2`)
+    const target = EP.fromString(`sb/grid`)
     await renderResult.dispatch(selectComponents([target], false), true)
     await renderResult.getDispatchFollowUpActionsFinished()
     const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
@@ -551,7 +551,7 @@ export var storyboard = (
         }),
         'await-first-dom-report',
       )
-      const target = EP.fromString(`sb/grid/row-1-column-2`)
+      const target = EP.fromString(`sb/grid`)
       await renderResult.dispatch(selectComponents([target], false), true)
       await renderResult.getDispatchFollowUpActionsFinished()
       const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
@@ -670,7 +670,7 @@ export var storyboard = (
         }),
         'await-first-dom-report',
       )
-      const target = EP.fromString(`sb/grid/row-1-column-2`)
+      const target = EP.fromString(`sb/grid`)
       await renderResult.dispatch(selectComponents([target], false), true)
       await renderResult.getDispatchFollowUpActionsFinished()
       const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
@@ -788,7 +788,7 @@ export var storyboard = (
         }),
         'await-first-dom-report',
       )
-      const target = EP.fromString(`sb/grid/row-1-column-2`)
+      const target = EP.fromString(`sb/grid`)
       await renderResult.dispatch(selectComponents([target], false), true)
       await renderResult.getDispatchFollowUpActionsFinished()
       const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 2940f9cf3b9e..ac23b73918e0 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -536,6 +536,8 @@ export const GridRowColumnResizingControlsComponent = ({
     'GridRowColumnResizingControls scale',
   )
 
+  const isGridItemSelected = useIsGridItemSelected()
+
   const gridsWithVisibleResizeControls = React.useMemo(() => {
     return grids.filter((grid) => {
       if (
@@ -571,6 +573,9 @@ export const GridRowColumnResizingControlsComponent = ({
   return (
     <CanvasOffsetWrapper>
       {gridsWithVisibleResizeControls.flatMap((grid) => {
+        if (isGridItemSelected) {
+          return null
+        }
         return (
           <GridResizing
             key={`grid-resizing-column-${gridIdentifierToString(grid.identifier)}}`}
@@ -591,6 +596,9 @@ export const GridRowColumnResizingControlsComponent = ({
         )
       })}
       {gridsWithVisibleResizeControls.flatMap((grid) => {
+        if (isGridItemSelected) {
+          return null
+        }
         return (
           <GridResizing
             key={`grid-resizing-row-${gridIdentifierToString(grid.identifier)}}`}
@@ -1148,6 +1156,9 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
 
   const gridsWithVisibleControls: Array<GridIdentifier> = [...targets, ...hoveredGrids]
 
+  const isGridItemSelected = useIsGridItemSelected()
+  const isGridItemInteractionActive = useIsGridItemInteractionActive()
+
   // Uniqify the grid paths, and then sort them by depth.
   // With the lowest depth grid at the end so that it renders on top and catches the events
   // before those above it in the hierarchy.
@@ -1161,6 +1172,8 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
     }),
   )
 
+  const isGridItemSelectedWithoutInteraction = isGridItemSelected && !isGridItemInteractionActive
+
   if (grids.length === 0) {
     return null
   }
@@ -1173,6 +1186,10 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
             grid.identifier,
           )
           const shouldHaveVisibleControls = gridsWithVisibleControls.some((g) => {
+            if (isGridItemSelectedWithoutInteraction) {
+              return false
+            }
+
             const visibleControlPath = getGridIdentifierContainerOrComponentPath(g)
             return EP.pathsEqual(gridContainerOrComponentPath, visibleControlPath)
           })
@@ -2110,3 +2127,31 @@ function useAllGrids(metadata: ElementInstanceMetadataMap) {
     }
   }, [metadata])
 }
+
+function useIsGridItemInteractionActive() {
+  return useEditorState(
+    Substores.canvas,
+    (store) => {
+      if (store.editor.canvas.interactionSession == null) {
+        return false
+      }
+      return (
+        // movement
+        store.editor.canvas.interactionSession.activeControl.type === 'GRID_CELL_HANDLE' ||
+        // resize (cell)
+        store.editor.canvas.interactionSession.activeControl.type === 'GRID_RESIZE_HANDLE' ||
+        // resize (abs)
+        store.editor.canvas.interactionSession.activeControl.type === 'RESIZE_HANDLE'
+      )
+    },
+    'useIsGridItemInteractionActive isItemInteractionActive',
+  )
+}
+
+function useIsGridItemSelected() {
+  const selectedViewsRef = useRefEditorState((store) => store.editor.selectedViews)
+  const jsxMetadataRef = useRefEditorState((store) => store.editor.jsxMetadata)
+  return selectedViewsRef.current.some((selected) =>
+    MetadataUtils.isGridItem(jsxMetadataRef.current, selected),
+  )
+}

From 3919e4e7baf8b9aee4c864bb05e49664fdf8f6ce Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Mon, 18 Nov 2024 11:42:26 +0000
Subject: [PATCH 225/272] refactor(grids) Use Observers For Grid Lookup (#6638)

- Extracted out some observer related values out into `observers.ts`.
- Use `useMonitorChangesToElements` and `useObserversToWatch` in place
of `useMonitorChangesToEditor`.
- Added `cleanupObservers`, `setupObservers` and the exported functions
  `addChangeCallback` and `removeChangeCallback` to handle watching
  for changes to elements.
- Implemented `useObserversToWatch` which relies on the new general
observer functions.
---
 .../controls/grid-controls-for-strategies.tsx |  55 +++++++-
 editor/src/components/canvas/dom-walker.ts    |   6 +-
 editor/src/components/canvas/observers.ts     | 117 ++++++++++++++++++
 .../components/editor/store/editor-state.ts   |  11 ++
 .../inspector/widgets/inspector-modal.tsx     |   1 -
 editor/src/templates/editor-canvas.tsx        |   2 +-
 6 files changed, 183 insertions(+), 9 deletions(-)
 create mode 100644 editor/src/components/canvas/observers.ts

diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index 6c04372ff5fb..d01e6488659a 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -40,15 +40,18 @@ import { applicativeSidesPxTransform, getGridContainerProperties } from '../dom-
 import { applicative4Either, defaultEither, isRight, mapEither } from '../../../core/shared/either'
 import { domRectToScaledCanvasRectangle, getRoundingFn } from '../../../core/shared/dom-utils'
 import Utils from '../../../utils/utils'
-import { useMonitorChangesToEditor } from '../../../components/editor/store/store-monitor'
+import { useMonitorChangesToElements } from '../../../components/editor/store/store-monitor'
 import { useKeepReferenceEqualityIfPossible } from '../../../utils/react-performance'
 import type { CSSProperties } from 'react'
 import {
   gridContainerIdentifier,
   gridItemIdentifier,
+  pathOfGridFromGridIdentifier,
   type GridIdentifier,
 } from '../../editor/store/editor-state'
 import { findOriginalGrid } from '../canvas-strategies/strategies/grid-helpers'
+import * as React from 'react'
+import { addChangeCallback, removeChangeCallback } from '../observers'
 
 export const GridMeasurementHelperMap = { current: new WeakMap<HTMLElement, string>() }
 
@@ -222,6 +225,44 @@ export function gridMeasurementHelperDataFromElement(
   }
 }
 
+function useObserversToWatch(elementPathOrPaths: Array<ElementPath> | ElementPath): number {
+  // Used to trigger extra renders.
+  const [counter, setCounter] = React.useState(0)
+  const bumpCounter = React.useCallback(() => {
+    setCounter((value) => value + 1)
+  }, [])
+
+  // Need to use the mount count for the callback trigger.
+  const mountCount = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.mountCount,
+    'useObserversToWatch mountCount',
+  )
+
+  React.useEffect(() => {
+    // Add the change callback(s) for the element path or paths.
+    if (Array.isArray(elementPathOrPaths)) {
+      for (const elementPath of elementPathOrPaths) {
+        addChangeCallback(mountCount, elementPath, bumpCounter)
+      }
+    } else {
+      addChangeCallback(mountCount, elementPathOrPaths, bumpCounter)
+    }
+
+    return function cleanup() {
+      if (Array.isArray(elementPathOrPaths)) {
+        for (const elementPath of elementPathOrPaths) {
+          removeChangeCallback(elementPath, bumpCounter)
+        }
+      } else {
+        removeChangeCallback(elementPathOrPaths, bumpCounter)
+      }
+    }
+  }, [mountCount, elementPathOrPaths, bumpCounter])
+
+  return counter
+}
+
 export function useGridMeasurementHelperData(
   elementPath: ElementPath,
   source: ElementOrParent,
@@ -232,7 +273,9 @@ export function useGridMeasurementHelperData(
     'useGridMeasurementHelperData scale',
   )
 
-  useMonitorChangesToEditor()
+  useMonitorChangesToElements([elementPath])
+
+  useObserversToWatch(elementPath)
 
   return useKeepReferenceEqualityIfPossible(
     getGridMeasurementHelperData(elementPath, scale, source),
@@ -250,6 +293,14 @@ export function useGridData(gridIdentifiers: GridIdentifier[]): GridData[] {
     'useGridData scale',
   )
 
+  const elementPaths = React.useMemo(() => {
+    return gridIdentifiers.map(pathOfGridFromGridIdentifier)
+  }, [gridIdentifiers])
+
+  useMonitorChangesToElements(elementPaths)
+
+  useObserversToWatch(elementPaths)
+
   const grids = useEditorState(
     Substores.metadata,
     (store) => {
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index ab3f2962f950..a6076342049e 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -1,6 +1,5 @@
 import React from 'react'
 import { sides } from 'utopia-api/core'
-import * as ResizeObserverSyntheticDefault from 'resize-observer-polyfill'
 import * as EP from '../../core/shared/element-path'
 import type {
   DetectedLayoutSystem,
@@ -80,12 +79,9 @@ import { CanvasContainerOuterId } from './canvas-component-entry'
 import { ElementsToRerenderGLOBAL } from './ui-jsx-canvas'
 import type { GridCellGlobalFrames } from './canvas-strategies/strategies/grid-helpers'
 import { GridMeasurementHelperMap } from './controls/grid-controls-for-strategies'
-
-export const ResizeObserver =
-  window.ResizeObserver ?? ResizeObserverSyntheticDefault.default ?? ResizeObserverSyntheticDefault
+import { ObserversAvailable, ResizeObserver } from './observers'
 
 const MutationObserverConfig = { attributes: true, childList: true, subtree: true }
-const ObserversAvailable = window.MutationObserver != null && ResizeObserver != null
 
 function elementLayoutSystem(computedStyle: CSSStyleDeclaration | null): DetectedLayoutSystem {
   if (computedStyle == null) {
diff --git a/editor/src/components/canvas/observers.ts b/editor/src/components/canvas/observers.ts
new file mode 100644
index 000000000000..20c15dadf17c
--- /dev/null
+++ b/editor/src/components/canvas/observers.ts
@@ -0,0 +1,117 @@
+import * as ResizeObserverSyntheticDefault from 'resize-observer-polyfill'
+import type { ElementPath } from 'utopia-shared/src/types'
+import { getDeepestPathOnDomElement } from '../../core/shared/uid-utils'
+import * as EP from '../../core/shared/element-path'
+import { assertNever } from '../../core/shared/utils'
+import { CanvasContainerID } from './canvas-types'
+
+export const ResizeObserver =
+  window.ResizeObserver ?? ResizeObserverSyntheticDefault.default ?? ResizeObserverSyntheticDefault
+
+export const ObserversAvailable = window.MutationObserver != null && ResizeObserver != null
+
+export type ChangeCallback = (change: 'updated' | 'deleted') => void
+
+export interface TargetAndCallback {
+  target: ElementPath
+  callback: ChangeCallback
+}
+
+let targetsAndCallbacks: Array<TargetAndCallback> = []
+let currentMutationObserver: MutationObserver | null = null
+let observersSetup = false
+let priorMountCount: number = -1
+
+function cleanupObservers(): void {
+  if (currentMutationObserver != null) {
+    currentMutationObserver.disconnect()
+    currentMutationObserver = null
+  }
+  observersSetup = false
+}
+
+function setupObservers(mountCount: number): void {
+  // If the observers can't be used bail out right from the start.
+  if (!ObserversAvailable) {
+    return
+  }
+
+  // Skip setting up the observers if they have already been setup and the mount count hasn't changed.
+  // Where the mount count changing implies the entire canvas will have been unmounted and recreated.
+  if (observersSetup && mountCount === priorMountCount) {
+    return
+  }
+
+  // Disconnect the old observer if it exists.
+  cleanupObservers()
+
+  // Find the canvas container to observe.
+  const canvasContainer = document.getElementById(CanvasContainerID)
+  if (canvasContainer == null) {
+    return
+  }
+
+  const mutationObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      switch (mutation.type) {
+        case 'childList':
+        case 'attributes':
+          function maybeTriggerCallback(targetNode: Node, change: 'updated' | 'deleted'): void {
+            if (targetNode instanceof Element) {
+              // Find the path of this particular element.
+              const pathOnElement = getDeepestPathOnDomElement(targetNode)
+              if (pathOnElement != null) {
+                for (const targetAndCallback of targetsAndCallbacks) {
+                  if (EP.pathsEqual(targetAndCallback.target, pathOnElement)) {
+                    targetAndCallback.callback(change)
+                  }
+                }
+              }
+            }
+          }
+
+          // Handle updates to the target first, then deletions from the children followed by
+          // additions to the children.
+          maybeTriggerCallback(mutation.target, 'updated')
+          mutation.removedNodes.forEach((removedNode) => {
+            maybeTriggerCallback(removedNode, 'deleted')
+          })
+          mutation.addedNodes.forEach((addedNode) => {
+            maybeTriggerCallback(addedNode, 'updated')
+          })
+          break
+        case 'characterData':
+          break
+        default:
+          assertNever(mutation.type)
+      }
+    }
+  })
+
+  // Connect up the mutation observer.
+  mutationObserver.observe(canvasContainer, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+  })
+
+  // Record our current state of affairs.
+  currentMutationObserver = mutationObserver
+  priorMountCount = mountCount
+  observersSetup = true
+}
+
+export function addChangeCallback(
+  mountCount: number,
+  target: ElementPath,
+  callback: ChangeCallback,
+): void {
+  setupObservers(mountCount)
+  targetsAndCallbacks.push({ target: target, callback: callback })
+}
+
+export function removeChangeCallback(target: ElementPath, callback: ChangeCallback): void {
+  targetsAndCallbacks = targetsAndCallbacks.filter(
+    (item) => item.target !== target || item.callback !== callback,
+  )
+}
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index 91b563ddc7e8..fdf25f0bfcd8 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -848,6 +848,17 @@ export function gridItemIdentifier(path: ElementPath): GridItemIdentifier {
   }
 }
 
+export function pathOfGridFromGridIdentifier(identifier: GridIdentifier): ElementPath {
+  switch (identifier.type) {
+    case 'GRID_ITEM':
+      return EP.parentPath(identifier.item)
+    case 'GRID_CONTAINER':
+      return identifier.container
+    default:
+      assertNever(identifier)
+  }
+}
+
 export interface GridControlData {
   grid: GridIdentifier
   targetCell: GridCellCoordinates | null // the cell under the mouse
diff --git a/editor/src/components/inspector/widgets/inspector-modal.tsx b/editor/src/components/inspector/widgets/inspector-modal.tsx
index f018628df9ed..a050a22bdad6 100644
--- a/editor/src/components/inspector/widgets/inspector-modal.tsx
+++ b/editor/src/components/inspector/widgets/inspector-modal.tsx
@@ -3,7 +3,6 @@ import * as ReactDOM from 'react-dom'
 import { useHandleCloseOnESCOrEnter } from '../common/inspector-utils'
 import { EditorID, PortalTargetID } from '../../../core/shared/utils'
 import { OnClickOutsideHOC } from '../../../uuiui'
-import { ResizeObserver } from '../../canvas/dom-walker'
 
 export type InspectorModalProps = {
   offsetX: number
diff --git a/editor/src/templates/editor-canvas.tsx b/editor/src/templates/editor-canvas.tsx
index 6ad444843b3c..acf2a5597b2c 100644
--- a/editor/src/templates/editor-canvas.tsx
+++ b/editor/src/templates/editor-canvas.tsx
@@ -104,9 +104,9 @@ import { CursorComponent } from '../components/canvas/controls/select-mode/curso
 import { isFeatureEnabled } from '../utils/feature-switches'
 import { getCanvasViewportCenter } from './paste-helpers'
 import { DataPasteHandler, isPasteHandler } from '../utils/paste-handler'
-import { ResizeObserver } from '../components/canvas/dom-walker'
 import { isInsideColorPicker } from '../components/inspector/controls/color-picker-utils'
 import { addMouseUpHandler, removeMouseUpHandler } from './global-handlers'
+import { ResizeObserver } from '../components/canvas/observers'
 
 const webFrame = PROBABLY_ELECTRON ? requireElectron().webFrame : null
 

From 21678a3a205e4602db0306c13e35e32a94ed4692 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Mon, 18 Nov 2024 15:51:00 +0100
Subject: [PATCH 226/272] Update tailwindcss-class-parser (#6652)

**Desscription:**
Updated @xengine/tailwindcss-class-parser dependency, so it includes
Berci's contribution:
https://github.com/XEngine/tailwindcss-class-parser/pull/6

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/package.json   |   2 +-
 editor/pnpm-lock.yaml | 151 ++++++++++++++++++++++++++----------------
 2 files changed, 96 insertions(+), 57 deletions(-)

diff --git a/editor/package.json b/editor/package.json
index 3d0ee093c66b..572cce73951d 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -171,7 +171,7 @@
     "@types/w3c-css-typed-object-model-level-1": "20180410.0.5",
     "@use-it/interval": "0.1.3",
     "@vercel/stega": "0.1.0",
-    "@xengine/tailwindcss-class-parser": "1.1.18",
+    "@xengine/tailwindcss-class-parser": "1.1.19",
     "ajv": "6.4.0",
     "anser": "2.1.0",
     "antd": "4.3.5",
diff --git a/editor/pnpm-lock.yaml b/editor/pnpm-lock.yaml
index d8b1271e1892..1ac1e957c3aa 100644
--- a/editor/pnpm-lock.yaml
+++ b/editor/pnpm-lock.yaml
@@ -150,7 +150,7 @@ specifiers:
   '@vercel/stega': 0.1.0
   '@vitejs/plugin-react': 4.0.4
   '@welldone-software/why-did-you-render': 5.0.0-rc.1
-  '@xengine/tailwindcss-class-parser': 1.1.18
+  '@xengine/tailwindcss-class-parser': 1.1.19
   ajv: 6.4.0
   anser: 2.1.0
   antd: 4.3.5
@@ -390,7 +390,7 @@ dependencies:
   '@types/w3c-css-typed-object-model-level-1': 20180410.0.5
   '@use-it/interval': 0.1.3_react@18.1.0
   '@vercel/stega': 0.1.0
-  '@xengine/tailwindcss-class-parser': 1.1.18_tailwindcss@3.4.13
+  '@xengine/tailwindcss-class-parser': 1.1.19_tailwindcss@3.4.13
   ajv: 6.4.0
   anser: 2.1.0
   antd: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
@@ -712,7 +712,7 @@ packages:
       '@ant-design/icons-svg': 4.2.1
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -778,7 +778,7 @@ packages:
       slash: 2.0.0
     optionalDependencies:
       '@nicolo-ribaudo/chokidar-2': 2.1.8-no-fsevents.3
-      chokidar: 3.5.3
+      chokidar: 3.6.0
     dev: true
 
   /@babel/code-frame/7.12.11:
@@ -6002,8 +6002,8 @@ packages:
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
     dev: true
 
-  /@xengine/tailwindcss-class-parser/1.1.18_tailwindcss@3.4.13:
-    resolution: {integrity: sha512-BUH8MY4cAV7H1mHXIF1cny63VOiI4HXQD5z2q3SJ2seE1dcMWpUH7PvJ3cq8iO8cJ1q81qDTKUp9nlmRU7Gn6A==}
+  /@xengine/tailwindcss-class-parser/1.1.19_tailwindcss@3.4.13:
+    resolution: {integrity: sha512-1zOP0agVG+phPKWOJl5B/3mQB5+WhntynWExW6cYTgv6KCaJ6QM22m5wTPrQ0CNFRguEGUHyWgFY83PWkJ4Yrw==}
     peerDependencies:
       tailwindcss: '*'
     dependencies:
@@ -6945,14 +6945,13 @@ packages:
     dev: false
     optional: true
 
-  /bare-fs/2.1.5:
-    resolution: {integrity: sha512-5t0nlecX+N2uJqdxe9d18A98cp2u9BETelbjKpiVgQqzzmVNFYWEAjQHqS+2Khgto1vcwhik9cXucaj5ve2WWA==}
+  /bare-fs/2.3.5:
+    resolution: {integrity: sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==}
     requiresBuild: true
     dependencies:
       bare-events: 2.2.0
-      bare-os: 2.2.0
-      bare-path: 2.1.0
-      streamx: 2.15.5
+      bare-path: 2.1.3
+      bare-stream: 2.3.2
     dev: false
     optional: true
 
@@ -6961,13 +6960,20 @@ packages:
     dev: false
     optional: true
 
-  /bare-path/2.1.0:
-    resolution: {integrity: sha512-DIIg7ts8bdRKwJRJrUMy/PICEaQZaPGZ26lsSx9MJSwIhSrcdHn7/C8W+XmnG/rKi6BaRcz+JO00CjZteybDtw==}
+  /bare-path/2.1.3:
+    resolution: {integrity: sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==}
     dependencies:
       bare-os: 2.2.0
     dev: false
     optional: true
 
+  /bare-stream/2.3.2:
+    resolution: {integrity: sha512-EFZHSIBkDgSHIwj2l2QZfP4U5OcD4xFAOwhSb/vlr9PIqyGJGvB/nfClJbcnh3EY4jtPE4zsb5ztae96bVF79A==}
+    dependencies:
+      streamx: 2.20.2
+    dev: false
+    optional: true
+
   /base/0.11.2:
     resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==}
     engines: {node: '>=0.10.0'}
@@ -7652,6 +7658,23 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
+  /chokidar/3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+    requiresBuild: true
+    dependencies:
+      anymatch: 3.1.2
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+    optional: true
+
   /chownr/2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
@@ -11114,7 +11137,7 @@ packages:
       source-map: 0.6.1
       wordwrap: 1.0.0
     optionalDependencies:
-      uglify-js: 3.17.4
+      uglify-js: 3.19.3
     dev: true
 
   /has-ansi/0.1.0:
@@ -15855,7 +15878,7 @@ packages:
     dependencies:
       babel-runtime: 6.26.0
       dom-align: 1.12.4
-      prop-types: 15.8.1
+      prop-types: 15.6.2
       rc-util: 4.21.1
     dev: false
 
@@ -15868,7 +15891,7 @@ packages:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
       dom-align: 1.12.4
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
       resize-observer-polyfill: 1.5.1
@@ -15883,7 +15906,7 @@ packages:
       babel-runtime: 6.26.0
       classnames: 2.2.6
       css-animation: 1.6.1
-      prop-types: 15.8.1
+      prop-types: 15.6.2
       raf: 3.4.1
       rc-util: 4.21.1
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
@@ -15910,7 +15933,7 @@ packages:
     dependencies:
       array-tree-filter: 2.1.0
       rc-trigger: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       warning: 4.0.3
     transitivePeerDependencies:
       - react
@@ -15930,7 +15953,7 @@ packages:
       '@ant-design/css-animation': 1.7.3
       classnames: 2.2.6
       rc-animate: 3.1.1_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       shallowequal: 1.1.0
     transitivePeerDependencies:
       - react
@@ -15942,7 +15965,7 @@ packages:
     dependencies:
       babel-runtime: 6.26.0
       rc-animate: 3.1.1_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
     transitivePeerDependencies:
       - react
       - react-dom
@@ -15955,7 +15978,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
     transitivePeerDependencies:
       - react-dom
@@ -15982,7 +16005,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       async-validator: 3.5.2
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
     transitivePeerDependencies:
       - react-dom
@@ -15992,7 +16015,7 @@ packages:
     resolution: {integrity: sha512-4GgnJCjllAVNsZ9fPA+3LnoIgwUqM8QAWpyoKiTkPDN1UWapXYsPiKJCXOhnmiR0X8xpEoYHiobUaiquMliWiQ==}
     dependencies:
       classnames: 2.2.6
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
     transitivePeerDependencies:
       - react
       - react-dom
@@ -16007,7 +16030,7 @@ packages:
       classnames: 2.2.6
       rc-menu: 8.3.1_ef5jwxihqo6n7gxfmzogljlgcm
       rc-trigger: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
     transitivePeerDependencies:
       - react-dom
@@ -16021,7 +16044,7 @@ packages:
       mini-store: 3.0.6_ef5jwxihqo6n7gxfmzogljlgcm
       rc-animate: 3.1.1_ef5jwxihqo6n7gxfmzogljlgcm
       rc-trigger: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       resize-observer-polyfill: 1.5.1
       shallowequal: 1.1.0
     transitivePeerDependencies:
@@ -16038,7 +16061,7 @@ packages:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
       raf: 3.4.1
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -16051,7 +16074,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -16066,7 +16089,7 @@ packages:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
       rc-animate: 3.1.1_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -16095,7 +16118,7 @@ packages:
       classnames: 2.2.6
       moment: 2.29.1
       rc-trigger: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
       shallowequal: 1.1.0
@@ -16113,7 +16136,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
     transitivePeerDependencies:
       - react
       - react-dom
@@ -16127,7 +16150,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
       resize-observer-polyfill: 1.5.1
@@ -16141,7 +16164,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
       resize-observer-polyfill: 1.5.1
@@ -16158,7 +16181,7 @@ packages:
       classnames: 2.2.6
       rc-motion: 1.1.2_ef5jwxihqo6n7gxfmzogljlgcm
       rc-trigger: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-virtual-list: 1.1.6_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
@@ -16175,7 +16198,7 @@ packages:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
       rc-tooltip: 4.2.3_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
       shallowequal: 1.1.0
@@ -16190,7 +16213,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -16203,7 +16226,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -16236,7 +16259,7 @@ packages:
       rc-menu: 8.3.1_ef5jwxihqo6n7gxfmzogljlgcm
       rc-resize-observer: 0.2.6_ef5jwxihqo6n7gxfmzogljlgcm
       rc-trigger: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
     transitivePeerDependencies:
       - react
       - react-dom
@@ -16246,7 +16269,7 @@ packages:
     resolution: {integrity: sha512-dE2ibukxxkrde7wH9W8ozHKUO4aQnPZ6qBHtrTH9LoO836PjDdiaWO73fgPB05VfJs9FbZdmGPVEbXCeOP99Ww==}
     dependencies:
       babel-runtime: 6.26.0
-      prop-types: 15.8.1
+      prop-types: 15.6.2
       rc-trigger: 2.6.5_ef5jwxihqo6n7gxfmzogljlgcm
     transitivePeerDependencies:
       - react
@@ -16273,7 +16296,7 @@ packages:
       classnames: 2.2.6
       rc-select: 11.0.13_ef5jwxihqo6n7gxfmzogljlgcm
       rc-tree: 3.11.0_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -16288,7 +16311,7 @@ packages:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
       rc-motion: 2.4.4_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-virtual-list: 3.4.1_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
@@ -16304,7 +16327,7 @@ packages:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
       rc-animate: 3.1.1_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-virtual-list: 1.1.6_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
@@ -16315,7 +16338,7 @@ packages:
     dependencies:
       babel-runtime: 6.26.0
       classnames: 2.2.6
-      prop-types: 15.8.1
+      prop-types: 15.6.2
       rc-align: 2.4.5
       rc-animate: 2.11.1_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: 4.21.1
@@ -16334,7 +16357,7 @@ packages:
       raf: 3.4.1
       rc-align: 4.0.15_ef5jwxihqo6n7gxfmzogljlgcm
       rc-animate: 3.1.1_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
     transitivePeerDependencies:
       - react
       - react-dom
@@ -16350,7 +16373,7 @@ packages:
     resolution: {integrity: sha512-Z+vlkSQVc1l8O2UjR3WQ+XdWlhj5q9BMQNLk2iOBch75CqPfrJyGtcWMcnhRlNuDu0Ndtt4kLVO8JI8BrABobg==}
     dependencies:
       add-dom-event-listener: 1.1.0
-      prop-types: 15.8.1
+      prop-types: 15.6.2
       react-is: 16.13.1
       react-lifecycles-compat: 3.0.4
       shallowequal: 1.1.0
@@ -16369,8 +16392,8 @@ packages:
       shallowequal: 1.1.0
     dev: false
 
-  /rc-util/5.38.1_ef5jwxihqo6n7gxfmzogljlgcm:
-    resolution: {integrity: sha512-e4ZMs7q9XqwTuhIK7zBIVFltUtMSjphuPPQXHoHlzRzNdOwUxDejo0Zls5HYaJfRKNURcsS/ceKVULlhjBrxng==}
+  /rc-util/5.43.0_ef5jwxihqo6n7gxfmzogljlgcm:
+    resolution: {integrity: sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==}
     peerDependencies:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
@@ -16378,7 +16401,7 @@ packages:
       '@babel/runtime': 7.20.13
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
-      react-is: 18.2.0
+      react-is: 18.3.1
     dev: false
 
   /rc-virtual-list/1.1.6_ef5jwxihqo6n7gxfmzogljlgcm:
@@ -16390,7 +16413,7 @@ packages:
     dependencies:
       classnames: 2.2.6
       raf: 3.4.1
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -16404,7 +16427,7 @@ packages:
     dependencies:
       classnames: 2.2.6
       rc-resize-observer: 1.0.1_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.38.1_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -16582,8 +16605,8 @@ packages:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: true
 
-  /react-is/18.2.0:
-    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
+  /react-is/18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
     dev: false
 
   /react-json-tree/0.18.0_7cpxmzzodpxnolj5zcc5cr63ji:
@@ -18224,6 +18247,17 @@ packages:
       queue-tick: 1.0.1
     dev: false
 
+  /streamx/2.20.2:
+    resolution: {integrity: sha512-aDGDLU+j9tJcUdPGOaHmVF1u/hhI+CsGkT02V3OKlHDV7IukOI+nTWAGkiZEKCO35rWN1wIr4tS7YFr1f4qSvA==}
+    dependencies:
+      fast-fifo: 1.3.2
+      queue-tick: 1.0.1
+      text-decoder: 1.2.1
+    optionalDependencies:
+      bare-events: 2.2.0
+    dev: false
+    optional: true
+
   /strict-uri-encode/1.1.0:
     resolution: {integrity: sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=}
     engines: {node: '>=0.10.0'}
@@ -18639,8 +18673,8 @@ packages:
       pump: 3.0.0
       tar-stream: 3.1.6
     optionalDependencies:
-      bare-fs: 2.1.5
-      bare-path: 2.1.0
+      bare-fs: 2.3.5
+      bare-path: 2.1.3
     dev: false
 
   /tar-stream/3.1.6:
@@ -18724,6 +18758,11 @@ packages:
       minimatch: 3.0.4
     dev: true
 
+  /text-decoder/1.2.1:
+    resolution: {integrity: sha512-x9v3H/lTKIJKQQe7RPQkLfKAnc9lUTkWDypIQgTzPJAq+5/GCDHonmshfvlsNSj58yyshbIJJDLmU15qNERrXQ==}
+    dev: false
+    optional: true
+
   /text-table/0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
@@ -19159,8 +19198,8 @@ packages:
   /ua-parser-js/0.7.33:
     resolution: {integrity: sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==}
 
-  /uglify-js/3.17.4:
-    resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
+  /uglify-js/3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
     engines: {node: '>=0.8.0'}
     hasBin: true
     requiresBuild: true
@@ -20272,7 +20311,7 @@ packages:
     dependencies:
       babel-runtime: 6.26.0
       classnames: 2.2.6
-      prop-types: 15.8.1
+      prop-types: 15.6.2
       rc-tooltip: 3.7.3_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: 4.21.1
       shallowequal: 1.1.0

From 17c6983ffc5561bcaeb6fe609a7b46ff44399046 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Mon, 18 Nov 2024 16:58:25 +0100
Subject: [PATCH 227/272] Update `SetCSSLengthCommand` to read from `StyleInfo`
 (#6651)

## Problem
The flex section relies on the `SetCSSLengthCommand` command to update
elements, both for reading and writing styles. In order for that to work
in Tailwind projects, where elements don't have an inline style prop,
`SetCSSLengthCommand` needs to read element styles from the "right"
property, otherwise the command wouldn't work as intended.

## Fix
Use the StyleInfo system from to read the element style info.

Details
- Refactored `SetCSSLengthCommand` to read elements styles through
styleInfo
- Created a bespoke prop, `CSSLengthProperty`, to track which props are
addressed by `SetCSSLengthCommand`. This way it's easy to tell which
props need to be supported by StyleInfo to have `SetCSSLengthCommand`
working well
- Extended StyleInfo to support `zIndex` (all other props in
`CSSLengthProperty` were already supported by `StyleInfo`
- Updated the style plugins to support the new StyleInfo props
- update the signatures of `fixlengthCommand` and
`getCSSNumberFromStyleInfo` to use narrower type for some of their
arguments

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../strategies/group-helpers.ts               |  4 +-
 editor/src/components/canvas/canvas-types.ts  |  3 +
 .../commands/adjust-css-length-command.ts     |  2 +-
 .../canvas/commands/set-css-length-command.ts | 91 ++++++++-----------
 .../canvas/commands/utils/property-utils.ts   |  6 +-
 .../canvas/plugins/inline-style-plugin.ts     |  2 +
 .../canvas/plugins/tailwind-style-plugin.ts   |  2 +
 7 files changed, 50 insertions(+), 60 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/group-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/group-helpers.ts
index 724aa52032d5..5045588186f0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/group-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/group-helpers.ts
@@ -5,7 +5,7 @@ import {
   trueUpChildrenOfGroupChanged,
 } from '../../../../components/editor/store/editor-state'
 import { getLayoutProperty } from '../../../../core/layout/getLayoutProperty'
-import type { StyleLayoutProp } from '../../../../core/layout/layout-helpers-new'
+import type { LayoutPinnedProp, StyleLayoutProp } from '../../../../core/layout/layout-helpers-new'
 import type { PropsOrJSXAttributes } from '../../../../core/model/element-metadata-utils'
 import {
   MetadataUtils,
@@ -551,7 +551,7 @@ export function isEmptyGroup(metadata: ElementInstanceMetadataMap, path: Element
   )
 }
 
-function fixLengthCommand(path: ElementPath, prop: StyleLayoutProp, size: number): CanvasCommand {
+function fixLengthCommand(path: ElementPath, prop: LayoutPinnedProp, size: number): CanvasCommand {
   return setCssLengthProperty(
     'always',
     path,
diff --git a/editor/src/components/canvas/canvas-types.ts b/editor/src/components/canvas/canvas-types.ts
index 2d3e29e102b8..010fb804613f 100644
--- a/editor/src/components/canvas/canvas-types.ts
+++ b/editor/src/components/canvas/canvas-types.ts
@@ -586,6 +586,7 @@ export type HeightInfo = CSSStyleProperty<CSSNumber>
 export type FlexBasisInfo = CSSStyleProperty<CSSNumber>
 export type PaddingInfo = CSSStyleProperty<CSSPadding>
 export type PaddingSideInfo = CSSStyleProperty<CSSNumber>
+export type ZIndexInfo = CSSStyleProperty<CSSNumber>
 
 export interface StyleInfo {
   gap: FlexGapInfo | null
@@ -602,6 +603,7 @@ export interface StyleInfo {
   paddingRight: PaddingSideInfo | null
   paddingBottom: PaddingSideInfo | null
   paddingLeft: PaddingSideInfo | null
+  zIndex: ZIndexInfo | null
 }
 
 const emptyStyleInfo: StyleInfo = {
@@ -619,6 +621,7 @@ const emptyStyleInfo: StyleInfo = {
   paddingRight: null,
   paddingBottom: null,
   paddingLeft: null,
+  zIndex: null,
 }
 
 export const isStyleInfoKey = (key: string): key is keyof StyleInfo => key in emptyStyleInfo
diff --git a/editor/src/components/canvas/commands/adjust-css-length-command.ts b/editor/src/components/canvas/commands/adjust-css-length-command.ts
index 9c5137c5cc2a..128aeac077d6 100644
--- a/editor/src/components/canvas/commands/adjust-css-length-command.ts
+++ b/editor/src/components/canvas/commands/adjust-css-length-command.ts
@@ -16,7 +16,7 @@ import type { StyleInfo } from '../canvas-types'
 
 export type CreateIfNotExistant = 'create-if-not-existing' | 'do-not-create-if-doesnt-exist'
 
-type LengthProperty = 'left' | 'right' | 'bottom' | 'top' | 'width' | 'height' | 'flexBasis'
+export type LengthProperty = 'left' | 'right' | 'bottom' | 'top' | 'width' | 'height' | 'flexBasis'
 
 type LengthPropertyPath = PropertyPath<['style', LengthProperty]>
 
diff --git a/editor/src/components/canvas/commands/set-css-length-command.ts b/editor/src/components/canvas/commands/set-css-length-command.ts
index 83f540870260..f69f66c328df 100644
--- a/editor/src/components/canvas/commands/set-css-length-command.ts
+++ b/editor/src/components/canvas/commands/set-css-length-command.ts
@@ -1,34 +1,26 @@
 import { notice } from '../../../components/common/notice'
-import { isLeft, isRight, left } from '../../../core/shared/either'
 import * as EP from '../../../core/shared/element-path'
-import {
-  emptyComments,
-  isJSXElement,
-  jsExpressionValue,
-} from '../../../core/shared/element-template'
-import type { GetModifiableAttributeResult, ValueAtPath } from '../../../core/shared/jsx-attributes'
-import {
-  getModifiableJSXAttributeAtPath,
-  jsxSimpleAttributeToValue,
-} from '../../../core/shared/jsx-attribute-utils'
 import { roundTo } from '../../../core/shared/math-utils'
 import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
 import * as PP from '../../../core/shared/property-path'
-import type { EditorState, EditorStatePatch } from '../../editor/store/editor-state'
-import { withUnderlyingTargetFromEditorState } from '../../editor/store/editor-state'
+import type { EditorState } from '../../editor/store/editor-state'
 import type { CSSKeyword, CSSNumber, FlexDirection } from '../../inspector/common/css-utils'
 import {
   cssPixelLength,
-  parseCSSPercent,
   printCSSNumber,
   printCSSNumberOrKeyword,
 } from '../../inspector/common/css-utils'
-import type { CreateIfNotExistant } from './adjust-css-length-command'
-import { deleteConflictingPropsForWidthHeight } from './adjust-css-length-command'
+import type { LengthProperty } from './adjust-css-length-command'
+import {
+  deleteConflictingPropsForWidthHeight,
+  type CreateIfNotExistant,
+} from './adjust-css-length-command'
 import type { BaseCommand, CommandFunctionResult, WhenToRun } from './commands'
 import { addToastPatch } from './show-toast-command'
-import { applyValuesAtPath } from './utils/property-utils'
+import { getCSSNumberFromStyleInfo } from './utils/property-utils'
 import type { InteractionLifecycle } from '../canvas-strategies/canvas-strategy-types'
+import type { StyleUpdate } from '../plugins/style-plugins'
+import { getActivePlugin, runStyleUpdateForStrategy } from '../plugins/style-plugins'
 
 type CssNumberOrKeepOriginalUnit =
   | { type: 'EXPLICIT_CSS_NUMBER'; value: CSSNumber | CSSKeyword }
@@ -45,10 +37,13 @@ export function setValueKeepingOriginalUnit(
   return { type: 'KEEP_ORIGINAL_UNIT', valuePx: valuePx, parentDimensionPx: parentDimensionPx }
 }
 
+type CSSLengthProperty = LengthProperty | 'zIndex'
+type CSSLengthPropertyPath = PropertyPath<['style', CSSLengthProperty]>
+
 export interface SetCssLengthProperty extends BaseCommand {
   type: 'SET_CSS_LENGTH_PROPERTY'
   target: ElementPath
-  property: PropertyPath
+  property: CSSLengthPropertyPath
   value: CssNumberOrKeepOriginalUnit
   parentFlexDirection: FlexDirection | null
   createIfNonExistant: CreateIfNotExistant
@@ -58,7 +53,7 @@ export interface SetCssLengthProperty extends BaseCommand {
 export function setCssLengthProperty(
   whenToRun: WhenToRun,
   target: ElementPath,
-  property: PropertyPath,
+  property: CSSLengthPropertyPath,
   value: CssNumberOrKeepOriginalUnit,
   parentFlexDirection: FlexDirection | null,
   createIfNonExistant: CreateIfNotExistant = 'create-if-not-existing', // TODO remove the default value and set it explicitly everywhere
@@ -90,33 +85,22 @@ export const runSetCssLengthProperty = (
     command.parentFlexDirection,
   )
 
-  // Identify the current value, whatever that may be.
-  const currentValue: GetModifiableAttributeResult = withUnderlyingTargetFromEditorState(
-    command.target,
-    editorState,
-    left(`no target element was found at path ${EP.toString(command.target)}`),
-    (_, element) => {
-      if (isJSXElement(element)) {
-        return getModifiableJSXAttributeAtPath(element.props, command.property)
-      } else {
-        return left(`No JSXElement was found at path ${EP.toString(command.target)}`)
-      }
-    },
-  )
-  if (isLeft(currentValue)) {
+  const styleInfo = getActivePlugin(editorStateWithPropsDeleted).styleInfoFactory({
+    projectContents: editorStateWithPropsDeleted.projectContents,
+  })(command.target)
+
+  if (styleInfo == null) {
     return {
       editorStatePatches: [],
-      commandDescription: `Set Css Length Prop: ${EP.toUid(command.target)}/${PP.toString(
-        command.property,
-      )} not applied as value is not writeable.`,
+      commandDescription: `Set Css Length Prop: Element not found at ${EP.toUid(command.target)}`,
     }
   }
-  const currentModifiableValue = currentValue.value
-  const simpleValueResult = jsxSimpleAttributeToValue(currentModifiableValue)
 
-  const targetPropertyNonExistant: boolean = currentModifiableValue.type === 'ATTRIBUTE_NOT_FOUND'
+  const property = command.property.propertyElements[1] // the safety of propertyElements[1] is guaranteed by the LengthPropertyPath type
+
+  const currentValue = getCSSNumberFromStyleInfo(styleInfo, property)
   if (
-    targetPropertyNonExistant &&
+    currentValue.type === 'not-found' &&
     command.createIfNonExistant === 'do-not-create-if-doesnt-exist'
   ) {
     return {
@@ -127,18 +111,18 @@ export const runSetCssLengthProperty = (
     }
   }
 
-  let propsToUpdate: Array<ValueAtPath> = []
+  let propsToUpdate: Array<StyleUpdate> = []
 
   let percentageValueWasReplaced: boolean = false
-  const javascriptExpressionValueWasReplaced: boolean = isLeft(simpleValueResult) // Left for jsxSimpleAttributeToValue means "not simple" which means a javascript expression like `5 + props.hello`
+  const javascriptExpressionValueWasReplaced = currentValue.type === 'not-css-number'
 
-  const parsePercentResult = parseCSSPercent(simpleValueResult.value)
   if (
-    isRight(parsePercentResult) &&
+    currentValue.type === 'css-number' &&
+    currentValue.number.unit === '%' &&
     command.value.type === 'KEEP_ORIGINAL_UNIT' &&
     command.value.parentDimensionPx != null
   ) {
-    const currentValuePercent = parsePercentResult.value
+    const currentValuePercent = currentValue.number
     const valueInPercent = roundTo(
       (command.value.valuePx / command.value.parentDimensionPx) * 100,
       2,
@@ -150,8 +134,9 @@ export const runSetCssLengthProperty = (
     const newValue = printCSSNumber(newValueCssNumber, null)
 
     propsToUpdate.push({
-      path: command.property,
-      value: jsExpressionValue(newValue, emptyComments),
+      type: 'set',
+      property: property,
+      value: newValue,
     })
   } else {
     const newCssValue =
@@ -161,7 +146,8 @@ export const runSetCssLengthProperty = (
 
     if (
       command.whenReplacingPercentageValues === 'warn-about-replacement' &&
-      isRight(parsePercentResult)
+      currentValue.type === 'css-number' &&
+      currentValue.number.unit === '%'
     ) {
       percentageValueWasReplaced = true
     }
@@ -169,13 +155,15 @@ export const runSetCssLengthProperty = (
     const printedValue = printCSSNumberOrKeyword(newCssValue, 'px')
 
     propsToUpdate.push({
-      path: command.property,
-      value: jsExpressionValue(printedValue, emptyComments),
+      type: 'set',
+      property: property,
+      value: printedValue,
     })
   }
 
   // Apply the update to the properties.
-  const { editorStatePatch: propertyUpdatePatch } = applyValuesAtPath(
+  const { editorStatePatches } = runStyleUpdateForStrategy(
+    interactionLifecycle,
     editorStateWithPropsDeleted,
     command.target,
     propsToUpdate,
@@ -183,7 +171,6 @@ export const runSetCssLengthProperty = (
 
   // Always include the property update patch, but potentially also include a warning
   // that a percentage based property was replaced with a pixel based one.
-  let editorStatePatches: Array<EditorStatePatch> = [propertyUpdatePatch]
   if (percentageValueWasReplaced) {
     editorStatePatches.push(
       addToastPatch(
diff --git a/editor/src/components/canvas/commands/utils/property-utils.ts b/editor/src/components/canvas/commands/utils/property-utils.ts
index f1d9ce9a5935..1a28302d8c7d 100644
--- a/editor/src/components/canvas/commands/utils/property-utils.ts
+++ b/editor/src/components/canvas/commands/utils/property-utils.ts
@@ -110,12 +110,8 @@ export type GetCSSNumberFromStyleInfoResult =
 
 export function getCSSNumberFromStyleInfo(
   styleInfo: StyleInfo,
-  property: string,
+  property: keyof StyleInfo,
 ): GetCSSNumberFromStyleInfoResult {
-  if (!isStyleInfoKey(property)) {
-    return { type: 'not-found' }
-  }
-
   const prop = styleInfo[property]
   if (prop == null || prop.type === 'not-found') {
     return { type: 'not-found' }
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.ts b/editor/src/components/canvas/plugins/inline-style-plugin.ts
index 0d8e6890fcb6..0a7d9f1f95ae 100644
--- a/editor/src/components/canvas/plugins/inline-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.ts
@@ -73,6 +73,7 @@ export const InlineStylePlugin: StylePlugin = {
       const paddingBottom = getPropertyFromInstance('paddingBottom', element.props)
       const paddingLeft = getPropertyFromInstance('paddingLeft', element.props)
       const paddingRight = getPropertyFromInstance('paddingRight', element.props)
+      const zIndex = getPropertyFromInstance('zIndex', element.props)
 
       return {
         gap: gap,
@@ -89,6 +90,7 @@ export const InlineStylePlugin: StylePlugin = {
         paddingBottom: paddingBottom,
         paddingLeft: paddingLeft,
         paddingRight: paddingRight,
+        zIndex: zIndex,
       }
     },
   updateStyles: (editorState, elementPath, updates) => {
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
index a0ff407504c8..b9ddd6b94542 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -37,6 +37,7 @@ const TailwindPropertyMapping: Record<string, string> = {
   paddingRight: 'paddingRight',
   paddingBottom: 'paddingBottom',
   paddingLeft: 'paddingLeft',
+  zIndex: 'zIndex',
 }
 
 function isSupportedTailwindProperty(prop: unknown): prop is keyof typeof TailwindPropertyMapping {
@@ -119,6 +120,7 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
           mapping[TailwindPropertyMapping.paddingLeft],
           cssParsers.paddingLeft,
         ),
+        zIndex: parseTailwindProperty(mapping[TailwindPropertyMapping.zIndex], cssParsers.zIndex),
       }
     },
   updateStyles: (editorState, elementPath, updates) => {

From 99024782887d37de2c83ceed0b376ae4765241a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Tue, 19 Nov 2024 11:51:32 +0100
Subject: [PATCH 228/272] Remove unused flex controls code (#6653)

This PR removes some unused flex controls and some related code
---
 .../flex-container-controls.tsx               | 191 +-----------------
 1 file changed, 1 insertion(+), 190 deletions(-)

diff --git a/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx b/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
index a519c34fddfa..6f393fc7df1e 100644
--- a/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
+++ b/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
@@ -1,28 +1,20 @@
 import React from 'react'
-import type { FlexAlignment, FlexJustifyContent } from 'utopia-api/core'
 import { FlexWrap } from 'utopia-api/core'
 import type { ControlStatus } from '../../../common/control-status'
 import type { ControlStyles } from '../../../common/control-styles'
 import { InspectorContextMenuWrapper } from '../../../../context-menu-wrapper'
 import type { OptionChainOption } from '../../../controls/option-chain-control'
-import { OptionChainControl } from '../../../controls/option-chain-control'
-import {
-  InspectorPropsContext,
-  stylePropPathMappingFn,
-  useInspectorLayoutInfo,
-} from '../../../common/property-path-hooks'
+import { useInspectorLayoutInfo } from '../../../common/property-path-hooks'
 import type { SelectOption } from '../../../controls/select-control'
 import type { OptionsType } from 'react-select'
 import { unsetPropertyMenuItem } from '../../../common/context-menu-items'
 import { UIGridRow } from '../../../widgets/ui-grid-row'
-import { PropertyLabel } from '../../../widgets/property-label'
 import {
   PopupList,
   useWrappedEmptyOrUnknownOnSubmitValue,
   NumberInput,
   Icons,
 } from '../../../../../uuiui'
-import { useContextSelector } from 'use-context-selector'
 import type { FlexDirection } from '../../../common/css-utils'
 import { when } from '../../../../../utils/react-conditionals'
 import { Substores, useEditorState } from '../../../../editor/store/store-hook'
@@ -79,86 +71,6 @@ export interface FlexFieldControlProps<T> {
   onUnset: () => void
 }
 
-interface FlexDirectionControlProps extends FlexFieldControlProps<FlexDirection> {
-  flexWrap: FlexWrap
-}
-
-export const FlexDirectionControl = React.memo((props: FlexDirectionControlProps) => {
-  return (
-    <InspectorContextMenuWrapper
-      id={`flexDirection-context-menu`}
-      items={[unsetPropertyMenuItem('Flex Direction', props.onUnset)]}
-      data={{}}
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <OptionChainControl
-        id='flex.container.flexDirection'
-        key='flex.container.flexDirection'
-        testId='flex.container.flexDirection'
-        value={props.value}
-        DEPRECATED_controlOptions={{
-          labelBelow: 'Direction',
-        }}
-        controlStatus={props.controlStatus}
-        controlStyles={props.controlStyles}
-        options={flexDirectionOptions(props.flexWrap)}
-        onSubmitValue={props.onSubmitValue}
-      />
-    </InspectorContextMenuWrapper>
-  )
-})
-
-interface FlexAlignItemsControlProps extends FlexFieldControlProps<FlexAlignment> {
-  alignDirection: uglyLabel
-  alignItemsFlexStart: uglyLabel
-  alignItemsFlexEnd: uglyLabel
-}
-
-export const FlexAlignItemsControl = React.memo((props: FlexAlignItemsControlProps) => {
-  const targetPath = useContextSelector(InspectorPropsContext, (contextData) => {
-    return contextData.targetPath
-  })
-  const alignItemsProp = React.useMemo(() => {
-    return [stylePropPathMappingFn('alignItems', targetPath)]
-  }, [targetPath])
-  return (
-    <InspectorContextMenuWrapper
-      id={`alignItems-context-menu`}
-      items={[unsetPropertyMenuItem('Align Items', props.onUnset)]}
-      data={{}}
-    >
-      <UIGridRow padded={true} variant='<---1fr--->|------172px-------|'>
-        <PropertyLabel target={alignItemsProp}>Align</PropertyLabel>
-        <div
-          style={{
-            textAlign: 'center',
-            display: 'flex',
-            flexDirection: 'row',
-          }}
-        >
-          <OptionChainControl
-            id='flex.container.alignItems'
-            key='flex.container.alignItems'
-            testId='flex.container.alignItems'
-            value={props.value}
-            controlStatus={props.controlStatus}
-            controlStyles={props.controlStyles}
-            options={alignItemsOptions(
-              props.alignDirection,
-              props.alignItemsFlexStart,
-              props.alignItemsFlexEnd,
-            )}
-            onSubmitValue={props.onSubmitValue}
-          />
-        </div>
-      </UIGridRow>
-    </InspectorContextMenuWrapper>
-  )
-})
-
 interface FlexWrapControlProps extends FlexFieldControlProps<FlexWrap> {}
 
 const FlexWrapOptions: OptionsType<SelectOption> = [
@@ -216,44 +128,6 @@ export const FlexWrapControl = React.memo((props: FlexWrapControlProps) => {
   )
 })
 
-interface FlexJustifyContentControlProps extends FlexFieldControlProps<FlexJustifyContent> {
-  flexDirection: FlexDirection
-  justifyFlexStart: uglyLabel
-  justifyFlexEnd: uglyLabel
-}
-
-export const FlexJustifyContentControl = React.memo((props: FlexJustifyContentControlProps) => {
-  return (
-    <InspectorContextMenuWrapper
-      id={`justifyContent-context-menu`}
-      items={[unsetPropertyMenuItem('Justify Content', props.onUnset)]}
-      data={{}}
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <OptionChainControl
-        id='flex.container.justifyContent'
-        key='flex.container.justifyContent'
-        testId='flex.container.justifyContent'
-        value={props.value}
-        DEPRECATED_controlOptions={{
-          labelBelow: 'Justify',
-        }}
-        options={justifyContentOptions(
-          props.flexDirection,
-          props.justifyFlexStart,
-          props.justifyFlexEnd,
-        )}
-        onSubmitValue={props.onSubmitValue}
-        controlStatus={props.controlStatus}
-        controlStyles={props.controlStyles}
-      />
-    </InspectorContextMenuWrapper>
-  )
-})
-
 const flexGapControlsForHoverAndFocused: {
   hovered: Array<CanvasControlWithProps<SubduedFlexGapControlProps>>
   focused: Array<CanvasControlWithProps<SubduedFlexGapControlProps>>
@@ -350,69 +224,6 @@ export const FlexGapControl = React.memo(() => {
   )
 })
 
-const justifyContentOptions = (
-  alignDirection: FlexDirection,
-  justifyFlexStart: uglyLabel,
-  justifyFlexEnd: uglyLabel,
-) =>
-  [
-    {
-      value: 'flex-start',
-      tooltip: PrettyLabel[justifyFlexStart],
-      icon: {
-        category: `layout/flex`,
-        type: `justifyContent-${alignDirection}-${justifyFlexStart}`,
-        color: 'secondary',
-        width: 16,
-        height: 16,
-      },
-    },
-    {
-      value: 'center',
-      tooltip: 'Center',
-      icon: {
-        category: `layout/flex`,
-        type: `justifyContent-${alignDirection}-center`,
-        color: 'secondary',
-        width: 16,
-        height: 16,
-      },
-    },
-    {
-      value: 'flex-end',
-      tooltip: PrettyLabel[justifyFlexEnd],
-      icon: {
-        category: `layout/flex`,
-        type: `justifyContent-${alignDirection}-${justifyFlexEnd}`,
-        color: 'secondary',
-        width: 16,
-        height: 16,
-      },
-    },
-    {
-      value: 'space-between',
-      tooltip: 'Space Between',
-      icon: {
-        category: `layout/flex`,
-        type: `justifyContent-${alignDirection}-spaceBetween`,
-        color: 'secondary',
-        width: 16,
-        height: 16,
-      },
-    },
-    {
-      value: 'space-around',
-      tooltip: 'Space Around',
-      icon: {
-        category: `layout/flex`,
-        type: `justifyContent-${alignDirection}-spaceAround`,
-        color: 'secondary',
-        width: 16,
-        height: 16,
-      },
-    },
-  ] as Array<OptionChainOption<string | number>>
-
 export const alignItemsOptions = (
   alignDirection: string,
   alignItemsFlexStart: uglyLabel,

From bcde12dc0264374e11691d4ffe09150fdfa2ada4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Tue, 19 Nov 2024 14:11:08 +0100
Subject: [PATCH 229/272] Tailwind-compatible flex section: round 1 (#6650)

## Problem
The controls to set `justify-contents`, `align-items` and
`flex-direction` don't work with Tailwind

## Fix
- Add the necessary class names to `TailwindClassNameMapping`, so that
the Tailwind style plugin can write these classes. These controls read
props from `specialSizeMeasurements`, so I'm leaving `StyleInfo`
unchanged in this PR, and add the flex-related classes I added to
`TailwindClassNameMapping` when something actually needs to read them
through `StyleInfo`.
- Add tests for Tailwind editing in the affected controls

### Commit Details
- Add the necessary class names to `TailwindClassNameMapping`
- Add tests for `NineBlockControl` (used to set `justify-contents` and
`align-items`)
- Add tests for `ThreebarControl` (used to set `align-items` when
`justify-contents` is set to `space-between`)
- Add tests for `SpacedPackedControls` (sets `justify-contents` to
either `space-between` for spaced or to `flex-start` for `packed`)
- Add tests for `FlexDirectionToggle` (used to set flex direction)

### Out of scope
There are two other controls in the flex section, used for setting
`flex-wrap` and `flex-gap`. These controls use `useInspectorInfo` under
the hood, making that work is left to a follow-up PR

## Manual Tests
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 .../canvas/plugins/tailwind-style-plugin.ts   | 16 +++-
 .../flex-direction-control.spec.browser2.tsx  | 60 +++++++++++-
 .../nine-block-control.spec.browser2.tsx      | 33 ++++++-
 .../sections/flex-section.test-utils.ts       | 57 +++++++++++
 .../spaced-packed-control.spec.browser2.tsx   | 33 ++++++-
 .../three-bar-control.spec.browser2.tsx       | 94 ++++++++++++++++---
 6 files changed, 274 insertions(+), 19 deletions(-)
 create mode 100644 editor/src/components/inspector/sections/flex-section.test-utils.ts

diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
index b9ddd6b94542..21d5508638a0 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -23,20 +23,30 @@ function parseTailwindProperty<T>(
 }
 
 const TailwindPropertyMapping: Record<string, string> = {
-  gap: 'gap',
-  flexDirection: 'flexDirection',
   left: 'positionLeft',
   right: 'positionRight',
   top: 'positionTop',
   bottom: 'positionBottom',
+
   width: 'width',
   height: 'height',
-  flexBasis: 'flexBasis',
+
   padding: 'padding',
   paddingTop: 'paddingTop',
   paddingRight: 'paddingRight',
   paddingBottom: 'paddingBottom',
   paddingLeft: 'paddingLeft',
+
+  justifyContent: 'justifyContent',
+  alignItems: 'alignItems',
+  flex: 'flex',
+  flexDirection: 'flexDirection',
+  flexGrow: 'flexGrow',
+  flexShrink: 'flexShrink',
+  flexBasis: 'flexBasis',
+  flexWrap: 'flexWrap',
+  gap: 'gap',
+
   zIndex: 'zIndex',
 }
 
diff --git a/editor/src/components/inspector/flex-direction-control.spec.browser2.tsx b/editor/src/components/inspector/flex-direction-control.spec.browser2.tsx
index d9ad55ec3bca..5ea4e771d533 100644
--- a/editor/src/components/inspector/flex-direction-control.spec.browser2.tsx
+++ b/editor/src/components/inspector/flex-direction-control.spec.browser2.tsx
@@ -3,14 +3,16 @@ import {
   expectSingleUndo2Saves,
   hoverControlWithCheck,
   selectComponentsForTest,
+  setFeatureForBrowserTestsUseInDescribeBlockOnly,
 } from '../../utils/utils.test-utils'
 import { CanvasControlsContainerID } from '../canvas/controls/new-canvas-controls'
 import { getSubduedPaddingControlTestID } from '../canvas/controls/select-mode/subdued-padding-control'
 import { mouseClickAtPoint } from '../canvas/event-helpers.test-utils'
 import type { EditorRenderResult } from '../canvas/ui-jsx.test-utils'
-import { renderTestEditorWithCode } from '../canvas/ui-jsx.test-utils'
+import { renderTestEditorWithCode, renderTestEditorWithModel } from '../canvas/ui-jsx.test-utils'
 import type { FlexDirection } from './common/css-utils'
 import { FlexDirectionControlTestId, FlexDirectionToggleTestId } from './flex-direction-control'
+import { TailwindProject } from './sections/flex-section.test-utils'
 
 describe('set flex direction', () => {
   it('set flex direction to row from not set', async () => {
@@ -111,6 +113,62 @@ describe('set flex direction', () => {
       expect(controls.length).toEqual(4)
     })
   })
+
+  describe('Tailwind', () => {
+    setFeatureForBrowserTestsUseInDescribeBlockOnly('Tailwind', true)
+
+    it('set flex direction to column from not set', async () => {
+      const editor = await renderTestEditorWithModel(
+        TailwindProject('flex'),
+        'await-first-dom-report',
+      )
+      await selectDiv(editor)
+      await expectSingleUndo2Saves(editor, () => clickOn(editor, 'column'))
+      const div = editor.renderedDOM.getByTestId('mydiv')
+      expect(div.className).toEqual(
+        'top-10 left-10 w-64 h-64 bg-slate-100 absolute flex flex-col', // flex-col is set by the control
+      )
+    })
+
+    it('set flex direction to row-reverse from not set', async () => {
+      const editor = await renderTestEditorWithModel(
+        TailwindProject('flex'),
+        'await-first-dom-report',
+      )
+      await selectDiv(editor)
+      await expectSingleUndo2Saves(editor, () => clickOn(editor, 'row-reverse'))
+      const div = editor.renderedDOM.getByTestId('mydiv')
+      expect(div.className).toEqual(
+        'top-10 left-10 w-64 h-64 bg-slate-100 absolute flex flex-row-reverse', // flex-row-reverse is set by the control
+      )
+    })
+
+    it('set flex direction to column-reverse from not set', async () => {
+      const editor = await renderTestEditorWithModel(
+        TailwindProject('flex'),
+        'await-first-dom-report',
+      )
+      await selectDiv(editor)
+      await expectSingleUndo2Saves(editor, () => clickOn(editor, 'column-reverse'))
+      const div = editor.renderedDOM.getByTestId('mydiv')
+      expect(div.className).toEqual(
+        'top-10 left-10 w-64 h-64 bg-slate-100 absolute flex flex-col-reverse', // flex-row-reverse is set by the control
+      )
+    })
+
+    it('set flex direction to row from column', async () => {
+      const editor = await renderTestEditorWithModel(
+        TailwindProject('flex flex-col'),
+        'await-first-dom-report',
+      )
+      await selectDiv(editor)
+      await expectSingleUndo2Saves(editor, () => clickOn(editor, 'row'))
+      const div = editor.renderedDOM.getByTestId('mydiv')
+      expect(div.className).toEqual(
+        'top-10 left-10 w-64 h-64 bg-slate-100 absolute flex flex-row', // flex-row is set by the control
+      )
+    })
+  })
 })
 
 async function selectDiv(editor: EditorRenderResult): Promise<HTMLElement> {
diff --git a/editor/src/components/inspector/nine-block-control.spec.browser2.tsx b/editor/src/components/inspector/nine-block-control.spec.browser2.tsx
index 121a4fe81528..82849f91d88a 100644
--- a/editor/src/components/inspector/nine-block-control.spec.browser2.tsx
+++ b/editor/src/components/inspector/nine-block-control.spec.browser2.tsx
@@ -3,14 +3,20 @@ import {
   expectSingleUndo2Saves,
   hoverControlWithCheck,
   selectComponentsForTest,
+  setFeatureForBrowserTestsUseInDescribeBlockOnly,
 } from '../../utils/utils.test-utils'
 import { CanvasControlsContainerID } from '../canvas/controls/new-canvas-controls'
 import { getSubduedPaddingControlTestID } from '../canvas/controls/select-mode/subdued-padding-control'
 import { mouseClickAtPoint } from '../canvas/event-helpers.test-utils'
 import type { EditorRenderResult } from '../canvas/ui-jsx.test-utils'
-import { renderTestEditorWithCode } from '../canvas/ui-jsx.test-utils'
+import { renderTestEditorWithCode, renderTestEditorWithModel } from '../canvas/ui-jsx.test-utils'
 import type { StartCenterEnd } from './inspector-common'
 import { NineBlockControlTestId, NineBlockSectors, NineBlockTestId } from './nine-block-controls'
+import {
+  AlignItemsClassMapping,
+  JustifyContentClassMapping,
+  TailwindProject,
+} from './sections/flex-section.test-utils'
 
 describe('Nine-block control', () => {
   describe('in flex row', () => {
@@ -49,6 +55,27 @@ describe('Nine-block control', () => {
       expect(controls.length).toEqual(4)
     })
   })
+
+  describe('Tailwind', () => {
+    setFeatureForBrowserTestsUseInDescribeBlockOnly('Tailwind', true)
+
+    for (const [justifyContent, alignItems] of NineBlockSectors) {
+      it(`set ${justifyContent} and ${alignItems} via the nine-block control`, async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('flex flex-row'),
+          'await-first-dom-report',
+        )
+
+        const div = await doTest(editor, alignItems, justifyContent)
+
+        expect(getComputedStyle(div).justifyContent).toEqual(justifyContent)
+        expect(getComputedStyle(div).alignItems).toEqual(alignItems)
+        expect(div.className).toEqual(
+          `top-10 left-10 w-64 h-64 bg-slate-100 absolute flex flex-row ${AlignItemsClassMapping[alignItems]} ${JustifyContentClassMapping[justifyContent]}`,
+        )
+      })
+    }
+  })
 })
 
 async function doTest(
@@ -60,8 +87,8 @@ async function doTest(
   const div = editor.renderedDOM.getByTestId('mydiv')
   const divBounds = div.getBoundingClientRect()
   const divCorner = {
-    x: divBounds.x + 50,
-    y: divBounds.y + 40,
+    x: divBounds.x + 5,
+    y: divBounds.y + 4,
   }
 
   await mouseClickAtPoint(canvasControlsLayer, divCorner)
diff --git a/editor/src/components/inspector/sections/flex-section.test-utils.ts b/editor/src/components/inspector/sections/flex-section.test-utils.ts
new file mode 100644
index 000000000000..8cd3a3cbe6f1
--- /dev/null
+++ b/editor/src/components/inspector/sections/flex-section.test-utils.ts
@@ -0,0 +1,57 @@
+import { TailwindConfigPath } from '../../../core/tailwind/tailwind-config'
+import { createModifiedProject } from '../../../sample-projects/sample-project-utils.test-utils'
+import { StoryboardFilePath } from '../../editor/store/editor-state'
+
+export const JustifyContentClassMapping = {
+  'flex-start': 'justify-start',
+  center: 'justify-center',
+  'flex-end': 'justify-end',
+} as const
+
+export const AlignItemsClassMapping = {
+  'flex-start': 'items-start',
+  center: 'items-center',
+  'flex-end': 'items-end',
+} as const
+
+export const TailwindProject = (classes: string) =>
+  createModifiedProject({
+    [StoryboardFilePath]: `
+  import React from 'react'
+  import { Scene, Storyboard } from 'utopia-api'
+  export var storyboard = (
+    <Storyboard data-uid='sb'>
+      <Scene
+        id='scene'
+        commentId='scene'
+        data-uid='scene'
+        style={{
+          width: 700,
+          height: 759,
+          position: 'absolute',
+          left: 212,
+          top: 128,
+        }}
+      >
+        <div
+          data-uid='mydiv'
+          data-testid='mydiv'
+          className='top-10 left-10 w-64 h-64 bg-slate-100 absolute ${classes}'
+        >
+          <div className='bg-red-500 w-10 h-10' data-uid='child-1' />
+          <div className='bg-red-500 w-10 h-10' data-uid='child-2' />
+        </div>  
+      </Scene>
+    </Storyboard>
+  )
+  
+  `,
+    [TailwindConfigPath]: `
+      const TailwindConfig = { }
+      export default TailwindConfig
+  `,
+    'app.css': `
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;`,
+  })
diff --git a/editor/src/components/inspector/spaced-packed-control.spec.browser2.tsx b/editor/src/components/inspector/spaced-packed-control.spec.browser2.tsx
index 5ffcca13b170..4e9974cd4e6d 100644
--- a/editor/src/components/inspector/spaced-packed-control.spec.browser2.tsx
+++ b/editor/src/components/inspector/spaced-packed-control.spec.browser2.tsx
@@ -3,11 +3,13 @@ import {
   expectSingleUndo2Saves,
   hoverControlWithCheck,
   selectComponentsForTest,
+  setFeatureForBrowserTestsUseInDescribeBlockOnly,
 } from '../../utils/utils.test-utils'
 import { getSubduedPaddingControlTestID } from '../canvas/controls/select-mode/subdued-padding-control'
 import { mouseClickAtPoint } from '../canvas/event-helpers.test-utils'
 import type { EditorRenderResult } from '../canvas/ui-jsx.test-utils'
-import { renderTestEditorWithCode } from '../canvas/ui-jsx.test-utils'
+import { renderTestEditorWithCode, renderTestEditorWithModel } from '../canvas/ui-jsx.test-utils'
+import { TailwindProject } from './sections/flex-section.test-utils'
 import {
   PackedLabelCopy,
   SpacedLabelCopy,
@@ -46,6 +48,35 @@ describe('spaced - packed control', () => {
     expect(div.style.justifyContent).toEqual('flex-start')
   })
 
+  describe('Tailwind', () => {
+    setFeatureForBrowserTestsUseInDescribeBlockOnly('Tailwind', true)
+    it('set element to spaced layout', async () => {
+      const editor = await renderTestEditorWithModel(
+        TailwindProject('flex flex-row'),
+        'await-first-dom-report',
+      )
+      await selectComponentsForTest(editor, [EP.fromString('sb/scene/mydiv')])
+      await expectSingleUndo2Saves(editor, () => clickButton(editor, SpacedLabelCopy))
+      const div = editor.renderedDOM.getByTestId('mydiv')
+      expect(div.className).toEqual(
+        'top-10 left-10 w-64 h-64 bg-slate-100 absolute flex flex-row justify-between',
+      )
+    })
+    it('set element to packed layout', async () => {
+      const editor = await renderTestEditorWithModel(
+        TailwindProject('flex flex-row'),
+        'await-first-dom-report',
+      )
+      await selectComponentsForTest(editor, [EP.fromString('sb/scene/mydiv')])
+      await expectSingleUndo2Saves(editor, () => clickButton(editor, SpacedLabelCopy))
+      await expectSingleUndo2Saves(editor, () => clickButton(editor, PackedLabelCopy))
+      const div = editor.renderedDOM.getByTestId('mydiv')
+      expect(div.className).toEqual(
+        'top-10 left-10 w-64 h-64 bg-slate-100 absolute flex flex-row justify-start',
+      )
+    })
+  })
+
   it('when spaced/packed control is hovered, padding hihglights are shown', async () => {
     const editor = await renderTestEditorWithCode(projectWithPadding, 'await-first-dom-report')
     await selectComponentsForTest(editor, [EP.fromString('sb/div')])
diff --git a/editor/src/components/inspector/three-bar-control.spec.browser2.tsx b/editor/src/components/inspector/three-bar-control.spec.browser2.tsx
index 285d7f9e2a52..cf79060ee8ab 100644
--- a/editor/src/components/inspector/three-bar-control.spec.browser2.tsx
+++ b/editor/src/components/inspector/three-bar-control.spec.browser2.tsx
@@ -1,10 +1,16 @@
+import type { ElementPath } from 'utopia-shared/src/types'
 import * as EP from '../../core/shared/element-path'
-import { expectSingleUndo2Saves, selectComponentsForTest } from '../../utils/utils.test-utils'
+import {
+  expectSingleUndo2Saves,
+  selectComponentsForTest,
+  setFeatureForBrowserTestsUseInDescribeBlockOnly,
+} from '../../utils/utils.test-utils'
 import { mouseClickAtPoint } from '../canvas/event-helpers.test-utils'
 import type { EditorRenderResult } from '../canvas/ui-jsx.test-utils'
-import { renderTestEditorWithCode } from '../canvas/ui-jsx.test-utils'
+import { renderTestEditorWithCode, renderTestEditorWithModel } from '../canvas/ui-jsx.test-utils'
 import type { FlexDirection } from './common/css-utils'
 import type { FlexAlignment } from './inspector-common'
+import { AlignItemsClassMapping, TailwindProject } from './sections/flex-section.test-utils'
 import { ThreeBarControlTestId } from './three-bar-control'
 
 const StoryboardId = 'sb'
@@ -13,56 +19,122 @@ const ParentId = 'p'
 
 describe('three bar control', () => {
   describe('set align-items in flex-direcion: column', () => {
+    const ElementToSelect = EP.fromString(`${StoryboardId}/${SceneId}/${ParentId}`)
+
     it('align-items: start', async () => {
       const editor = await renderTestEditorWithCode(project('row'), 'await-first-dom-report')
       const desiredAlignItems: FlexAlignment = 'flex-start'
-      const div = await doTest(editor, ThreeBarControlTestId(desiredAlignItems))
+      const div = await doTest(
+        editor,
+        ThreeBarControlTestId(desiredAlignItems),
+        ElementToSelect,
+        ParentId,
+      )
       expect(div.style.alignItems).toEqual(desiredAlignItems)
     })
 
     it('align-items: center', async () => {
       const editor = await renderTestEditorWithCode(project('row'), 'await-first-dom-report')
       const desiredAlignItems: FlexAlignment = 'center'
-      const div = await doTest(editor, ThreeBarControlTestId(desiredAlignItems))
+      const div = await doTest(
+        editor,
+        ThreeBarControlTestId(desiredAlignItems),
+        ElementToSelect,
+        ParentId,
+      )
       expect(div.style.alignItems).toEqual(desiredAlignItems)
     })
 
     it('align-items: end', async () => {
       const editor = await renderTestEditorWithCode(project('row'), 'await-first-dom-report')
       const desiredAlignItems: FlexAlignment = 'flex-end'
-      const div = await doTest(editor, ThreeBarControlTestId(desiredAlignItems))
+      const div = await doTest(
+        editor,
+        ThreeBarControlTestId(desiredAlignItems),
+        ElementToSelect,
+        ParentId,
+      )
       expect(div.style.alignItems).toEqual(desiredAlignItems)
     })
   })
 
   describe('set align-items in flex-direcion: row', () => {
+    const ElementToSelect = EP.fromString(`${StoryboardId}/${SceneId}/${ParentId}`)
+
     it('align-items: start', async () => {
       const editor = await renderTestEditorWithCode(project('column'), 'await-first-dom-report')
       const desiredAlignItems: FlexAlignment = 'flex-start'
-      const div = await doTest(editor, ThreeBarControlTestId(desiredAlignItems))
+      const div = await doTest(
+        editor,
+        ThreeBarControlTestId(desiredAlignItems),
+        EP.fromString(`${StoryboardId}/${SceneId}/${ParentId}`),
+        ParentId,
+      )
       expect(div.style.alignItems).toEqual(desiredAlignItems)
     })
 
     it('align-items: center', async () => {
       const editor = await renderTestEditorWithCode(project('column'), 'await-first-dom-report')
       const desiredAlignItems: FlexAlignment = 'center'
-      const div = await doTest(editor, ThreeBarControlTestId(desiredAlignItems))
+      const div = await doTest(
+        editor,
+        ThreeBarControlTestId(desiredAlignItems),
+        ElementToSelect,
+        ParentId,
+      )
       expect(div.style.alignItems).toEqual(desiredAlignItems)
     })
 
     it('align-items: end', async () => {
       const editor = await renderTestEditorWithCode(project('column'), 'await-first-dom-report')
       const desiredAlignItems: FlexAlignment = 'flex-end'
-      const div = await doTest(editor, ThreeBarControlTestId(desiredAlignItems))
+      const div = await doTest(
+        editor,
+        ThreeBarControlTestId(desiredAlignItems),
+        ElementToSelect,
+        ParentId,
+      )
       expect(div.style.alignItems).toEqual(desiredAlignItems)
     })
   })
+
+  describe('Tailwind', () => {
+    setFeatureForBrowserTestsUseInDescribeBlockOnly('Tailwind', true)
+
+    const ElementToSelect = EP.fromString('sb/scene/mydiv')
+
+    const AlignItems = ['flex-start', 'center', 'flex-end'] as const
+
+    for (const alignItems of AlignItems) {
+      it(`align-items: ${alignItems}`, async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('flex flex-row justify-between'),
+          'await-first-dom-report',
+        )
+        const div = await doTest(
+          editor,
+          ThreeBarControlTestId(alignItems),
+          ElementToSelect,
+          'mydiv',
+        )
+        expect(getComputedStyle(div).alignItems).toEqual(alignItems)
+        expect(div.className).toEqual(
+          `top-10 left-10 w-64 h-64 bg-slate-100 absolute flex flex-row justify-between ${AlignItemsClassMapping[alignItems]}`,
+        )
+      })
+    }
+  })
 })
 
-async function doTest(editor: EditorRenderResult, controlId: string): Promise<HTMLElement> {
-  await selectComponentsForTest(editor, [EP.fromString(`${StoryboardId}/${SceneId}/${ParentId}`)])
+async function doTest(
+  editor: EditorRenderResult,
+  controlId: string,
+  elementPath: ElementPath,
+  testId: string,
+): Promise<HTMLElement> {
+  await selectComponentsForTest(editor, [elementPath])
 
-  const div = editor.renderedDOM.getByTestId(ParentId)
+  const div = editor.renderedDOM.getByTestId(testId)
   const control = editor.renderedDOM.getByTestId(controlId)
   const controlBounds = control.getBoundingClientRect()
   await expectSingleUndo2Saves(editor, async () => {

From 91c4bab8e3ab48b29b3f7e387223ad733a2e6f82 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Tue, 19 Nov 2024 16:07:13 +0000
Subject: [PATCH 230/272] fix(grids) Handle Non-Offset Parent Grids. (#6649)

- `runGridMoveAbsolute` now checks to see if the grid provides
layouting, if it does not then the closest offset global frame is
identified.
- Slightly widened the type of `zeroRectIfNullOrInfinity`.
---
 .../grid-move-absolute.spec.browser2.tsx      | 180 ++++++++++++++++++
 .../strategies/grid-move-absolute.ts          |  18 +-
 editor/src/core/shared/math-utils.ts          |   2 +-
 3 files changed, 193 insertions(+), 7 deletions(-)
 create mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx
new file mode 100644
index 000000000000..305863f496e1
--- /dev/null
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx
@@ -0,0 +1,180 @@
+import * as EP from '../../../../core/shared/element-path'
+import type { WindowPoint } from '../../../../core/shared/math-utils'
+import { offsetPoint, windowPoint } from '../../../../core/shared/math-utils'
+import type { Modifiers } from '../../../../utils/modifiers'
+import { cmdModifier, emptyModifiers } from '../../../../utils/modifiers'
+import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
+import type { Point } from '../../event-helpers.test-utils'
+import {
+  mouseClickAtPoint,
+  mouseDownAtPoint,
+  mouseMoveToPoint,
+  mouseUpAtPoint,
+} from '../../event-helpers.test-utils'
+import type { EditorRenderResult } from '../../ui-jsx.test-utils'
+import { getPrintedUiJsCode, renderTestEditorWithCode } from '../../ui-jsx.test-utils'
+
+async function dragElement(
+  renderResult: EditorRenderResult,
+  targetTestId: string,
+  targetControlTestId: string,
+  dragDelta: WindowPoint,
+  modifiers: Modifiers,
+): Promise<void> {
+  const targetElement = renderResult.renderedDOM.getByTestId(targetTestId)
+  const targetElementBounds = targetElement.getBoundingClientRect()
+  const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
+
+  const startPoint = windowPoint({ x: targetElementBounds.x + 5, y: targetElementBounds.y + 5 })
+  const endPoint = offsetPoint(startPoint, dragDelta)
+
+  await mouseClickAtPoint(canvasControlsLayer, startPoint, { modifiers: cmdModifier })
+
+  const targetControl = renderResult.renderedDOM.getByTestId(targetControlTestId)
+
+  await mouseDownAtPoint(targetControl, startPoint, { modifiers: modifiers })
+
+  const delta: Point = {
+    x: endPoint.x - startPoint.x,
+    y: endPoint.y - startPoint.y,
+  }
+  await mouseMoveToPoint(
+    targetControl,
+    {
+      x: endPoint.x,
+      y: endPoint.y,
+    },
+    {
+      modifiers: modifiers,
+      eventOptions: {
+        movementX: delta.x,
+        movementY: delta.y,
+        buttons: 1,
+      },
+    },
+  )
+
+  await mouseUpAtPoint(canvasControlsLayer, endPoint, {
+    modifiers: modifiers,
+  })
+}
+
+describe('grid move absolute strategy', () => {
+  it('move an absolute element in a non-absolute grid', async () => {
+    const editor = await renderTestEditorWithCode(
+      `import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb' data-testid='sb'>
+    <div
+      style={{
+        height: 'max-content',
+        position: 'absolute',
+        left: 776,
+        top: 6,
+      }}
+      data-uid='container'
+      data-testid='container'
+    >
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          left: 100,
+          top: 100,
+          width: 1000,
+          height: 1000,
+          display: 'grid',
+          gridTemplateColumns: '200px 200px 200px',
+          gridTemplateRows: '200px 200px 200px',
+          gridGap: 10,
+          padding: 10,
+        }}
+        data-uid='grid'
+        data-testid='grid'
+      >
+        <div
+          style={{
+            gridColumn: 1,
+            gridRow: 1,
+            backgroundColor: '#f0f',
+            position: 'absolute',
+            left: 500,
+            top: 500,
+            width: 79,
+            height: 86,
+          }}
+          data-uid='dragme'
+          data-testid='dragme'
+        />
+      </div>
+    </div>
+  </Storyboard>
+)`,
+      'await-first-dom-report',
+    )
+
+    await dragElement(
+      editor,
+      'dragme',
+      'grid-cell-sb/container/grid/dragme',
+      windowPoint({ x: -200, y: -200 }),
+      emptyModifiers,
+    )
+
+    expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+      `import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb' data-testid='sb'>
+    <div
+      style={{
+        height: 'max-content',
+        position: 'absolute',
+        left: 776,
+        top: 6,
+      }}
+      data-uid='container'
+      data-testid='container'
+    >
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          left: 100,
+          top: 100,
+          width: 1000,
+          height: 1000,
+          display: 'grid',
+          gridTemplateColumns: '200px 200px 200px',
+          gridTemplateRows: '200px 200px 200px',
+          gridGap: 10,
+          padding: 10,
+        }}
+        data-uid='grid'
+        data-testid='grid'
+      >
+        <div
+          style={{
+            backgroundColor: '#f0f',
+            position: 'absolute',
+            width: 79,
+            height: 86,
+            gridColumn: 1,
+            gridRow: 1,
+            top: 300,
+            left: 300,
+          }}
+          data-uid='dragme'
+          data-testid='dragme'
+        />
+      </div>
+    </div>
+  </Storyboard>
+)
+`,
+    )
+
+    expect(1).toEqual(1)
+  })
+})
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
index a25d7f521a37..53eb97fe8f6d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
@@ -215,6 +215,17 @@ function runGridMoveAbsolute(
     ]
   }
 
+  function getContainingRect(): CanvasRectangle {
+    if (selectedElementMetadata.specialSizeMeasurements.immediateParentProvidesLayout) {
+      const gridCellGlobalFrame = getGlobalFrameOfGridCell(gridCellGlobalFrames, targetRootCell)
+      return zeroRectIfNullOrInfinity(gridCellGlobalFrame)
+    } else {
+      return zeroRectIfNullOrInfinity(
+        selectedElementMetadata.specialSizeMeasurements.coordinateSystemBounds,
+      )
+    }
+  }
+
   // otherwise, return a change location + absolute adjustment
   return [
     ...runGridChangeElementLocation(
@@ -225,12 +236,7 @@ function runGridMoveAbsolute(
       gridTemplate,
       null,
     ),
-    ...gridChildAbsoluteMoveCommands(
-      selectedElementMetadata,
-      getGlobalFrameOfGridCell(gridCellGlobalFrames, targetRootCell) ??
-        canvasRectangle(zeroRectangle),
-      interactionData,
-    ),
+    ...gridChildAbsoluteMoveCommands(selectedElementMetadata, getContainingRect(), interactionData),
   ]
 }
 
diff --git a/editor/src/core/shared/math-utils.ts b/editor/src/core/shared/math-utils.ts
index 4978b144f4bf..a50258330f00 100644
--- a/editor/src/core/shared/math-utils.ts
+++ b/editor/src/core/shared/math-utils.ts
@@ -183,7 +183,7 @@ export function windowRectangle(
 }
 
 export function zeroRectIfNullOrInfinity<C extends CoordinateMarker>(
-  r: MaybeInfinityRectangle<C> | null,
+  r: MaybeInfinityRectangle<C> | null | undefined,
 ): Rectangle<C> {
   return r == null || isInfinityRectangle(r) ? (zeroRectangle as Rectangle<C>) : r
 }

From d1c1e6ea3eec8d64578efed1f43aa43b104c4409 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Tue, 19 Nov 2024 16:07:34 +0000
Subject: [PATCH 231/272] fix(grids) Handle Spans In Pin Outlines (#6644)

- Extracted out the `printPin` function.
- Implemented `nullHandlingPrintPin` as a thin wrapper around
`printPin`.
- `GridElementContainingBlock` now uses `nullHandlingPrintPin` instead
of `gridPositionToValue` to build the grid column/row start/end values.
---
 .../strategies/grid-helpers.ts                |  46 ++++---
 .../controls/grid-controls.spec.browser2.tsx  | 121 ++++++++++++++++++
 .../canvas/controls/grid-controls.tsx         |  51 +++++---
 3 files changed, 179 insertions(+), 39 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index a8e2b35a4b1f..0710211b683c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -77,6 +77,29 @@ export function isAutoGridPin(v: GridPositionOrSpan): boolean {
   return isCSSKeyword(v) && v.value === 'auto'
 }
 
+export function printPin(
+  gridTemplate: GridContainerProperties,
+  pin: GridPositionOrSpan,
+  axis: 'row' | 'column',
+): string | number {
+  if (isGridSpan(pin)) {
+    return stringifyGridSpan(pin)
+  }
+  if (isCSSKeyword(pin)) {
+    return pin.value
+  }
+  const tracks =
+    axis === 'column' ? gridTemplate.gridTemplateColumns : gridTemplate.gridTemplateRows
+  const maybeLineName =
+    tracks?.type === 'DIMENSIONS'
+      ? tracks.dimensions.find((_, index) => index + 1 === pin.numericalPosition)?.lineName
+      : null
+  if (maybeLineName != null) {
+    return maybeLineName
+  }
+  return pin.numericalPosition ?? 'auto'
+}
+
 export function getCommandsForGridItemPlacement(
   elementPath: ElementPath,
   gridTemplate: GridContainerProperties,
@@ -94,25 +117,6 @@ export function getCommandsForGridItemPlacement(
     ]),
   ]
 
-  function printPin(pin: GridPositionOrSpan, axis: 'row' | 'column'): string | number {
-    if (isGridSpan(pin)) {
-      return stringifyGridSpan(pin)
-    }
-    if (isCSSKeyword(pin)) {
-      return pin.value
-    }
-    const tracks =
-      axis === 'column' ? gridTemplate.gridTemplateColumns : gridTemplate.gridTemplateRows
-    const maybeLineName =
-      tracks?.type === 'DIMENSIONS'
-        ? tracks.dimensions.find((_, index) => index + 1 === pin.numericalPosition)?.lineName
-        : null
-    if (maybeLineName != null) {
-      return maybeLineName
-    }
-    return pin.numericalPosition ?? 'auto'
-  }
-
   function serializeAxis(
     startPosition: GridPositionOrSpan,
     endPosition: GridPositionOrSpan,
@@ -127,8 +131,8 @@ export function getCommandsForGridItemPlacement(
       | 'gridRowEnd'
     value: string | number
   } {
-    const startValue = printPin(startPosition, axis)
-    const endValue = printPin(endPosition, axis)
+    const startValue = printPin(gridTemplate, startPosition, axis)
+    const endValue = printPin(gridTemplate, endPosition, axis)
 
     if (isAutoGridPin(startPosition) && !isAutoGridPin(endPosition)) {
       return {
diff --git a/editor/src/components/canvas/controls/grid-controls.spec.browser2.tsx b/editor/src/components/canvas/controls/grid-controls.spec.browser2.tsx
index be1be9264dd2..ab6344931042 100644
--- a/editor/src/components/canvas/controls/grid-controls.spec.browser2.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.spec.browser2.tsx
@@ -615,4 +615,125 @@ describe('Grid Pin Outlines', () => {
       bottom: { x: 1781.5, y: 555.5, width: 1, height: 5 },
     })
   })
+
+  it('pinned top and left, grid rows and columns fully specified and not absolutely positioned, with a row start span', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      top: 5,
+      left: 12,
+      gridRowStart: 'span 2',
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned top and left, grid rows and columns fully specified and absolutely positioned, with a row start span', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      position: 'absolute',
+      top: 5,
+      left: 12,
+      gridRowStart: 'span 2',
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      left: { x: 688.5, y: 190.5, width: 12, height: 1 },
+      top: { x: 725.5, y: 160.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned bottom and right, grid rows and columns fully specified and not absolutely positioned, with a row start span', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      bottom: 5,
+      right: 12,
+      gridRowStart: 'span 2',
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned bottom and right, grid rows and columns fully specified and absolutely positioned, with a row start span', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      position: 'absolute',
+      bottom: 5,
+      right: 12,
+      gridRowStart: 'span 2',
+      gridColumnStart: 3,
+      gridRowEnd: 2,
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      right: { x: 777.5, y: 240.5, width: 12, height: 1 },
+      bottom: { x: 751.5, y: 266.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned top and left, grid rows and columns fully specified and not absolutely positioned, with a row end span', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      top: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 'span 2',
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned top and left, grid rows and columns fully specified and absolutely positioned, with a row end span', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      position: 'absolute',
+      top: 5,
+      left: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 'span 2',
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      left: { x: 688.5, y: 315.5, width: 12, height: 1 },
+      top: { x: 725.5, y: 285.5, width: 1, height: 5 },
+    })
+  })
+  it('pinned bottom and right, grid rows and columns fully specified and not absolutely positioned, with a row end span', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      bottom: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 'span 2',
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({})
+  })
+  it('pinned bottom and right, grid rows and columns fully specified and absolutely positioned, with a row end span', async () => {
+    const result = await testGridOutlines('storyboard/scene/grid/grid-child', {
+      position: 'absolute',
+      bottom: 5,
+      right: 12,
+      gridRowStart: 2,
+      gridColumnStart: 3,
+      gridRowEnd: 'span 2',
+      gridColumnEnd: 3,
+      width: 50,
+      height: 50,
+    })
+    expect(result).toEqual({
+      right: { x: 777.5, y: 470.5, width: 12, height: 1 },
+      bottom: { x: 751.5, y: 496.5, width: 1, height: 5 },
+    })
+  })
 })
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index ac23b73918e0..bf687f20a041 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -17,6 +17,7 @@ import * as EP from '../../../core/shared/element-path'
 import type {
   ElementInstanceMetadataMap,
   GridAutoOrTemplateDimensions,
+  GridContainerProperties,
   GridPositionOrSpan,
 } from '../../../core/shared/element-template'
 import {
@@ -73,6 +74,7 @@ import {
   getGridRelatedIndexes,
   getGridElementPinState,
   gridPositionToValue,
+  printPin,
   getGridIdentifierContainerOrComponentPath,
   gridIdentifierToString,
   gridIdentifiersSimilar,
@@ -1944,6 +1946,17 @@ export interface GridElementContainingBlockProps {
   gridChild: ElementPath
 }
 
+function nullHandlingPrintPin(
+  gridTemplate: GridContainerProperties | null | undefined,
+  pin: GridPositionOrSpan | null | undefined,
+  axis: 'row' | 'column',
+): string | number | undefined {
+  if (gridTemplate == null || pin == null) {
+    return undefined
+  }
+  return printPin(gridTemplate, pin, axis)
+}
+
 const GridElementContainingBlock = React.memo<GridElementContainingBlockProps>((props) => {
   const gridData = useGridMeasurementHelperData(props.gridPath, 'element')
   const scale = useEditorState(
@@ -1975,24 +1988,26 @@ const GridElementContainingBlock = React.memo<GridElementContainingBlockProps>((
       const gridFromProps = childMetadata.specialSizeMeasurements.elementGridPropertiesFromProps
       const gridComputed = childMetadata.specialSizeMeasurements.elementGridProperties
       return {
-        gridColumnStart:
-          gridPositionToValue(
-            gridFromProps.gridColumnStart ?? gridComputed.gridColumnStart,
-            null,
-          ) ?? undefined,
-        gridColumnEnd:
-          gridPositionToValue(
-            gridFromProps.gridColumnEnd ?? gridComputed.gridColumnEnd,
-            gridFromProps.gridColumnStart ?? gridComputed.gridColumnStart,
-          ) ?? undefined,
-        gridRowStart:
-          gridPositionToValue(gridFromProps.gridRowStart ?? gridComputed.gridRowStart, null) ??
-          undefined,
-        gridRowEnd:
-          gridPositionToValue(
-            gridFromProps.gridRowEnd ?? gridComputed.gridRowEnd,
-            gridFromProps.gridRowStart ?? gridComputed.gridRowStart,
-          ) ?? undefined,
+        gridColumnStart: nullHandlingPrintPin(
+          childMetadata.specialSizeMeasurements.containerGridProperties,
+          gridFromProps.gridColumnStart ?? gridComputed.gridColumnStart,
+          'column',
+        ),
+        gridColumnEnd: nullHandlingPrintPin(
+          childMetadata.specialSizeMeasurements.containerGridProperties,
+          gridFromProps.gridColumnEnd ?? gridComputed.gridColumnEnd,
+          'column',
+        ),
+        gridRowStart: nullHandlingPrintPin(
+          childMetadata.specialSizeMeasurements.containerGridProperties,
+          gridFromProps.gridRowStart ?? gridComputed.gridRowStart,
+          'row',
+        ),
+        gridRowEnd: nullHandlingPrintPin(
+          childMetadata.specialSizeMeasurements.containerGridProperties,
+          gridFromProps.gridRowEnd ?? gridComputed.gridRowEnd,
+          'row',
+        ),
         position: childMetadata.specialSizeMeasurements.position ?? undefined,
       }
     },

From 3af65dbc079fa7b4a514a48591ac20df4610ac0a Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 19 Nov 2024 19:02:40 +0100
Subject: [PATCH 232/272] Stringify the element path passed to data-grid-path
 (#6660)

**Problem:**

`data-grid-path` is not stringified when used in the grid control's
component, leading to a lovely `[object Object]` which functionally
nerfs the dom walker.

**Fix:**

Fix that.

Fixes #6659
---
 editor/src/components/canvas/controls/grid-controls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index bf687f20a041..a8f61ad94128 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -925,7 +925,7 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
       <div
         key={gridKeyFromPath(gridContainerOrComponentPath)}
         id={gridKeyFromPath(gridContainerOrComponentPath)}
-        data-grid-path={gridContainerOrComponentPath}
+        data-grid-path={EP.toString(gridContainerOrComponentPath)}
         style={style}
       >
         {placeholders.map((cell) => {

From dca813ffd980b8b0d5d2674713887f3c56d4e96b Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 20 Nov 2024 12:10:34 +0100
Subject: [PATCH 233/272] Grid ruler markers (#6654)

**Problem:**

Selected grid items should show ruler markers on the borders of the grid
to indicate their placement properties.

**Fix:**

Add the ruler markers to the grid controls for items.

**Notes:**
- markers currently target the cell bounds, it should change to the
middle of the space between cells when we have offset indicator lines
(future PR)



https://github.com/user-attachments/assets/b0dd3450-70fa-47cc-b627-e9f792f13ad8



**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6656
---
 .../strategies/grid-cell-bounds.ts            |  13 +-
 .../strategies/grid-helpers.ts                |   3 +-
 .../controls/grid-controls-ruler-markers.tsx  |  97 ++++++
 .../canvas/controls/grid-controls.tsx         | 300 +++++++++++++++++-
 .../src/components/inspector/grid-helpers.ts  |   2 +-
 5 files changed, 401 insertions(+), 14 deletions(-)
 create mode 100644 editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
index a4378542506f..3d42495f0e96 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -68,12 +68,13 @@ export function getClosestGridCellToPointFromMetadata(
     return null
   }
 
-  return getClosestGridCellToPoint(gridCellGlobalFrames, point)
+  return getClosestGridCellToPoint(gridCellGlobalFrames, point, 'exclusive')
 }
 
 export function getClosestGridCellToPoint(
   gridCellGlobalFrames: GridCellGlobalFrames,
   point: CanvasPoint,
+  distanceMatch: 'inclusive' | 'exclusive',
 ): TargetGridCellData | null {
   let closestCell: TargetGridCellData | null = null
   let closestDistance = Infinity
@@ -81,7 +82,11 @@ export function getClosestGridCellToPoint(
   for (let i = 0; i < gridCellGlobalFrames.length; i++) {
     for (let j = 0; j < gridCellGlobalFrames[i].length; j++) {
       const currentDistance = distanceFromPointToRectangle(point, gridCellGlobalFrames[i][j])
-      if (currentDistance < closestDistance) {
+      const closeEnough =
+        distanceMatch === 'inclusive'
+          ? currentDistance <= closestDistance
+          : currentDistance < closestDistance
+      if (closeEnough) {
         closestCell = {
           gridCellCoordinates: gridCellCoordinates(i + 1, j + 1),
           cellCanvasRectangle: gridCellGlobalFrames[i][j],
@@ -102,7 +107,7 @@ export function getGridChildCellCoordBoundsFromCanvas(
     return null
   }
 
-  const cellOrigin = getClosestGridCellToPoint(gridCellGlobalFrames, cellFrame)
+  const cellOrigin = getClosestGridCellToPoint(gridCellGlobalFrames, cellFrame, 'inclusive')
   if (cellOrigin == null) {
     return null
   }
@@ -114,7 +119,7 @@ export function getGridChildCellCoordBoundsFromCanvas(
       y: cellFrame.height,
     }),
   )
-  const cellEnd = getClosestGridCellToPoint(gridCellGlobalFrames, cellEndPoint)
+  const cellEnd = getClosestGridCellToPoint(gridCellGlobalFrames, cellEndPoint, 'exclusive')
   if (cellEnd == null) {
     return null
   }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 0710211b683c..f9df02f8816e 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -73,7 +73,7 @@ export function gridPositionToValue(
   return p.numericalPosition
 }
 
-export function isAutoGridPin(v: GridPositionOrSpan): boolean {
+export function isAutoGridPin(v: GridPositionOrSpan | null): boolean {
   return isCSSKeyword(v) && v.value === 'auto'
 }
 
@@ -498,6 +498,7 @@ export function getOriginalElementGridConfiguration(
   const draggingFromCellCoords = getClosestGridCellToPoint(
     gridCellGlobalFrames,
     interactionData.dragStart,
+    'exclusive',
   )?.gridCellCoordinates
   if (draggingFromCellCoords == null) {
     return null
diff --git a/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx b/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx
new file mode 100644
index 000000000000..be44ba0c6698
--- /dev/null
+++ b/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import { colorTheme } from '../../../uuiui'
+
+export type RulerMarkerType = 'span-start' | 'span-end' | 'auto' | 'pinned'
+
+const upFacingTriangle = (
+  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
+    <polygon
+      points='5,1 10,10 0,10'
+      fill={colorTheme.primary.value}
+      stroke={colorTheme.white.value}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+const rightFacingTriangle = (
+  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
+    <polygon
+      points='10,5 0,0 0,10'
+      fill={colorTheme.primary.value}
+      stroke={colorTheme.white.value}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+const downFacingTriangle = (
+  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
+    <polygon
+      points='5,10 0,0 10,0'
+      fill={colorTheme.primary.value}
+      stroke={colorTheme.white.value}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+const leftFacingTriangle = (
+  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
+    <polygon
+      points='0,5 10,0 10,10'
+      fill={colorTheme.primary.value}
+      stroke={colorTheme.white.value}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+const verticalPipe = (
+  <svg width='4' height='11' xmlns='http://www.w3.org/2000/svg'>
+    <rect
+      x='0.25'
+      y='0.25'
+      width='3'
+      height='10'
+      fill={colorTheme.primary.value}
+      stroke={colorTheme.white.value}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+const horizontalPipe = (
+  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
+    <rect
+      x='0.25'
+      y='3.50'
+      width='10'
+      height='3'
+      fill={colorTheme.primary.value}
+      stroke={colorTheme.white.value}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+export const rulerMarkerIcons: {
+  [key in RulerMarkerType]: { column: React.ReactNode; row: React.ReactNode }
+} = {
+  'span-start': {
+    column: rightFacingTriangle,
+    row: downFacingTriangle,
+  },
+  'span-end': {
+    column: leftFacingTriangle,
+    row: upFacingTriangle,
+  },
+  auto: {
+    column: verticalPipe,
+    row: horizontalPipe,
+  },
+  pinned: {
+    column: downFacingTriangle,
+    row: rightFacingTriangle,
+  },
+}
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index a8f61ad94128..aa6503487aee 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -68,7 +68,10 @@ import {
   gridResizeHandle,
 } from '../canvas-strategies/interaction-state'
 import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
-import { gridCellTargetId } from '../canvas-strategies/strategies/grid-cell-bounds'
+import {
+  getGridChildCellCoordBoundsFromCanvas,
+  gridCellTargetId,
+} from '../canvas-strategies/strategies/grid-cell-bounds'
 import {
   getGlobalFrameOfGridCellFromMetadata,
   getGridRelatedIndexes,
@@ -78,6 +81,8 @@ import {
   getGridIdentifierContainerOrComponentPath,
   gridIdentifierToString,
   gridIdentifiersSimilar,
+  findOriginalGrid,
+  isAutoGridPin,
 } from '../canvas-strategies/strategies/grid-helpers'
 import { canResizeGridTemplate } from '../canvas-strategies/strategies/resize-grid-strategy'
 import { resizeBoundingBoxFromSide } from '../canvas-strategies/strategies/resize-helpers'
@@ -113,6 +118,8 @@ import { PinOutline, usePropsOrJSXAttributes } from './position-outline'
 import { getLayoutProperty } from '../../../core/layout/getLayoutProperty'
 import { styleStringInArray } from '../../../utils/common-constants'
 import { gridContainerIdentifier, type GridIdentifier } from '../../editor/store/editor-state'
+import type { RulerMarkerType } from './grid-controls-ruler-markers'
+import { rulerMarkerIcons } from './grid-controls-ruler-markers'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -538,7 +545,7 @@ export const GridRowColumnResizingControlsComponent = ({
     'GridRowColumnResizingControls scale',
   )
 
-  const isGridItemSelected = useIsGridItemSelected()
+  const selectedGridItems = useSelectedGridItems()
 
   const gridsWithVisibleResizeControls = React.useMemo(() => {
     return grids.filter((grid) => {
@@ -575,7 +582,7 @@ export const GridRowColumnResizingControlsComponent = ({
   return (
     <CanvasOffsetWrapper>
       {gridsWithVisibleResizeControls.flatMap((grid) => {
-        if (isGridItemSelected) {
+        if (selectedGridItems.length > 0) {
           return null
         }
         return (
@@ -598,7 +605,7 @@ export const GridRowColumnResizingControlsComponent = ({
         )
       })}
       {gridsWithVisibleResizeControls.flatMap((grid) => {
-        if (isGridItemSelected) {
+        if (selectedGridItems.length > 0) {
           return null
         }
         return (
@@ -1158,7 +1165,7 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
 
   const gridsWithVisibleControls: Array<GridIdentifier> = [...targets, ...hoveredGrids]
 
-  const isGridItemSelected = useIsGridItemSelected()
+  const selectedGridItems = useSelectedGridItems()
   const isGridItemInteractionActive = useIsGridItemInteractionActive()
 
   // Uniqify the grid paths, and then sort them by depth.
@@ -1174,7 +1181,8 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
     }),
   )
 
-  const isGridItemSelectedWithoutInteraction = isGridItemSelected && !isGridItemInteractionActive
+  const isGridItemSelectedWithoutInteraction =
+    selectedGridItems.length > 0 && !isGridItemInteractionActive
 
   if (grids.length === 0) {
     return null
@@ -1204,6 +1212,10 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
             />
           )
         })}
+        {/* Ruler markers */}
+        {selectedGridItems.map((path) => {
+          return <RulerMarkers key={`ruler-markers-${EP.toString(path)}`} path={path} />
+        })}
         <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
       </CanvasOffsetWrapper>
     </div>
@@ -2163,10 +2175,282 @@ function useIsGridItemInteractionActive() {
   )
 }
 
-function useIsGridItemSelected() {
+function useSelectedGridItems(): ElementPath[] {
   const selectedViewsRef = useRefEditorState((store) => store.editor.selectedViews)
   const jsxMetadataRef = useRefEditorState((store) => store.editor.jsxMetadata)
-  return selectedViewsRef.current.some((selected) =>
+  return selectedViewsRef.current.filter((selected) =>
     MetadataUtils.isGridItem(jsxMetadataRef.current, selected),
   )
 }
+
+const rulerMarkerIconSize = 12 // px
+
+type RulerMarkerData = {
+  columnStart: RulerMarkerPositionData
+  columnEnd: RulerMarkerPositionData
+  rowStart: RulerMarkerPositionData
+  rowEnd: RulerMarkerPositionData
+}
+
+type RulerMarkerPositionData = {
+  top: number
+  left: number
+  position: GridPositionOrSpan | null
+  counterpart: GridPositionOrSpan | null
+  bound: 'start' | 'end'
+}
+
+const RulerMarkers = React.memo((props: { path: ElementPath }) => {
+  const markers: RulerMarkerData | null = useEditorState(
+    Substores.metadata,
+    (store) => {
+      const elementMetadata = MetadataUtils.findElementByElementPath(
+        store.editor.jsxMetadata,
+        props.path,
+      )
+      if (elementMetadata == null) {
+        return null
+      }
+
+      const elementGridProperties = elementMetadata.specialSizeMeasurements.elementGridProperties
+      if (elementGridProperties == null) {
+        return null
+      }
+
+      const originalGrid = findOriginalGrid(store.editor.jsxMetadata, EP.parentPath(props.path))
+      if (originalGrid == null) {
+        return null
+      }
+
+      const parentGridCellGlobalFrames =
+        elementMetadata.specialSizeMeasurements.parentGridCellGlobalFrames
+      if (parentGridCellGlobalFrames == null) {
+        return null
+      }
+
+      const cellBounds = getGridChildCellCoordBoundsFromCanvas(
+        elementMetadata,
+        parentGridCellGlobalFrames,
+      )
+      if (cellBounds == null) {
+        return null
+      }
+
+      if (parentGridCellGlobalFrames.length === 0) {
+        return null
+      }
+      const firstRow = parentGridCellGlobalFrames[0]
+      const cellBoundsColumnIndex = cellBounds.column - 1
+      const left = firstRow[cellBoundsColumnIndex].x
+      const width = getCellCanvasWidthFromBounds(
+        parentGridCellGlobalFrames,
+        cellBoundsColumnIndex,
+        cellBounds.width,
+      )
+
+      const cellBoundsRowIndex = cellBounds.row - 1
+      if (
+        parentGridCellGlobalFrames.length <= cellBoundsRowIndex ||
+        parentGridCellGlobalFrames[cellBoundsRowIndex].length === 0
+      ) {
+        return null
+      }
+      const firstColumn = parentGridCellGlobalFrames[cellBoundsRowIndex][0]
+      const top = firstColumn.y
+      const height = getCellCanvasHeightFromBounds(
+        parentGridCellGlobalFrames,
+        cellBoundsRowIndex,
+        cellBounds.height,
+      )
+
+      const gridRect = MetadataUtils.getFrameOrZeroRectInCanvasCoords(
+        originalGrid,
+        store.editor.jsxMetadata,
+      )
+
+      return {
+        columnStart: {
+          top: gridRect.y,
+          left: left,
+          position: elementGridProperties.gridColumnStart,
+          counterpart: elementGridProperties.gridColumnEnd,
+          bound: 'start',
+        },
+        columnEnd: {
+          top: gridRect.y,
+          left: left + width,
+          position: elementGridProperties.gridColumnEnd,
+          counterpart: elementGridProperties.gridColumnStart,
+          bound: 'end',
+        },
+        rowStart: {
+          top: top,
+          left: gridRect.x,
+          position: elementGridProperties.gridRowStart,
+          counterpart: elementGridProperties.gridRowEnd,
+          bound: 'start',
+        },
+        rowEnd: {
+          top: top + height,
+          left: gridRect.x,
+          position: elementGridProperties.gridRowEnd,
+          counterpart: elementGridProperties.gridRowStart,
+          bound: 'end',
+        },
+      }
+    },
+    'RulerMarkers markers',
+  )
+
+  if (markers == null) {
+    return null
+  }
+
+  return (
+    <React.Fragment>
+      <RulerMarkerIndicator marker={markers.columnStart} axis={'column'} />
+      <RulerMarkerIndicator marker={markers.columnEnd} axis={'column'} />
+      <RulerMarkerIndicator marker={markers.rowStart} axis={'row'} />
+      <RulerMarkerIndicator marker={markers.rowEnd} axis={'row'} />
+    </React.Fragment>
+  )
+})
+RulerMarkers.displayName = 'RulerMarkers'
+
+const RulerMarkerIndicator = React.memo(
+  (props: { marker: RulerMarkerPositionData; axis: 'row' | 'column' }) => {
+    const colorTheme = useColorTheme()
+
+    const markerType = getRulerMarkerType({
+      position: props.marker.position,
+      counterpart: props.marker.counterpart,
+      bound: props.marker.bound,
+    })
+    const markerIcon = rulerMarkerIcons[markerType][props.axis]
+
+    const canvasScale = useEditorState(
+      Substores.canvasOffset,
+      (store) => store.editor.canvas.scale,
+      'RulerMarkerIndicator canvasScale',
+    )
+
+    function skewMarkerPosition(axis: 'column' | 'row') {
+      if (props.axis === axis) {
+        return rulerMarkerIconSize
+      } else if (markerType === 'span-end') {
+        return rulerMarkerIconSize - 1 // adjust span end position so it just touches the grid line
+      } else {
+        return rulerMarkerIconSize / 2
+      }
+    }
+
+    const scaledTop = props.marker.top * canvasScale
+    const top = scaledTop - skewMarkerPosition('column')
+
+    const scaledLeft = props.marker.left * canvasScale
+    const left = scaledLeft - skewMarkerPosition('row')
+
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          top: top,
+          left: left,
+          color: colorTheme.primary.value,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: rulerMarkerIconSize,
+          width: rulerMarkerIconSize,
+          zoom: 1 / canvasScale,
+        }}
+      >
+        {markerIcon}
+      </div>
+    )
+  },
+)
+RulerMarkerIndicator.displayName = 'RulerMarkerIndicator'
+
+function getRulerMarkerType(props: {
+  position: GridPositionOrSpan | null
+  counterpart: GridPositionOrSpan | null
+  bound: 'start' | 'end'
+}): RulerMarkerType {
+  const isAuto =
+    isAutoGridPin(props.position) ||
+    (props.bound === 'start' && isGridSpan(props.position) && isAutoGridPin(props.counterpart))
+  const isSpanStart =
+    props.bound === 'start' && isGridSpan(props.position) && isGridSpan(props.counterpart)
+  const isSpanEnd =
+    props.bound === 'end' && (isGridSpan(props.position) || isGridSpan(props.counterpart))
+
+  if (isSpanStart) {
+    return 'span-start'
+  } else if (isSpanEnd) {
+    return 'span-end'
+  } else if (isAuto) {
+    return 'auto'
+  } else {
+    return 'pinned'
+  }
+}
+
+function getCellCanvasWidthFromBounds(
+  grid: CanvasRectangle[][],
+  index: number,
+  cells: number,
+): number {
+  if (grid.length === 0) {
+    return 0
+  }
+
+  const currentRow = grid[0]
+  if (currentRow.length <= index) {
+    return 0
+  }
+  if (cells <= 1) {
+    return currentRow[index].width
+  }
+
+  function getPadding() {
+    if (currentRow.length <= 1) {
+      return 0
+    }
+    return currentRow[1].x - (currentRow[0].x + currentRow[0].width)
+  }
+  const padding = getPadding()
+
+  return currentRow.slice(index + 1, index + cells).reduce((acc, curr) => {
+    return acc + curr.width + padding
+  }, currentRow[index].width)
+}
+
+function getCellCanvasHeightFromBounds(
+  grid: CanvasRectangle[][],
+  index: number,
+  cells: number,
+): number {
+  const columns = grid.map((row) => row[0])
+  if (columns.length <= index) {
+    return 0
+  }
+
+  const currentColumn = columns[index]
+
+  if (cells <= 1) {
+    return currentColumn.height
+  }
+
+  function getPadding() {
+    if (grid.length <= 1) {
+      return 0
+    }
+    return grid[1][0].y - (grid[0][0].y + grid[0][0].height)
+  }
+  const padding = getPadding()
+
+  return columns.slice(index + 1, index + cells).reduce((acc, curr) => {
+    return acc + curr.height + padding
+  }, currentColumn.height)
+}
diff --git a/editor/src/components/inspector/grid-helpers.ts b/editor/src/components/inspector/grid-helpers.ts
index 3b91b1feb7a1..da8f9b4a67c0 100644
--- a/editor/src/components/inspector/grid-helpers.ts
+++ b/editor/src/components/inspector/grid-helpers.ts
@@ -79,7 +79,7 @@ export function getTargetGridCellData(
     return null
   }
   const mousePos = offsetPoint(interactionData.dragStart, interactionData.drag)
-  const targetCellData = getClosestGridCellToPoint(gridCellGlobalFrames, mousePos)
+  const targetCellData = getClosestGridCellToPoint(gridCellGlobalFrames, mousePos, 'exclusive')
   if (targetCellData == null) {
     return null
   }

From 21024fe414849c4c8187fd9d5efc1c19155fcaa1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bertalan=20K=C3=B6rmendy?= <korber314@gmail.com>
Date: Wed, 20 Nov 2024 15:26:20 +0100
Subject: [PATCH 234/272] Style plugin-aware `useInspectorInfo` (#6655)

## Problem
`useInspectorInfo`, a widely used helper in the inspector, cannot read
element styles set by Tailwind

## Fix
The fix is made up from multiple pieces:
- I extended `StylePlugin` with a new function,
`readStyleFromElementProps`, which reads a given style info key from the
`JSXAttributes` passed to it. I updated both `InlineStylePlugin` and
`TailwindStylePlugin` to support this function, and updated all affected
tests. This change was originally prototyped on the
[Megaspike](https://github.com/concrete-utopia/utopia/pull/6574)
- I updated `useGetMultiselectedProps` to use
`StylePlugin.readStyleFromElementProps` when a style prop is read.
- I updated `CSSStylePropertyNotParsable` and `ParsedCSSStyleProperty`
to preserve the original value read from `projectContents`, in addition
to the parsed representation. This way, `CSSStyleProperties` can be used
by code that expect to work with this lower-level representation (such
as the internals of `useInspectorInfo`)
- I updated the `SET_PROP` and `UNSET_PROP` actions to use the
`setProperty` and `deleteProperty` commands under the hood. This way,
any editor code using these actions will be able to use the style
plugins to write element style. This change was originally prototyped on
the [Megaspike](https://github.com/concrete-utopia/utopia/pull/6574)

### Out of scope
This change only touches `useGetMultiselectedProps` from the internals
of `useInspectorInfo`. `useGetSpiedProps` is left unchanged, since the
values element style props set through Tailwind don't show up in
`allElementProps` (which is the data source for spied props)

## Manual Tests:
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/components/canvas/canvas-types.ts  | 16 +++-
 .../canvas/commands/utils/property-utils.ts   |  2 +-
 .../plugins/inline-style-plugin.spec.ts       | 29 +++++--
 .../canvas/plugins/inline-style-plugin.ts     | 17 ++--
 .../canvas/plugins/style-plugins.ts           |  8 +-
 .../canvas/plugins/tailwind-style-plugin.ts   | 82 +++++++++++-------
 .../src/components/editor/actions/actions.tsx | 84 ++++++++-----------
 .../inspector/common/property-path-hooks.ts   | 45 ++++++++--
 8 files changed, 182 insertions(+), 101 deletions(-)

diff --git a/editor/src/components/canvas/canvas-types.ts b/editor/src/components/canvas/canvas-types.ts
index 010fb804613f..218f168e7dec 100644
--- a/editor/src/components/canvas/canvas-types.ts
+++ b/editor/src/components/canvas/canvas-types.ts
@@ -1,4 +1,5 @@
 import type { ReactElement } from 'react'
+import type { JSExpression, PartOfJSXAttributeValue } from '../../core/shared/element-template'
 import { ElementInstanceMetadataMap } from '../../core/shared/element-template'
 import type { PropertyPath, ElementPath } from '../../core/shared/project-file-types'
 import type { KeysPressed } from '../../utils/keyboard'
@@ -543,11 +544,13 @@ interface CSSStylePropertyNotFound {
 
 interface CSSStylePropertyNotParsable {
   type: 'not-parsable'
+  originalValue: JSExpression | PartOfJSXAttributeValue
 }
 
 interface ParsedCSSStyleProperty<T> {
   type: 'property'
   tags: PropertyTag[]
+  propertyValue: JSExpression | PartOfJSXAttributeValue
   value: T
 }
 
@@ -560,12 +563,17 @@ export function cssStylePropertyNotFound(): CSSStylePropertyNotFound {
   return { type: 'not-found' }
 }
 
-export function cssStylePropertyNotParsable(): CSSStylePropertyNotParsable {
-  return { type: 'not-parsable' }
+export function cssStylePropertyNotParsable(
+  originalValue: JSExpression | PartOfJSXAttributeValue,
+): CSSStylePropertyNotParsable {
+  return { type: 'not-parsable', originalValue: originalValue }
 }
 
-export function cssStyleProperty<T>(value: T): ParsedCSSStyleProperty<T> {
-  return { type: 'property', tags: [], value: value }
+export function cssStyleProperty<T>(
+  value: T,
+  propertyValue: JSExpression | PartOfJSXAttributeValue,
+): ParsedCSSStyleProperty<T> {
+  return { type: 'property', tags: [], value: value, propertyValue: propertyValue }
 }
 
 export function maybePropertyValue<T>(property: CSSStyleProperty<T>): T | null {
diff --git a/editor/src/components/canvas/commands/utils/property-utils.ts b/editor/src/components/canvas/commands/utils/property-utils.ts
index 1a28302d8c7d..123bba748aae 100644
--- a/editor/src/components/canvas/commands/utils/property-utils.ts
+++ b/editor/src/components/canvas/commands/utils/property-utils.ts
@@ -7,7 +7,7 @@ import { modifyUnderlyingElementForOpenFile } from '../../../editor/store/editor
 import { patchParseSuccessAtElementPath } from '../patch-utils'
 import type { CSSNumber } from '../../../inspector/common/css-utils'
 import { isCSSNumber } from '../../../inspector/common/css-utils'
-import { type StyleInfo, isStyleInfoKey } from '../../canvas-types'
+import type { StyleInfo } from '../../canvas-types'
 
 export interface EditorStateWithPatch {
   editorStateWithChanges: EditorState
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts b/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts
index 7be9e9103a53..8ba0e9733b8c 100644
--- a/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts
@@ -1,10 +1,6 @@
 import * as EP from '../../../core/shared/element-path'
 import { cssNumber } from '../../inspector/common/css-utils'
-import {
-  cssStyleProperty,
-  cssStylePropertyNotFound,
-  cssStylePropertyNotParsable,
-} from '../canvas-types'
+import { cssStylePropertyNotFound } from '../canvas-types'
 import type { EditorRenderResult } from '../ui-jsx.test-utils'
 import { renderTestEditorWithCode } from '../ui-jsx.test-utils'
 import { InlineStylePlugin } from './inline-style-plugin'
@@ -45,8 +41,18 @@ export var storyboard = (
 
     expect(styleInfo).not.toBeNull()
     const { flexDirection, gap } = styleInfo!
-    expect(flexDirection).toEqual(cssStyleProperty('column'))
-    expect(gap).toEqual(cssStyleProperty(cssNumber(2, 'rem')))
+    expect(flexDirection).toMatchObject({
+      type: 'property',
+      tags: [],
+      value: 'column',
+      propertyValue: { value: 'column' },
+    })
+    expect(gap).toMatchObject({
+      type: 'property',
+      tags: [],
+      value: cssNumber(2, 'rem'),
+      propertyValue: { value: '2rem' },
+    })
   })
 
   it('can parse style info with missing/unparsable props', async () => {
@@ -88,7 +94,14 @@ export var storyboard = (
     expect(styleInfo).not.toBeNull()
     const { flexDirection, gap } = styleInfo!
     expect(flexDirection).toEqual(cssStylePropertyNotFound())
-    expect(gap).toEqual(cssStylePropertyNotParsable())
+    expect(gap).toMatchObject({
+      type: 'not-parsable',
+      originalValue: {
+        type: 'JS_PROPERTY_ACCESS',
+        onValue: { type: 'JS_IDENTIFIER', name: 'gap' },
+        property: 'small',
+      },
+    })
   })
 })
 
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.ts b/editor/src/components/canvas/plugins/inline-style-plugin.ts
index 0a7d9f1f95ae..226ff8a45401 100644
--- a/editor/src/components/canvas/plugins/inline-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.ts
@@ -1,5 +1,4 @@
 import type { JSXAttributes, PropertyPath } from 'utopia-shared/src/types'
-import type { StyleLayoutProp } from '../../../core/layout/layout-helpers-new'
 import * as Either from '../../../core/shared/either'
 import {
   getJSXAttributesAtPath,
@@ -9,7 +8,7 @@ import type { ModifiableAttribute } from '../../../core/shared/jsx-attributes'
 import { getJSXElementFromProjectContents } from '../../editor/store/editor-state'
 import { cssParsers, type ParsedCSSProperties } from '../../inspector/common/css-utils'
 import { stylePropPathMappingFn } from '../../inspector/common/property-path-hooks'
-import type { CSSStyleProperty } from '../canvas-types'
+import type { CSSStyleProperty, StyleInfo } from '../canvas-types'
 import {
   cssStyleProperty,
   cssStylePropertyNotParsable,
@@ -29,7 +28,7 @@ function getPropValue(attributes: JSXAttributes, path: PropertyPath): Modifiable
   return result.attribute
 }
 
-function getPropertyFromInstance<P extends StyleLayoutProp, T = ParsedCSSProperties[P]>(
+function getPropertyFromInstance<P extends keyof StyleInfo, T = ParsedCSSProperties[P]>(
   prop: P,
   attributes: JSXAttributes,
 ): CSSStyleProperty<NonNullable<T>> | null {
@@ -39,18 +38,24 @@ function getPropertyFromInstance<P extends StyleLayoutProp, T = ParsedCSSPropert
   }
   const simpleValue = jsxSimpleAttributeToValue(attribute)
   if (Either.isLeft(simpleValue)) {
-    return cssStylePropertyNotParsable()
+    return cssStylePropertyNotParsable(attribute)
   }
   const parser = cssParsers[prop] as (value: unknown) => Either.Either<string, T>
   const parsed = parser(simpleValue.value)
   if (Either.isLeft(parsed) || parsed.value == null) {
-    return cssStylePropertyNotParsable()
+    return cssStylePropertyNotParsable(attribute)
   }
-  return cssStyleProperty(parsed.value)
+  return cssStyleProperty(parsed.value, attribute)
 }
 
 export const InlineStylePlugin: StylePlugin = {
   name: 'Inline Style',
+  readStyleFromElementProps: <T extends keyof StyleInfo>(
+    attributes: JSXAttributes,
+    prop: T,
+  ): CSSStyleProperty<NonNullable<ParsedCSSProperties[T]>> | null => {
+    return getPropertyFromInstance(prop, attributes)
+  },
   styleInfoFactory:
     ({ projectContents }) =>
     (elementPath) => {
diff --git a/editor/src/components/canvas/plugins/style-plugins.ts b/editor/src/components/canvas/plugins/style-plugins.ts
index 5fa2e0aed628..c23215963f48 100644
--- a/editor/src/components/canvas/plugins/style-plugins.ts
+++ b/editor/src/components/canvas/plugins/style-plugins.ts
@@ -1,4 +1,4 @@
-import type { ElementPath } from 'utopia-shared/src/types'
+import type { ElementPath, JSXAttributes } from 'utopia-shared/src/types'
 import type { EditorState, EditorStatePatch } from '../../editor/store/editor-state'
 import type {
   InteractionLifecycle,
@@ -18,7 +18,9 @@ import type { EditorStateWithPatch } from '../commands/utils/property-utils'
 import { applyValuesAtPath } from '../commands/utils/property-utils'
 import * as PP from '../../../core/shared/property-path'
 import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
+import type { CSSStyleProperty } from '../canvas-types'
 import { isStyleInfoKey, type StyleInfo } from '../canvas-types'
+import type { ParsedCSSProperties } from '../../inspector/common/css-utils'
 
 export interface UpdateCSSProp {
   type: 'set'
@@ -51,6 +53,10 @@ export type StyleUpdate = UpdateCSSProp | DeleteCSSProp
 export interface StylePlugin {
   name: string
   styleInfoFactory: StyleInfoFactory
+  readStyleFromElementProps: <T extends keyof StyleInfo>(
+    attributes: JSXAttributes,
+    prop: T,
+  ) => CSSStyleProperty<NonNullable<ParsedCSSProperties[T]>> | null
   updateStyles: (
     editorState: EditorState,
     elementPath: ElementPath,
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
index 21d5508638a0..768f66dd6207 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -1,25 +1,33 @@
 import * as TailwindClassParser from '@xengine/tailwindcss-class-parser'
-import { isLeft } from '../../../core/shared/either'
+import { defaultEither, flatMapEither, isLeft } from '../../../core/shared/either'
 import { getClassNameAttribute } from '../../../core/tailwind/tailwind-options'
 import { getElementFromProjectContents } from '../../editor/store/editor-state'
-import type { Parser } from '../../inspector/common/css-utils'
+import type { ParsedCSSProperties, Parser } from '../../inspector/common/css-utils'
 import { cssParsers } from '../../inspector/common/css-utils'
 import { mapDropNulls } from '../../../core/shared/array-utils'
 import type { StylePlugin } from './style-plugins'
 import type { Config } from 'tailwindcss/types/config'
-import { cssStyleProperty, type CSSStyleProperty } from '../canvas-types'
+import type { StyleInfo } from '../canvas-types'
+import { cssStyleProperty, isStyleInfoKey, type CSSStyleProperty } from '../canvas-types'
 import * as UCL from './tailwind-style-plugin-utils/update-class-list'
 import { assertNever } from '../../../core/shared/utils'
+import {
+  jsxSimpleAttributeToValue,
+  getModifiableJSXAttributeAtPath,
+} from '../../../core/shared/jsx-attribute-utils'
+import { emptyComments, type JSXAttributes } from 'utopia-shared/src/types'
+import * as PP from '../../../core/shared/property-path'
+import { jsExpressionValue } from '../../../core/shared/element-template'
 
-function parseTailwindProperty<T>(
-  value: unknown,
-  parse: Parser<T>,
-): CSSStyleProperty<NonNullable<T>> | null {
-  const parsed = parse(value, null)
+function parseTailwindProperty<T extends keyof StyleInfo>(
+  value: string | number | undefined,
+  prop: T,
+): CSSStyleProperty<NonNullable<ParsedCSSProperties[T]>> | null {
+  const parsed = cssParsers[prop](value, null)
   if (isLeft(parsed) || parsed.value == null) {
     return null
   }
-  return cssStyleProperty(parsed.value)
+  return cssStyleProperty(parsed.value, jsExpressionValue(value, emptyComments))
 }
 
 const TailwindPropertyMapping: Record<string, string> = {
@@ -81,6 +89,25 @@ const underscoresToSpaces = (s: string | undefined) => s?.replace(/[-_]/g, ' ')
 
 export const TailwindPlugin = (config: Config | null): StylePlugin => ({
   name: 'Tailwind',
+  readStyleFromElementProps: <P extends keyof StyleInfo>(
+    attributes: JSXAttributes,
+    prop: P,
+  ): CSSStyleProperty<NonNullable<ParsedCSSProperties[P]>> | null => {
+    const classNameAttribute = defaultEither(
+      null,
+      flatMapEither(
+        (attr) => jsxSimpleAttributeToValue(attr),
+        getModifiableJSXAttributeAtPath(attributes, PP.create('className')),
+      ),
+    )
+
+    if (typeof classNameAttribute !== 'string') {
+      return null
+    }
+
+    const mapping = getTailwindClassMapping(classNameAttribute.split(' '), config)
+    return parseTailwindProperty(mapping[TailwindPropertyMapping[prop]], prop)
+  },
   styleInfoFactory:
     ({ projectContents }) =>
     (elementPath) => {
@@ -95,48 +122,45 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
       const mapping = getTailwindClassMapping(classList.split(' '), config)
 
       return {
-        gap: parseTailwindProperty(mapping[TailwindPropertyMapping.gap], cssParsers.gap),
+        gap: parseTailwindProperty(mapping[TailwindPropertyMapping.gap], 'gap'),
         flexDirection: parseTailwindProperty(
           mapping[TailwindPropertyMapping.flexDirection],
-          cssParsers.flexDirection,
-        ),
-        left: parseTailwindProperty(mapping[TailwindPropertyMapping.left], cssParsers.left),
-        right: parseTailwindProperty(mapping[TailwindPropertyMapping.right], cssParsers.right),
-        top: parseTailwindProperty(mapping[TailwindPropertyMapping.top], cssParsers.top),
-        bottom: parseTailwindProperty(mapping[TailwindPropertyMapping.bottom], cssParsers.bottom),
-        width: parseTailwindProperty(mapping[TailwindPropertyMapping.width], cssParsers.width),
-        height: parseTailwindProperty(mapping[TailwindPropertyMapping.height], cssParsers.height),
-        flexBasis: parseTailwindProperty(
-          mapping[TailwindPropertyMapping.flexBasis],
-          cssParsers.flexBasis,
+          'flexDirection',
         ),
+        left: parseTailwindProperty(mapping[TailwindPropertyMapping.left], 'left'),
+        right: parseTailwindProperty(mapping[TailwindPropertyMapping.right], 'right'),
+        top: parseTailwindProperty(mapping[TailwindPropertyMapping.top], 'top'),
+        bottom: parseTailwindProperty(mapping[TailwindPropertyMapping.bottom], 'bottom'),
+        width: parseTailwindProperty(mapping[TailwindPropertyMapping.width], 'width'),
+        height: parseTailwindProperty(mapping[TailwindPropertyMapping.height], 'height'),
+        flexBasis: parseTailwindProperty(mapping[TailwindPropertyMapping.flexBasis], 'flexBasis'),
         padding: parseTailwindProperty(
           underscoresToSpaces(mapping[TailwindPropertyMapping.padding]),
-          cssParsers.padding,
+          'padding',
         ),
         paddingTop: parseTailwindProperty(
           mapping[TailwindPropertyMapping.paddingTop],
-          cssParsers.paddingTop,
+          'paddingTop',
         ),
         paddingRight: parseTailwindProperty(
           mapping[TailwindPropertyMapping.paddingRight],
-          cssParsers.paddingRight,
+          'paddingRight',
         ),
         paddingBottom: parseTailwindProperty(
           mapping[TailwindPropertyMapping.paddingBottom],
-          cssParsers.paddingBottom,
+          'paddingBottom',
         ),
         paddingLeft: parseTailwindProperty(
           mapping[TailwindPropertyMapping.paddingLeft],
-          cssParsers.paddingLeft,
+          'paddingLeft',
         ),
-        zIndex: parseTailwindProperty(mapping[TailwindPropertyMapping.zIndex], cssParsers.zIndex),
+        zIndex: parseTailwindProperty(mapping[TailwindPropertyMapping.zIndex], 'zIndex'),
       }
     },
   updateStyles: (editorState, elementPath, updates) => {
     const propsToDelete = mapDropNulls(
       (update) =>
-        update.type !== 'delete' || TailwindPropertyMapping[update.property] == null
+        update.type !== 'delete' || TailwindPropertyMapping[update.property] == null // TODO: make this type-safe
           ? null
           : UCL.remove(TailwindPropertyMapping[update.property]),
       updates,
@@ -144,7 +168,7 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
 
     const propsToSet = mapDropNulls(
       (update) =>
-        update.type !== 'set' || TailwindPropertyMapping[update.property] == null
+        update.type !== 'set' || TailwindPropertyMapping[update.property] == null // TODO: make this type-safe
           ? null
           : UCL.add({
               property: TailwindPropertyMapping[update.property],
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index 2d158b0407b4..9e156336f069 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -630,10 +630,15 @@ import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 import { styleP } from '../../inspector/inspector-common'
 import { getUpdateOperationResult } from '../../../core/shared/import/import-operation-service'
 import { updateRequirements } from '../../../core/shared/import/project-health-check/utopia-requirements-service'
-import { applyValuesAtPath, deleteValuesAtPath } from '../../canvas/commands/utils/property-utils'
+import {
+  applyValuesAtPath,
+  deleteValuesAtPath,
+  maybeCssPropertyFromInlineStyle,
+} from '../../canvas/commands/utils/property-utils'
 import type { HuggingElementContentsStatus } from '../../../components/canvas/hugging-utils'
 import { getHuggingElementContentsStatus } from '../../../components/canvas/hugging-utils'
 import { createStoryboardFileIfNecessary } from '../../../core/shared/import/project-health-check/requirements/requirement-storyboard'
+import { setProperty } from '../../canvas/commands/set-property-command'
 
 export const MIN_CODE_PANE_REOPEN_WIDTH = 100
 
@@ -1727,50 +1732,41 @@ export const UPDATE_FNS = {
   },
   UNSET_PROPERTY: (action: UnsetProperty, editor: EditorModel): EditorModel => {
     // TODO also queue group true up, just like for SET_PROP
-    let unsetPropFailedMessage: string | null = null
-    const updatedEditor = modifyUnderlyingElementForOpenFile(
-      action.element,
-      editor,
-      (element) => {
-        const updatedProps = unsetJSXValueAtPath(element.props, action.property)
-        return foldEither(
-          (failureMessage) => {
-            unsetPropFailedMessage = failureMessage
-            return element
-          },
-          (updatedAttributes) => ({
-            ...element,
-            props: updatedAttributes,
-          }),
-          updatedProps,
-        )
-      },
-      (success) => success,
-    )
-    if (unsetPropFailedMessage != null) {
-      const toastAction = showToast(notice(unsetPropFailedMessage, 'ERROR'))
-      return UPDATE_FNS.ADD_TOAST(toastAction, editor)
-    } else {
-      return updatedEditor
-    }
+    // TODO this used to fire a toast if the prop couldn't be removed
+    return foldAndApplyCommandsSimple(editor, [
+      deleteProperties('always', action.element, [action.property]),
+    ])
   },
   SET_PROP: (action: SetProp, editor: EditorModel): EditorModel => {
     let setPropFailedMessage: string | null = null
     let newSelectedViews: Array<ElementPath> = editor.selectedViews
+    const prop = maybeCssPropertyFromInlineStyle(action.propertyPath)
+    const valueForStyleProp =
+      action.value.type === 'ATTRIBUTE_VALUE' &&
+      (typeof action.value.value === 'number' || typeof action.value.value === 'string')
+        ? action.value.value
+        : null
+
+    const editorWithPropSet =
+      prop == null || valueForStyleProp == null
+        ? applyValuesAtPath(editor, action.target, [
+            { path: action.propertyPath, value: action.value },
+          ]).editorStateWithChanges
+        : foldAndApplyCommandsSimple(editor, [
+            setProperty('always', action.target, PP.create('style', prop), valueForStyleProp),
+          ])
+
+    if (isJSXElement(action.value)) {
+      newSelectedViews = [EP.appendToPath(action.target, action.value.uid)]
+    }
     let updatedEditor = modifyUnderlyingTargetElement(
       action.target,
-      editor,
+      editorWithPropSet,
       (element) => {
         if (!isJSXElement(element)) {
           return element
         }
-        const updatedProps = setJSXValueAtPath(element.props, action.propertyPath, action.value)
-        // when this is a render prop we should select it
-        if (isJSXElement(action.value)) {
-          newSelectedViews = [EP.appendToPath(action.target, action.value.uid)]
-        }
         if (
-          isRight(updatedProps) &&
           PP.contains(
             [
               PP.create('style', 'top'),
@@ -1783,8 +1779,9 @@ export const UPDATE_FNS = {
             action.propertyPath,
           )
         ) {
+          // TODO: refactor this to read from the plugins
           const maybeInvalidGroupState = groupStateFromJSXElement(
-            { ...element, props: updatedProps.value },
+            element,
             action.target,
             editor.jsxMetadata,
             editor.elementPathTree,
@@ -1803,18 +1800,11 @@ export const UPDATE_FNS = {
             return element
           }
         }
-        return foldEither(
-          (failureMessage) => {
-            setPropFailedMessage = failureMessage
-            return element
-          },
-          (updatedAttributes) => ({
-            ...element,
-            // we round style.left/top/right/bottom/width/height pins for the modified element
-            props: roundAttributeLayoutValues(styleStringInArray, updatedAttributes),
-          }),
-          updatedProps,
-        )
+        return {
+          ...element,
+          // TODO: refactor this to use commands
+          props: roundAttributeLayoutValues(styleStringInArray, element.props),
+        }
       },
       (success, _, underlyingFilePath) => {
         const updatedImports = mergeImports(
diff --git a/editor/src/components/inspector/common/property-path-hooks.ts b/editor/src/components/inspector/common/property-path-hooks.ts
index cd7d469b963f..4bfb0b2b1f50 100644
--- a/editor/src/components/inspector/common/property-path-hooks.ts
+++ b/editor/src/components/inspector/common/property-path-hooks.ts
@@ -48,7 +48,7 @@ import type { StyleLayoutProp } from '../../../core/layout/layout-helpers-new'
 import { isHTMLComponent, isUtopiaAPIComponent } from '../../../core/model/project-file-utils'
 import { stripNulls } from '../../../core/shared/array-utils'
 import type { Either } from '../../../core/shared/either'
-import { eitherToMaybe, flatMapEither, isRight, left } from '../../../core/shared/either'
+import { eitherToMaybe, flatMapEither, isRight, left, right } from '../../../core/shared/either'
 import type {
   JSXAttributes,
   ComputedStyle,
@@ -92,6 +92,10 @@ import type { EditorAction } from '../../editor/action-types'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { eitherRight, fromTypeGuard } from '../../../core/shared/optics/optic-creators'
 import { modify } from '../../../core/shared/optics/optic-utilities'
+import { getActivePlugin } from '../../canvas/plugins/style-plugins'
+import { isStyleInfoKey, type StyleInfo } from '../../canvas/canvas-types'
+import { assertNever } from '../../../core/shared/utils'
+import { maybeCssPropertyFromInlineStyle } from '../../canvas/commands/utils/property-utils'
 
 export interface InspectorPropsContextData {
   selectedViews: Array<ElementPath>
@@ -744,10 +748,38 @@ const getModifiableAttributeResultToExpressionOptic = eitherRight<
   ModifiableAttribute
 >().compose(fromTypeGuard(isRegularJSXAttribute))
 
+function maybeStyleInfoKeyFromPropertyPath(propertyPath: PropertyPath): keyof StyleInfo | null {
+  const maybeCSSProp = maybeCssPropertyFromInlineStyle(propertyPath)
+  if (maybeCSSProp == null || !isStyleInfoKey(maybeCSSProp)) {
+    return null
+  }
+  return maybeCSSProp
+}
+
 export function useGetMultiselectedProps<P extends ParsedPropertiesKeys>(
   pathMappingFn: PathMappingFn<P>,
   propKeys: P[],
 ): MultiselectAtProps<P> {
+  const styleInfoReaderRef = useRefEditorState(
+    (store) =>
+      (props: JSXAttributes, prop: keyof StyleInfo): GetModifiableAttributeResult => {
+        const elementStyle = getActivePlugin(store.editor).readStyleFromElementProps(props, prop)
+        if (elementStyle == null) {
+          return left('not found')
+        }
+        switch (elementStyle.type) {
+          case 'not-found':
+            return right({ type: 'ATTRIBUTE_NOT_FOUND' })
+          case 'not-parsable':
+            return right(elementStyle.originalValue)
+          case 'property':
+            return right(elementStyle.propertyValue)
+          default:
+            assertNever(elementStyle)
+        }
+      },
+  )
+
   return useKeepReferenceEqualityIfPossible(
     useContextSelector(
       InspectorPropsContext,
@@ -755,10 +787,13 @@ export function useGetMultiselectedProps<P extends ParsedPropertiesKeys>(
         const keyFn = (propKey: P) => propKey
         const mapFn = (propKey: P) => {
           return contextData.editedMultiSelectedProps.map((props) => {
-            const result = getModifiableJSXAttributeAtPath(
-              props,
-              pathMappingFn(propKey, contextData.targetPath),
-            )
+            const targetPath = pathMappingFn(propKey, contextData.targetPath)
+            const maybeStyleInfoKey = maybeStyleInfoKeyFromPropertyPath(targetPath)
+            const result =
+              maybeStyleInfoKey != null
+                ? styleInfoReaderRef.current(props, maybeStyleInfoKey)
+                : getModifiableJSXAttributeAtPath(props, targetPath)
+
             // This wipes the uid from any `JSExpression` values we may have retrieved,
             // as that can cause the deep equality check to fail for different elements
             // with the same value for a given property.

From c42354c31e8e8e7f099aa204220eec0ee7b4064f Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:40:21 +0100
Subject: [PATCH 235/272] Remove unused SetElementsToRerender action (#6665)

**Problem:**
SetElementsToRerender action is not used anymore, let's delete it.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/components/editor/action-types.ts         |  6 ------
 editor/src/components/editor/actions/action-utils.ts |  1 -
 editor/src/components/editor/actions/actions.tsx     | 10 ----------
 editor/src/components/editor/store/editor-update.tsx |  2 --
 4 files changed, 19 deletions(-)

diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts
index 552ecdf9b594..18165510ac49 100644
--- a/editor/src/components/editor/action-types.ts
+++ b/editor/src/components/editor/action-types.ts
@@ -1104,11 +1104,6 @@ export interface RunEscapeHatch {
   setHuggingParentToFixed: SetHuggingParentToFixed
 }
 
-export interface SetElementsToRerender {
-  action: 'SET_ELEMENTS_TO_RERENDER'
-  value: ElementsToRerender
-}
-
 export type ToggleSelectionLock = {
   action: 'TOGGLE_SELECTION_LOCK'
   targets: Array<ElementPath>
@@ -1376,7 +1371,6 @@ export type EditorAction =
   | SetResizeOptionsTargetOptions
   | ForceParseFile
   | RunEscapeHatch
-  | SetElementsToRerender
   | ToggleSelectionLock
   | UpdateAgainstGithub
   | SetImageDragSessionState
diff --git a/editor/src/components/editor/actions/action-utils.ts b/editor/src/components/editor/actions/action-utils.ts
index 9b18421f0a9b..ae7d431c9904 100644
--- a/editor/src/components/editor/actions/action-utils.ts
+++ b/editor/src/components/editor/actions/action-utils.ts
@@ -119,7 +119,6 @@ export function isTransientAction(action: EditorAction): boolean {
     case 'UPDATE_INTERACTION_SESSION':
     case 'UPDATE_DRAG_INTERACTION_DATA':
     case 'SET_USERS_PREFERRED_STRATEGY':
-    case 'SET_ELEMENTS_TO_RERENDER':
     case 'TOGGLE_SELECTION_LOCK':
     case 'UPDATE_GITHUB_OPERATIONS':
     case 'SET_REFRESHING_DEPENDENCIES':
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index 9e156336f069..f73ec250aba8 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -251,7 +251,6 @@ import type {
   SetCodeEditorVisibility,
   SetCurrentTheme,
   SetCursorOverlay,
-  SetElementsToRerender,
   SetFilebrowserDropTarget,
   SetFilebrowserRenamingTarget,
   SetFocusedElement,
@@ -5756,15 +5755,6 @@ export const UPDATE_FNS = {
       return editor
     }
   },
-  SET_ELEMENTS_TO_RERENDER: (action: SetElementsToRerender, editor: EditorModel): EditorModel => {
-    return {
-      ...editor,
-      canvas: {
-        ...editor.canvas,
-        elementsToRerender: action.value,
-      },
-    }
-  },
   TOGGLE_SELECTION_LOCK: (action: ToggleSelectionLock, editor: EditorModel): EditorModel => {
     const targets = action.targets
     return targets.reduce((working, target) => {
diff --git a/editor/src/components/editor/store/editor-update.tsx b/editor/src/components/editor/store/editor-update.tsx
index a7782b72af78..6a636b69c0a1 100644
--- a/editor/src/components/editor/store/editor-update.tsx
+++ b/editor/src/components/editor/store/editor-update.tsx
@@ -447,8 +447,6 @@ export function runSimpleLocalEditorAction(
       return UPDATE_FNS.FORCE_PARSE_FILE(action, state)
     case 'RUN_ESCAPE_HATCH':
       return UPDATE_FNS.RUN_ESCAPE_HATCH(action, state, builtInDependencies)
-    case 'SET_ELEMENTS_TO_RERENDER':
-      return UPDATE_FNS.SET_ELEMENTS_TO_RERENDER(action, state)
     case 'TOGGLE_SELECTION_LOCK':
       return UPDATE_FNS.TOGGLE_SELECTION_LOCK(action, state)
     case 'UPDATE_AGAINST_GITHUB':

From f68eaf0bebcc105075626e9ff57c55b33992551e Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Thu, 21 Nov 2024 12:01:54 +0100
Subject: [PATCH 236/272] Fix not found attribute styleInfoReader result
 (#6668)

**Problem:**
StyleInfoReader returns `left('not found')` for attributes where there
is no relevant tailwind classes set.
But the features expect `right({ type: 'ATTRIBUTE_NOT_FOUND' })` result
in these cases.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/components/inspector/common/property-path-hooks.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/src/components/inspector/common/property-path-hooks.ts b/editor/src/components/inspector/common/property-path-hooks.ts
index 4bfb0b2b1f50..1c8c719c6911 100644
--- a/editor/src/components/inspector/common/property-path-hooks.ts
+++ b/editor/src/components/inspector/common/property-path-hooks.ts
@@ -765,7 +765,7 @@ export function useGetMultiselectedProps<P extends ParsedPropertiesKeys>(
       (props: JSXAttributes, prop: keyof StyleInfo): GetModifiableAttributeResult => {
         const elementStyle = getActivePlugin(store.editor).readStyleFromElementProps(props, prop)
         if (elementStyle == null) {
-          return left('not found')
+          return right({ type: 'ATTRIBUTE_NOT_FOUND' })
         }
         switch (elementStyle.type) {
           case 'not-found':

From 80561fcf8cfbf02922db32a74223eb6304338fbc Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 21 Nov 2024 12:46:08 +0100
Subject: [PATCH 237/272] Grid ruler marker labels (#6664)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Problem:**

Ruler markers should show a label with the respective CSS value when
hovered.

**Fix:**

1. Show labels with the printed pin CSS when hovering a ruler marker.
For line names, show the line name. For named spans, show `span
the-area`.
2. Adjust the markers so they respect the verbatim CSS without special
treatment for span-end/start (which we could revisit in the future)
3. Adjust (and make more readable) the invididual marker skew values,
which need to be customized in a bunch of combinations (it's subtle, but
it's there!). I ended up using a bunch of named conditions, which after
some tinkering felt much more readable than a cluster of ifs or
switches. Better ideas are more than welcome tho! 🤗


https://github.com/user-attachments/assets/063adeb5-0b09-4a09-8603-77448bfd0cb2

| Config | Before | After |
|--------|---------|-----------|
| `gridColumn: auto`, `gridRow: auto` | <img width="1120"
alt="Screenshot 2024-11-20 at 15 30 23"
src="https://github.com/user-attachments/assets/c2d2b355-0312-46f4-a34c-f10f4619ddb8">
| <img width="1120" alt="Screenshot 2024-11-20 at 15 30 20"
src="https://github.com/user-attachments/assets/a733ca4c-1d77-4d26-925e-8ce4161a3989">
|
| `gridColumn: 3`, `gridRow: 1` | <img width="1120" alt="Screenshot
2024-11-20 at 15 30 36"
src="https://github.com/user-attachments/assets/b5365ca3-9d2b-4c26-ab32-1811bbf82cb4">
| <img width="1120" alt="Screenshot 2024-11-20 at 15 30 35"
src="https://github.com/user-attachments/assets/ae8a1a1c-67a5-466a-a46c-233f98553705">
|
| `gridColumn: span 2 / 4`, `gridRow: span 3` | <img width="1133"
alt="Screenshot 2024-11-20 at 15 35 51"
src="https://github.com/user-attachments/assets/dbb8d3e3-89ef-4262-90df-f222bb828c83">
| <img width="1133" alt="Screenshot 2024-11-20 at 15 35 50"
src="https://github.com/user-attachments/assets/018bd102-7331-4fbb-8ba6-8ab3316d4464">
|

<img width="1120" alt="Screenshot 2024-11-20 at 15 31 22"
src="https://github.com/user-attachments/assets/83057672-e2e5-4307-91ab-bd1a01e8a520">
<img width="1120" alt="Screenshot 2024-11-20 at 15 31 27"
src="https://github.com/user-attachments/assets/4bb71dab-d3d6-46e7-b6ec-6e10a726ae7e">
<img width="1133" alt="Screenshot 2024-11-20 at 15 31 35"
src="https://github.com/user-attachments/assets/453040c3-7151-4ff8-bfc8-73ed9925307b">






**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6663
---
 .../canvas/controls/grid-controls.tsx         | 186 ++++++++++++++----
 editor/src/utils/feature-switches.ts          |   3 +
 2 files changed, 150 insertions(+), 39 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index aa6503487aee..c7d500b72dfc 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -76,7 +76,6 @@ import {
   getGlobalFrameOfGridCellFromMetadata,
   getGridRelatedIndexes,
   getGridElementPinState,
-  gridPositionToValue,
   printPin,
   getGridIdentifierContainerOrComponentPath,
   gridIdentifierToString,
@@ -120,6 +119,7 @@ import { styleStringInArray } from '../../../utils/common-constants'
 import { gridContainerIdentifier, type GridIdentifier } from '../../editor/store/editor-state'
 import type { RulerMarkerType } from './grid-controls-ruler-markers'
 import { rulerMarkerIcons } from './grid-controls-ruler-markers'
+import { isFeatureEnabled } from '../../../utils/feature-switches'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -1213,9 +1213,12 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
           )
         })}
         {/* Ruler markers */}
-        {selectedGridItems.map((path) => {
-          return <RulerMarkers key={`ruler-markers-${EP.toString(path)}`} path={path} />
-        })}
+        {when(
+          isFeatureEnabled('Grid Ruler Markers'),
+          selectedGridItems.map((path) => {
+            return <RulerMarkers key={`ruler-markers-${EP.toString(path)}`} path={path} />
+          }),
+        )}
         <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
       </CanvasOffsetWrapper>
     </div>
@@ -2186,6 +2189,7 @@ function useSelectedGridItems(): ElementPath[] {
 const rulerMarkerIconSize = 12 // px
 
 type RulerMarkerData = {
+  parentGrid: GridContainerProperties
   columnStart: RulerMarkerPositionData
   columnEnd: RulerMarkerPositionData
   rowStart: RulerMarkerPositionData
@@ -2196,7 +2200,6 @@ type RulerMarkerPositionData = {
   top: number
   left: number
   position: GridPositionOrSpan | null
-  counterpart: GridPositionOrSpan | null
   bound: 'start' | 'end'
 }
 
@@ -2217,6 +2220,8 @@ const RulerMarkers = React.memo((props: { path: ElementPath }) => {
         return null
       }
 
+      const parentGrid = elementMetadata.specialSizeMeasurements.parentContainerGridProperties
+
       const originalGrid = findOriginalGrid(store.editor.jsxMetadata, EP.parentPath(props.path))
       if (originalGrid == null) {
         return null
@@ -2269,32 +2274,29 @@ const RulerMarkers = React.memo((props: { path: ElementPath }) => {
       )
 
       return {
+        parentGrid: parentGrid,
         columnStart: {
           top: gridRect.y,
           left: left,
           position: elementGridProperties.gridColumnStart,
-          counterpart: elementGridProperties.gridColumnEnd,
           bound: 'start',
         },
         columnEnd: {
           top: gridRect.y,
           left: left + width,
           position: elementGridProperties.gridColumnEnd,
-          counterpart: elementGridProperties.gridColumnStart,
           bound: 'end',
         },
         rowStart: {
           top: top,
           left: gridRect.x,
           position: elementGridProperties.gridRowStart,
-          counterpart: elementGridProperties.gridRowEnd,
           bound: 'start',
         },
         rowEnd: {
           top: top + height,
           left: gridRect.x,
           position: elementGridProperties.gridRowEnd,
-          counterpart: elementGridProperties.gridRowStart,
           bound: 'end',
         },
       }
@@ -2308,22 +2310,37 @@ const RulerMarkers = React.memo((props: { path: ElementPath }) => {
 
   return (
     <React.Fragment>
-      <RulerMarkerIndicator marker={markers.columnStart} axis={'column'} />
-      <RulerMarkerIndicator marker={markers.columnEnd} axis={'column'} />
-      <RulerMarkerIndicator marker={markers.rowStart} axis={'row'} />
-      <RulerMarkerIndicator marker={markers.rowEnd} axis={'row'} />
+      <RulerMarkerIndicator
+        parentGrid={markers.parentGrid}
+        marker={markers.columnStart}
+        axis={'column'}
+      />
+      <RulerMarkerIndicator
+        parentGrid={markers.parentGrid}
+        marker={markers.columnEnd}
+        axis={'column'}
+      />
+      <RulerMarkerIndicator
+        parentGrid={markers.parentGrid}
+        marker={markers.rowStart}
+        axis={'row'}
+      />
+      <RulerMarkerIndicator parentGrid={markers.parentGrid} marker={markers.rowEnd} axis={'row'} />
     </React.Fragment>
   )
 })
 RulerMarkers.displayName = 'RulerMarkers'
 
 const RulerMarkerIndicator = React.memo(
-  (props: { marker: RulerMarkerPositionData; axis: 'row' | 'column' }) => {
+  (props: {
+    parentGrid: GridContainerProperties
+    marker: RulerMarkerPositionData
+    axis: 'row' | 'column'
+  }) => {
     const colorTheme = useColorTheme()
 
     const markerType = getRulerMarkerType({
       position: props.marker.position,
-      counterpart: props.marker.counterpart,
       bound: props.marker.bound,
     })
     const markerIcon = rulerMarkerIcons[markerType][props.axis]
@@ -2334,21 +2351,24 @@ const RulerMarkerIndicator = React.memo(
       'RulerMarkerIndicator canvasScale',
     )
 
-    function skewMarkerPosition(axis: 'column' | 'row') {
-      if (props.axis === axis) {
-        return rulerMarkerIconSize
-      } else if (markerType === 'span-end') {
-        return rulerMarkerIconSize - 1 // adjust span end position so it just touches the grid line
-      } else {
-        return rulerMarkerIconSize / 2
-      }
-    }
-
     const scaledTop = props.marker.top * canvasScale
-    const top = scaledTop - skewMarkerPosition('column')
+    const top =
+      scaledTop -
+      skewMarkerPosition(props.axis === 'column', props.axis, props.marker.bound, markerType)
 
     const scaledLeft = props.marker.left * canvasScale
-    const left = scaledLeft - skewMarkerPosition('row')
+    const left =
+      scaledLeft -
+      skewMarkerPosition(props.axis === 'row', props.axis, props.marker.bound, markerType)
+
+    const labelText = React.useMemo(() => {
+      if (props.marker.position == null) {
+        return null
+      }
+      return printPin(props.parentGrid, props.marker.position, props.axis)
+    }, [props.marker, props.parentGrid, props.axis])
+
+    const labelClass = 'ruler-marker-label'
 
     return (
       <div
@@ -2357,15 +2377,45 @@ const RulerMarkerIndicator = React.memo(
           top: top,
           left: left,
           color: colorTheme.primary.value,
+          maxHeight: rulerMarkerIconSize,
+          maxWidth: rulerMarkerIconSize,
           display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: rulerMarkerIconSize,
-          width: rulerMarkerIconSize,
           zoom: 1 / canvasScale,
         }}
+        css={{
+          [`> .${labelClass}`]: {
+            visibility: 'hidden',
+          },
+          ':hover': {
+            [`> .${labelClass}`]: {
+              visibility: 'visible',
+            },
+          },
+        }}
       >
         {markerIcon}
+        {when(
+          labelText != null,
+          <div
+            className={labelClass}
+            style={{
+              position: 'absolute',
+              background: colorTheme.primary.value,
+              borderRadius: 2,
+              padding: '3px 6px',
+              color: colorTheme.white.value,
+              height: 20,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              top: props.axis === 'column' ? -23 : 0,
+              left: props.axis === 'column' ? 0 : undefined,
+              right: props.axis === 'row' ? rulerMarkerIconSize + 1 : undefined,
+            }}
+          >
+            {labelText}
+          </div>,
+        )}
       </div>
     )
   },
@@ -2374,16 +2424,11 @@ RulerMarkerIndicator.displayName = 'RulerMarkerIndicator'
 
 function getRulerMarkerType(props: {
   position: GridPositionOrSpan | null
-  counterpart: GridPositionOrSpan | null
   bound: 'start' | 'end'
 }): RulerMarkerType {
-  const isAuto =
-    isAutoGridPin(props.position) ||
-    (props.bound === 'start' && isGridSpan(props.position) && isAutoGridPin(props.counterpart))
-  const isSpanStart =
-    props.bound === 'start' && isGridSpan(props.position) && isGridSpan(props.counterpart)
-  const isSpanEnd =
-    props.bound === 'end' && (isGridSpan(props.position) || isGridSpan(props.counterpart))
+  const isAuto = isAutoGridPin(props.position)
+  const isSpanStart = props.bound === 'start' && isGridSpan(props.position)
+  const isSpanEnd = props.bound === 'end' && isGridSpan(props.position)
 
   if (isSpanStart) {
     return 'span-start'
@@ -2454,3 +2499,66 @@ function getCellCanvasHeightFromBounds(
     return acc + curr.height + padding
   }, currentColumn.height)
 }
+
+// This function returns the amount of pixels used to adjust the position of
+// individual ruler markers, which need specific skews based on their shape.
+function skewMarkerPosition(
+  isOnTheSameAxis: boolean,
+  axis: 'column' | 'row',
+  bound: 'start' | 'end',
+  markerType: RulerMarkerType,
+): number {
+  if (isOnTheSameAxis) {
+    return rulerMarkerIconSize
+  }
+
+  // span-end triangle, on the column
+  const spanEndColumn = axis === 'column' && markerType === 'span-end'
+  if (spanEndColumn) {
+    return 10
+  }
+  const pinnedEndColumn = axis === 'column' && markerType === 'pinned'
+  if (pinnedEndColumn) {
+    return 5
+  }
+  // any other ending marker, on the column
+  const endColumn = bound === 'end' && axis === 'column'
+  if (endColumn) {
+    return 2
+  }
+
+  // span-end triangle, on the row
+  const spanEndRow = axis === 'row' && markerType === 'span-end'
+  if (spanEndRow) {
+    return 9
+  }
+  // any other ending marker, on the row
+  const endRow = bound === 'end' && axis === 'row'
+  if (endRow) {
+    return 6
+  }
+
+  // span-start triangle, on the column
+  const spanStartColumn = axis === 'column' && markerType === 'span-start'
+  if (spanStartColumn) {
+    return 0
+  }
+  // any starting marker, on the column
+  const startColumn = bound === 'start' && axis === 'column'
+  if (startColumn) {
+    return 5
+  }
+
+  // span-start starting triangle, on the row
+  const spanStartRow = axis === 'row' && markerType === 'span-start'
+  if (spanStartRow) {
+    return 0
+  }
+  // any other starting marker, on the row
+  const startRow = bound === 'start' && axis === 'row'
+  if (startRow) {
+    return 4
+  }
+
+  return 0
+}
diff --git a/editor/src/utils/feature-switches.ts b/editor/src/utils/feature-switches.ts
index fab803319515..4b3344b20189 100644
--- a/editor/src/utils/feature-switches.ts
+++ b/editor/src/utils/feature-switches.ts
@@ -24,6 +24,7 @@ export type FeatureName =
   | 'Tailwind'
   | 'Import Wizard'
   | 'Show Debug Features'
+  | 'Grid Ruler Markers'
 
 export const AllFeatureNames: FeatureName[] = [
   // 'Dragging Reparents By Default', // Removing this option so that we can experiment on this later
@@ -48,6 +49,7 @@ export const AllFeatureNames: FeatureName[] = [
   'Canvas Fast Selection Hack',
   'Tailwind',
   'Import Wizard',
+  'Grid Ruler Markers',
 ]
 
 let FeatureSwitches: { [feature in FeatureName]: boolean } = {
@@ -72,6 +74,7 @@ let FeatureSwitches: { [feature in FeatureName]: boolean } = {
   'Canvas Fast Selection Hack': true,
   'Import Wizard': !IS_TEST_ENVIRONMENT,
   'Show Debug Features': false,
+  'Grid Ruler Markers': false,
 }
 
 export const STEGANOGRAPHY_ENABLED = false

From a4cf3318fa7456ca3a2fd9f0e80102940a8bad0b Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:29:21 +0200
Subject: [PATCH 238/272] feat(import): send import results to discord (#6662)

This PR adds the ability to send github import results (errors/warnings)
to Discord (to the channel `#site-import-webhook`).

**Details:**
1. Added a generic API endpoint for sending messages to Discord from our
code. We use `discord-webhook-node` to format the message. The generic
logic is here:
[utopia-remix/app/util/discordWebhookUtils.ts](https://github.com/concrete-utopia/utopia/pull/6662/files#diff-77fb1f38c2e0b74476d2dac0b094d0c3f56cd598ca46f5ba2f348dd1afd8c4ae)
2. The code in the client that sends the results, here:
[editor/src/core/shared/import/import-operation-service.ts](https://github.com/concrete-utopia/utopia/pull/6662/files#diff-426bff74c9da628f136029668cad91728508ef49a539c96a379c8c1e3f70e150R250-R265)
3. The code in the server that builds the textual site import message
here:
[utopia-remix/app/handlers/discordMessageBuilder.ts](https://github.com/concrete-utopia/utopia/pull/6662/files#diff-d2102489b75734896e5f1e06678c3f0ca926650eb08cdd14e00e79315f947302R22-R80)

No other logic was changed, the rest of the code changes are mainly
refactors / types.

The code is generic and we can later
[add](https://github.com/concrete-utopia/utopia/pull/6662/files#diff-77fb1f38c2e0b74476d2dac0b094d0c3f56cd598ca46f5ba2f348dd1afd8c4aeR20-R22)
more Discord webhooks for other functionalities, easily.
The webhook url for the specific channel is hidden in an env var -
`DISCORD_WEBHOOK_SITE_IMPORT`, it is already set on our
staging/production servers, and currently not on local machines.

**Messages Example:**

<img width="434" alt="image"
src="https://github.com/user-attachments/assets/3b991dc1-f315-48b0-bccf-1d3df66591af">

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 .../src/components/editor/actions/actions.tsx | 16 ++--
 .../editor/import-wizard/components.tsx       | 49 +----------
 .../import-wizard/import-wizard-helpers.tsx   | 49 +++++++++++
 .../editor/import-wizard/import-wizard.tsx    | 32 ++++++--
 editor/src/components/editor/server.ts        | 17 ++++
 .../github/github-repository-clone-flow.tsx   | 12 +--
 .../shared/github/operations/load-branch.ts   | 14 +---
 .../shared/import/import-operation-service.ts | 69 ++++++++++++++++
 .../shared/import/import-operation-types.ts   |  2 +-
 utopia-remix/app/env.server.ts                |  2 +
 .../app/handlers/discordMessageBuilder.ts     | 81 +++++++++++++++++++
 .../app/routes/internal.discord.webhook.ts    | 36 +++++++++
 utopia-remix/app/util/assertNever.ts          |  6 ++
 .../app/util/discord-webhook-node.d.ts        | 69 ++++++++++++++++
 utopia-remix/app/util/discordWebhookUtils.ts  | 72 +++++++++++++++++
 utopia-remix/package.json                     |  2 +
 utopia-remix/pnpm-lock.yaml                   | 57 +++++++++++++
 utopia-shared/src/types/discord-webhook.ts    | 35 ++++++++
 utopia-shared/src/types/index.ts              |  1 +
 19 files changed, 545 insertions(+), 76 deletions(-)
 create mode 100644 editor/src/components/editor/import-wizard/import-wizard-helpers.tsx
 create mode 100644 utopia-remix/app/handlers/discordMessageBuilder.ts
 create mode 100644 utopia-remix/app/routes/internal.discord.webhook.ts
 create mode 100644 utopia-remix/app/util/discord-webhook-node.d.ts
 create mode 100644 utopia-remix/app/util/discordWebhookUtils.ts
 create mode 100644 utopia-shared/src/types/discord-webhook.ts

diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index f73ec250aba8..de08aba96446 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -627,7 +627,10 @@ import { canCondenseJSXElementChild } from '../../../utils/can-condense'
 import { getNavigatorTargetsFromEditorState } from '../../navigator/navigator-utils'
 import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 import { styleP } from '../../inspector/inspector-common'
-import { getUpdateOperationResult } from '../../../core/shared/import/import-operation-service'
+import {
+  getUpdateOperationResult,
+  notifyImportStatusToDiscord,
+} from '../../../core/shared/import/import-operation-service'
 import { updateRequirements } from '../../../core/shared/import/project-health-check/utopia-requirements-service'
 import {
   applyValuesAtPath,
@@ -2191,12 +2194,15 @@ export const UPDATE_FNS = {
     }
   },
   UPDATE_IMPORT_STATUS: (action: UpdateImportStatus, editor: EditorModel): EditorModel => {
+    const newImportState = {
+      ...editor.importState,
+      importStatus: action.importStatus,
+    }
+    // side effect ☢️
+    notifyImportStatusToDiscord(newImportState, editor.projectName)
     return {
       ...editor,
-      importState: {
-        ...editor.importState,
-        importStatus: action.importStatus,
-      },
+      importState: newImportState,
     }
   },
   UPDATE_PROJECT_REQUIREMENTS: (
diff --git a/editor/src/components/editor/import-wizard/components.tsx b/editor/src/components/editor/import-wizard/components.tsx
index 24674d81b6e5..d23b51c3b26d 100644
--- a/editor/src/components/editor/import-wizard/components.tsx
+++ b/editor/src/components/editor/import-wizard/components.tsx
@@ -7,9 +7,9 @@ import type {
   ImportOperation,
 } from '../../../core/shared/import/import-operation-types'
 import { ImportOperationResult } from '../../../core/shared/import/import-operation-types'
-import { assertNever } from '../../../core/shared/utils'
 import { Icn, Icons, useColorTheme } from '../../../uuiui'
 import { GithubSpinner } from '../../../components/navigator/left-pane/github-pane/github-spinner'
+import { getImportOperationTextAsJsx } from './import-wizard-helpers'
 
 export function OperationLine({ operation }: { operation: ImportOperation }) {
   const operationRunningStatus = React.useMemo(() => {
@@ -46,7 +46,7 @@ export function OperationLine({ operation }: { operation: ImportOperation }) {
     >
       <OperationLineContent textColor={textColor}>
         <OperationIcon runningStatus={operationRunningStatus} result={operation.result} />
-        <div>{getImportOperationText(operation)}</div>
+        <div>{getImportOperationTextAsJsx(operation)}</div>
         <div>
           <TimeFromInSeconds operation={operation} runningStatus={operationRunningStatus} />
         </div>
@@ -246,48 +246,3 @@ function OperationLineContent({
     </div>
   )
 }
-
-function getImportOperationText(operation: ImportOperation): React.ReactNode {
-  if (operation.text != null) {
-    return operation.text
-  }
-  switch (operation.type) {
-    case 'loadBranch':
-      if (operation.branchName != null) {
-        return (
-          <span>
-            Fetching branch{' '}
-            <strong>
-              {operation.githubRepo?.owner}/{operation.githubRepo?.repository}@
-              {operation.branchName}
-            </strong>
-          </span>
-        )
-      } else {
-        return (
-          <span>
-            Fetching repository{' '}
-            <strong>
-              {operation.githubRepo?.owner}/{operation.githubRepo?.repository}
-            </strong>
-          </span>
-        )
-      }
-    case 'fetchDependency':
-      return `Fetching ${operation.dependencyName}@${operation.dependencyVersion}`
-    case 'parseFiles':
-      return 'Parsing files'
-    case 'refreshDependencies':
-      return 'Fetching dependencies'
-    case 'checkRequirementsPreParse':
-      return 'Validating code'
-    case 'checkRequirementsPostParse':
-      return 'Checking Utopia requirements'
-    case 'checkRequirementAndFixPreParse':
-      return operation.text
-    case 'checkRequirementAndFixPostParse':
-      return operation.text
-    default:
-      assertNever(operation)
-  }
-}
diff --git a/editor/src/components/editor/import-wizard/import-wizard-helpers.tsx b/editor/src/components/editor/import-wizard/import-wizard-helpers.tsx
new file mode 100644
index 000000000000..226649100353
--- /dev/null
+++ b/editor/src/components/editor/import-wizard/import-wizard-helpers.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react'
+import {
+  ImportOperationResult,
+  type ImportOperation,
+} from '../../../core/shared/import/import-operation-types'
+import { assertNever } from '../../../core/shared/utils'
+
+export function getImportOperationText(operation: ImportOperation): string {
+  if (operation.text != null) {
+    return operation.text
+  }
+  switch (operation.type) {
+    case 'loadBranch':
+      const action =
+        operation.result == ImportOperationResult.Error ||
+        operation.result == ImportOperationResult.CriticalError
+          ? 'Error Fetching'
+          : 'Fetching'
+      if (operation.branchName != null) {
+        return `${action} branch **${operation.githubRepo?.owner}/${operation.githubRepo?.repository}@${operation.branchName}**`
+      } else {
+        return `${action} repository **${operation.githubRepo?.owner}/${operation.githubRepo?.repository}**`
+      }
+    case 'fetchDependency':
+      return `Fetching ${operation.dependencyName}@${operation.dependencyVersion}`
+    case 'parseFiles':
+      return 'Parsing files'
+    case 'refreshDependencies':
+      return 'Fetching dependencies'
+    case 'checkRequirementsPreParse':
+      return 'Validating code'
+    case 'checkRequirementsPostParse':
+      return 'Checking Utopia requirements'
+    case 'checkRequirementAndFixPreParse':
+      return operation.text
+    case 'checkRequirementAndFixPostParse':
+      return operation.text
+    default:
+      assertNever(operation)
+  }
+}
+
+export function getImportOperationTextAsJsx(operation: ImportOperation): React.ReactNode {
+  const text = getImportOperationText(operation)
+  const nodes = text.split('**').map((part, index) => {
+    return index % 2 == 0 ? part : <strong key={part}>{part}</strong>
+  })
+  return <span>{nodes}</span>
+}
diff --git a/editor/src/components/editor/import-wizard/import-wizard.tsx b/editor/src/components/editor/import-wizard/import-wizard.tsx
index b0c163244167..ef5c9287d0bd 100644
--- a/editor/src/components/editor/import-wizard/import-wizard.tsx
+++ b/editor/src/components/editor/import-wizard/import-wizard.tsx
@@ -9,6 +9,7 @@ import { unless, when } from '../../../utils/react-conditionals'
 import {
   getTotalImportStatusAndResult,
   hideImportWizard,
+  notifyImportStatusToDiscord,
   updateProjectImportStatus,
 } from '../../../core/shared/import/import-operation-service'
 import { OperationLine } from './components'
@@ -45,11 +46,6 @@ export const ImportWizard = React.memo(() => {
     e.stopPropagation()
   }, [])
 
-  const totalImportResult: TotalImportResult = React.useMemo(
-    () => getTotalImportStatusAndResult(importState),
-    [importState],
-  )
-
   if (projectId == null) {
     return null
   }
@@ -130,7 +126,7 @@ export const ImportWizard = React.memo(() => {
               gap: 10,
             }}
           >
-            <ActionButtons importResult={totalImportResult} />
+            <ActionButtons />
           </div>
         </div>,
       )}
@@ -139,7 +135,23 @@ export const ImportWizard = React.memo(() => {
 })
 ImportWizard.displayName = 'ImportWizard'
 
-function ActionButtons({ importResult }: { importResult: TotalImportResult }) {
+function ActionButtons() {
+  const importState = useEditorState(
+    Substores.github,
+    (store) => store.editor.importState,
+    'ImportWizard importState',
+  )
+
+  const projectName = useEditorState(
+    Substores.restOfEditor,
+    (store) => store.editor.projectName,
+    'ImportWizard projectName',
+  )
+
+  const importResult: TotalImportResult = React.useMemo(
+    () => getTotalImportStatusAndResult(importState),
+    [importState],
+  )
   const colorTheme = useColorTheme()
   const dispatch = useDispatch()
   const result = importResult.result
@@ -174,6 +186,10 @@ function ActionButtons({ importResult }: { importResult: TotalImportResult }) {
     }
   }, [dispatch, hideWizard, importResult.importStatus])
   const importADifferentProject = React.useCallback(() => {
+    if (importResult.importStatus.status !== 'done') {
+      // force a notification to discord that the import was exited in the middle
+      notifyImportStatusToDiscord(importState, projectName, true)
+    }
     dispatch(
       [
         setImportWizardOpen(false),
@@ -182,7 +198,7 @@ function ActionButtons({ importResult }: { importResult: TotalImportResult }) {
       ],
       'everyone',
     )
-  }, [dispatch])
+  }, [dispatch, importResult.importStatus.status, importState, projectName])
   const textStyle = {
     color: textColor,
     fontSize: 14,
diff --git a/editor/src/components/editor/server.ts b/editor/src/components/editor/server.ts
index 65f6a5dbc5a8..6d05ed4bee48 100644
--- a/editor/src/components/editor/server.ts
+++ b/editor/src/components/editor/server.ts
@@ -47,6 +47,7 @@ import { assertNever } from '../../core/shared/utils'
 import { checkOnlineState } from './online-status'
 import type { GithubOperationContext } from '../../core/shared/github/operations/github-operation-context'
 import { GithubEndpoints } from '../../core/shared/github/endpoints'
+import type { DiscordEndpointPayload } from 'utopia-shared/src/types'
 
 export { fetchProjectList, fetchShowcaseProjects, getLoginState } from '../../common/server'
 
@@ -761,3 +762,19 @@ export function getBranchProjectContents(operationContext: GithubOperationContex
     return response.json()
   }
 }
+
+export async function sendDiscordMessage(payload: DiscordEndpointPayload) {
+  try {
+    const response = await fetch(`/internal/discord/webhook`, {
+      method: 'POST',
+      credentials: 'include',
+      mode: MODE,
+      body: JSON.stringify(payload),
+    })
+    if (!response.ok) {
+      console.error(`Send Discord message failed (${response.status}): ${response.statusText}`)
+    }
+  } catch (e) {
+    console.error(`Send Discord message failed: ${e}`)
+  }
+}
diff --git a/editor/src/components/github/github-repository-clone-flow.tsx b/editor/src/components/github/github-repository-clone-flow.tsx
index 6973c8b94524..a8688987f661 100644
--- a/editor/src/components/github/github-repository-clone-flow.tsx
+++ b/editor/src/components/github/github-repository-clone-flow.tsx
@@ -28,8 +28,10 @@ import { OperationContext } from '../../core/shared/github/operations/github-ope
 import { notice } from '../common/notice'
 import { isFeatureEnabled } from '../../utils/feature-switches'
 import {
+  notifyOperationCriticalError,
   notifyOperationFinished,
   startImportProcess,
+  updateProjectImportStatus,
 } from '../../core/shared/import/import-operation-service'
 import { ImportOperationResult } from '../../core/shared/import/import-operation-types'
 
@@ -131,11 +133,11 @@ async function cloneGithubRepo(
   if (repositoryEntry == null) {
     if (isFeatureEnabled('Import Wizard')) {
       startImportProcess(dispatch)
-      notifyOperationFinished(
-        dispatch,
-        { type: 'loadBranch', branchName: githubRepo.branch ?? undefined, githubRepo: githubRepo },
-        ImportOperationResult.CriticalError,
-      )
+      notifyOperationCriticalError(dispatch, {
+        type: 'loadBranch',
+        branchName: githubRepo.branch ?? undefined,
+        githubRepo: githubRepo,
+      })
     } else {
       dispatch([showToast(notice('Cannot find repository', 'ERROR'))])
     }
diff --git a/editor/src/core/shared/github/operations/load-branch.ts b/editor/src/core/shared/github/operations/load-branch.ts
index f106d9aaec64..1c4d29aa0c21 100644
--- a/editor/src/core/shared/github/operations/load-branch.ts
+++ b/editor/src/core/shared/github/operations/load-branch.ts
@@ -44,10 +44,12 @@ import { GithubOperations } from '.'
 import { assertNever } from '../../utils'
 import { updateProjectContentsWithParseResults } from '../../parser-projectcontents-utils'
 import {
+  notifyOperationCriticalError,
   notifyOperationFinished,
   notifyOperationStarted,
   pauseImport,
   startImportProcess,
+  updateProjectImportStatus,
 } from '../../import/import-operation-service'
 import {
   RequirementResolutionResult,
@@ -165,21 +167,13 @@ export const updateProjectWithBranchContent =
         switch (responseBody.type) {
           case 'FAILURE':
             if (isFeatureEnabled('Import Wizard')) {
-              notifyOperationFinished(
-                dispatch,
-                { type: 'loadBranch' },
-                ImportOperationResult.CriticalError,
-              )
+              notifyOperationCriticalError(dispatch, { type: 'loadBranch' })
             }
             throw githubAPIError(operation, responseBody.failureReason)
           case 'SUCCESS':
             if (responseBody.branch == null) {
               if (isFeatureEnabled('Import Wizard')) {
-                notifyOperationFinished(
-                  dispatch,
-                  { type: 'loadBranch' },
-                  ImportOperationResult.CriticalError,
-                )
+                notifyOperationCriticalError(dispatch, { type: 'loadBranch' })
               }
               throw githubAPIError(operation, `Could not find branch ${branchName}`)
             }
diff --git a/editor/src/core/shared/import/import-operation-service.ts b/editor/src/core/shared/import/import-operation-service.ts
index 6b21a6e0236e..9e9f95dfd111 100644
--- a/editor/src/core/shared/import/import-operation-service.ts
+++ b/editor/src/core/shared/import/import-operation-service.ts
@@ -15,6 +15,9 @@ import type {
 } from './import-operation-types'
 import { ImportOperationResult } from './import-operation-types'
 import { isFeatureEnabled } from '../../../utils/feature-switches'
+import { sendDiscordMessage } from '../../../components/editor/server'
+import type { DiscordEndpointSiteImport, DiscordMessageType } from 'utopia-shared/src/types'
+import { getImportOperationText } from '../../../components/editor/import-wizard/import-wizard-helpers'
 
 export function startImportProcess(dispatch: EditorDispatch) {
   const actions: EditorAction[] = [
@@ -73,6 +76,11 @@ export function notifyOperationFinished(
   }, 0)
 }
 
+export function notifyOperationCriticalError(dispatch: EditorDispatch, operation: ImportOperation) {
+  notifyOperationFinished(dispatch, operation, ImportOperationResult.CriticalError)
+  setTimeout(() => updateProjectImportStatus(dispatch, { status: 'done' }), 0)
+}
+
 export function areSameOperation(existing: ImportOperation, incoming: ImportOperation): boolean {
   if (existing.id == null || incoming.id == null) {
     return existing.type === incoming.type
@@ -196,3 +204,64 @@ export function pauseImport(dispatch: EditorDispatch): Promise<void> {
     updateProjectImportStatus(dispatch, { status: 'paused', onResume: resolve }),
   )
 }
+
+export function notifyImportStatusToDiscord(
+  importState: ImportState,
+  projectName: string,
+  // for cases when the import was paused, but the user left the wizard mid-process
+  forceNotify: boolean = false,
+) {
+  const totalImportStateAndResult = getTotalImportStatusAndResult(importState)
+  const importResult = totalImportStateAndResult.result
+  // don't notify if the import is not done
+  const importDone = totalImportStateAndResult.importStatus.status == 'done'
+  if (!importDone && !forceNotify) {
+    return
+  }
+  let messageType: DiscordMessageType = 'info'
+  if (importResult == 'criticalError' || importResult == 'error') {
+    messageType = 'error'
+  } else if (importResult == 'warn') {
+    messageType = 'warning'
+  } else {
+    // we only notify errors and warnings
+    return
+  }
+
+  // collect errors, warnings, critical errors
+  const errors: string[] = []
+  const warnings: string[] = []
+  const criticalErrors: string[] = []
+  importState.importOperations
+    .flatMap((op) => [op, ...(op.children ?? [])])
+    .forEach((op) => {
+      if (op.result == ImportOperationResult.Error) {
+        errors.push(getImportOperationText(op))
+      } else if (op.result == ImportOperationResult.Warn) {
+        warnings.push(getImportOperationText(op))
+      } else if (op.result == ImportOperationResult.CriticalError) {
+        criticalErrors.push(getImportOperationText(op))
+      }
+    })
+
+  // get the repo and branch name
+  const importBranchOp = importState.importOperations.find((op) => op.type == 'loadBranch')
+
+  // build specific payload for our discord endpoint
+  const importSitePayload: DiscordEndpointSiteImport = {
+    webhookType: 'SITE_IMPORT',
+    messageType: messageType,
+    messageData: {
+      importResult: totalImportStateAndResult.result,
+      importDone: importDone,
+      githubRepo: importBranchOp?.githubRepo,
+      branchName: importBranchOp?.branchName,
+      projectName: projectName,
+      errors: errors,
+      warnings: warnings,
+      criticalErrors: criticalErrors,
+    },
+  }
+
+  void sendDiscordMessage(importSitePayload)
+}
diff --git a/editor/src/core/shared/import/import-operation-types.ts b/editor/src/core/shared/import/import-operation-types.ts
index 5c987103253e..4cffa4ec7046 100644
--- a/editor/src/core/shared/import/import-operation-types.ts
+++ b/editor/src/core/shared/import/import-operation-types.ts
@@ -22,7 +22,7 @@ export const ImportOperationResult = {
 export type ImportOperationResult =
   (typeof ImportOperationResult)[keyof typeof ImportOperationResult]
 
-type ImportLoadBranch = {
+export type ImportLoadBranch = {
   type: 'loadBranch'
   branchName?: string
   githubRepo?: GithubRepo
diff --git a/utopia-remix/app/env.server.ts b/utopia-remix/app/env.server.ts
index 39891ab18a39..e7f2c193debb 100644
--- a/utopia-remix/app/env.server.ts
+++ b/utopia-remix/app/env.server.ts
@@ -40,6 +40,8 @@ export const ServerEnvironment = {
   AWS_REGION: mustEnvOrLocalFallback('AWS_REGION', ''),
   // Local assets
   LOCAL_ASSETS_FOLDER: mustEnvOrLocalFallback('LOCAL_ASSETS_FOLDER', '../server/utopia-local'),
+  // Discord webhooks
+  DISCORD_WEBHOOK_SITE_IMPORT: mustEnvOrLocalFallback('DISCORD_WEBHOOK_SITE_IMPORT', ''),
 }
 
 export type BrowserEnvironmentType = {
diff --git a/utopia-remix/app/handlers/discordMessageBuilder.ts b/utopia-remix/app/handlers/discordMessageBuilder.ts
new file mode 100644
index 000000000000..4ba7a83db9da
--- /dev/null
+++ b/utopia-remix/app/handlers/discordMessageBuilder.ts
@@ -0,0 +1,81 @@
+import type {
+  DiscordEndpointPayload,
+  DiscordMessage,
+  DiscordEndpointSiteImportMessageData,
+} from 'utopia-shared/src/types'
+import { assertNever, assertNeverApiError } from '../util/assertNever'
+import { Status } from '../util/statusCodes'
+
+export function buildDiscordMessage(payload: DiscordEndpointPayload): DiscordMessage {
+  switch (payload.webhookType) {
+    case 'SITE_IMPORT':
+      return buildSiteImportMessage(payload.messageData)
+    default:
+      assertNeverApiError(
+        payload.webhookType,
+        `Unknown webhook type: ${payload.webhookType}`,
+        Status.NOT_FOUND,
+      )
+  }
+}
+
+function buildSiteImportMessage(message: DiscordEndpointSiteImportMessageData): DiscordMessage {
+  const operationsWithErrorsOrWarnings: Record<string, string> = {}
+  if (message.criticalErrors.length > 0) {
+    operationsWithErrorsOrWarnings['Critical Errors'] = message.criticalErrors
+      .map((error) => `- ${error}`)
+      .join('\n')
+  }
+  if (message.errors.length > 0) {
+    operationsWithErrorsOrWarnings['Errors'] = message.errors
+      .map((error) => `- ${error}`)
+      .join('\n')
+  }
+  if (message.warnings.length > 0) {
+    operationsWithErrorsOrWarnings['Warnings'] = message.warnings
+      .map((warning) => `- ${warning}`)
+      .join('\n')
+  }
+
+  const fields = {
+    'Project Name': message.projectName,
+    'Github URL':
+      message.githubRepo != null
+        ? `https://github.com/${message.githubRepo.owner}/${message.githubRepo.repository}`
+        : '',
+    'Github Branch': message.branchName ?? '',
+    ...operationsWithErrorsOrWarnings,
+  }
+
+  let title: string
+  let description: string
+  const importResult = message.importResult
+  switch (importResult) {
+    case 'criticalError':
+      title = 'Critical Error'
+      description = 'The import process encountered a critical error and was aborted.'
+      break
+    case 'error':
+      title = 'Error'
+      description = message.importDone
+        ? 'The import process was completed with errors.'
+        : 'The import process encountered an error and was aborted by the user.'
+      break
+    case 'warn':
+      title = 'Warning'
+      description = 'The import process was completed with warnings.'
+      break
+    case 'success':
+      title = 'Success'
+      description = 'The import process was completed successfully.'
+      break
+    default:
+      assertNever(importResult)
+  }
+
+  return {
+    title: title,
+    description: description,
+    fields: fields,
+  }
+}
diff --git a/utopia-remix/app/routes/internal.discord.webhook.ts b/utopia-remix/app/routes/internal.discord.webhook.ts
new file mode 100644
index 000000000000..92abfd60b59b
--- /dev/null
+++ b/utopia-remix/app/routes/internal.discord.webhook.ts
@@ -0,0 +1,36 @@
+import type { LoaderFunctionArgs } from '@remix-run/node'
+import { json, type ActionFunctionArgs } from '@remix-run/node'
+import { ALLOW } from '../handlers/validators'
+import { handle, handleOptions } from '../util/api.server'
+import type { DiscordEndpointPayload } from 'utopia-shared/src/types'
+import { requireUser } from '../util/api.server'
+import { sendDiscordMessage } from '../util/discordWebhookUtils'
+import { Status } from '../util/statusCodes'
+import { buildDiscordMessage } from '~/handlers/discordMessageBuilder'
+
+export async function loader(args: LoaderFunctionArgs) {
+  return handle(args, {
+    OPTIONS: handleOptions,
+  })
+}
+
+export async function action(args: ActionFunctionArgs) {
+  return handle(args, {
+    POST: {
+      validator: ALLOW,
+      handler: handleDiscordWebhook,
+    },
+  })
+}
+
+export async function handleDiscordWebhook(req: Request) {
+  const user = await requireUser(req)
+  const payload = (await req.json()) as DiscordEndpointPayload
+  await sendDiscordMessage(
+    payload.webhookType,
+    payload.messageType,
+    buildDiscordMessage(payload),
+    user,
+  )
+  return json({ success: true }, { status: Status.OK })
+}
diff --git a/utopia-remix/app/util/assertNever.ts b/utopia-remix/app/util/assertNever.ts
index b73c3bb72038..6c7aedcc30a7 100644
--- a/utopia-remix/app/util/assertNever.ts
+++ b/utopia-remix/app/util/assertNever.ts
@@ -1,3 +1,9 @@
+import { ApiError } from './errors'
+
 export function assertNever(n: never): never {
   throw new Error(`Expected \`never\`, got ${JSON.stringify(n)}`)
 }
+
+export function assertNeverApiError(n: never, message: string, code: number): never {
+  throw new ApiError(message, code)
+}
diff --git a/utopia-remix/app/util/discord-webhook-node.d.ts b/utopia-remix/app/util/discord-webhook-node.d.ts
new file mode 100644
index 000000000000..f5d3d21a6aad
--- /dev/null
+++ b/utopia-remix/app/util/discord-webhook-node.d.ts
@@ -0,0 +1,69 @@
+declare module 'discord-webhook-node' {
+  export type WebhookOptions = {
+    url: string
+    throwErrors?: boolean
+    retryOnLimit?: boolean
+  }
+
+  export class Webhook {
+    constructor(options: string | WebhookOptions)
+    setUsername(username: string): void
+    setAvatar(avatar: string): void
+    sendFile(filePath: string): Promise<void>
+    send(message: MessageBuilder | string): Promise<void>
+    info(title: string, fieldName?: string, fieldValue?: string, inline?: boolean): Promise<void>
+    success(title: string, fieldName?: string, fieldValue?: string, inline?: boolean): Promise<void>
+    warning(title: string, fieldName?: string, fieldValue?: string, inline?: boolean): Promise<void>
+    error(title: string, fieldName?: string, fieldValue?: string, inline?: boolean): Promise<void>
+  }
+
+  export type WebhookField = {
+    name: string
+    value: string
+    inline?: boolean
+  }
+
+  export type WebhookEmbed = {
+    author?: {
+      name?: string
+      url?: string
+      icon_url?: string
+    }
+    title?: string
+    url?: string
+    thumbnail?: {
+      url?: string
+    }
+    image?: {
+      url?: string
+    }
+    timestamp?: Date
+    color?: number
+    description?: string
+    fields: WebhookField[]
+    footer?: {
+      text: string
+      icon_url?: string
+    }
+  }
+
+  export type WebhookPayload = {
+    embeds: WebhookEmbed[]
+  }
+
+  export class MessageBuilder {
+    constructor()
+    getJSON(): WebhookPayload
+    setText(text: string): this
+    setAuthor(author?: string, authorImage?: string, authorUrl?: string): this
+    setTitle(title: string): this
+    setURL(url: string): this
+    setThumbnail(thumbnailUrl: string): this
+    setImage(image: string): this
+    setTimestamp(): this
+    setColor(color: number): this
+    setDescription(description: string): this
+    addField(fieldName: string, fieldValue: string, inline?: boolean): this
+    setFooter(footer: string, footerImage?: string): this
+  }
+}
diff --git a/utopia-remix/app/util/discordWebhookUtils.ts b/utopia-remix/app/util/discordWebhookUtils.ts
new file mode 100644
index 000000000000..06f9cf79a2ef
--- /dev/null
+++ b/utopia-remix/app/util/discordWebhookUtils.ts
@@ -0,0 +1,72 @@
+import { MessageBuilder, Webhook } from 'discord-webhook-node'
+import type {
+  DiscordMessage,
+  DiscordMessageType,
+  DiscordWebhookType,
+} from 'utopia-shared/src/types'
+import { Status } from './statusCodes'
+import { ApiError } from './errors'
+import type { UserDetails } from 'prisma-client'
+import { ServerEnvironment } from '../env.server'
+
+// these need to be decimal colors (for 'discord-webhook-node')
+const colors: Record<DiscordMessageType, number> = {
+  info: 4037805,
+  success: 65340,
+  warning: 16763904,
+  error: 16729149,
+}
+
+const webhooksUrls: Record<DiscordWebhookType, string> = {
+  SITE_IMPORT: ServerEnvironment.DISCORD_WEBHOOK_SITE_IMPORT,
+}
+
+const webhooks: Partial<Record<DiscordWebhookType, Webhook>> = {}
+
+export function sendDiscordMessage(
+  type: DiscordWebhookType,
+  messageType: DiscordMessageType,
+  messageDescriptor: DiscordMessage,
+  user: UserDetails,
+): Promise<void> {
+  const webhook = getWebhook(type)
+
+  let message = new MessageBuilder()
+    .setTitle(messageDescriptor.title)
+    .setDescription(messageDescriptor.description)
+    .setColor(colors[messageType])
+    .setTimestamp()
+
+  if (messageDescriptor.url) {
+    message = message.setURL(messageDescriptor.url)
+  }
+
+  const fields: Record<string, string> = {
+    User: `${user.name ?? 'Unknown User'} (${user.email ?? 'Unknown Email'})`,
+    ...(messageDescriptor.fields ?? {}),
+  }
+
+  Object.entries(fields).forEach(([key, value]) => {
+    message = message.addField(key, value)
+  })
+
+  return webhook.send(message)
+}
+
+function hasWebhookUrl(type: DiscordWebhookType) {
+  return webhooksUrls[type] != undefined && webhooksUrls[type] != ''
+}
+
+function getWebhook(type: DiscordWebhookType) {
+  if (!hasWebhookUrl(type)) {
+    throw new ApiError(`Webhook URL for ${type} not found`, Status.NOT_FOUND)
+  }
+  if (webhooks[type] == null) {
+    webhooks[type] = createDiscordWebhook(webhooksUrls[type])
+  }
+  return webhooks[type]
+}
+
+function createDiscordWebhook(url: string) {
+  return new Webhook(url)
+}
diff --git a/utopia-remix/package.json b/utopia-remix/package.json
index 457830eb55e0..0ed93930aad9 100644
--- a/utopia-remix/package.json
+++ b/utopia-remix/package.json
@@ -42,6 +42,7 @@
     "classnames": "2.5.1",
     "cookie": "0.6.0",
     "cors": "2.8.5",
+    "discord-webhook-node": "1.1.8",
     "dotenv": "16.4.1",
     "express": "4.18.3",
     "framer-motion": "11.0.6",
@@ -93,6 +94,7 @@
     "eslint-plugin-prettier": "3.1.2",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.4.12",
     "jest": "29.7.0",
     "prettier": "3.0.3",
     "prisma": "5.9.0",
diff --git a/utopia-remix/pnpm-lock.yaml b/utopia-remix/pnpm-lock.yaml
index 6cf265884a3e..0721858f7fe6 100644
--- a/utopia-remix/pnpm-lock.yaml
+++ b/utopia-remix/pnpm-lock.yaml
@@ -52,6 +52,7 @@ specifiers:
   classnames: 2.5.1
   cookie: 0.6.0
   cors: 2.8.5
+  discord-webhook-node: 1.1.8
   dotenv: 16.4.1
   eslint: 8.38.0
   eslint-config-prettier: 6.9.0
@@ -63,6 +64,7 @@ specifiers:
   eslint-plugin-prettier: 3.1.2
   eslint-plugin-react: 7.33.2
   eslint-plugin-react-hooks: 4.6.0
+  eslint-plugin-react-refresh: 0.4.12
   express: 4.18.3
   framer-motion: 11.0.6
   isbot: '4'
@@ -116,6 +118,7 @@ dependencies:
   classnames: 2.5.1
   cookie: 0.6.0
   cors: 2.8.5
+  discord-webhook-node: 1.1.8
   dotenv: 16.4.1
   express: 4.18.3
   framer-motion: 11.0.6_biqbaboplfbrettd7655fr4n2y
@@ -167,6 +170,7 @@ devDependencies:
   eslint-plugin-prettier: 3.1.2_lrchdwdraw23se4gnjdrpfbg3a
   eslint-plugin-react: 7.33.2_eslint@8.38.0
   eslint-plugin-react-hooks: 4.6.0_eslint@8.38.0
+  eslint-plugin-react-refresh: 0.4.12_eslint@8.38.0
   jest: 29.7.0_kgd3rkgc2fm7cjopomcxmo2pti
   prettier: 3.0.3
   prisma: 5.9.0
@@ -6728,6 +6732,15 @@ packages:
       path-type: 4.0.0
     dev: true
 
+  /discord-webhook-node/1.1.8:
+    resolution: {integrity: sha512-3u0rrwywwYGc6HrgYirN/9gkBYqmdpvReyQjapoXARAHi0P0fIyf3W5tS5i3U3cc7e44E+e7dIHYUeec7yWaug==}
+    dependencies:
+      form-data: 3.0.2
+      node-fetch: 2.7.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /dlv/1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
@@ -7213,6 +7226,14 @@ packages:
       eslint: 8.38.0
     dev: true
 
+  /eslint-plugin-react-refresh/0.4.12_eslint@8.38.0:
+    resolution: {integrity: sha512-9neVjoGv20FwYtCP6CB1dzR1vr57ZDNOXst21wd2xJ/cTlM2xLq0GWVlSNTdMn/4BtP6cHYBMCSp1wFBJ9jBsg==}
+    peerDependencies:
+      eslint: '>=7'
+    dependencies:
+      eslint: 8.38.0
+    dev: true
+
   /eslint-plugin-react/7.33.2_eslint@8.38.0:
     resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
     engines: {node: '>=4'}
@@ -7637,6 +7658,15 @@ packages:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
+  /form-data/3.0.2:
+    resolution: {integrity: sha512-sJe+TQb2vIaIyO783qN6BlMYWMw3WBOHA1Ay2qxsnjuafEOQFJ2JakedOQirT6D5XPRxDvS7AHYyem9fTpb4LQ==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: false
+
   /form-data/4.0.0:
     resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
     engines: {node: '>= 6'}
@@ -9715,6 +9745,18 @@ packages:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
 
+  /node-fetch/2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: false
+
   /node-int64/0.4.0:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
     dev: true
@@ -11253,6 +11295,10 @@ packages:
     resolution: {integrity: sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==}
     dev: true
 
+  /tr46/0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: false
+
   /trim-lines/3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
     dev: true
@@ -11771,6 +11817,17 @@ packages:
     resolution: {integrity: sha512-3pRGuxRF5gpuZc0W+EpwQRmCD7gRqcDOMt688KmdlDAgAyaB1XlN0zq2njfDNm44XVdIouE7pZ6GzbdyH47uIQ==}
     engines: {node: '>= 8'}
 
+  /webidl-conversions/3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: false
+
+  /whatwg-url/5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: false
+
   /which-boxed-primitive/1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies:
diff --git a/utopia-shared/src/types/discord-webhook.ts b/utopia-shared/src/types/discord-webhook.ts
new file mode 100644
index 000000000000..bc6f59dfb782
--- /dev/null
+++ b/utopia-shared/src/types/discord-webhook.ts
@@ -0,0 +1,35 @@
+export type DiscordMessageType = 'info' | 'success' | 'warning' | 'error'
+export type DiscordMessage = {
+  title: string
+  description: string
+  url?: string
+  fields?: Record<string, string>
+}
+
+export type DiscordWebhookType = 'SITE_IMPORT'
+
+export type DiscordEndpointPayload = DiscordEndpointSiteImport
+
+type DiscordEndpointMetadata = {
+  webhookType: DiscordWebhookType
+  messageType: DiscordMessageType
+  messageData: Record<string, unknown>
+}
+
+export type DiscordEndpointSiteImport = DiscordEndpointMetadata & {
+  webhookType: 'SITE_IMPORT'
+  messageData: DiscordEndpointSiteImportMessageData
+}
+export type DiscordEndpointSiteImportMessageData = {
+  projectName: string
+  importResult: 'success' | 'warn' | 'error' | 'criticalError'
+  importDone: boolean
+  errors: string[]
+  warnings: string[]
+  criticalErrors: string[]
+  githubRepo?: {
+    owner: string
+    repository: string
+  }
+  branchName?: string
+}
diff --git a/utopia-shared/src/types/index.ts b/utopia-shared/src/types/index.ts
index 914a1956eeb1..fe68193d5e80 100644
--- a/utopia-shared/src/types/index.ts
+++ b/utopia-shared/src/types/index.ts
@@ -2,3 +2,4 @@ export * from './assets'
 export * from './error-messages'
 export * from './project-file-types'
 export * from './element-template'
+export * from './discord-webhook'

From 7db4069104e2832dae63cbe56690fcb3efce0ee6 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:18:27 +0100
Subject: [PATCH 239/272] Tailwind border-radius support (#6657)

**Problem:**
Make border-radius controls work in tailwind projects.

**Fix:**

- Add the border-radius shorthand/longhand props to the StyleInfo
interface
- Add overflow prop to the StyleInfo interface (necessary because when
we set the border-radius we set the element to overflow: hidden)
- Update InlineStylePlugin and TailwindStylePlugin to support the new
props in StyleInfo
- Refactor the set-border-radius strategy and the border-radius control
handle control to read element styles through a StyleInfoReader instance
- Add a new property patcher in style-plugins@patchers to take care of
patching removed border-radius props
- Add a new EditorState substate so we can get a StyleInfoReader in a
useEditorState hook without using the full store
- Remove the condition in tailwind-compilation that
`ElementsToRerenderGLOBAL.current` has to be `'rerender-all-elements'`
for the tailwind classes to be regenerated. For some reason this blocked
the class generation after a border-radius interaction. We are still
protected against tailwind class generation during the interaction (we
check `isInteractionActive`)
- Add tests with a tailwind project to the set-border-radius strategy
test suite
- removeTailwindClasses guarantees that subsequent tests do not have the
tailwind css on

**Todo:**
- [x] Check why the ``ElementsToRerenderGLOBAL.current` check caused
problems.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 ...t-border-radius-strategy.spec.browser2.tsx | 336 ++++++++++++++++++
 .../strategies/set-border-radius-strategy.tsx |  96 ++---
 editor/src/components/canvas/canvas-types.ts  |  24 +-
 .../select-mode/border-radius-control.tsx     |  15 +-
 .../canvas/plugins/inline-style-plugin.ts     |  19 +
 .../canvas/plugins/style-plugins.ts           |  28 +-
 .../canvas/plugins/tailwind-style-plugin.ts   |  33 +-
 .../editor/store/store-hook-substore-types.ts |  12 +
 .../src/components/editor/store/store-hook.ts |   5 +
 .../components/inspector/common/css-utils.ts  |   2 +-
 editor/src/core/layout/layout-helpers-new.ts  |   1 +
 .../src/core/tailwind/tailwind-compilation.ts |  27 +-
 12 files changed, 514 insertions(+), 84 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.spec.browser2.tsx
index ac49bea9ee31..8e98bcb3f3b2 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.spec.browser2.tsx
@@ -2,9 +2,17 @@ import { fromString } from '../../../../core/shared/element-path'
 import type { CanvasVector, Size, WindowPoint } from '../../../../core/shared/math-utils'
 import { canvasVector, size, windowPoint } from '../../../../core/shared/math-utils'
 import { assertNever } from '../../../../core/shared/utils'
+import { TailwindConfigPath } from '../../../../core/tailwind/tailwind-config'
+import { createModifiedProject } from '../../../../sample-projects/sample-project-utils.test-utils'
 import type { Modifiers } from '../../../../utils/modifiers'
 import { cmdModifier, emptyModifiers } from '../../../../utils/modifiers'
+import {
+  selectComponentsForTest,
+  setFeatureForBrowserTestsUseInDescribeBlockOnly,
+  wait,
+} from '../../../../utils/utils.test-utils'
 import { selectComponents, setFocusedElement } from '../../../editor/actions/action-creators'
+import { StoryboardFilePath } from '../../../editor/store/editor-state'
 import type { BorderRadiusCorner } from '../../border-radius-control-utils'
 import { BorderRadiusCorners } from '../../border-radius-control-utils'
 import type { EdgePosition } from '../../canvas-types'
@@ -23,6 +31,7 @@ import {
   renderTestEditorWithCode,
   makeTestProjectCodeWithSnippet,
   getPrintedUiJsCode,
+  renderTestEditorWithModel,
 } from '../../ui-jsx.test-utils'
 
 describe('set border radius strategy', () => {
@@ -424,6 +433,333 @@ describe('set border radius strategy', () => {
       })
     })
   })
+
+  describe('Tailwind', () => {
+    setFeatureForBrowserTestsUseInDescribeBlockOnly('Tailwind', true)
+
+    const TailwindProject = (classes: string) =>
+      createModifiedProject({
+        [StoryboardFilePath]: `
+    import React from 'react'
+    import { Scene, Storyboard } from 'utopia-api'
+    export var storyboard = (
+      <Storyboard data-uid='sb'>
+        <Scene
+          id='scene'
+          commentId='scene'
+          data-uid='scene'
+          style={{
+            width: 700,
+            height: 759,
+            position: 'absolute',
+            left: 212,
+            top: 128,
+          }}
+        >
+          <div
+            data-uid='mydiv'
+            data-testid='mydiv'
+            className='top-28 left-28 w-28 h-28 bg-black absolute ${classes}'
+          />
+        </Scene>
+      </Storyboard>
+    )
+    
+    `,
+        [TailwindConfigPath]: `
+        const TailwindConfig = { }
+        export default TailwindConfig
+    `,
+        'app.css': `
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;`,
+      })
+
+    it('border radius controls show up for elements that have tailwind border radius set', async () => {
+      const editor = await renderTestEditorWithModel(
+        TailwindProject('rounded-2xl'),
+        'await-first-dom-report',
+      )
+      await selectComponentsForTest(editor, [fromString('sb/scene/mydiv')])
+
+      const borderRadiusControls = BorderRadiusCorners.flatMap((corner) =>
+        editor.renderedDOM.queryAllByTestId(CircularHandleTestId(corner)),
+      )
+
+      expect(borderRadiusControls.length).toEqual(4)
+    })
+
+    it('border radius controls show up for elements that dont have tailwind border radius set', async () => {
+      const editor = await renderTestEditorWithModel(TailwindProject(''), 'await-first-dom-report')
+      await selectComponentsForTest(editor, [fromString('sb/scene/mydiv')])
+
+      const borderRadiusControls = BorderRadiusCorners.flatMap((corner) =>
+        editor.renderedDOM.queryAllByTestId(CircularHandleTestId(corner)),
+      )
+
+      expect(borderRadiusControls.length).toEqual(4)
+    })
+
+    describe('adjust border radius via handles', () => {
+      it('top left', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-[10px]'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tl', 10, emptyModifiers)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-[22px] overflow-hidden',
+        )
+      })
+
+      it('top right', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-[10px]'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tr', 10, emptyModifiers)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-[22px] overflow-hidden',
+        )
+      })
+
+      it('bottom left', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-[10px]'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tl', 10, emptyModifiers)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-[22px] overflow-hidden',
+        )
+      })
+
+      it('bottom right', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-[10px]'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tl', 10, emptyModifiers)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-[22px] overflow-hidden',
+        )
+      })
+    })
+    describe('adjust border radius via handles with non-arbitrary tailwind classes', () => {
+      it('top left', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-2xl'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tl', 10, emptyModifiers)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-[2rem] overflow-hidden',
+        )
+      })
+
+      it('top right', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-2xl'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tr', 10, emptyModifiers)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-[2rem] overflow-hidden',
+        )
+      })
+
+      it('bottom left', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-2xl'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tl', 10, emptyModifiers)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-[2rem] overflow-hidden',
+        )
+      })
+
+      it('bottom right', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-2xl'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tl', 10, emptyModifiers)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-[2rem] overflow-hidden',
+        )
+      })
+    })
+    describe('adjust border radius via handles, individually', () => {
+      it('top left', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-[10px]'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tl', 10, cmdModifier)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-tl-[22px] rounded-tr-[10px] rounded-br-[10px] rounded-bl-[10px] overflow-hidden',
+        )
+      })
+
+      it('top right', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-[10px]'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tr', 10, cmdModifier)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-tl-[10px] rounded-tr-[22px] rounded-br-[10px] rounded-bl-[10px] overflow-hidden',
+        )
+      })
+
+      it('bottom left', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-[10px]'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'bl', 10, cmdModifier)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-tl-[10px] rounded-tr-[10px] rounded-br-[10px] rounded-bl-[22px] overflow-hidden',
+        )
+      })
+
+      it('bottom right', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-[10px]'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'br', 10, cmdModifier)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-tl-[10px] rounded-tr-[10px] rounded-br-[22px] rounded-bl-[10px] overflow-hidden',
+        )
+      })
+    })
+    describe('adjust border radius via handles, individually, with non-arbitrary tailwind classes', () => {
+      it('top left', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-2xl'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tl', 10, cmdModifier)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-tl-[2rem] rounded-tr-2xl rounded-br-2xl rounded-bl-2xl overflow-hidden',
+        )
+      })
+
+      it('top right', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-2xl'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tr', 10, cmdModifier)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-tl-2xl rounded-tr-[2rem] rounded-br-2xl rounded-bl-2xl overflow-hidden',
+        )
+      })
+
+      it('bottom left', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-2xl'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'bl', 10, cmdModifier)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-tl-2xl rounded-tr-2xl rounded-br-2xl rounded-bl-[2rem] overflow-hidden',
+        )
+      })
+
+      it('bottom right', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-2xl'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'br', 10, cmdModifier)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute rounded-tl-2xl rounded-tr-2xl rounded-br-[2rem] rounded-bl-2xl overflow-hidden',
+        )
+      })
+    })
+
+    describe('Overflow property handling', () => {
+      it('does not overwrite existing overflow property', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-[10px] overflow-visible'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tl', 10, cmdModifier)
+        await editor.getDispatchFollowUpActionsFinished()
+        const div = editor.renderedDOM.getByTestId('mydiv')
+        expect(div.className).toEqual(
+          'top-28 left-28 w-28 h-28 bg-black absolute overflow-visible rounded-tl-[22px] rounded-tr-[10px] rounded-br-[10px] rounded-bl-[10px]',
+        )
+      })
+
+      it('shows toast message', async () => {
+        const editor = await renderTestEditorWithModel(
+          TailwindProject('rounded-[10px]'),
+          'await-first-dom-report',
+        )
+        await doDragTest(editor, 'tl', 10, cmdModifier)
+        expect(editor.getEditorState().editor.toasts).toHaveLength(1)
+        expect(editor.getEditorState().editor.toasts[0]).toEqual({
+          id: 'property-added',
+          level: 'NOTICE',
+          message: 'Element now hides overflowing content',
+          persistent: false,
+        })
+      })
+    })
+
+    it('can handle 4-value syntax', async () => {
+      const editor = await renderTestEditorWithModel(
+        TailwindProject(
+          'rounded-tl-[14px] rounded-tr-[15px] rounded-br-[16px] rounded-bl-[17px] overflow-visible',
+        ),
+        'await-first-dom-report',
+      )
+
+      await doDragTest(editor, 'tl', 10, emptyModifiers)
+      await editor.getDispatchFollowUpActionsFinished()
+      const div = editor.renderedDOM.getByTestId('mydiv')
+      expect(div.className).toEqual(
+        'top-28 left-28 w-28 h-28 bg-black absolute rounded-tl-[24px] rounded-tr-[15px] rounded-br-[16px] rounded-bl-[17px] overflow-visible',
+      )
+    })
+  })
 })
 
 function codeForDragTest(borderRadius: string): string {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.tsx
index c2e84920c45c..9d9e18ff297a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.tsx
@@ -1,18 +1,13 @@
 import { styleStringInArray } from '../../../../utils/common-constants'
 import type { Sides } from 'utopia-api/core'
-import { getLayoutProperty } from '../../../../core/layout/getLayoutProperty'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
-import { defaultEither, foldEither, right } from '../../../../core/shared/either'
-import type {
-  ElementInstanceMetadata,
-  JSXAttributes,
-} from '../../../../core/shared/element-template'
+import { foldEither } from '../../../../core/shared/either'
+import type { ElementInstanceMetadata } from '../../../../core/shared/element-template'
 import {
   isIntrinsicElement,
   isJSXElement,
   jsxElementName,
   jsxElementNameEquals,
-  modifiableAttributeIsAttributeNotFound,
 } from '../../../../core/shared/element-template'
 import type { CanvasPoint, CanvasVector, Size } from '../../../../core/shared/math-utils'
 import {
@@ -32,7 +27,7 @@ import type {
   CSSNumber,
   ParsedCSSPropertiesKeys,
 } from '../../../inspector/common/css-utils'
-import { cssNumber, ParsedCSSProperties, printCSSNumber } from '../../../inspector/common/css-utils'
+import { cssNumber, printCSSNumber } from '../../../inspector/common/css-utils'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
 import type {
   BorderRadiusAdjustMode,
@@ -43,7 +38,7 @@ import {
   BorderRadiusControlMinimumForDisplay,
   maxBorderRadius,
 } from '../../border-radius-control-utils'
-import { CSSCursor } from '../../canvas-types'
+import { CSSCursor, maybePropertyValue, type StyleInfo } from '../../canvas-types'
 import type { CanvasCommand } from '../../commands/commands'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 
@@ -58,7 +53,6 @@ import {
   measurementBasedOnOtherMeasurement,
   precisionFromModifiers,
   shouldShowControls,
-  unitlessCSSNumberWithRenderedValue,
 } from '../../controls/select-mode/controls-common'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
@@ -70,11 +64,6 @@ import {
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
 import { deleteProperties } from '../../commands/delete-properties-command'
-import { allElemsEqual } from '../../../../core/shared/array-utils'
-import * as PP from '../../../../core/shared/property-path'
-import { withUnderlyingTarget } from '../../../editor/store/editor-state'
-import type { ProjectContentTreeRoot } from '../../../assets'
-import { getModifiableJSXAttributeAtPath } from '../../../../core/shared/jsx-attribute-utils'
 import { showToastCommand } from '../../commands/show-toast-command'
 import { activeFrameTargetPath, setActiveFrames } from '../../commands/set-active-frames-command'
 
@@ -112,7 +101,10 @@ export const setBorderRadiusStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const borderRadius = borderRadiusFromElement(element)
+  const borderRadius = borderRadiusFromElement(
+    element,
+    canvasState.styleInfoReader(selectedElement),
+  )
   if (borderRadius == null) {
     return null
   }
@@ -159,7 +151,10 @@ export const setBorderRadiusStrategy: CanvasStrategyFactory = (
         [
           setCursorCommand(CSSCursor.Radius),
           ...commands(selectedElement),
-          ...getAddOverflowHiddenCommands(selectedElement, canvasState.projectContents),
+          ...getAddOverflowHiddenCommands(
+            selectedElement,
+            canvasState.styleInfoReader(selectedElement),
+          ),
           setActiveFrames(
             selectedElements.map((path) => ({
               action: 'set-radius',
@@ -222,6 +217,7 @@ interface BorderRadiusData<T> {
 
 export function borderRadiusFromElement(
   element: ElementInstanceMetadata,
+  styleInfo: StyleInfo | null,
 ): BorderRadiusData<CSSNumberWithRenderedValue> | null {
   return foldEither(
     () => null,
@@ -232,7 +228,7 @@ export function borderRadiusFromElement(
           return null
         }
 
-        const fromProps = borderRadiusFromProps(jsxElement.props)
+        const fromStyleInfo = borderRadiusFromStyleInfo(styleInfo)
         const measurementsNonZero = AllSides.some((c) => {
           const measurement = renderedValueSides[c]
           if (measurement == null) {
@@ -250,7 +246,7 @@ export function borderRadiusFromElement(
         if (
           !(
             elementIsIntrinsicElementOrScene ||
-            shouldShowControls(fromProps != null, measurementsNonZero)
+            shouldShowControls(fromStyleInfo != null, measurementsNonZero)
           )
         ) {
           return null
@@ -258,7 +254,7 @@ export function borderRadiusFromElement(
 
         const borderRadius = optionalMap(
           (radius) => measurementFromBorderRadius(renderedValueSides, radius),
-          fromProps,
+          fromStyleInfo,
         )
 
         const defaultBorderRadiusSides = borderRadiusSidesFromValue(
@@ -281,7 +277,7 @@ export function borderRadiusFromElement(
 
         const borderRadiusMinMax = { min: 0, max: borderRadiusUpperLimit }
         return {
-          mode: fromProps?.type === 'sides' ? 'individual' : 'all',
+          mode: fromStyleInfo?.type === 'sides' ? 'individual' : 'all',
           borderRadius: mapBorderRadiusSides(
             (n) => adjustBorderRadius(borderRadiusMinMax, n),
             borderRadius ?? defaultBorderRadiusSides,
@@ -300,36 +296,20 @@ interface BorderRadiusFromProps {
   sides: BorderRadiusSides<CSSNumber>
 }
 
-function borderRadiusFromProps(props: JSXAttributes): BorderRadiusFromProps | null {
-  const wrappedProps = right(props)
+function borderRadiusFromStyleInfo(styleInfo: StyleInfo | null): BorderRadiusFromProps | null {
+  const borderRadius = optionalMap(maybePropertyValue, styleInfo?.borderRadius)
 
-  const borderRadius = getLayoutProperty('borderRadius', wrappedProps, styleStringInArray)
-  const simpleBorderRadius = foldEither(
-    () => null,
-    (radius) => {
-      if (radius == null) {
-        return null
-      } else {
-        return foldEither(borderRadiusSidesFromValue, (value) => value, radius)
-      }
-    },
+  const simpleBorderRadius = optionalMap(
+    (radius) => foldEither(borderRadiusSidesFromValue, (value) => value, radius),
     borderRadius,
   )
-  const borderTopLeftRadius = defaultEither(
-    null,
-    getLayoutProperty('borderTopLeftRadius', wrappedProps, styleStringInArray),
-  )
-  const borderTopRightRadius = defaultEither(
-    null,
-    getLayoutProperty('borderTopRightRadius', wrappedProps, styleStringInArray),
-  )
-  const borderBottomLeftRadius = defaultEither(
-    null,
-    getLayoutProperty('borderBottomLeftRadius', wrappedProps, styleStringInArray),
-  )
-  const borderBottomRightRadius = defaultEither(
-    null,
-    getLayoutProperty('borderBottomRightRadius', wrappedProps, styleStringInArray),
+
+  const borderTopLeftRadius = optionalMap(maybePropertyValue, styleInfo?.borderTopLeftRadius)
+  const borderTopRightRadius = optionalMap(maybePropertyValue, styleInfo?.borderTopRightRadius)
+  const borderBottomLeftRadius = optionalMap(maybePropertyValue, styleInfo?.borderBottomLeftRadius)
+  const borderBottomRightRadius = optionalMap(
+    maybePropertyValue,
+    styleInfo?.borderBottomRightRadius,
   )
 
   if (
@@ -606,27 +586,15 @@ const setShorthandStylePropertyCommand =
 
 function getAddOverflowHiddenCommands(
   target: ElementPath,
-  projectContents: ProjectContentTreeRoot,
+  styleInfo: StyleInfo | null,
 ): Array<CanvasCommand> {
-  const overflowProp = PP.create('style', 'overflow')
-
-  const propertyExists = withUnderlyingTarget(target, projectContents, false, (_, element) => {
-    if (isJSXElement(element)) {
-      return foldEither(
-        () => false,
-        (value) => !modifiableAttributeIsAttributeNotFound(value),
-        getModifiableJSXAttributeAtPath(element.props, overflowProp),
-      )
-    } else {
-      return false
-    }
-  })
-
+  const propertyExists = styleInfo?.overflow != null && styleInfo.overflow.type !== 'not-found'
   if (propertyExists) {
     return []
   }
+
   return [
     showToastCommand('Element now hides overflowing content', 'NOTICE', 'property-added'),
-    setProperty('always', target, overflowProp, 'hidden'),
+    setProperty('always', target, StyleProp('overflow'), 'hidden'),
   ]
 }
diff --git a/editor/src/components/canvas/canvas-types.ts b/editor/src/components/canvas/canvas-types.ts
index 218f168e7dec..d0e222a88ac3 100644
--- a/editor/src/components/canvas/canvas-types.ts
+++ b/editor/src/components/canvas/canvas-types.ts
@@ -27,7 +27,14 @@ import type {
 import { InteractionSession } from './canvas-strategies/interaction-state'
 import type { CanvasStrategyId } from './canvas-strategies/canvas-strategy-types'
 import type { MouseButtonsPressed } from '../../utils/mouse'
-import type { CSSNumber, CSSPadding, FlexDirection } from '../inspector/common/css-utils'
+import type {
+  CSSBorderRadius,
+  CSSBorderRadiusIndividual,
+  CSSNumber,
+  CSSOverflow,
+  CSSPadding,
+  FlexDirection,
+} from '../inspector/common/css-utils'
 
 export const CanvasContainerID = 'canvas-container'
 
@@ -594,7 +601,10 @@ export type HeightInfo = CSSStyleProperty<CSSNumber>
 export type FlexBasisInfo = CSSStyleProperty<CSSNumber>
 export type PaddingInfo = CSSStyleProperty<CSSPadding>
 export type PaddingSideInfo = CSSStyleProperty<CSSNumber>
+export type BorderRadiusInfo = CSSStyleProperty<CSSBorderRadius>
+export type BorderRadiusCornerInfo = CSSStyleProperty<CSSNumber>
 export type ZIndexInfo = CSSStyleProperty<CSSNumber>
+export type OverflowInfo = CSSStyleProperty<CSSOverflow>
 
 export interface StyleInfo {
   gap: FlexGapInfo | null
@@ -611,7 +621,13 @@ export interface StyleInfo {
   paddingRight: PaddingSideInfo | null
   paddingBottom: PaddingSideInfo | null
   paddingLeft: PaddingSideInfo | null
+  borderRadius: BorderRadiusInfo | null
+  borderTopLeftRadius: BorderRadiusCornerInfo | null
+  borderTopRightRadius: BorderRadiusCornerInfo | null
+  borderBottomRightRadius: BorderRadiusCornerInfo | null
+  borderBottomLeftRadius: BorderRadiusCornerInfo | null
   zIndex: ZIndexInfo | null
+  overflow: OverflowInfo | null
 }
 
 const emptyStyleInfo: StyleInfo = {
@@ -629,7 +645,13 @@ const emptyStyleInfo: StyleInfo = {
   paddingRight: null,
   paddingBottom: null,
   paddingLeft: null,
+  borderRadius: null,
+  borderTopLeftRadius: null,
+  borderTopRightRadius: null,
+  borderBottomRightRadius: null,
+  borderBottomLeftRadius: null,
   zIndex: null,
+  overflow: null,
 }
 
 export const isStyleInfoKey = (key: string): key is keyof StyleInfo => key in emptyStyleInfo
diff --git a/editor/src/components/canvas/controls/select-mode/border-radius-control.tsx b/editor/src/components/canvas/controls/select-mode/border-radius-control.tsx
index f1b733c9811e..eb0d98c4d493 100644
--- a/editor/src/components/canvas/controls/select-mode/border-radius-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/border-radius-control.tsx
@@ -1,6 +1,5 @@
 import createCachedSelector from 're-reselect'
 import React from 'react'
-import { createSelector } from 'reselect'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
 import type { CanvasVector, Size } from '../../../../core/shared/math-utils'
@@ -15,6 +14,7 @@ import { Substores, useEditorState, useRefEditorState } from '../../../editor/st
 import type {
   CanvasSubstate,
   MetadataSubstate,
+  StyleInfoSubstate,
 } from '../../../editor/store/store-hook-substore-types'
 import { printCSSNumber } from '../../../inspector/common/css-utils'
 import { metadataSelector } from '../../../inspector/inpector-selectors'
@@ -24,7 +24,6 @@ import {
   BorderRadiusCorners,
   BorderRadiusHandleHitArea,
   BorderRadiusHandleSize,
-  BorderRadiusSides,
   handlePosition,
 } from '../../border-radius-control-utils'
 import CanvasActions from '../../canvas-actions'
@@ -41,6 +40,8 @@ import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
 import { isZeroSizedElement } from '../outline-utils'
 import type { CSSNumberWithRenderedValue } from './controls-common'
 import { CanvasLabel, fallbackEmptyValue } from './controls-common'
+import { getActivePlugin } from '../../plugins/style-plugins'
+import type { EditorStorePatched } from '../../../editor/store/editor-state'
 
 export const CircularHandleTestId = (corner: BorderRadiusCorner): string =>
   `circular-handle-${corner}`
@@ -59,13 +60,17 @@ const isDraggingSelector = (store: CanvasSubstate): boolean => {
 
 const borderRadiusSelector = createCachedSelector(
   metadataSelector,
+  (store: StyleInfoSubstate) =>
+    getActivePlugin(store.editor).styleInfoFactory({
+      projectContents: store.editor.projectContents,
+    }),
   (_: MetadataSubstate, x: ElementPath) => x,
-  (metadata, selectedElement) => {
+  (metadata, styleInfoReader, selectedElement) => {
     const element = MetadataUtils.findElementByElementPath(metadata, selectedElement)
     if (element == null) {
       return null
     }
-    return borderRadiusFromElement(element)
+    return borderRadiusFromElement(element, styleInfoReader(selectedElement))
   },
 )((_, x) => EP.toString(x))
 
@@ -117,7 +122,7 @@ export const BorderRadiusControl = controlForStrategyMemoized<BorderRadiusContro
   )
 
   const borderRadius = useEditorState(
-    Substores.metadata,
+    Substores.styleInfo,
     (store) => borderRadiusSelector(store, selectedElement),
     'BorderRadiusControl borderRadius',
   )
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.ts b/editor/src/components/canvas/plugins/inline-style-plugin.ts
index 226ff8a45401..a3d0c7c3376b 100644
--- a/editor/src/components/canvas/plugins/inline-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.ts
@@ -78,8 +78,21 @@ export const InlineStylePlugin: StylePlugin = {
       const paddingBottom = getPropertyFromInstance('paddingBottom', element.props)
       const paddingLeft = getPropertyFromInstance('paddingLeft', element.props)
       const paddingRight = getPropertyFromInstance('paddingRight', element.props)
+      const borderRadius = getPropertyFromInstance('borderRadius', element.props)
+      const borderTopLeftRadius = getPropertyFromInstance('borderTopLeftRadius', element.props)
+      const borderTopRightRadius = getPropertyFromInstance('borderTopRightRadius', element.props)
+      const borderBottomRightRadius = getPropertyFromInstance(
+        'borderBottomRightRadius',
+        element.props,
+      )
+      const borderBottomLeftRadius = getPropertyFromInstance(
+        'borderBottomLeftRadius',
+        element.props,
+      )
       const zIndex = getPropertyFromInstance('zIndex', element.props)
 
+      const overflow = getPropertyFromInstance('overflow', element.props)
+
       return {
         gap: gap,
         flexDirection: flexDirection,
@@ -95,7 +108,13 @@ export const InlineStylePlugin: StylePlugin = {
         paddingBottom: paddingBottom,
         paddingLeft: paddingLeft,
         paddingRight: paddingRight,
+        borderRadius: borderRadius,
+        borderTopLeftRadius: borderTopLeftRadius,
+        borderTopRightRadius: borderTopRightRadius,
+        borderBottomRightRadius: borderBottomRightRadius,
+        borderBottomLeftRadius: borderBottomLeftRadius,
         zIndex: zIndex,
+        overflow: overflow,
       }
     },
   updateStyles: (editorState, elementPath, updates) => {
diff --git a/editor/src/components/canvas/plugins/style-plugins.ts b/editor/src/components/canvas/plugins/style-plugins.ts
index c23215963f48..42ecae83b215 100644
--- a/editor/src/components/canvas/plugins/style-plugins.ts
+++ b/editor/src/components/canvas/plugins/style-plugins.ts
@@ -20,6 +20,7 @@ import * as PP from '../../../core/shared/property-path'
 import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
 import type { CSSStyleProperty } from '../canvas-types'
 import { isStyleInfoKey, type StyleInfo } from '../canvas-types'
+import type { StyleInfoSubEditorState } from '../../editor/store/store-hook-substore-types'
 import type { ParsedCSSProperties } from '../../inspector/common/css-utils'
 
 export interface UpdateCSSProp {
@@ -64,7 +65,7 @@ export interface StylePlugin {
   ) => EditorStateWithPatch
 }
 
-export function getActivePlugin(editorState: EditorState): StylePlugin {
+export function getActivePlugin(editorState: StyleInfoSubEditorState): StylePlugin {
   if (isFeatureEnabled('Tailwind') && isTailwindEnabled()) {
     return TailwindPlugin(getTailwindConfigCached(editorState))
   }
@@ -177,6 +178,13 @@ const genericPropPatcher =
 
 const PaddingLonghands = ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight']
 
+const BorderRadiusLonghands = [
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+]
+
 const patchers: PropPatcher[] = [
   { matches: (p) => p === 'gap', patch: genericPropPatcher('0px') },
   {
@@ -193,7 +201,25 @@ const patchers: PropPatcher[] = [
       )
     },
   },
+  {
+    matches: (p) => p === 'borderRadius',
+    patch: (_, styleInfo, updatedProperties) => {
+      const propIsSetOnElement = styleInfo?.padding != null
+
+      if (!propIsSetOnElement) {
+        return []
+      }
+
+      return BorderRadiusLonghands.filter(
+        (p) => !updatedProperties.propertiesUpdated.includes(p),
+      ).map((p) => makeZeroProp(p))
+    },
+  },
   { matches: (p) => PaddingLonghands.includes(p), patch: genericPropPatcher('0px') },
+  {
+    matches: (p) => BorderRadiusLonghands.includes(p),
+    patch: genericPropPatcher('0px'),
+  },
 ]
 
 function getPropertiesToZero(
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
index 768f66dd6207..dd9659424cfa 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -2,13 +2,13 @@ import * as TailwindClassParser from '@xengine/tailwindcss-class-parser'
 import { defaultEither, flatMapEither, isLeft } from '../../../core/shared/either'
 import { getClassNameAttribute } from '../../../core/tailwind/tailwind-options'
 import { getElementFromProjectContents } from '../../editor/store/editor-state'
-import type { ParsedCSSProperties, Parser } from '../../inspector/common/css-utils'
+import type { ParsedCSSProperties } from '../../inspector/common/css-utils'
 import { cssParsers } from '../../inspector/common/css-utils'
 import { mapDropNulls } from '../../../core/shared/array-utils'
 import type { StylePlugin } from './style-plugins'
 import type { Config } from 'tailwindcss/types/config'
 import type { StyleInfo } from '../canvas-types'
-import { cssStyleProperty, isStyleInfoKey, type CSSStyleProperty } from '../canvas-types'
+import { cssStyleProperty, type CSSStyleProperty } from '../canvas-types'
 import * as UCL from './tailwind-style-plugin-utils/update-class-list'
 import { assertNever } from '../../../core/shared/utils'
 import {
@@ -45,6 +45,12 @@ const TailwindPropertyMapping: Record<string, string> = {
   paddingBottom: 'paddingBottom',
   paddingLeft: 'paddingLeft',
 
+  borderRadius: 'borderRadius',
+  borderTopLeftRadius: 'borderTopLeftRadius',
+  borderTopRightRadius: 'borderTopRightRadius',
+  borderBottomRightRadius: 'borderBottomRightRadius',
+  borderBottomLeftRadius: 'borderBottomLeftRadius',
+
   justifyContent: 'justifyContent',
   alignItems: 'alignItems',
   flex: 'flex',
@@ -55,6 +61,8 @@ const TailwindPropertyMapping: Record<string, string> = {
   flexWrap: 'flexWrap',
   gap: 'gap',
 
+  overflow: 'overflow',
+
   zIndex: 'zIndex',
 }
 
@@ -154,7 +162,28 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
           mapping[TailwindPropertyMapping.paddingLeft],
           'paddingLeft',
         ),
+        borderRadius: parseTailwindProperty(
+          mapping[TailwindPropertyMapping.borderRadius],
+          'borderRadius',
+        ),
+        borderTopLeftRadius: parseTailwindProperty(
+          mapping[TailwindPropertyMapping.borderTopLeftRadius],
+          'borderTopLeftRadius',
+        ),
+        borderTopRightRadius: parseTailwindProperty(
+          mapping[TailwindPropertyMapping.borderTopRightRadius],
+          'borderTopRightRadius',
+        ),
+        borderBottomRightRadius: parseTailwindProperty(
+          mapping[TailwindPropertyMapping.borderBottomRightRadius],
+          'borderBottomRightRadius',
+        ),
+        borderBottomLeftRadius: parseTailwindProperty(
+          mapping[TailwindPropertyMapping.borderBottomLeftRadius],
+          'borderBottomLeftRadius',
+        ),
         zIndex: parseTailwindProperty(mapping[TailwindPropertyMapping.zIndex], 'zIndex'),
+        overflow: parseTailwindProperty(mapping[TailwindPropertyMapping.overflow], 'overflow'),
       }
     },
   updateStyles: (editorState, elementPath, updates) => {
diff --git a/editor/src/components/editor/store/store-hook-substore-types.ts b/editor/src/components/editor/store/store-hook-substore-types.ts
index 178ab22a95d2..eea6a848a3f9 100644
--- a/editor/src/components/editor/store/store-hook-substore-types.ts
+++ b/editor/src/components/editor/store/store-hook-substore-types.ts
@@ -158,6 +158,18 @@ const propertyControlsInfoSubstate = {
 } as const
 export type PropertyControlsInfoSubstate = typeof propertyControlsInfoSubstate
 
+// StyleInfoSubstate
+export const styleInfoSubstateKeys = [
+  ...metadataSubstateKeys,
+  ...projectContentsKeys,
+  'codeResultCache',
+] as const
+const emptyStyleInfoSubstate = {
+  editor: pick(styleInfoSubstateKeys, EmptyEditorStateForKeysOnly),
+} as const
+export type StyleInfoSubstate = typeof emptyStyleInfoSubstate
+export type StyleInfoSubEditorState = StyleInfoSubstate['editor']
+
 export type MetadataAndPropertyControlsInfoSubstate = MetadataSubstate &
   PropertyControlsInfoSubstate
 
diff --git a/editor/src/components/editor/store/store-hook.ts b/editor/src/components/editor/store/store-hook.ts
index 9ff6287b8a82..ea0824397cfc 100644
--- a/editor/src/components/editor/store/store-hook.ts
+++ b/editor/src/components/editor/store/store-hook.ts
@@ -40,6 +40,7 @@ import type {
   RestOfEditorState,
   SelectedViewsSubstate,
   StoreKey,
+  StyleInfoSubstate,
   Substates,
   ThemeSubstate,
   UserStateSubstate,
@@ -58,6 +59,7 @@ import {
   restOfEditorStateKeys,
   restOfStoreKeys,
   selectedViewsSubstateKeys,
+  styleInfoSubstateKeys,
   variablesInScopeSubstateKeys,
 } from './store-hook-substore-types'
 import { Getter } from '../hook-utils'
@@ -355,6 +357,9 @@ export const Substores = {
       b.editor,
     )
   },
+  styleInfo: (a: StyleInfoSubstate, b: StyleInfoSubstate) => {
+    return keysEquality(styleInfoSubstateKeys, a.editor, b.editor)
+  },
 } as const
 
 export const SubstateEqualityFns: {
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index 4a381243fdc5..6147a5ce6441 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -2483,7 +2483,7 @@ function printTransformOrigin(transformOrigin: CSSTransformOrigin): JSExpression
   )
 }
 
-type CSSOverflow = boolean
+export type CSSOverflow = boolean
 
 function parseOverflow(overflow: unknown): Either<string, CSSOverflow> {
   if (typeof overflow === 'string') {
diff --git a/editor/src/core/layout/layout-helpers-new.ts b/editor/src/core/layout/layout-helpers-new.ts
index c3329258a2e6..a43d7eee3587 100644
--- a/editor/src/core/layout/layout-helpers-new.ts
+++ b/editor/src/core/layout/layout-helpers-new.ts
@@ -109,6 +109,7 @@ export type StyleLayoutProp =
   | 'zIndex'
   | 'rowGap'
   | 'columnGap'
+  | 'overflow'
 
 export function framePointForPinnedProp(pinnedProp: LayoutPinnedProp): FramePoint {
   switch (pinnedProp) {
diff --git a/editor/src/core/tailwind/tailwind-compilation.ts b/editor/src/core/tailwind/tailwind-compilation.ts
index b71edcc1b587..8a61463711ab 100644
--- a/editor/src/core/tailwind/tailwind-compilation.ts
+++ b/editor/src/core/tailwind/tailwind-compilation.ts
@@ -13,15 +13,16 @@ import { importDefault } from '../es-modules/commonjs-interop'
 import { rescopeCSSToTargetCanvasOnly } from '../shared/css-utils'
 import type { RequireFn } from '../shared/npm-dependency-types'
 import { TailwindConfigPath } from './tailwind-config'
-import { ElementsToRerenderGLOBAL } from '../../components/canvas/ui-jsx-canvas'
 import { isFeatureEnabled } from '../../utils/feature-switches'
 import type { Config } from 'tailwindcss/types/config'
-import type { EditorState } from '../../components/editor/store/editor-state'
 import { createSelector } from 'reselect'
-import type { ProjectContentSubstate } from '../../components/editor/store/store-hook-substore-types'
+import type {
+  ProjectContentSubstate,
+  StyleInfoSubEditorState,
+} from '../../components/editor/store/store-hook-substore-types'
 
 const LatestConfig: { current: { code: string; config: Config } | null } = { current: null }
-export function getTailwindConfigCached(editorState: EditorState): Config | null {
+export function getTailwindConfigCached(editorState: StyleInfoSubEditorState): Config | null {
   const tailwindConfig = getProjectFileByFilePath(editorState.projectContents, TailwindConfigPath)
   if (tailwindConfig == null || tailwindConfig.type !== 'TEXT_FILE') {
     return null
@@ -59,6 +60,8 @@ function ensureElementExists({ type, id }: { type: string; id: string }) {
   return tag
 }
 
+const TailwindStylesElementID = 'utopia-tailwind-jit-styles'
+
 async function generateTailwindStyles(tailwindCss: Tailwindcss, allCSSFiles: string) {
   const contentElement = document.getElementById(CanvasContainerID)
   if (contentElement == null) {
@@ -66,10 +69,17 @@ async function generateTailwindStyles(tailwindCss: Tailwindcss, allCSSFiles: str
   }
   const content = contentElement.outerHTML
   const styleString = await tailwindCss.generateStylesFromContent(allCSSFiles, [content])
-  const style = ensureElementExists({ type: 'style', id: 'utopia-tailwind-jit-styles' })
+  const style = ensureElementExists({ type: 'style', id: TailwindStylesElementID })
   style.textContent = rescopeCSSToTargetCanvasOnly(styleString)
 }
 
+function removeTailwindStyles() {
+  const style = document.getElementById(TailwindStylesElementID)
+  if (style != null) {
+    style.remove()
+  }
+}
+
 function getCssFilesFromProjectContents(projectContents: ProjectContentTreeRoot) {
   let files: string[] = []
   walkContentsTree(projectContents, (path, file) => {
@@ -99,11 +109,7 @@ function runTailwindClassGenerationOnDOMMutation(
       m.addedNodes.length > 0 || // new DOM element was added with potentially new classes
       m.attributeName === 'class', // potentially new classes were added to the class attribute of an element
   )
-  if (
-    !updateHasNewTailwindData ||
-    isInteractionActive ||
-    ElementsToRerenderGLOBAL.current !== 'rerender-all-elements' // implies that an interaction is in progress)
-  ) {
+  if (!updateHasNewTailwindData || isInteractionActive) {
     return
   }
   generateTailwindClasses(projectContents, requireFn)
@@ -161,6 +167,7 @@ export const useTailwindCompilation = () => {
     generateTailwindClasses(projectContentsRef.current, requireFnRef.current)
 
     return () => {
+      removeTailwindStyles()
       observer.disconnect()
     }
   }, [isInteractionActiveRef, projectContentsRef, requireFnRef, tailwindConfig])

From 1b27ff8b594b800c64e69d2799233ac2758b225f Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Fri, 22 Nov 2024 11:01:03 +0000
Subject: [PATCH 240/272] fix(theme) Fix the resize corner handles in the dark
 theme. (#6673)

- Changed the `canvasControlsSizeBoxShadowColor20` and
`canvasControlsSizeBoxShadowColor50` theme properties.
---
 editor/src/uuiui/styles/theme/dark.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
index bc91e13d8e91..6c015f5afbf9 100644
--- a/editor/src/uuiui/styles/theme/dark.ts
+++ b/editor/src/uuiui/styles/theme/dark.ts
@@ -138,8 +138,8 @@ const colorsWithOpacity = {
   whiteOpacity35: createUtopiColor('oklch(100% 0 0 /35%)'),
   grey65: createUtopiColor('oklch(65% 0 0)'),
   blackOpacity35: createUtopiColor('oklch(0% 0 0 / 35%)'),
-  canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(255,255,255,0.20)'),
-  canvasControlsSizeBoxShadowColor50: createUtopiColor('rgba(255,255,255,0.5)'),
+  canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(0,0,0,0.20)'),
+  canvasControlsSizeBoxShadowColor50: createUtopiColor('rgba(0,0,0,0.5)'),
   neutralInvertedBackground10: createUtopiColor('rgba(217, 220, 227, 0.1)'),
   neutralInvertedBackground20: createUtopiColor('rgba(217, 220, 227, 0.2)'),
   neutralInvertedBackground30: createUtopiColor('rgba(217, 220, 227, 0.3)'),

From 0e301319b53055322326a513370bd277b4aa4cb7 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Fri, 22 Nov 2024 13:46:08 +0000
Subject: [PATCH 241/272] refactor(grid) Grid Element Direct Lookup Ordered
 Correctly. (#6667)

- Moved a lot of common types and functions used when obtaining values
from elements for grids into `grid-measurements.tsx`.
- Added `getGridElementMeasurementHelperData` to retrieve the necessary
details for a grid element, along with some supporting functions.
- Extracted out a `getGlobalFrame` function for the common lookup used.
- Changed some test ID values in two components as they created the same
ones.
- `PaddingResizeControl` set to the `bottom` priority so that it doesn't
end up on top of the track resizing controls.
- `GridControl` now gets the cell dimensions directly from the grid
element.
- `GridElementContainingBlock` gets the grid child dimensions directly.
- Added `HelperControlsStateContext` and made the connected change to
`StoreName`.
- Added `helperControlsStore` to `Editor`.
- Added contexts for the helper store to `EditorRoot` and `HotRoot`.
- Wrapped the contents of `GridElementContainingBlocks` and
`GridMeasurementHelpers` with the new helper store context.
- Added calls to update the helper store in the regular and test
dispatch flows.
---
 .../resize-grid-strategy.spec.browser2.tsx    |  14 +-
 .../strategies/set-padding-strategy.tsx       |   1 +
 .../controls/grid-controls-for-strategies.tsx | 238 +-----------
 .../canvas/controls/grid-controls-helpers.ts  |   2 +-
 .../canvas/controls/grid-controls.tsx         | 165 ++++-----
 .../canvas/controls/grid-measurements.tsx     | 343 ++++++++++++++++++
 .../canvas/controls/new-canvas-controls.tsx   |  12 +-
 .../grid-gap-control-component.tsx            |   2 +-
 .../components/canvas/direct-dom-lookups.ts   |   2 +-
 editor/src/components/canvas/dom-walker.ts    |   3 +-
 editor/src/components/canvas/gap-utils.ts     |   2 -
 .../components/canvas/ui-jsx.test-utils.tsx   |   8 +
 .../components/editor/store/editor-state.ts   |   2 +-
 .../src/components/editor/store/store-hook.ts |   2 +
 ...performance-regression-tests.spec.tsx.snap |  80 ++--
 .../performance-regression-tests.spec.tsx     |   8 +-
 editor/src/templates/editor.tsx               |  49 ++-
 17 files changed, 544 insertions(+), 389 deletions(-)
 create mode 100644 editor/src/components/canvas/controls/grid-measurements.tsx

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
index 5a83237fe0ec..2669d33be3a7 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.spec.browser2.tsx
@@ -144,7 +144,7 @@ describe('resize a grid', () => {
     await renderResult.dispatch(selectComponents([target], false), true)
     await renderResult.getDispatchFollowUpActionsFinished()
     const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
-    const resizeControl = renderResult.renderedDOM.getByTestId(`grid-column-handle-1`)
+    const resizeControl = renderResult.renderedDOM.getByTestId(`grid-track-size-column-handle-1`)
     const resizeControlRect = resizeControl.getBoundingClientRect()
     const startPoint = canvasPoint({
       x: resizeControlRect.x + resizeControlRect.width / 2,
@@ -259,7 +259,7 @@ export var storyboard = (
     await renderResult.dispatch(selectComponents([target], false), true)
     await renderResult.getDispatchFollowUpActionsFinished()
     const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
-    const resizeControl = renderResult.renderedDOM.getByTestId(`grid-column-handle-1`)
+    const resizeControl = renderResult.renderedDOM.getByTestId(`grid-track-size-column-handle-1`)
     const resizeControlRect = resizeControl.getBoundingClientRect()
     const startPoint = canvasPoint({
       x: resizeControlRect.x + resizeControlRect.width / 2,
@@ -320,7 +320,7 @@ export var storyboard = (
     await renderResult.dispatch(selectComponents([target], false), true)
     await renderResult.getDispatchFollowUpActionsFinished()
     const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
-    const resizeControl = renderResult.renderedDOM.getByTestId(`grid-row-handle-1`)
+    const resizeControl = renderResult.renderedDOM.getByTestId(`grid-track-size-row-handle-1`)
     const resizeControlRect = resizeControl.getBoundingClientRect()
     const startPoint = canvasPoint({
       x: resizeControlRect.x + resizeControlRect.width / 2,
@@ -435,7 +435,7 @@ export var storyboard = (
     await renderResult.dispatch(selectComponents([target], false), true)
     await renderResult.getDispatchFollowUpActionsFinished()
     const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
-    const resizeControl = renderResult.renderedDOM.getByTestId(`grid-column-handle-1`)
+    const resizeControl = renderResult.renderedDOM.getByTestId(`grid-track-size-column-handle-1`)
     const resizeControlRect = resizeControl.getBoundingClientRect()
     const startPoint = canvasPoint({
       x: resizeControlRect.x + resizeControlRect.width / 2,
@@ -555,7 +555,7 @@ export var storyboard = (
       await renderResult.dispatch(selectComponents([target], false), true)
       await renderResult.getDispatchFollowUpActionsFinished()
       const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
-      const resizeControl = renderResult.renderedDOM.getByTestId(`grid-column-handle-1`)
+      const resizeControl = renderResult.renderedDOM.getByTestId(`grid-track-size-column-handle-1`)
       const resizeControlRect = resizeControl.getBoundingClientRect()
       const startPoint = canvasPoint({
         x: resizeControlRect.x + resizeControlRect.width / 2,
@@ -674,7 +674,7 @@ export var storyboard = (
       await renderResult.dispatch(selectComponents([target], false), true)
       await renderResult.getDispatchFollowUpActionsFinished()
       const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
-      const resizeControl = renderResult.renderedDOM.getByTestId(`grid-column-handle-1`)
+      const resizeControl = renderResult.renderedDOM.getByTestId(`grid-track-size-column-handle-1`)
       const resizeControlRect = resizeControl.getBoundingClientRect()
       const startPoint = canvasPoint({
         x: resizeControlRect.x + resizeControlRect.width / 2,
@@ -792,7 +792,7 @@ export var storyboard = (
       await renderResult.dispatch(selectComponents([target], false), true)
       await renderResult.getDispatchFollowUpActionsFinished()
       const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
-      const resizeControl = renderResult.renderedDOM.getByTestId(`grid-column-handle-1`)
+      const resizeControl = renderResult.renderedDOM.getByTestId(`grid-track-size-column-handle-1`)
       const resizeControlRect = resizeControl.getBoundingClientRect()
       const startPoint = canvasPoint({
         x: resizeControlRect.x + resizeControlRect.width / 2,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
index c8672ef6c272..a613e847cb17 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
@@ -131,6 +131,7 @@ export const setPaddingStrategy: CanvasStrategyFactory = (canvasState, interacti
     props: { targets: selectedElements },
     key: 'padding-resize-control',
     show: 'visible-except-when-other-strategy-is-active',
+    priority: 'bottom',
   })
 
   const controlsToRender = optionalMap(
diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index d01e6488659a..bf9c276238a9 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -1,18 +1,11 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { sides, type Sides } from 'utopia-api/core'
 import type { ElementPath } from 'utopia-shared/src/types'
-import {
-  isStaticGridRepeat,
-  parseCSSLength,
-  printGridAutoOrTemplateBase,
-} from '../../inspector/common/css-utils'
+import { printGridAutoOrTemplateBase } from '../../inspector/common/css-utils'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { mapDropNulls } from '../../../core/shared/array-utils'
 import * as EP from '../../../core/shared/element-path'
-import type { BorderWidths } from '../../../core/shared/element-template'
 import { type GridAutoOrTemplateBase } from '../../../core/shared/element-template'
-import type { CanvasRectangle } from '../../../core/shared/math-utils'
 import { assertNever } from '../../../core/shared/utils'
 import { Substores, useEditorState } from '../../editor/store/store-hook'
 import type {
@@ -23,7 +16,6 @@ import { controlForStrategyMemoized } from '../canvas-strategies/canvas-strategy
 import type { GridResizeEdge } from '../canvas-strategies/interaction-state'
 import type { EdgePosition } from '../canvas-types'
 import {
-  CanvasContainerID,
   EdgePositionBottom,
   EdgePositionLeft,
   EdgePositionRight,
@@ -35,14 +27,8 @@ import {
   GridRowColumnResizingControlsComponent,
 } from './grid-controls'
 import { isEdgePositionOnSide } from '../canvas-utils'
-import { getFromElement } from '../direct-dom-lookups'
-import { applicativeSidesPxTransform, getGridContainerProperties } from '../dom-walker'
-import { applicative4Either, defaultEither, isRight, mapEither } from '../../../core/shared/either'
-import { domRectToScaledCanvasRectangle, getRoundingFn } from '../../../core/shared/dom-utils'
-import Utils from '../../../utils/utils'
 import { useMonitorChangesToElements } from '../../../components/editor/store/store-monitor'
 import { useKeepReferenceEqualityIfPossible } from '../../../utils/react-performance'
-import type { CSSProperties } from 'react'
 import {
   gridContainerIdentifier,
   gridItemIdentifier,
@@ -51,29 +37,13 @@ import {
 } from '../../editor/store/editor-state'
 import { findOriginalGrid } from '../canvas-strategies/strategies/grid-helpers'
 import * as React from 'react'
-import { addChangeCallback, removeChangeCallback } from '../observers'
+import type { GridData } from './grid-measurements'
+import { getGridMeasurementHelperData, useObserversToWatch } from './grid-measurements'
 
 export const GridMeasurementHelperMap = { current: new WeakMap<HTMLElement, string>() }
 
 export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`
 
-function getCellsCount(template: GridAutoOrTemplateBase | null): number {
-  if (template == null) {
-    return 0
-  }
-
-  switch (template.type) {
-    case 'DIMENSIONS':
-      return template.dimensions.reduce((acc, cur) => {
-        return acc + (isStaticGridRepeat(cur) ? cur.times : 1)
-      }, 0)
-    case 'FALLBACK':
-      return 0
-    default:
-      assertNever(template)
-  }
-}
-
 export function getNullableAutoOrTemplateBaseString(
   template: GridAutoOrTemplateBase | null,
 ): string | undefined {
@@ -84,208 +54,6 @@ export function getNullableAutoOrTemplateBaseString(
   }
 }
 
-export type GridMeasurementHelperData = {
-  frame: CanvasRectangle
-  rows: number
-  columns: number
-  cells: number
-  computedStyling: CSSProperties
-  gridTemplateColumns: GridAutoOrTemplateBase | null
-  gridTemplateRows: GridAutoOrTemplateBase | null
-  gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null
-  gridTemplateRowsFromProps: GridAutoOrTemplateBase | null
-  border: BorderWidths
-  gap: number | null
-  rowGap: number | null
-  columnGap: number | null
-  padding: Sides
-  element: HTMLElement
-}
-
-export type ElementOrParent = 'parent' | 'element'
-
-export function getGridMeasurementHelperData(
-  elementPath: ElementPath,
-  scale: number,
-  source: ElementOrParent,
-): GridMeasurementHelperData | undefined {
-  return getFromElement(elementPath, gridMeasurementHelperDataFromElement(scale), source)
-}
-
-function getStylingSubset(styling: CSSStyleDeclaration): CSSProperties {
-  // Fields chosen to not overlap with any others, so as to not make React complain.
-  return {
-    gridAutoFlow: styling.gridAutoFlow,
-    gridAutoColumns: styling.gridAutoColumns,
-    gridAutoRows: styling.gridAutoRows,
-    gridTemplateColumns: styling.gridTemplateColumns,
-    gridTemplateRows: styling.gridTemplateRows,
-    gridColumn: styling.gridColumn,
-    gridRow: styling.gridRow,
-    gap: styling.gap,
-    rowGap: styling.rowGap,
-    columnGap: styling.columnGap,
-    justifyContent: styling.justifyContent,
-    alignContent: styling.alignContent,
-    padding: styling.padding,
-    paddingTop: styling.paddingTop,
-    paddingLeft: styling.paddingLeft,
-    paddingBottom: styling.paddingBottom,
-    paddingRight: styling.paddingRight,
-    borderTop: styling.borderTopWidth,
-    borderLeft: styling.borderLeftWidth,
-    borderBottom: styling.borderBottomWidth,
-    borderRight: styling.borderRightWidth,
-  }
-}
-
-export function gridMeasurementHelperDataFromElement(
-  scale: number,
-): (element: HTMLElement) => GridMeasurementHelperData | undefined {
-  return (element) => {
-    const canvasRootContainer = document.getElementById(CanvasContainerID)
-    if (canvasRootContainer == null) {
-      return undefined
-    }
-
-    const computedStyle = getComputedStyle(element)
-    const boundingRectangle = element.getBoundingClientRect()
-
-    const computedStyling: CSSProperties = getStylingSubset(computedStyle)
-
-    const containerGridProperties = getGridContainerProperties(computedStyle)
-    const containerGridPropertiesFromProps = getGridContainerProperties(element.style)
-
-    const columns = getCellsCount(containerGridProperties.gridTemplateColumns)
-    const rows = getCellsCount(containerGridProperties.gridTemplateRows)
-    const borderTopWidth = parseCSSLength(computedStyle.borderTopWidth)
-    const borderRightWidth = parseCSSLength(computedStyle.borderRightWidth)
-    const borderBottomWidth = parseCSSLength(computedStyle.borderBottomWidth)
-    const borderLeftWidth = parseCSSLength(computedStyle.borderLeftWidth)
-    const border: BorderWidths = {
-      top: isRight(borderTopWidth) ? borderTopWidth.value.value : 0,
-      right: isRight(borderRightWidth) ? borderRightWidth.value.value : 0,
-      bottom: isRight(borderBottomWidth) ? borderBottomWidth.value.value : 0,
-      left: isRight(borderLeftWidth) ? borderLeftWidth.value.value : 0,
-    }
-    const padding = defaultEither(
-      sides(undefined, undefined, undefined, undefined),
-      applicative4Either(
-        applicativeSidesPxTransform,
-        parseCSSLength(computedStyle.paddingTop),
-        parseCSSLength(computedStyle.paddingRight),
-        parseCSSLength(computedStyle.paddingBottom),
-        parseCSSLength(computedStyle.paddingLeft),
-      ),
-    )
-    const gap = defaultEither(
-      null,
-      mapEither((n) => n.value, parseCSSLength(computedStyle.gap)),
-    )
-
-    const rowGap = defaultEither(
-      null,
-      mapEither((n) => n.value, parseCSSLength(computedStyle.rowGap)),
-    )
-
-    const columnGap = defaultEither(
-      null,
-      mapEither((n) => n.value, parseCSSLength(computedStyle.columnGap)),
-    )
-
-    const elementRect = domRectToScaledCanvasRectangle(
-      boundingRectangle,
-      1 / scale,
-      getRoundingFn('nearest-half'),
-    )
-    const parentRect = domRectToScaledCanvasRectangle(
-      canvasRootContainer.getBoundingClientRect(),
-      1 / scale,
-      getRoundingFn('nearest-half'),
-    )
-    const frame = Utils.offsetRect(elementRect, Utils.negate(parentRect))
-
-    return {
-      frame: frame,
-      gridTemplateColumns: containerGridProperties.gridTemplateColumns,
-      gridTemplateRows: containerGridProperties.gridTemplateRows,
-      gridTemplateColumnsFromProps: containerGridPropertiesFromProps.gridTemplateColumns,
-      gridTemplateRowsFromProps: containerGridPropertiesFromProps.gridTemplateRows,
-      border: border,
-      padding: padding,
-      gap: gap,
-      rowGap: rowGap,
-      columnGap: columnGap,
-      rows: rows,
-      columns: columns,
-      cells: columns * rows,
-      computedStyling: computedStyling,
-      element: element,
-    }
-  }
-}
-
-function useObserversToWatch(elementPathOrPaths: Array<ElementPath> | ElementPath): number {
-  // Used to trigger extra renders.
-  const [counter, setCounter] = React.useState(0)
-  const bumpCounter = React.useCallback(() => {
-    setCounter((value) => value + 1)
-  }, [])
-
-  // Need to use the mount count for the callback trigger.
-  const mountCount = useEditorState(
-    Substores.canvas,
-    (store) => store.editor.canvas.mountCount,
-    'useObserversToWatch mountCount',
-  )
-
-  React.useEffect(() => {
-    // Add the change callback(s) for the element path or paths.
-    if (Array.isArray(elementPathOrPaths)) {
-      for (const elementPath of elementPathOrPaths) {
-        addChangeCallback(mountCount, elementPath, bumpCounter)
-      }
-    } else {
-      addChangeCallback(mountCount, elementPathOrPaths, bumpCounter)
-    }
-
-    return function cleanup() {
-      if (Array.isArray(elementPathOrPaths)) {
-        for (const elementPath of elementPathOrPaths) {
-          removeChangeCallback(elementPath, bumpCounter)
-        }
-      } else {
-        removeChangeCallback(elementPathOrPaths, bumpCounter)
-      }
-    }
-  }, [mountCount, elementPathOrPaths, bumpCounter])
-
-  return counter
-}
-
-export function useGridMeasurementHelperData(
-  elementPath: ElementPath,
-  source: ElementOrParent,
-): GridMeasurementHelperData | undefined {
-  const scale = useEditorState(
-    Substores.canvas,
-    (store) => store.editor.canvas.scale,
-    'useGridMeasurementHelperData scale',
-  )
-
-  useMonitorChangesToElements([elementPath])
-
-  useObserversToWatch(elementPath)
-
-  return useKeepReferenceEqualityIfPossible(
-    getGridMeasurementHelperData(elementPath, scale, source),
-  )
-}
-
-export type GridData = GridMeasurementHelperData & {
-  identifier: GridIdentifier
-}
-
 export function useGridData(gridIdentifiers: GridIdentifier[]): GridData[] {
   const scale = useEditorState(
     Substores.canvas,
diff --git a/editor/src/components/canvas/controls/grid-controls-helpers.ts b/editor/src/components/canvas/controls/grid-controls-helpers.ts
index 46dea6427985..c24340b47410 100644
--- a/editor/src/components/canvas/controls/grid-controls-helpers.ts
+++ b/editor/src/components/canvas/controls/grid-controls-helpers.ts
@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react'
-import type { GridMeasurementHelperData } from './grid-controls-for-strategies'
+import type { GridMeasurementHelperData } from './grid-measurements'
 
 export function getGridHelperStyleMatchingTargetGrid(
   grid: GridMeasurementHelperData,
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index c7d500b72dfc..7992c4155988 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -50,7 +50,13 @@ import { Modifier } from '../../../utils/modifiers'
 import { when } from '../../../utils/react-conditionals'
 import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useDispatch } from '../../editor/store/dispatch-context'
-import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
+import {
+  EditorStateContext,
+  HelperControlsStateContext,
+  Substores,
+  useEditorState,
+  useRefEditorState,
+} from '../../editor/store/store-hook'
 import type { GridDimension, GridDiscreteDimension } from '../../inspector/common/css-utils'
 import {
   isCSSKeyword,
@@ -91,11 +97,7 @@ import { windowToCanvasCoordinates } from '../dom-lookup'
 import type { Axis } from '../gap-utils'
 import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
 import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
-import type {
-  GridControlsProps,
-  GridData,
-  GridMeasurementHelperData,
-} from './grid-controls-for-strategies'
+import type { GridControlsProps } from './grid-controls-for-strategies'
 import {
   edgePositionToGridResizeEdge,
   GridCellTestId,
@@ -106,7 +108,6 @@ import {
   GridMeasurementHelperMap,
   GridMeasurementHelpersKey,
   useGridData,
-  useGridMeasurementHelperData,
 } from './grid-controls-for-strategies'
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 import { useResizeEdges } from './select-mode/use-resize-edges'
@@ -119,6 +120,14 @@ import { styleStringInArray } from '../../../utils/common-constants'
 import { gridContainerIdentifier, type GridIdentifier } from '../../editor/store/editor-state'
 import type { RulerMarkerType } from './grid-controls-ruler-markers'
 import { rulerMarkerIcons } from './grid-controls-ruler-markers'
+import type { GridData, GridMeasurementHelperData } from './grid-measurements'
+import {
+  getGridElementMeasurementHelperData,
+  useGridElementMeasurementHelperData,
+  useGridMeasurementHelperData,
+} from './grid-measurements'
+import type { Property } from 'csstype'
+import { isInsertMode, isSelectMode } from '../../editor/editor-modes'
 import { isFeatureEnabled } from '../../../utils/feature-switches'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
@@ -227,7 +236,7 @@ const GridTrackSizeLabel = React.memo((props: GridResizingControlProps) => {
     [maybeClearHighlightsOnHoverEnd],
   )
 
-  const labelId = `grid-${props.axis}-handle-${props.dimensionIndex}`
+  const labelId = `grid-track-size-${props.axis}-handle-${props.dimensionIndex}`
   const containerId = `${labelId}-container`
 
   const cssProp = React.useMemo(
@@ -296,7 +305,7 @@ const GridResizingStripedIndicator = React.memo((props: GridResizingControlProps
   )
   const colorTheme = useColorTheme()
 
-  const labelId = `grid-${props.axis}-handle-${props.dimensionIndex}`
+  const labelId = `grid-resizing-${props.axis}-handle-${props.dimensionIndex}`
   const containerId = `${labelId}-container`
 
   return (
@@ -706,25 +715,25 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
     'GridControl anyTargetAbsolute',
   )
 
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'GridControl scale',
+  )
+
   const anyTargetNotPinned = useEditorState(
     Substores.metadata,
     (store) =>
-      store.editor.selectedViews.some(
-        (elementPath) =>
+      store.editor.selectedViews.some((elementPath) => {
+        return (
           getGridElementPinState(
-            MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, elementPath)
-              ?.specialSizeMeasurements.elementGridPropertiesFromProps ?? null,
-          ) !== 'pinned',
-      ),
+            getGridElementMeasurementHelperData(elementPath, scale)?.gridElementProperties ?? null,
+          ) !== 'pinned'
+        )
+      }),
     'GridControl anyTargetNotPinned',
   )
 
-  const scale = useEditorState(
-    Substores.canvas,
-    (store) => store.editor.canvas.scale,
-    'GridControl scale',
-  )
-
   const canvasOffsetRef = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
 
   const startInteractionWithUid = React.useCallback(
@@ -770,30 +779,32 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
       const countedRow = Math.floor(index / grid.columns) + 1
       const countedColumn = Math.floor(index % grid.columns) + 1
 
-      const columnFromProps = cell.specialSizeMeasurements.elementGridProperties.gridColumnStart
-      const rowFromProps = cell.specialSizeMeasurements.elementGridProperties.gridRowStart
-
-      function getAxisValue(value: GridPositionOrSpan | null, counted: number): number {
-        if (
-          value == null ||
-          isCSSKeyword(value) ||
-          isGridSpan(value) ||
-          value.numericalPosition == null
-        ) {
+      const gridElementData = getGridElementMeasurementHelperData(cell.elementPath, scale)
+      if (gridElementData == null) {
+        return null
+      }
+      const columnFromProps = gridElementData.computedStyling.gridColumnStart
+      const rowFromProps = gridElementData.computedStyling.gridRowStart
+
+      function getAxisValue(
+        value: Property.GridColumnStart | Property.GridRowStart | undefined,
+        counted: number,
+      ): number {
+        if (value == null || typeof value !== 'number') {
           return counted
         }
-        return value.numericalPosition
+        return value
       }
       return {
         elementPath: cell.elementPath,
-        globalFrame: cell.globalFrame,
-        borderRadius: cell.specialSizeMeasurements.borderRadius,
+        globalFrame: gridElementData.frame,
+        borderRadius: gridElementData.computedStyling.borderRadius,
         column: getAxisValue(columnFromProps, countedColumn),
         row: getAxisValue(rowFromProps, countedRow),
         index: index,
       }
     }, children)
-  }, [grid, jsxMetadata])
+  }, [grid.columns, grid.identifier, jsxMetadata, scale])
 
   const dragging = useEditorState(
     Substores.canvas,
@@ -1015,10 +1026,7 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
                 controlsVisible === 'visible'
                   ? '#ffffff66'
                   : 'transparent',
-              borderRadius:
-                cell.borderRadius != null
-                  ? `${cell.borderRadius.top}px ${cell.borderRadius.right}px ${cell.borderRadius.bottom}px ${cell.borderRadius.left}px`
-                  : 0,
+              borderRadius: cell.borderRadius ?? 0,
             }}
           />
         )
@@ -1037,10 +1045,7 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
             position: 'absolute',
             width: shadow.globalFrame.width,
             height: shadow.globalFrame.height,
-            borderRadius:
-              shadow.borderRadius != null
-                ? `${shadow.borderRadius.top}px ${shadow.borderRadius.right}px ${shadow.borderRadius.bottom}px ${shadow.borderRadius.left}px`
-                : 0,
+            borderRadius: shadow.borderRadius ?? 0,
             backgroundColor: 'black',
             opacity: 0.1,
             border: '1px solid white',
@@ -1105,6 +1110,7 @@ export const GridMeasurementHelper = React.memo<GridMeasurementHelperProps>(
 
     const uid = UUID()
     GridMeasurementHelperMap.current.set(gridData.element, uid)
+
     return (
       <div id={uid} data-grid-path={EP.toString(elementPath)} style={style}>
         {placeholders.map((cell) => {
@@ -1961,19 +1967,9 @@ export interface GridElementContainingBlockProps {
   gridChild: ElementPath
 }
 
-function nullHandlingPrintPin(
-  gridTemplate: GridContainerProperties | null | undefined,
-  pin: GridPositionOrSpan | null | undefined,
-  axis: 'row' | 'column',
-): string | number | undefined {
-  if (gridTemplate == null || pin == null) {
-    return undefined
-  }
-  return printPin(gridTemplate, pin, axis)
-}
-
 const GridElementContainingBlock = React.memo<GridElementContainingBlockProps>((props) => {
   const gridData = useGridMeasurementHelperData(props.gridPath, 'element')
+  const gridChildData = useGridElementMeasurementHelperData(props.gridChild)
   const scale = useEditorState(
     Substores.canvas,
     (store) => store.editor.canvas.scale,
@@ -1990,44 +1986,18 @@ const GridElementContainingBlock = React.memo<GridElementContainingBlockProps>((
     },
     'GridElementContainingBlock position',
   )
-  const gridChildStyle: CSSProperties = useEditorState(
-    Substores.metadata,
-    (store) => {
-      const childMetadata = MetadataUtils.findElementByElementPath(
-        store.editor.jsxMetadata,
-        props.gridChild,
-      )
-      if (childMetadata == null) {
-        return {}
-      }
-      const gridFromProps = childMetadata.specialSizeMeasurements.elementGridPropertiesFromProps
-      const gridComputed = childMetadata.specialSizeMeasurements.elementGridProperties
-      return {
-        gridColumnStart: nullHandlingPrintPin(
-          childMetadata.specialSizeMeasurements.containerGridProperties,
-          gridFromProps.gridColumnStart ?? gridComputed.gridColumnStart,
-          'column',
-        ),
-        gridColumnEnd: nullHandlingPrintPin(
-          childMetadata.specialSizeMeasurements.containerGridProperties,
-          gridFromProps.gridColumnEnd ?? gridComputed.gridColumnEnd,
-          'column',
-        ),
-        gridRowStart: nullHandlingPrintPin(
-          childMetadata.specialSizeMeasurements.containerGridProperties,
-          gridFromProps.gridRowStart ?? gridComputed.gridRowStart,
-          'row',
-        ),
-        gridRowEnd: nullHandlingPrintPin(
-          childMetadata.specialSizeMeasurements.containerGridProperties,
-          gridFromProps.gridRowEnd ?? gridComputed.gridRowEnd,
-          'row',
-        ),
-        position: childMetadata.specialSizeMeasurements.position ?? undefined,
-      }
-    },
-    'GridElementContainingBlock gridChildStyle',
-  )
+  const gridChildStyle: CSSProperties = React.useMemo(() => {
+    if (gridChildData == null) {
+      return {}
+    }
+    return {
+      gridColumnStart: gridChildData.computedStyling.gridColumnStart,
+      gridColumnEnd: gridChildData.computedStyling.gridColumnEnd,
+      gridRowStart: gridChildData.computedStyling.gridRowStart,
+      gridRowEnd: gridChildData.computedStyling.gridRowEnd,
+      position: gridChildData.computedStyling.position,
+    }
+  }, [gridChildData])
   const gridChildFrame = useEditorState(
     Substores.metadata,
     (store) => {
@@ -2500,6 +2470,17 @@ function getCellCanvasHeightFromBounds(
   }, currentColumn.height)
 }
 
+export const GridHelperControls = () => {
+  const helperControlsStore = React.useContext(HelperControlsStateContext)
+  return (
+    <EditorStateContext.Provider value={helperControlsStore}>
+      <GridMeasurementHelpers />
+      <GridElementContainingBlocks />
+    </EditorStateContext.Provider>
+  )
+}
+GridHelperControls.displayName = 'GridHelperControls'
+
 // This function returns the amount of pixels used to adjust the position of
 // individual ruler markers, which need specific skews based on their shape.
 function skewMarkerPosition(
diff --git a/editor/src/components/canvas/controls/grid-measurements.tsx b/editor/src/components/canvas/controls/grid-measurements.tsx
new file mode 100644
index 000000000000..9dcdf39daf1a
--- /dev/null
+++ b/editor/src/components/canvas/controls/grid-measurements.tsx
@@ -0,0 +1,343 @@
+import type { Property } from 'csstype'
+import type { CSSProperties } from 'react'
+import type { GridIdentifier } from '../../editor/store/editor-state'
+import type {
+  BorderWidths,
+  GridAutoOrTemplateBase,
+  GridElementProperties,
+} from '../../../core/shared/element-template'
+import type { CanvasRectangle } from '../../../core/shared/math-utils'
+import type { Sides } from 'utopia-api/core'
+import { sides } from 'utopia-api/core'
+import type { ElementPath } from 'utopia-shared/src/types'
+import { getFromElement } from '../direct-dom-lookups'
+import { CanvasContainerID } from '../canvas-types'
+import {
+  applicativeSidesPxTransform,
+  getGridContainerProperties,
+  getGridElementProperties,
+} from '../dom-walker'
+import { isStaticGridRepeat, parseCSSLength } from '../../inspector/common/css-utils'
+import { assertNever } from '../../../core/shared/utils'
+import { applicative4Either, defaultEither, isRight, mapEither } from '../../../core/shared/either'
+import { domRectToScaledCanvasRectangle, getRoundingFn } from '../../../core/shared/dom-utils'
+import Utils from '../../../utils/utils'
+import React from 'react'
+import { Substores, useEditorState } from '../../editor/store/store-hook'
+import { addChangeCallback, removeChangeCallback } from '../observers'
+import { useMonitorChangesToElements } from '../../editor/store/store-monitor'
+import { useKeepReferenceEqualityIfPossible } from '../../../utils/react-performance'
+
+export type GridElementMeasurementHelperData = {
+  frame: CanvasRectangle
+  computedStyling: CSSProperties
+  gridElementProperties: GridElementProperties
+}
+
+export type ElementOrParent = 'parent' | 'element'
+
+export type GridMeasurementHelperData = {
+  frame: CanvasRectangle
+  rows: number
+  columns: number
+  cells: number
+  computedStyling: CSSProperties
+  gridTemplateColumns: GridAutoOrTemplateBase | null
+  gridTemplateRows: GridAutoOrTemplateBase | null
+  gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null
+  gridTemplateRowsFromProps: GridAutoOrTemplateBase | null
+  border: BorderWidths
+  gap: number | null
+  rowGap: number | null
+  columnGap: number | null
+  padding: Sides
+  element: HTMLElement
+}
+
+export type GridData = GridMeasurementHelperData & {
+  identifier: GridIdentifier
+}
+
+function getPositionFromComputedStyling(position: string): Property.Position | undefined {
+  switch (position) {
+    case '-moz-initial':
+    case 'inherit':
+    case 'initial':
+    case 'revert':
+    case 'unset':
+    case '-webkit-sticky':
+    case 'absolute':
+    case 'fixed':
+    case 'relative':
+    case 'static':
+    case 'sticky':
+      return position
+    default:
+      return undefined
+  }
+}
+
+function getGridElementStylingSubset(styling: CSSStyleDeclaration): CSSProperties {
+  // Fields chosen to not overlap with any others, so as to not make React complain.
+  return {
+    position: getPositionFromComputedStyling(styling.position),
+    gridColumnStart: styling.gridColumnStart,
+    gridColumnEnd: styling.gridColumnEnd,
+    gridRowStart: styling.gridRowStart,
+    gridRowEnd: styling.gridRowEnd,
+    borderRadius: styling.borderRadius,
+  }
+}
+
+function getGlobalFrame(
+  canvasRootContainer: HTMLElement,
+  targetElement: HTMLElement,
+  scale: number,
+): CanvasRectangle {
+  const boundingRectangle = targetElement.getBoundingClientRect()
+  const elementRect = domRectToScaledCanvasRectangle(
+    boundingRectangle,
+    1 / scale,
+    getRoundingFn('nearest-half'),
+  )
+  const parentRect = domRectToScaledCanvasRectangle(
+    canvasRootContainer.getBoundingClientRect(),
+    1 / scale,
+    getRoundingFn('nearest-half'),
+  )
+  return Utils.offsetRect(elementRect, Utils.negate(parentRect))
+}
+
+export function gridElementMeasurementHelperDataFromElement(
+  scale: number,
+): (element: HTMLElement) => GridElementMeasurementHelperData | undefined {
+  return (element) => {
+    const canvasRootContainer = document.getElementById(CanvasContainerID)
+    if (canvasRootContainer == null) {
+      return undefined
+    }
+
+    const computedStyle = getComputedStyle(element)
+    const computedStyling: CSSProperties = getGridElementStylingSubset(computedStyle)
+
+    const frame = getGlobalFrame(canvasRootContainer, element, scale)
+
+    const parentElementStyle =
+      element.parentElement == null ? null : getComputedStyle(element.parentElement)
+    const gridContainerProperties = getGridContainerProperties(parentElementStyle)
+    const gridElementProperties = getGridElementProperties(gridContainerProperties, element.style)
+
+    return {
+      frame: frame,
+      computedStyling: computedStyling,
+      gridElementProperties: gridElementProperties,
+    }
+  }
+}
+
+export function getGridElementMeasurementHelperData(
+  elementPath: ElementPath,
+  scale: number,
+): GridElementMeasurementHelperData | undefined {
+  return getFromElement(elementPath, gridElementMeasurementHelperDataFromElement(scale), 'element')
+}
+
+export function getGridMeasurementHelperData(
+  elementPath: ElementPath,
+  scale: number,
+  source: ElementOrParent,
+): GridMeasurementHelperData | undefined {
+  return getFromElement(elementPath, gridMeasurementHelperDataFromElement(scale), source)
+}
+
+function getGridStylingSubset(styling: CSSStyleDeclaration): CSSProperties {
+  // Fields chosen to not overlap with any others, so as to not make React complain.
+  return {
+    gridAutoFlow: styling.gridAutoFlow,
+    gridAutoColumns: styling.gridAutoColumns,
+    gridAutoRows: styling.gridAutoRows,
+    gridTemplateColumns: styling.gridTemplateColumns,
+    gridTemplateRows: styling.gridTemplateRows,
+    gridColumn: styling.gridColumn,
+    gridRow: styling.gridRow,
+    gap: styling.gap,
+    rowGap: styling.rowGap,
+    columnGap: styling.columnGap,
+    justifyContent: styling.justifyContent,
+    alignContent: styling.alignContent,
+    padding: styling.padding,
+    paddingTop: styling.paddingTop,
+    paddingLeft: styling.paddingLeft,
+    paddingBottom: styling.paddingBottom,
+    paddingRight: styling.paddingRight,
+    borderTop: styling.borderTopWidth,
+    borderLeft: styling.borderLeftWidth,
+    borderBottom: styling.borderBottomWidth,
+    borderRight: styling.borderRightWidth,
+  }
+}
+
+function getCellsCount(template: GridAutoOrTemplateBase | null): number {
+  if (template == null) {
+    return 0
+  }
+
+  switch (template.type) {
+    case 'DIMENSIONS':
+      return template.dimensions.reduce((acc, cur) => {
+        return acc + (isStaticGridRepeat(cur) ? cur.times : 1)
+      }, 0)
+    case 'FALLBACK':
+      return 0
+    default:
+      assertNever(template)
+  }
+}
+
+export function gridMeasurementHelperDataFromElement(
+  scale: number,
+): (element: HTMLElement) => GridMeasurementHelperData | undefined {
+  return (element) => {
+    const canvasRootContainer = document.getElementById(CanvasContainerID)
+    if (canvasRootContainer == null) {
+      return undefined
+    }
+
+    const computedStyle = getComputedStyle(element)
+
+    const computedStyling: CSSProperties = getGridStylingSubset(computedStyle)
+
+    const containerGridProperties = getGridContainerProperties(computedStyle)
+    const containerGridPropertiesFromProps = getGridContainerProperties(element.style)
+
+    const columns = getCellsCount(containerGridProperties.gridTemplateColumns)
+    const rows = getCellsCount(containerGridProperties.gridTemplateRows)
+    const borderTopWidth = parseCSSLength(computedStyle.borderTopWidth)
+    const borderRightWidth = parseCSSLength(computedStyle.borderRightWidth)
+    const borderBottomWidth = parseCSSLength(computedStyle.borderBottomWidth)
+    const borderLeftWidth = parseCSSLength(computedStyle.borderLeftWidth)
+    const border: BorderWidths = {
+      top: isRight(borderTopWidth) ? borderTopWidth.value.value : 0,
+      right: isRight(borderRightWidth) ? borderRightWidth.value.value : 0,
+      bottom: isRight(borderBottomWidth) ? borderBottomWidth.value.value : 0,
+      left: isRight(borderLeftWidth) ? borderLeftWidth.value.value : 0,
+    }
+    const padding = defaultEither(
+      sides(undefined, undefined, undefined, undefined),
+      applicative4Either(
+        applicativeSidesPxTransform,
+        parseCSSLength(computedStyle.paddingTop),
+        parseCSSLength(computedStyle.paddingRight),
+        parseCSSLength(computedStyle.paddingBottom),
+        parseCSSLength(computedStyle.paddingLeft),
+      ),
+    )
+    const gap = defaultEither(
+      null,
+      mapEither((n) => n.value, parseCSSLength(computedStyle.gap)),
+    )
+
+    const rowGap = defaultEither(
+      null,
+      mapEither((n) => n.value, parseCSSLength(computedStyle.rowGap)),
+    )
+
+    const columnGap = defaultEither(
+      null,
+      mapEither((n) => n.value, parseCSSLength(computedStyle.columnGap)),
+    )
+
+    const frame = getGlobalFrame(canvasRootContainer, element, scale)
+
+    return {
+      frame: frame,
+      gridTemplateColumns: containerGridProperties.gridTemplateColumns,
+      gridTemplateRows: containerGridProperties.gridTemplateRows,
+      gridTemplateColumnsFromProps: containerGridPropertiesFromProps.gridTemplateColumns,
+      gridTemplateRowsFromProps: containerGridPropertiesFromProps.gridTemplateRows,
+      border: border,
+      padding: padding,
+      gap: gap,
+      rowGap: rowGap,
+      columnGap: columnGap,
+      rows: rows,
+      columns: columns,
+      cells: columns * rows,
+      computedStyling: computedStyling,
+      element: element,
+    }
+  }
+}
+
+export function useObserversToWatch(elementPathOrPaths: Array<ElementPath> | ElementPath): number {
+  // Used to trigger extra renders.
+  const [counter, setCounter] = React.useState(0)
+  const bumpCounter = React.useCallback(() => {
+    setCounter((value) => value + 1)
+  }, [])
+
+  // Need to use the mount count for the callback trigger.
+  const mountCount = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.mountCount,
+    'useObserversToWatch mountCount',
+  )
+
+  React.useEffect(() => {
+    // Add the change callback(s) for the element path or paths.
+    if (Array.isArray(elementPathOrPaths)) {
+      for (const elementPath of elementPathOrPaths) {
+        addChangeCallback(mountCount, elementPath, bumpCounter)
+      }
+    } else {
+      addChangeCallback(mountCount, elementPathOrPaths, bumpCounter)
+    }
+
+    return function cleanup() {
+      if (Array.isArray(elementPathOrPaths)) {
+        for (const elementPath of elementPathOrPaths) {
+          removeChangeCallback(elementPath, bumpCounter)
+        }
+      } else {
+        removeChangeCallback(elementPathOrPaths, bumpCounter)
+      }
+    }
+  }, [mountCount, elementPathOrPaths, bumpCounter])
+
+  return counter
+}
+
+export function useGridMeasurementHelperData(
+  elementPath: ElementPath,
+  source: ElementOrParent,
+): GridMeasurementHelperData | undefined {
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'useGridMeasurementHelperData scale',
+  )
+
+  useMonitorChangesToElements([elementPath])
+
+  useObserversToWatch(elementPath)
+
+  return useKeepReferenceEqualityIfPossible(
+    getGridMeasurementHelperData(elementPath, scale, source),
+  )
+}
+
+export function useGridElementMeasurementHelperData(
+  elementPath: ElementPath,
+): GridElementMeasurementHelperData | undefined {
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'useGridMeasurementHelperData scale',
+  )
+
+  useMonitorChangesToElements([elementPath])
+
+  useObserversToWatch(elementPath)
+
+  return useKeepReferenceEqualityIfPossible(getGridElementMeasurementHelperData(elementPath, scale))
+}
diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx
index 6e31c6e04816..9f4a94620c27 100644
--- a/editor/src/components/canvas/controls/new-canvas-controls.tsx
+++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx
@@ -75,7 +75,11 @@ import { NO_OP } from '../../../core/shared/utils'
 import { useIsMyProject } from '../../editor/store/collaborative-editing'
 import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 import { MultiplayerPresence } from '../multiplayer-presence'
-import { GridElementContainingBlocks, GridMeasurementHelpers } from './grid-controls'
+import {
+  GridElementContainingBlocks,
+  GridHelperControls,
+  GridMeasurementHelpers,
+} from './grid-controls'
 
 export const CanvasControlsContainerID = 'new-canvas-controls-container'
 
@@ -617,11 +621,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
                   <>
                     {when(
                       isSelectMode(editorMode) || isInsertMode(editorMode),
-                      <GridMeasurementHelpers />,
-                    )}
-                    {when(
-                      isSelectMode(editorMode) || isInsertMode(editorMode),
-                      <GridElementContainingBlocks />,
+                      <GridHelperControls />,
                     )}
                     {middleStrategyControls.map((c) => (
                       <RenderControlMemoized
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
index 5e37876d801a..7d78d0c8f46f 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
@@ -20,7 +20,6 @@ import {
 import type { Axis } from '../../gap-utils'
 import { maybeGridGapData } from '../../gap-utils'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
-import type { GridData } from '../grid-controls-for-strategies'
 import { getNullableAutoOrTemplateBaseString, useGridData } from '../grid-controls-for-strategies'
 import { getGridHelperStyleMatchingTargetGrid } from '../grid-controls-helpers'
 import type { CSSNumberWithRenderedValue } from './controls-common'
@@ -28,6 +27,7 @@ import { CanvasLabel, PillHandle, useHoverWithDelay } from './controls-common'
 import { startGapControlInteraction } from './grid-gap-control-helpers'
 import type { AlignContent, FlexJustifyContent } from '../../../inspector/inspector-common'
 import { gridContainerIdentifier } from '../../../editor/store/editor-state'
+import type { GridData } from '../grid-measurements'
 
 export interface GridGapControlProps {
   selectedElement: ElementPath
diff --git a/editor/src/components/canvas/direct-dom-lookups.ts b/editor/src/components/canvas/direct-dom-lookups.ts
index f3da4e2325f3..4e4a883d7ad2 100644
--- a/editor/src/components/canvas/direct-dom-lookups.ts
+++ b/editor/src/components/canvas/direct-dom-lookups.ts
@@ -3,8 +3,8 @@ import { CanvasContainerID } from './canvas-types'
 import { getDeepestPathOnDomElement } from '../../core/shared/uid-utils'
 import * as EP from '../../core/shared/element-path'
 import type { ElementPath } from 'utopia-shared/src/types'
-import type { ElementOrParent } from './controls/grid-controls-for-strategies'
 import { assertNever } from '../../core/shared/utils'
+import type { ElementOrParent } from './controls/grid-measurements'
 
 export type FromElement<T> = (element: HTMLElement) => T
 
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index a6076342049e..baeb2ca0da52 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -20,6 +20,7 @@ import {
   domElementMetadata,
   gridAutoOrTemplateDimensions,
   isGridSpan,
+  isGridAutoOrTemplateDimensions,
 } from '../../core/shared/element-template'
 import type { ElementPath } from '../../core/shared/project-file-types'
 import type { ElementCanvasRectangleCache } from '../../core/shared/dom-utils'
@@ -625,7 +626,7 @@ function trimDynamicEmptyDimensions(
   return gridAutoOrTemplateDimensions(template.dimensions.slice(0, lastNonEmptyColumn + 1))
 }
 
-function getGridElementProperties(
+export function getGridElementProperties(
   container: GridContainerProperties,
   elementStyle: CSSStyleDeclaration,
 ): GridElementProperties {
diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
index af9c5103cba4..b0c227034138 100644
--- a/editor/src/components/canvas/gap-utils.ts
+++ b/editor/src/components/canvas/gap-utils.ts
@@ -32,8 +32,6 @@ import { isReversedFlexDirection } from '../../core/model/flex-utils'
 import * as EP from '../../core/shared/element-path'
 import { treatElementAsFragmentLike } from './canvas-strategies/strategies/fragment-like-helpers'
 import type { AllElementProps } from '../editor/store/editor-state'
-import type { GridData } from './controls/grid-controls-for-strategies'
-import { getNullableAutoOrTemplateBaseString } from './controls/grid-controls-for-strategies'
 import { optionalMap } from '../../core/shared/optional-utils'
 
 export interface PathWithBounds {
diff --git a/editor/src/components/canvas/ui-jsx.test-utils.tsx b/editor/src/components/canvas/ui-jsx.test-utils.tsx
index 1b8796cbcb92..a08f5fed99f1 100644
--- a/editor/src/components/canvas/ui-jsx.test-utils.tsx
+++ b/editor/src/components/canvas/ui-jsx.test-utils.tsx
@@ -428,6 +428,9 @@ export async function renderTestEditorWithModel(
 
     flushSync(() => {
       canvasStoreHook.setState(patchedStoreFromFullStore(workingEditorState, 'canvas-store'))
+      helperControlsStoreHook.setState(
+        patchedStoreFromFullStore(workingEditorState, 'helper-controls-store'),
+      )
     })
 
     // run dom SAMPLER
@@ -612,6 +615,10 @@ export async function renderTestEditorWithModel(
     patchedStoreFromFullStore(initialEditorStore, 'canvas-store'),
   )
 
+  const helperControlsStoreHook: UtopiaStoreAPI = createStoresAndState(
+    patchedStoreFromFullStore(initialEditorStore, 'helper-controls-store'),
+  )
+
   prevDomWalkerMutableState?.resizeObserver.disconnect()
   prevDomWalkerMutableState?.mutationObserver.disconnect()
   const domWalkerMutableState = createDomWalkerMutableState(canvasStoreHook, asyncTestDispatch)
@@ -673,6 +680,7 @@ label {
           dispatch={asyncTestDispatch as EditorDispatch}
           mainStore={storeHook}
           canvasStore={canvasStoreHook}
+          helperControlsStore={helperControlsStoreHook}
           spyCollector={spyCollector}
           lowPriorityStore={lowPriorityStoreHook}
           domWalkerMutableState={domWalkerMutableState}
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index fdf25f0bfcd8..4f186b5cf9ba 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -494,7 +494,7 @@ export type EditorStoreFull = EditorStoreShared & {
   patchedDerived: DerivedState
 }
 
-type StoreName = 'editor-store' | 'canvas-store' | 'low-priority-store'
+type StoreName = 'editor-store' | 'canvas-store' | 'helper-controls-store' | 'low-priority-store'
 
 export type EditorStorePatched = EditorStoreShared & {
   storeName: StoreName
diff --git a/editor/src/components/editor/store/store-hook.ts b/editor/src/components/editor/store/store-hook.ts
index ea0824397cfc..172dec350cca 100644
--- a/editor/src/components/editor/store/store-hook.ts
+++ b/editor/src/components/editor/store/store-hook.ts
@@ -82,6 +82,8 @@ export const EditorStateContext = React.createContext<UtopiaStoreAPI | null>(nul
 EditorStateContext.displayName = 'EditorStateContext'
 export const CanvasStateContext = React.createContext<UtopiaStoreAPI | null>(null)
 CanvasStateContext.displayName = 'CanvasStateContext'
+export const HelperControlsStateContext = React.createContext<UtopiaStoreAPI | null>(null)
+HelperControlsStateContext.displayName = 'HelperControlsStateContext'
 export const LowPriorityStateContext = React.createContext<UtopiaStoreAPI | null>(null)
 LowPriorityStateContext.displayName = 'LowPriorityStateContext'
 
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 85a45178b8d7..2fc81845e032 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -2,6 +2,8 @@
 
 exports[`React Render Count Tests - Changing the selected view with a less simple project 2`] = `
 Array [
+  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/GridMeasurementHelpers/Symbol(react.memo)()",
+  "/Symbol(react.provider)/GridMeasurementHelpers//div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//UtopiaSpiedClass(EditorCanvas)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.memo)(FloatingPostActionMenu)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//div",
@@ -33,8 +35,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -56,8 +57,9 @@ Array [
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)(GridMeasurementHelpers)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/null/Symbol(react.memo)()//Symbol(react.memo)()",
   "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/null/Symbol(react.memo)()//Symbol(react.memo)()",
@@ -790,6 +792,8 @@ Array [
 
 exports[`React Render Count Tests - Changing the selected view with a simple project 2`] = `
 Array [
+  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/GridMeasurementHelpers/Symbol(react.memo)()",
+  "/Symbol(react.provider)/GridMeasurementHelpers//div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//UtopiaSpiedClass(EditorCanvas)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.memo)(FloatingPostActionMenu)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//div",
@@ -821,8 +825,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -844,8 +847,9 @@ Array [
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)(GridMeasurementHelpers)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/null/Symbol(react.memo)()//Symbol(react.memo)()",
   "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/null/Symbol(react.memo)()//Symbol(react.memo)()",
@@ -1475,6 +1479,8 @@ Array [
   "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(CanvasContainer)/div:data-testid='canvas-container'",
   "/Symbol(react.forward_ref)(CanvasContainer)/div/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/GridMeasurementHelpers/Symbol(react.memo)()",
+  "/Symbol(react.provider)/GridMeasurementHelpers//div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//UtopiaSpiedClass(EditorCanvas)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.memo)(FloatingPostActionMenu)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//div",
@@ -1498,8 +1504,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -1511,6 +1516,9 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)(GridMeasurementHelpers)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/div/div/NavigatorComponent/Symbol(react.memo)()",
   "/div/div/NavigatorComponent/Symbol(react.memo)(NavigatorDragLayer)",
@@ -1767,6 +1775,8 @@ Array [
   "/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)/div",
   "/UtopiaSpiedFunctionComponent(View)/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)",
   "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/GridMeasurementHelpers/Symbol(react.memo)()",
+  "/Symbol(react.provider)/GridMeasurementHelpers//div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//UtopiaSpiedClass(EditorCanvas)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.memo)(FloatingPostActionMenu)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//div",
@@ -1790,8 +1800,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -1803,8 +1812,9 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)(GridMeasurementHelpers)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
@@ -2396,8 +2406,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -2408,6 +2417,9 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)(GridMeasurementHelpers)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/null/RowForControl/RowForBaseControl/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/null/RowForControl/RowForBaseControl/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)",
@@ -2506,8 +2518,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -2518,6 +2529,9 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)(GridMeasurementHelpers)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/null/RowForControl/RowForBaseControl/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/null/RowForControl/RowForBaseControl/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)",
@@ -2604,6 +2618,8 @@ Array [
   "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(CanvasContainer)/div:data-testid='canvas-container'",
   "/Symbol(react.forward_ref)(CanvasContainer)/div/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/GridMeasurementHelpers/Symbol(react.memo)()",
+  "/Symbol(react.provider)/GridMeasurementHelpers//div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//UtopiaSpiedClass(EditorCanvas)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.memo)(FloatingPostActionMenu)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//div",
@@ -2627,8 +2643,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -2640,6 +2655,9 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)(GridMeasurementHelpers)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/div/div/NavigatorComponent/Symbol(react.memo)()",
   "/div/div/NavigatorComponent/Symbol(react.memo)(NavigatorDragLayer)",
@@ -2884,6 +2902,8 @@ Array [
   "/UtopiaSpiedFunctionComponent(ComponentRenderer(App))/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)/div",
   "/UtopiaSpiedFunctionComponent(View)/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)",
   "/div/Symbol(react.forward_ref)(SpyWrapper)/UtopiaSpiedFunctionComponent(View)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/GridMeasurementHelpers/Symbol(react.memo)()",
+  "/Symbol(react.provider)/GridMeasurementHelpers//div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//UtopiaSpiedClass(EditorCanvas)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.memo)(FloatingPostActionMenu)",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//div",
@@ -2907,8 +2927,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -2920,8 +2939,9 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)(GridMeasurementHelpers)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
   "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
@@ -3389,8 +3409,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -3401,6 +3420,9 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)(GridMeasurementHelpers)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
   "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)",
@@ -3441,8 +3463,7 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(GridMeasurementHelpers)",
-  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
@@ -3453,6 +3474,9 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)(GridMeasurementHelpers)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)()",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/UtopiaSpiedExoticType(Symbol(react.provider))",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
 ]
 `;
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index 313173838176..47cef035e96b 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`872`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`882`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1124`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1134`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`658`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`660`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`783`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`785`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })
diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index 0f5f22c96362..02bb102620c0 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -58,6 +58,7 @@ import {
   CanvasStateContext,
   createStoresAndState,
   EditorStateContext,
+  HelperControlsStateContext,
   LowPriorityStateContext,
   OriginalMainEditorStateContext,
 } from '../components/editor/store/store-hook'
@@ -221,6 +222,7 @@ export class Editor {
   storedState: EditorStoreFull
   utopiaStoreHook: UtopiaStoreAPI
   canvasStore: UtopiaStoreAPI
+  helperControlsStore: UtopiaStoreAPI
   lowPriorityStore: UtopiaStoreAPI
   spyCollector: UiJsxCanvasContextData = emptyUiJsxCanvasContextData()
   domWalkerMutableState: DomWalkerMutableStateData
@@ -247,6 +249,7 @@ export class Editor {
         this.boundDispatch,
         this.utopiaStoreHook,
         this.canvasStore,
+        this.helperControlsStore,
         this.lowPriorityStore,
         this.spyCollector,
         this.domWalkerMutableState,
@@ -298,6 +301,10 @@ export class Editor {
       patchedStoreFromFullStore(this.storedState, 'canvas-store'),
     )
 
+    const helperControlsStore = createStoresAndState(
+      patchedStoreFromFullStore(this.storedState, 'helper-controls-store'),
+    )
+
     const lowPriorityStore = createStoresAndState(
       patchedStoreFromFullStore(this.storedState, 'low-priority-store'),
     )
@@ -306,6 +313,8 @@ export class Editor {
 
     this.canvasStore = canvasStore
 
+    this.helperControlsStore = helperControlsStore
+
     this.lowPriorityStore = lowPriorityStore
 
     this.domWalkerMutableState = createDomWalkerMutableState(
@@ -490,6 +499,9 @@ export class Editor {
           ReactDOM.flushSync(() => {
             ReactDOM.unstable_batchedUpdates(() => {
               this.canvasStore.setState(patchedStoreFromFullStore(this.storedState, 'canvas-store'))
+              this.helperControlsStore.setState(
+                patchedStoreFromFullStore(this.storedState, 'helper-controls-store'),
+              )
             })
           })
         })
@@ -727,6 +739,7 @@ export const EditorRoot: React.FunctionComponent<{
   dispatch: EditorDispatch
   mainStore: UtopiaStoreAPI
   canvasStore: UtopiaStoreAPI
+  helperControlsStore: UtopiaStoreAPI
   lowPriorityStore: UtopiaStoreAPI
   spyCollector: UiJsxCanvasContextData
   domWalkerMutableState: DomWalkerMutableStateData
@@ -734,6 +747,7 @@ export const EditorRoot: React.FunctionComponent<{
   dispatch,
   mainStore,
   canvasStore,
+  helperControlsStore,
   lowPriorityStore,
   spyCollector,
   domWalkerMutableState,
@@ -748,15 +762,17 @@ export const EditorRoot: React.FunctionComponent<{
             <EditorStateContext.Provider value={mainStore}>
               <DomWalkerMutableStateCtx.Provider value={domWalkerMutableState}>
                 <CanvasStateContext.Provider value={canvasStore}>
-                  <LowPriorityStateContext.Provider value={lowPriorityStore}>
-                    <UiJsxCanvasCtxAtom.Provider value={spyCollector}>
-                      <AnimationContext.Provider
-                        value={{ animate: animate, scope: animationScope }}
-                      >
-                        <EditorComponent />
-                      </AnimationContext.Provider>
-                    </UiJsxCanvasCtxAtom.Provider>
-                  </LowPriorityStateContext.Provider>
+                  <HelperControlsStateContext.Provider value={helperControlsStore}>
+                    <LowPriorityStateContext.Provider value={lowPriorityStore}>
+                      <UiJsxCanvasCtxAtom.Provider value={spyCollector}>
+                        <AnimationContext.Provider
+                          value={{ animate: animate, scope: animationScope }}
+                        >
+                          <EditorComponent />
+                        </AnimationContext.Provider>
+                      </UiJsxCanvasCtxAtom.Provider>
+                    </LowPriorityStateContext.Provider>
+                  </HelperControlsStateContext.Provider>
                 </CanvasStateContext.Provider>
               </DomWalkerMutableStateCtx.Provider>
             </EditorStateContext.Provider>
@@ -773,17 +789,27 @@ export const HotRoot: React.FunctionComponent<{
   dispatch: EditorDispatch
   mainStore: UtopiaStoreAPI
   canvasStore: UtopiaStoreAPI
+  helperControlsStore: UtopiaStoreAPI
   lowPriorityStore: UtopiaStoreAPI
   spyCollector: UiJsxCanvasContextData
   domWalkerMutableState: DomWalkerMutableStateData
 }> = hot(
-  ({ dispatch, mainStore, canvasStore, lowPriorityStore, spyCollector, domWalkerMutableState }) => {
+  ({
+    dispatch,
+    mainStore,
+    canvasStore,
+    helperControlsStore,
+    lowPriorityStore,
+    spyCollector,
+    domWalkerMutableState,
+  }) => {
     return (
       <EditorRoot
         dispatch={dispatch}
         spyCollector={spyCollector}
         mainStore={mainStore}
         canvasStore={canvasStore}
+        helperControlsStore={helperControlsStore}
         lowPriorityStore={lowPriorityStore}
         domWalkerMutableState={domWalkerMutableState}
       />
@@ -796,6 +822,7 @@ async function renderRootComponent(
   dispatch: EditorDispatch,
   mainStore: UtopiaStoreAPI,
   canvasStore: UtopiaStoreAPI,
+  helperControlsStore: UtopiaStoreAPI,
   lowPriorityStore: UtopiaStoreAPI,
   spyCollector: UiJsxCanvasContextData,
   domWalkerMutableState: DomWalkerMutableStateData,
@@ -813,6 +840,7 @@ async function renderRootComponent(
             mainStore={mainStore}
             spyCollector={spyCollector}
             canvasStore={canvasStore}
+            helperControlsStore={helperControlsStore}
             lowPriorityStore={lowPriorityStore}
             domWalkerMutableState={domWalkerMutableState}
           />,
@@ -824,6 +852,7 @@ async function renderRootComponent(
             spyCollector={spyCollector}
             mainStore={mainStore}
             canvasStore={canvasStore}
+            helperControlsStore={helperControlsStore}
             lowPriorityStore={lowPriorityStore}
             domWalkerMutableState={domWalkerMutableState}
           />,

From b7d07ed0467bb649040a3e288616b8c05331c5b4 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 22 Nov 2024 15:10:39 +0100
Subject: [PATCH 242/272] Grid cell lines (#6674)

**Problem:**

When a grid item is selected, there should be outline lines around the
cell bounds, which also expand to meet the ruler markers.

**Fix:**

Implement one component to render the cell bounds outline, and one
component for the lines stretching to the markers from the cell
perimeter.

<img width="807" alt="Screenshot 2024-11-22 at 11 59 11"
src="https://github.com/user-attachments/assets/e82672bc-f7dd-4dd2-9b24-6f2c6d286feb">


https://github.com/user-attachments/assets/9a69b131-a052-42ab-88c6-f1534c3865af

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6675
---
 .../canvas/controls/grid-controls.tsx         | 108 +++++++++++++++++-
 1 file changed, 103 insertions(+), 5 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 7992c4155988..a6f18b1d6e64 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -28,6 +28,7 @@ import {
 import type { CanvasPoint, CanvasRectangle, LocalRectangle } from '../../../core/shared/math-utils'
 import {
   canvasPoint,
+  canvasRectangle,
   isFiniteRectangle,
   isInfinityRectangle,
   nullIfInfinity,
@@ -2160,6 +2161,8 @@ const rulerMarkerIconSize = 12 // px
 
 type RulerMarkerData = {
   parentGrid: GridContainerProperties
+  cellRect: CanvasRectangle
+  gridRect: CanvasRectangle
   columnStart: RulerMarkerPositionData
   columnEnd: RulerMarkerPositionData
   rowStart: RulerMarkerPositionData
@@ -2243,8 +2246,18 @@ const RulerMarkers = React.memo((props: { path: ElementPath }) => {
         store.editor.jsxMetadata,
       )
 
+      const cellRect = parentGridCellGlobalFrames[cellBounds.row - 1][cellBounds.column - 1]
+      const cellRectResized = canvasRectangle({
+        x: cellRect.x,
+        y: cellRect.y,
+        width: width,
+        height: height,
+      })
+
       return {
         parentGrid: parentGrid,
+        cellRect: cellRectResized,
+        gridRect: gridRect,
         columnStart: {
           top: gridRect.y,
           left: left,
@@ -2280,6 +2293,7 @@ const RulerMarkers = React.memo((props: { path: ElementPath }) => {
 
   return (
     <React.Fragment>
+      {/* Indicators */}
       <RulerMarkerIndicator
         parentGrid={markers.parentGrid}
         marker={markers.columnStart}
@@ -2296,6 +2310,38 @@ const RulerMarkers = React.memo((props: { path: ElementPath }) => {
         axis={'row'}
       />
       <RulerMarkerIndicator parentGrid={markers.parentGrid} marker={markers.rowEnd} axis={'row'} />
+      {/* Offset lines */}
+      <GridCellOffsetLine
+        top={markers.columnStart.top}
+        left={markers.columnStart.left}
+        size={markers.cellRect.y - markers.gridRect.y}
+        orientation='vertical'
+      />
+      <GridCellOffsetLine
+        top={markers.columnEnd.top}
+        left={markers.columnEnd.left}
+        size={markers.cellRect.y - markers.gridRect.y}
+        orientation='vertical'
+      />
+      <GridCellOffsetLine
+        top={markers.rowStart.top}
+        left={markers.rowStart.left}
+        size={markers.cellRect.x - markers.gridRect.x}
+        orientation='horizontal'
+      />
+      <GridCellOffsetLine
+        top={markers.rowEnd.top}
+        left={markers.rowEnd.left}
+        size={markers.cellRect.x - markers.gridRect.x}
+        orientation='horizontal'
+      />
+      {/* Cell outline */}
+      <GridCellOutline
+        top={markers.cellRect.y}
+        left={markers.cellRect.x}
+        width={markers.cellRect.width + 1}
+        height={markers.cellRect.height + 1}
+      />
     </React.Fragment>
   )
 })
@@ -2496,16 +2542,17 @@ function skewMarkerPosition(
   // span-end triangle, on the column
   const spanEndColumn = axis === 'column' && markerType === 'span-end'
   if (spanEndColumn) {
-    return 10
+    return 9
   }
-  const pinnedEndColumn = axis === 'column' && markerType === 'pinned'
+  // pinned triangle, on the column
+  const pinnedEndColumn = axis === 'column' && markerType === 'pinned' && bound === 'end'
   if (pinnedEndColumn) {
     return 5
   }
   // any other ending marker, on the column
   const endColumn = bound === 'end' && axis === 'column'
   if (endColumn) {
-    return 2
+    return 1
   }
 
   // span-end triangle, on the row
@@ -2516,7 +2563,7 @@ function skewMarkerPosition(
   // any other ending marker, on the row
   const endRow = bound === 'end' && axis === 'row'
   if (endRow) {
-    return 6
+    return 4
   }
 
   // span-start triangle, on the column
@@ -2524,10 +2571,14 @@ function skewMarkerPosition(
   if (spanStartColumn) {
     return 0
   }
+  const pinnedStartColumn = axis === 'column' && markerType === 'pinned' && bound === 'start'
+  if (pinnedStartColumn) {
+    return 5
+  }
   // any starting marker, on the column
   const startColumn = bound === 'start' && axis === 'column'
   if (startColumn) {
-    return 5
+    return 1
   }
 
   // span-start starting triangle, on the row
@@ -2543,3 +2594,50 @@ function skewMarkerPosition(
 
   return 0
 }
+
+const GridCellOffsetLine = React.memo(
+  (props: { top: number; left: number; size: number; orientation: 'vertical' | 'horizontal' }) => {
+    const colorTheme = useColorTheme()
+
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          top: props.top,
+          left: props.left,
+          width: props.orientation === 'horizontal' ? props.size : 1,
+          height: props.orientation === 'vertical' ? props.size : 1,
+          borderLeft:
+            props.orientation === 'vertical' ? `1px dashed ${colorTheme.primary.value}` : undefined,
+          borderTop:
+            props.orientation === 'horizontal'
+              ? `1px dashed ${colorTheme.primary.value}`
+              : undefined,
+          pointerEvents: 'none',
+        }}
+      />
+    )
+  },
+)
+GridCellOffsetLine.displayName = 'GridCellOffsetLine'
+
+const GridCellOutline = React.memo(
+  (props: { top: number; left: number; width: number; height: number }) => {
+    const colorTheme = useColorTheme()
+
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          top: props.top,
+          left: props.left,
+          width: props.width,
+          height: props.height,
+          border: `1px dashed ${colorTheme.primary.value}`,
+          pointerEvents: 'none',
+        }}
+      />
+    )
+  },
+)
+GridCellOutline.displayName = 'GridCellOutline'

From 303377c0bdc42cb44a57064ffe9360e6523934c4 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 25 Nov 2024 12:42:12 +0200
Subject: [PATCH 243/272] feat(discord): add environment data to discord
 messages (#6676)

This PR adds environment data to the messages that are being sent to
Discord

<img width=400
src="https://github.com/user-attachments/assets/52702eb5-4e0e-4714-9d4d-60432d4ea99b"></img>

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 utopia-remix/app/util/discordWebhookUtils.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/utopia-remix/app/util/discordWebhookUtils.ts b/utopia-remix/app/util/discordWebhookUtils.ts
index 06f9cf79a2ef..de16405dd04d 100644
--- a/utopia-remix/app/util/discordWebhookUtils.ts
+++ b/utopia-remix/app/util/discordWebhookUtils.ts
@@ -8,6 +8,7 @@ import { Status } from './statusCodes'
 import { ApiError } from './errors'
 import type { UserDetails } from 'prisma-client'
 import { ServerEnvironment } from '../env.server'
+import { assertNever } from './assertNever'
 
 // these need to be decimal colors (for 'discord-webhook-node')
 const colors: Record<DiscordMessageType, number> = {
@@ -43,6 +44,7 @@ export function sendDiscordMessage(
 
   const fields: Record<string, string> = {
     User: `${user.name ?? 'Unknown User'} (${user.email ?? 'Unknown Email'})`,
+    Environment: getEnvironmentText(),
     ...(messageDescriptor.fields ?? {}),
   }
 
@@ -70,3 +72,18 @@ function getWebhook(type: DiscordWebhookType) {
 function createDiscordWebhook(url: string) {
   return new Webhook(url)
 }
+
+function getEnvironmentText() {
+  switch (ServerEnvironment.environment) {
+    case 'local':
+      return 'Local'
+    case 'stage':
+      return 'Staging'
+    case 'prod':
+      return 'Production'
+    case 'test':
+      return 'Test'
+    default:
+      assertNever(ServerEnvironment.environment)
+  }
+}

From a1c03084719bdfff4757fb8fc3d2950817941f87 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 25 Nov 2024 12:42:55 +0200
Subject: [PATCH 244/272] feat(import): import wizard error UI (#6677)

This PR changes the UI of the import wizard to better reflect errors in
the header.
Note: this is a part of a larger change in the import flow (using the
loading screen - PR #6630), but was extracted to minimize PR size since
it can be reviewed independently. Please review only the wizard
appearance, the flow itself will be changed.

<video
src="https://github.com/user-attachments/assets/cee5fa7d-c161-47bb-a182-369f063fdf4a"></video>

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 .../editor/import-wizard/import-wizard.tsx    | 106 ++++++++++++------
 1 file changed, 71 insertions(+), 35 deletions(-)

diff --git a/editor/src/components/editor/import-wizard/import-wizard.tsx b/editor/src/components/editor/import-wizard/import-wizard.tsx
index ef5c9287d0bd..446e414fba93 100644
--- a/editor/src/components/editor/import-wizard/import-wizard.tsx
+++ b/editor/src/components/editor/import-wizard/import-wizard.tsx
@@ -96,7 +96,7 @@ export const ImportWizard = React.memo(() => {
               flex: 'none',
             }}
           >
-            <div css={{ fontSize: 16, fontWeight: 400 }}>Cloning Project</div>
+            <Header />
           </FlexRow>
           <div
             className='import-wizard-body'
@@ -119,7 +119,7 @@ export const ImportWizard = React.memo(() => {
             className='import-wizard-footer'
             css={{
               display: 'flex',
-              justifyContent: 'space-between',
+              justifyContent: 'flex-end',
               alignItems: 'center',
               width: '100%',
               marginTop: 20,
@@ -154,23 +154,6 @@ function ActionButtons() {
   )
   const colorTheme = useColorTheme()
   const dispatch = useDispatch()
-  const result = importResult.result
-  const textColor = React.useMemo(() => {
-    switch (result) {
-      case ImportOperationResult.Success:
-        return colorTheme.green.value
-      case ImportOperationResult.Warn:
-        return colorTheme.warningOrange.value
-      case ImportOperationResult.Error:
-        return colorTheme.error.value
-      case ImportOperationResult.CriticalError:
-        return colorTheme.error.value
-      case null:
-        return colorTheme.fg0.value
-      default:
-        assertNever(result)
-    }
-  }, [colorTheme, result])
   const hideWizard = React.useCallback(() => {
     hideImportWizard(dispatch)
   }, [dispatch])
@@ -199,10 +182,6 @@ function ActionButtons() {
       'everyone',
     )
   }, [dispatch, importResult.importStatus.status, importState, projectName])
-  const textStyle = {
-    color: textColor,
-    fontSize: 14,
-  }
   const buttonStyle = {
     backgroundColor: colorTheme.buttonBackground.value,
     padding: 20,
@@ -219,7 +198,6 @@ function ActionButtons() {
     case ImportOperationResult.Success:
       return (
         <React.Fragment>
-          <div style={textStyle}>Project Imported Successfully</div>
           <Button onClick={hideWizard} style={buttonStyle}>
             Continue To Editor
           </Button>
@@ -228,7 +206,6 @@ function ActionButtons() {
     case ImportOperationResult.Warn:
       return (
         <React.Fragment>
-          <div style={textStyle}>Project Imported With Warnings</div>
           <Button onClick={hideWizard} style={buttonStyle}>
             Continue To Editor
           </Button>
@@ -237,8 +214,7 @@ function ActionButtons() {
     case ImportOperationResult.CriticalError:
       return (
         <React.Fragment>
-          <div style={textStyle}>Error Importing Project</div>
-          <Button style={{ ...buttonStyle, marginLeft: 'auto' }} onClick={importADifferentProject}>
+          <Button style={buttonStyle} onClick={importADifferentProject}>
             Cancel
           </Button>
         </React.Fragment>
@@ -246,17 +222,11 @@ function ActionButtons() {
     case ImportOperationResult.Error:
       return (
         <React.Fragment>
-          <div style={textStyle}>
-            {importResult.importStatus.status !== 'done'
-              ? 'Error While Importing Project'
-              : 'Project Imported With Errors'}
-          </div>
           {when(
             importResult.importStatus.status !== 'done',
             <Button
               style={{
                 cursor: 'pointer',
-                marginLeft: 'auto',
               }}
               onClick={continueAnyway}
             >
@@ -264,11 +234,11 @@ function ActionButtons() {
             </Button>,
           )}
           {importResult.importStatus.status === 'done' ? (
-            <Button style={{ ...buttonStyle }} onClick={hideWizard}>
+            <Button style={buttonStyle} onClick={hideWizard}>
               Continue To Editor
             </Button>
           ) : (
-            <Button style={{ ...buttonStyle }} onClick={importADifferentProject}>
+            <Button style={buttonStyle} onClick={importADifferentProject}>
               Cancel
             </Button>
           )}
@@ -278,3 +248,69 @@ function ActionButtons() {
       assertNever(importResult.result)
   }
 }
+
+function Header() {
+  const importState = useEditorState(
+    Substores.github,
+    (store) => store.editor.importState,
+    'ImportWizard importState',
+  )
+  const totalImportResult: TotalImportResult = React.useMemo(
+    () => getTotalImportStatusAndResult(importState),
+    [importState],
+  )
+  const colorTheme = useColorTheme()
+  const importResult = totalImportResult.result
+  const importStatus = totalImportResult.importStatus.status
+  const textColor = React.useMemo(() => {
+    if (importStatus !== 'done' && importStatus !== 'paused') {
+      return colorTheme.fg0.value
+    }
+    switch (importResult) {
+      case ImportOperationResult.Success:
+        return colorTheme.green.value
+      case ImportOperationResult.Warn:
+        return colorTheme.warningOrange.value
+      case ImportOperationResult.Error:
+        return colorTheme.error.value
+      case ImportOperationResult.CriticalError:
+        return colorTheme.error.value
+      case null:
+        return colorTheme.fg0.value
+      default:
+        assertNever(importResult)
+    }
+  }, [
+    colorTheme.error.value,
+    colorTheme.fg0.value,
+    colorTheme.green.value,
+    colorTheme.warningOrange.value,
+    importStatus,
+    importResult,
+  ])
+
+  const getStatusText = () => {
+    if (importStatus !== 'done' && importStatus !== 'paused') {
+      return 'Cloning Project'
+    }
+
+    switch (importResult) {
+      case ImportOperationResult.Success:
+        return 'Project Imported Successfully'
+      case ImportOperationResult.Warn:
+        return 'Project Imported With Warnings'
+      case ImportOperationResult.CriticalError:
+        return 'Error Importing Project'
+      case ImportOperationResult.Error:
+        return importStatus !== 'done'
+          ? 'Error While Importing Project'
+          : 'Project Imported With Errors'
+      case null:
+        return 'Cloning Project'
+      default:
+        assertNever(importResult)
+    }
+  }
+
+  return <div style={{ color: textColor, fontSize: 16, fontWeight: 400 }}>{getStatusText()}</div>
+}

From 7283a1db7f44cf17b8663a2e941e3f14769a5655 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Mon, 25 Nov 2024 14:38:25 +0100
Subject: [PATCH 245/272] Flex wrap control and tailwind (#6666)

**Problem:**
Setting flex wrap doesn't work with tailwind projects.

**Fix:**
I added flexWrap to StyleInfo and to the inline style and tailwind
plugins. After the flex wrap control in the inspector works.

**Note:**
This PR depends on https://github.com/concrete-utopia/utopia/pull/6668 ,
without that you can't set a flex-wrap property on elements which do not
have it set yet.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode
---
 editor/src/components/canvas/canvas-types.ts         | 12 +++++-------
 .../components/canvas/plugins/inline-style-plugin.ts |  2 ++
 .../canvas/plugins/tailwind-style-plugin.ts          |  1 +
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/editor/src/components/canvas/canvas-types.ts b/editor/src/components/canvas/canvas-types.ts
index d0e222a88ac3..9fb4eef52af2 100644
--- a/editor/src/components/canvas/canvas-types.ts
+++ b/editor/src/components/canvas/canvas-types.ts
@@ -1,10 +1,8 @@
 import type { ReactElement } from 'react'
 import type { JSExpression, PartOfJSXAttributeValue } from '../../core/shared/element-template'
-import { ElementInstanceMetadataMap } from '../../core/shared/element-template'
 import type { PropertyPath, ElementPath } from '../../core/shared/project-file-types'
 import type { KeysPressed } from '../../utils/keyboard'
 import type { Modifiers } from '../../utils/modifiers'
-import { keepDeepReferenceEqualityIfPossible } from '../../utils/react-performance'
 import type {
   CanvasPoint,
   CanvasRectangle,
@@ -16,20 +14,17 @@ import type {
 import type { EditorPanel } from '../common/actions/index'
 import type { Mode } from '../editor/editor-modes'
 import type { EditorState } from '../editor/store/editor-state'
-import { OriginalCanvasAndLocalFrame } from '../editor/store/editor-state'
-import { isFeatureEnabled } from '../../utils/feature-switches'
-import { assertNever, xor } from '../../core/shared/utils'
+import { assertNever } from '../../core/shared/utils'
 import type { LayoutTargetableProp } from '../../core/layout/layout-helpers-new'
 import type {
   DragInteractionData,
   InteractionSessionWithoutMetadata,
 } from './canvas-strategies/interaction-state'
-import { InteractionSession } from './canvas-strategies/interaction-state'
 import type { CanvasStrategyId } from './canvas-strategies/canvas-strategy-types'
 import type { MouseButtonsPressed } from '../../utils/mouse'
+import type { FlexWrap } from 'utopia-api/core'
 import type {
   CSSBorderRadius,
-  CSSBorderRadiusIndividual,
   CSSNumber,
   CSSOverflow,
   CSSPadding,
@@ -604,6 +599,7 @@ export type PaddingSideInfo = CSSStyleProperty<CSSNumber>
 export type BorderRadiusInfo = CSSStyleProperty<CSSBorderRadius>
 export type BorderRadiusCornerInfo = CSSStyleProperty<CSSNumber>
 export type ZIndexInfo = CSSStyleProperty<CSSNumber>
+export type FlexWrapInfo = CSSStyleProperty<FlexWrap>
 export type OverflowInfo = CSSStyleProperty<CSSOverflow>
 
 export interface StyleInfo {
@@ -627,6 +623,7 @@ export interface StyleInfo {
   borderBottomRightRadius: BorderRadiusCornerInfo | null
   borderBottomLeftRadius: BorderRadiusCornerInfo | null
   zIndex: ZIndexInfo | null
+  flexWrap: FlexWrapInfo | null
   overflow: OverflowInfo | null
 }
 
@@ -651,6 +648,7 @@ const emptyStyleInfo: StyleInfo = {
   borderBottomRightRadius: null,
   borderBottomLeftRadius: null,
   zIndex: null,
+  flexWrap: null,
   overflow: null,
 }
 
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.ts b/editor/src/components/canvas/plugins/inline-style-plugin.ts
index a3d0c7c3376b..d8c71ec114dc 100644
--- a/editor/src/components/canvas/plugins/inline-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.ts
@@ -90,6 +90,7 @@ export const InlineStylePlugin: StylePlugin = {
         element.props,
       )
       const zIndex = getPropertyFromInstance('zIndex', element.props)
+      const flexWrap = getPropertyFromInstance('flexWrap', element.props)
 
       const overflow = getPropertyFromInstance('overflow', element.props)
 
@@ -114,6 +115,7 @@ export const InlineStylePlugin: StylePlugin = {
         borderBottomRightRadius: borderBottomRightRadius,
         borderBottomLeftRadius: borderBottomLeftRadius,
         zIndex: zIndex,
+        flexWrap: flexWrap,
         overflow: overflow,
       }
     },
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
index dd9659424cfa..2941f0bc9a12 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -183,6 +183,7 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
           'borderBottomLeftRadius',
         ),
         zIndex: parseTailwindProperty(mapping[TailwindPropertyMapping.zIndex], 'zIndex'),
+        flexWrap: parseTailwindProperty(mapping[TailwindPropertyMapping.flexWrap], 'flexWrap'),
         overflow: parseTailwindProperty(mapping[TailwindPropertyMapping.overflow], 'overflow'),
       }
     },

From 9e99bae24b2988e2f4372066a9fb783438a1e7a9 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Mon, 25 Nov 2024 17:12:01 +0200
Subject: [PATCH 246/272] feat(loading): merge github fetch with the loading
 bar (#6630)

This PR adds the loading stages to the loading bar screen and progress
bar.

Stages for GH import:
1. Loading Editor...
2. Fetching <repo name>
3. Parsing files
4. Fetching dependencies

Stages for project load (we reverse the order in our project load):
1. Fetching dependencies
2. Parsing files

If everything is validated correctly - it just shows the editor with the
project ready to be worked on. If not - it shows an error modal (its UI
was slightly changed in #6677 to better reflect errors).

It also adds support for Dark mode.

**Note:**
- The new logic is almost entirely in
[editor/src/components/editor/loading-screen.tsx](https://github.com/concrete-utopia/utopia/pull/6630/files#diff-5aa4d7e811e0bfb07a60910e517fe3a01cd270c9b4fd05132e513d939d69f769)
- There is a jump in the progress bar since these are actually two DOM
elements, one that is rendered before the React is loaded and a React
component that replaces it after the React code is loaded. This jump
will be fixed in a subsequent PR.
- Currently the progress bar is "static" (advances by time and not
stages). This will be changed in (the same) subsequent PR.

<video
src="https://github.com/user-attachments/assets/a6d52f3d-b27b-4110-be1e-a7f213f563ab"></video>

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 .../canvas/canvas-loading-screen.tsx          |  17 +-
 .../src/components/editor/actions/actions.tsx |  12 ++
 .../editor/import-wizard/import-wizard.tsx    |   8 +
 .../src/components/editor/loading-screen.tsx  | 174 ++++++++++++++++++
 .../src/components/editor/store/dispatch.tsx  |  19 +-
 .../github/github-repository-clone-flow.tsx   |   3 -
 editor/src/core/shared/dependencies.ts        |   4 +-
 .../shared/github/operations/load-branch.ts   |   1 -
 .../shared/import/import-operation-service.ts |   4 +-
 editor/src/templates/editor.tsx               |   7 +
 editor/src/templates/index.html               | 136 +++++++++-----
 editor/src/uuiui/styles/theme/dark.ts         |   1 +
 editor/src/uuiui/styles/theme/light.ts        |   1 +
 13 files changed, 333 insertions(+), 54 deletions(-)
 create mode 100644 editor/src/components/editor/loading-screen.tsx

diff --git a/editor/src/components/canvas/canvas-loading-screen.tsx b/editor/src/components/canvas/canvas-loading-screen.tsx
index 54e4c74042e4..854dec875c93 100644
--- a/editor/src/components/canvas/canvas-loading-screen.tsx
+++ b/editor/src/components/canvas/canvas-loading-screen.tsx
@@ -3,6 +3,8 @@ import { Global, css } from '@emotion/react'
 import { useColorTheme } from '../../uuiui'
 import { useEditorState } from '../editor/store/store-hook'
 import { Substores } from '../editor/store/store-hook'
+import { getTotalImportStatusAndResult } from '../../core/shared/import/import-operation-service'
+import type { TotalImportResult } from '../../core/shared/import/import-operation-types'
 
 export const CanvasLoadingScreen = React.memo(() => {
   const colorTheme = useColorTheme()
@@ -17,17 +19,26 @@ export const CanvasLoadingScreen = React.memo(() => {
     'CanvasLoadingScreen importWizardOpen',
   )
 
+  const totalImportResult: TotalImportResult = React.useMemo(
+    () => getTotalImportStatusAndResult(importState),
+    [importState],
+  )
+
   const importingStoppedStyleOverride = React.useMemo(
     () =>
       // if the importing was stopped, we want to pause the shimmer animation
-      (importWizardOpen && importState.importStatus.status === 'done') ||
-      importState.importStatus.status === 'paused'
+      (importWizardOpen && totalImportResult.importStatus.status === 'done') ||
+      totalImportResult.importStatus.status === 'paused'
         ? {
             background: colorTheme.codeEditorShimmerPrimary.value,
             animation: 'none',
           }
         : {},
-    [importWizardOpen, importState.importStatus.status, colorTheme.codeEditorShimmerPrimary.value],
+    [
+      importWizardOpen,
+      totalImportResult.importStatus.status,
+      colorTheme.codeEditorShimmerPrimary.value,
+    ],
   )
 
   return (
diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
index de08aba96446..1f910fb5b9b0 100644
--- a/editor/src/components/editor/actions/actions.tsx
+++ b/editor/src/components/editor/actions/actions.tsx
@@ -520,6 +520,7 @@ import {
 import { addToastToState, includeToast, removeToastFromState } from './toast-helpers'
 import { AspectRatioLockedProp } from '../../aspect-ratio'
 import {
+  getDependenciesStatus,
   refreshDependencies,
   removeModulesFromNodeModules,
 } from '../../../core/shared/dependencies'
@@ -629,6 +630,8 @@ import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 import { styleP } from '../../inspector/inspector-common'
 import {
   getUpdateOperationResult,
+  notifyOperationFinished,
+  notifyOperationStarted,
   notifyImportStatusToDiscord,
 } from '../../../core/shared/import/import-operation-service'
 import { updateRequirements } from '../../../core/shared/import/project-health-check/utopia-requirements-service'
@@ -6319,6 +6322,8 @@ export async function load(
   // this action is now async!
   const migratedModel = applyMigrations(model)
   const npmDependencies = dependenciesWithEditorRequirements(migratedModel.projectContents)
+  // side effect ☢️
+  notifyOperationStarted(dispatch, { type: 'refreshDependencies' })
   const fetchNodeModulesResult = await fetchNodeModules(
     dispatch,
     npmDependencies,
@@ -6333,6 +6338,13 @@ export async function load(
     fetchNodeModulesResult.dependenciesNotFound,
   )
 
+  // side effect ☢️
+  notifyOperationFinished(
+    dispatch,
+    { type: 'refreshDependencies' },
+    getDependenciesStatus(packageResult),
+  )
+
   const codeResultCache: CodeResultCache = generateCodeResultCache(
     // TODO is this sufficient here?
     migratedModel.projectContents,
diff --git a/editor/src/components/editor/import-wizard/import-wizard.tsx b/editor/src/components/editor/import-wizard/import-wizard.tsx
index 446e414fba93..8c5c54b76c86 100644
--- a/editor/src/components/editor/import-wizard/import-wizard.tsx
+++ b/editor/src/components/editor/import-wizard/import-wizard.tsx
@@ -188,6 +188,14 @@ function ActionButtons() {
     fontSize: 14,
     cursor: 'pointer',
   }
+  React.useEffect(() => {
+    if (
+      importResult.importStatus.status == 'done' &&
+      importResult.result == ImportOperationResult.Success
+    ) {
+      hideWizard()
+    }
+  }, [importResult, hideWizard])
   if (
     importResult.importStatus.status === 'in-progress' ||
     importResult.importStatus.status === 'not-started'
diff --git a/editor/src/components/editor/loading-screen.tsx b/editor/src/components/editor/loading-screen.tsx
new file mode 100644
index 000000000000..c3287334c007
--- /dev/null
+++ b/editor/src/components/editor/loading-screen.tsx
@@ -0,0 +1,174 @@
+import React from 'react'
+import { Substores, useEditorState } from './store/store-hook'
+import { getImportOperationTextAsJsx } from './import-wizard/import-wizard-helpers'
+import { getTotalImportStatusAndResult } from '../../core/shared/import/import-operation-service'
+import type { TotalImportResult } from '../../core/shared/import/import-operation-types'
+import type { Theme } from '../../uuiui'
+import { useColorTheme } from '../../uuiui'
+import { getCurrentTheme } from './store/editor-state'
+import ReactDOM from 'react-dom'
+
+export function LoadingEditorComponent() {
+  const colorTheme = useColorTheme()
+
+  const currentTheme: Theme = useEditorState(
+    Substores.theme,
+    (store) => getCurrentTheme(store.userState),
+    'currentTheme',
+  )
+
+  const importState = useEditorState(
+    Substores.restOfEditor,
+    (store) => store.editor.importState,
+    'LoadingEditorComponent importState',
+  )
+
+  const githubRepo = useEditorState(
+    Substores.userState,
+    (store) => store.userState.githubState.gitRepoToLoad,
+    'LoadingEditorComponent githubRepoToLoad',
+  )
+
+  const totalImportResult: TotalImportResult = React.useMemo(
+    () => getTotalImportStatusAndResult(importState),
+    [importState],
+  )
+
+  const projectId = useEditorState(
+    Substores.restOfEditor,
+    (store) => store.editor.id,
+    'LoadingEditorComponent projectId',
+  )
+
+  const cleared = React.useRef(false)
+
+  const currentOperationToShow: {
+    text: React.ReactNode
+    id: string
+    timeDone: number | null | undefined
+    timeStarted: number | null | undefined
+  } | null = React.useMemo(() => {
+    if (totalImportResult.importStatus.status == 'not-started') {
+      if (projectId == null) {
+        return {
+          text: 'Loading Editor...',
+          id: 'loading-editor',
+          timeDone: null,
+          timeStarted: null,
+        }
+      } else {
+        return {
+          text: `Parsing files`,
+          id: 'parseFiles',
+          timeDone: null,
+          timeStarted: null,
+        }
+      }
+    }
+    for (const op of importState.importOperations) {
+      if (op?.children?.length == 0 || op.type == 'refreshDependencies') {
+        if (op.timeStarted != null && op.timeDone == null) {
+          return {
+            text: getImportOperationTextAsJsx(op),
+            id: op.id ?? op.type,
+            timeDone: op.timeDone,
+            timeStarted: op.timeStarted,
+          }
+        }
+      }
+      if (op.type !== 'refreshDependencies') {
+        for (const child of op.children ?? []) {
+          if (child.timeStarted != null && child.timeDone == null) {
+            return {
+              text: getImportOperationTextAsJsx(child),
+              id: child.id ?? child.type,
+              timeDone: child.timeDone,
+              timeStarted: child.timeStarted,
+            }
+          }
+        }
+      }
+    }
+    return {
+      text: 'Loading Editor...',
+      id: 'loading-editor',
+      timeDone: null,
+      timeStarted: null,
+    }
+  }, [totalImportResult, importState.importOperations, projectId])
+
+  const shouldBeCleared = React.useMemo(() => {
+    return (
+      cleared.current ||
+      (totalImportResult.importStatus.status == 'done' &&
+        (githubRepo == null || totalImportResult.result == 'criticalError')) ||
+      totalImportResult.importStatus.status == 'paused'
+    )
+  }, [totalImportResult, githubRepo])
+
+  React.useEffect(() => {
+    if (shouldBeCleared) {
+      const loadingScreenWrapper = document.getElementById('loading-screen-wrapper')
+      if (loadingScreenWrapper != null) {
+        loadingScreenWrapper.remove()
+      }
+    }
+  }, [shouldBeCleared])
+
+  const portal = React.useRef(document.getElementById('loading-screen-progress-bar-portal')).current
+  const hasMounted = React.useRef(false)
+  if (portal == null) {
+    return null
+  }
+
+  if (shouldBeCleared) {
+    cleared.current = true
+    return null
+  }
+
+  if (!hasMounted.current) {
+    portal.innerHTML = ''
+    hasMounted.current = true
+  }
+
+  const themeStyle =
+    currentTheme === 'dark'
+      ? `
+    .editor-loading-screen { background-color: ${colorTheme.bg6.value} }
+    .utopia-logo-pyramid.light { display: none; }
+    .utopia-logo-pyramid.dark { display: block; }
+  `
+      : ''
+
+  return ReactDOM.createPortal(
+    <React.Fragment>
+      <style>{themeStyle}</style>
+      <div className='progress-bar-shell' style={{ borderColor: colorTheme.fg0.value }}>
+        <div
+          className='progress-bar-progress animation-progress'
+          style={{
+            transform: 'translateX(-180px)',
+            animationName: 'animation-keyframes-2',
+            backgroundColor: colorTheme.fg0.value,
+          }}
+        ></div>
+      </div>
+      <div>
+        <ul className='loading-screen-import-operations'>
+          {currentOperationToShow != null ? (
+            <li
+              style={{
+                listStyle: 'none',
+                color: colorTheme.fg0.value,
+              }}
+              key={currentOperationToShow.id}
+            >
+              {currentOperationToShow.text}
+            </li>
+          ) : null}
+        </ul>
+      </div>
+    </React.Fragment>,
+    portal,
+  )
+}
diff --git a/editor/src/components/editor/store/dispatch.tsx b/editor/src/components/editor/store/dispatch.tsx
index 6934b776d1bb..44a7a54adf44 100644
--- a/editor/src/components/editor/store/dispatch.tsx
+++ b/editor/src/components/editor/store/dispatch.tsx
@@ -89,6 +89,12 @@ import {
 } from '../../../core/performance/performance-utils'
 import { getParseCacheOptions } from '../../../core/shared/parse-cache-utils'
 import { resetUpdatedProperties } from '../../canvas/plugins/style-plugins'
+import {
+  notifyOperationFinished,
+  notifyOperationStarted,
+} from '../../../core/shared/import/import-operation-service'
+import { ImportOperationResult } from '../../../core/shared/import/import-operation-types'
+import { updateImportStatus } from '../actions/action-creators'
 
 type DispatchResultFields = {
   nothingChanged: boolean
@@ -327,6 +333,7 @@ function maybeRequestModelUpdate(
   // Should anything need to be sent across, do so here.
   if (filesToUpdate.length > 0) {
     const { endMeasure } = startPerformanceMeasure('file-parse', { uniqueId: true })
+    notifyOperationStarted(dispatch, { type: 'parseFiles' })
     const parseFinished = getParseResult(
       workers,
       filesToUpdate,
@@ -337,6 +344,7 @@ function maybeRequestModelUpdate(
       getParseCacheOptions(),
     )
       .then((parseResult) => {
+        notifyOperationFinished(dispatch, { type: 'parseFiles' }, ImportOperationResult.Success)
         const duration = endMeasure()
         if (isConcurrencyLoggingEnabled() && filesToUpdate.length > 1) {
           console.info(
@@ -364,12 +372,19 @@ function maybeRequestModelUpdate(
           )
         }
 
-        dispatch([EditorActions.mergeWithPrevUndo(actionsToDispatch)])
+        dispatch([
+          EditorActions.mergeWithPrevUndo(actionsToDispatch),
+          updateImportStatus({ status: 'done' }),
+        ])
         return true
       })
       .catch((e) => {
         console.error('error during parse', e)
-        dispatch([EditorActions.clearParseOrPrintInFlight()])
+        notifyOperationFinished(dispatch, { type: 'parseFiles' }, ImportOperationResult.Error)
+        dispatch([
+          EditorActions.clearParseOrPrintInFlight(),
+          updateImportStatus({ status: 'done' }),
+        ])
         return true
       })
     return {
diff --git a/editor/src/components/github/github-repository-clone-flow.tsx b/editor/src/components/github/github-repository-clone-flow.tsx
index a8688987f661..9ea1ca795b86 100644
--- a/editor/src/components/github/github-repository-clone-flow.tsx
+++ b/editor/src/components/github/github-repository-clone-flow.tsx
@@ -29,11 +29,8 @@ import { notice } from '../common/notice'
 import { isFeatureEnabled } from '../../utils/feature-switches'
 import {
   notifyOperationCriticalError,
-  notifyOperationFinished,
   startImportProcess,
-  updateProjectImportStatus,
 } from '../../core/shared/import/import-operation-service'
-import { ImportOperationResult } from '../../core/shared/import/import-operation-types'
 
 export const LoadActionsDispatched = 'loadActionDispatched'
 
diff --git a/editor/src/core/shared/dependencies.ts b/editor/src/core/shared/dependencies.ts
index ff6c48ed11a2..d9c1d9a5881b 100644
--- a/editor/src/core/shared/dependencies.ts
+++ b/editor/src/core/shared/dependencies.ts
@@ -120,7 +120,9 @@ function isPackageMissing(status: PackageDetails): boolean {
   return status.status === 'error' || status.status === 'not-found'
 }
 
-function getDependenciesStatus(loadedPackagesStatus: PackageStatusMap): ImportOperationResult {
+export function getDependenciesStatus(
+  loadedPackagesStatus: PackageStatusMap,
+): ImportOperationResult {
   if (Object.values(loadedPackagesStatus).every(isPackageMissing)) {
     return ImportOperationResult.Error
   }
diff --git a/editor/src/core/shared/github/operations/load-branch.ts b/editor/src/core/shared/github/operations/load-branch.ts
index 1c4d29aa0c21..30d4ffc40ba3 100644
--- a/editor/src/core/shared/github/operations/load-branch.ts
+++ b/editor/src/core/shared/github/operations/load-branch.ts
@@ -49,7 +49,6 @@ import {
   notifyOperationStarted,
   pauseImport,
   startImportProcess,
-  updateProjectImportStatus,
 } from '../../import/import-operation-service'
 import {
   RequirementResolutionResult,
diff --git a/editor/src/core/shared/import/import-operation-service.ts b/editor/src/core/shared/import/import-operation-service.ts
index 9e9f95dfd111..6db47dfea46f 100644
--- a/editor/src/core/shared/import/import-operation-service.ts
+++ b/editor/src/core/shared/import/import-operation-service.ts
@@ -19,11 +19,11 @@ import { sendDiscordMessage } from '../../../components/editor/server'
 import type { DiscordEndpointSiteImport, DiscordMessageType } from 'utopia-shared/src/types'
 import { getImportOperationText } from '../../../components/editor/import-wizard/import-wizard-helpers'
 
-export function startImportProcess(dispatch: EditorDispatch) {
+export function startImportProcess(dispatch: EditorDispatch, customSteps?: ImportOperation[]) {
   const actions: EditorAction[] = [
     updateImportStatus({ status: 'in-progress' }),
     updateImportOperations(
-      [
+      customSteps ?? [
         { type: 'loadBranch' },
         { type: 'checkRequirementsPreParse' },
         { type: 'parseFiles' },
diff --git a/editor/src/templates/editor.tsx b/editor/src/templates/editor.tsx
index 02bb102620c0..544fba73df9e 100644
--- a/editor/src/templates/editor.tsx
+++ b/editor/src/templates/editor.tsx
@@ -137,6 +137,8 @@ import { getParserWorkerCount } from '../core/workers/common/concurrency-utils'
 import { canMeasurePerformance } from '../core/performance/performance-utils'
 import { getChildGroupsForNonGroupParents } from '../components/canvas/canvas-strategies/strategies/fragment-like-helpers'
 import { EditorModes } from '../components/editor/editor-modes'
+import { startImportProcess } from '../core/shared/import/import-operation-service'
+import { LoadingEditorComponent } from '../components/editor/loading-screen'
 
 if (PROBABLY_ELECTRON) {
   let { webFrame } = requireElectron()
@@ -267,6 +269,10 @@ export class Editor {
       projectName: string,
       project: PersistentModel,
     ) => {
+      startImportProcess(this.boundDispatch, [
+        { type: 'parseFiles' },
+        { type: 'refreshDependencies' },
+      ])
       await load(this.boundDispatch, project, projectName, projectId, builtInDependencies)
       PubSub.publish(LoadActionsDispatched, { projectId: projectId })
     }
@@ -768,6 +774,7 @@ export const EditorRoot: React.FunctionComponent<{
                         <AnimationContext.Provider
                           value={{ animate: animate, scope: animationScope }}
                         >
+                          <LoadingEditorComponent />
                           <EditorComponent />
                         </AnimationContext.Provider>
                       </UiJsxCanvasCtxAtom.Provider>
diff --git a/editor/src/templates/index.html b/editor/src/templates/index.html
index f00fc9341974..f3481b72d1d9 100644
--- a/editor/src/templates/index.html
+++ b/editor/src/templates/index.html
@@ -15,6 +15,11 @@
       as="image"
     />
 
+    <link
+      rel="stylesheet"
+      href="<%- UTOPIA_DOMAIN %>/editor/css/initial-load.css?hash=<%- UTOPIA_SHA %>"
+    />
+
     <!--editorScript-->
 
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="use-credentials" />
@@ -47,6 +52,15 @@
           from {
             transform: translateX(-212px);
           }
+          to {
+            transform: translateX(-180px);
+          }
+        }
+
+        @keyframes animation-keyframes-2 {
+          from {
+            transform: translateX(-180px);
+          }
           to {
             transform: translateX(0px);
           }
@@ -61,9 +75,23 @@
           }
         }
 
+        .editor-loading-screen {
+          position: fixed;
+          left: 0px;
+          top: 0px;
+          bottom: 0px;
+          right: 0px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          background-color: white;
+          z-index: 1000;
+        }
+
         .animation-progress {
           animation-name: animation-keyframes;
-          animation-duration: 10s;
+          animation-duration: 30s;
           animation-iteration-count: infinite;
           animation-direction: alternate;
         }
@@ -78,10 +106,34 @@
 
         .progress-bar-shell {
           border: 1px solid black;
+          margin-top: 64px;
+          width: 212px;
+          height: 11px;
+          border-radius: 8px;
+          overflow: hidden;
+          box-sizing: border-box !important;
         }
 
         .progress-bar-progress {
           background-color: black;
+          border-radius: 6px;
+          height: 9px;
+        }
+
+        .loading-screen-import-operations {
+          color: black;
+          height: 150px;
+          overflow: hidden;
+          width: auto;
+          display: flex;
+          list-style: none;
+          flex-direction: column;
+          align-items: center;
+          margin: 0;
+          padding: 0;
+          gap: 2px;
+          margin-top: 10px;
+          font-family: utopian-inter, 'sans-serif';
         }
 
         .utopia-logo-pyramid.light {
@@ -91,11 +143,27 @@
           display: none;
         }
 
+        .loading-screen-wrapper {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+
         @media (prefers-color-scheme: dark) {
           body {
             background-color: #1a1a1a;
           }
 
+          .editor-loading-screen {
+            background-color: #1a1a1a;
+          }
+
+          .loading-screen-import-operations,
+          .loading-screen-import-operations li {
+            color: white;
+          }
+
           .progress-bar-shell {
             border: 1px solid white;
           }
@@ -137,54 +205,38 @@
           justify-content: stretch;
           pointer-events: initial;
         "
-      >
-        <!-- loading content-->
-
+      ></div>
+      <!-- loading content-->
+
+      <div id="loading-screen-wrapper" class="editor-loading-screen">
+        <img
+          src="<%- UTOPIA_DOMAIN %>/editor/pyramid_dark.png"
+          height="78px"
+          alt="Utopia Logo"
+          class="utopia-logo-pyramid dark"
+        />
+        <img
+          src="<%- UTOPIA_DOMAIN %>/editor/pyramid_light.png"
+          height="78px"
+          alt="Utopia Logo"
+          class="utopia-logo-pyramid light"
+        />
         <div
-          style="
-            position: fixed;
-            left: 0px;
-            top: 0px;
-            bottom: 0px;
-            right: 0px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-          "
+          id="loading-screen-progress-bar-portal"
+          style="display: flex; flex-direction: column; align-items: center"
         >
-          <img
-            src="<%- UTOPIA_DOMAIN %>/editor/pyramid_dark.png?hash=<%- UTOPIA_SHA %>"
-            height="78px"
-            alt="Utopia Logo"
-            class="utopia-logo-pyramid dark"
-          />
-          <img
-            src="<%- UTOPIA_DOMAIN %>/editor/pyramid_light.png?hash=<%- UTOPIA_SHA %>"
-            height="78px"
-            alt="Utopia Logo"
-            class="utopia-logo-pyramid light"
-          />
-
-          <div
-            class="progress-bar-shell"
-            style="
-              margin-top: 64px;
-              width: 212px;
-              height: 11px;
-              border-radius: 8px;
-              overflow: hidden;
-              box-sizing: border-box !important;
-            "
-          >
+          <div class="progress-bar-shell">
             <div
               class="progress-bar-progress animation-progress"
-              style="border-radius: 6px; height: 9px; transform: translateX(-212px)"
+              style="transform: translateX(-212px); animation-duration: 10s"
             ></div>
           </div>
-
-          <!-- ends loading content-->
+          <ul class="loading-screen-import-operations">
+            <li style="list-style: none">Loading Editor...</li>
+          </ul>
         </div>
+
+        <!-- ends loading content-->
       </div>
     </div>
   </body>
diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
index 6c015f5afbf9..b1e57f176aa7 100644
--- a/editor/src/uuiui/styles/theme/dark.ts
+++ b/editor/src/uuiui/styles/theme/dark.ts
@@ -59,6 +59,7 @@ const darkBase = {
   bg3: createUtopiColor('#393d49'),
   bg4: createUtopiColor('#55575f'),
   bg5: createUtopiColor('#848998'),
+  bg6: createUtopiColor('#1a1a1a'),
   fg0: createUtopiColor('#ffffff'),
   fg1: createUtopiColor('#D9DCE3'),
   fg2: createUtopiColor('#c9cCc3'),
diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts
index 2709b29c7a0a..69ef0bca8362 100644
--- a/editor/src/uuiui/styles/theme/light.ts
+++ b/editor/src/uuiui/styles/theme/light.ts
@@ -59,6 +59,7 @@ const lightBase = {
   bg3: createUtopiColor('hsl(0,0%,94%)'),
   bg4: createUtopiColor('hsl(0,0%,92%)'),
   bg5: createUtopiColor('hsl(0,0%,90%)'),
+  bg6: createUtopiColor('#ffffff'),
   fg0: createUtopiColor('hsl(0,0%,0%)'),
   fg1: createUtopiColor('hsl(0,0%,10%)'),
   fg2: createUtopiColor('hsl(0,0%,20%)'),

From 84b3781fa5f5908ba10c503e412f48e83126edce Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:24:39 +0200
Subject: [PATCH 247/272] fix(loading): consistent colors in loading screen
 (#6679)

**Problem:**
Today if there is a difference between the system theme preferences and
the Utopia theme preferences, at some point we get mixed colors in the
loading screen.
This happens because at first we can rely only on system preferences
(React code was not loaded yet and we don't have user preferences), and
only 1-2s into the loading we have the user preferences.

**Fix:**
All the colors now are consistent with the theme.
We have two options when the system theme and the Utopia theme don't
match:
1. continue with the theme that was displayed when the loading screen
started (currently the theme from the system preferences since this is
the only information we have)
2. switch the theme once we have the user preferences mid-way in the
loading screen. this was not chosen by Mckayla.

Once we'll be able to send this information from the server we can start
with the Utopia preferred theme (have a class name on the body).

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 .../src/components/editor/loading-screen.tsx  | 17 +---
 editor/src/templates/index.html               | 77 ++++++++++---------
 2 files changed, 42 insertions(+), 52 deletions(-)

diff --git a/editor/src/components/editor/loading-screen.tsx b/editor/src/components/editor/loading-screen.tsx
index c3287334c007..c5197ec5c768 100644
--- a/editor/src/components/editor/loading-screen.tsx
+++ b/editor/src/components/editor/loading-screen.tsx
@@ -4,13 +4,10 @@ import { getImportOperationTextAsJsx } from './import-wizard/import-wizard-helpe
 import { getTotalImportStatusAndResult } from '../../core/shared/import/import-operation-service'
 import type { TotalImportResult } from '../../core/shared/import/import-operation-types'
 import type { Theme } from '../../uuiui'
-import { useColorTheme } from '../../uuiui'
 import { getCurrentTheme } from './store/editor-state'
 import ReactDOM from 'react-dom'
 
 export function LoadingEditorComponent() {
-  const colorTheme = useColorTheme()
-
   const currentTheme: Theme = useEditorState(
     Substores.theme,
     (store) => getCurrentTheme(store.userState),
@@ -131,25 +128,14 @@ export function LoadingEditorComponent() {
     hasMounted.current = true
   }
 
-  const themeStyle =
-    currentTheme === 'dark'
-      ? `
-    .editor-loading-screen { background-color: ${colorTheme.bg6.value} }
-    .utopia-logo-pyramid.light { display: none; }
-    .utopia-logo-pyramid.dark { display: block; }
-  `
-      : ''
-
   return ReactDOM.createPortal(
     <React.Fragment>
-      <style>{themeStyle}</style>
-      <div className='progress-bar-shell' style={{ borderColor: colorTheme.fg0.value }}>
+      <div className='progress-bar-shell'>
         <div
           className='progress-bar-progress animation-progress'
           style={{
             transform: 'translateX(-180px)',
             animationName: 'animation-keyframes-2',
-            backgroundColor: colorTheme.fg0.value,
           }}
         ></div>
       </div>
@@ -159,7 +145,6 @@ export function LoadingEditorComponent() {
             <li
               style={{
                 listStyle: 'none',
-                color: colorTheme.fg0.value,
               }}
               key={currentOperationToShow.id}
             >
diff --git a/editor/src/templates/index.html b/editor/src/templates/index.html
index f3481b72d1d9..46daee3cf355 100644
--- a/editor/src/templates/index.html
+++ b/editor/src/templates/index.html
@@ -38,6 +38,31 @@
       }
 
       @scope (:root) to (#canvas-container) {
+        body {
+          /* handle system preferences and utopia theme */
+          --theme-bg-color: white;
+          --theme-fg-color: black;
+          --theme-light-png-visibility: block;
+          --theme-dark-png-visibility: none;
+        }
+
+        @media (prefers-color-scheme: dark) {
+          body:not(.utopia-theme-light) {
+            --theme-bg-color: #1a1a1a;
+            --theme-fg-color: white;
+            --theme-light-png-visibility: none;
+            --theme-dark-png-visibility: block;
+          }
+        }
+
+        /* utopia preferences should override system preferences */
+        body.utopia-theme-dark {
+          --theme-bg-color: #1a1a1a;
+          --theme-fg-color: white;
+          --theme-light-png-visibility: none;
+          --theme-dark-png-visibility: block;
+        }
+
         body {
           margin: 0;
           font-size: 11px !important;
@@ -46,6 +71,8 @@
           outline: none;
           overscroll-behavior-x: contain;
           --loadscreen-accent: rgba(46, 255, 109, 0.5);
+          background-color: var(--theme-bg-color);
+          transition: background-color 0.1s ease-in-out;
         }
 
         @keyframes animation-keyframes {
@@ -85,7 +112,8 @@
           flex-direction: column;
           align-items: center;
           justify-content: center;
-          background-color: white;
+          background-color: var(--theme-bg-color);
+          transition: background-color 0.1s ease-in-out;
           z-index: 1000;
         }
 
@@ -105,7 +133,8 @@
         }
 
         .progress-bar-shell {
-          border: 1px solid black;
+          border: 1px solid var(--theme-fg-color);
+          transition: border-color 0.1s ease-in-out;
           margin-top: 64px;
           width: 212px;
           height: 11px;
@@ -115,13 +144,13 @@
         }
 
         .progress-bar-progress {
-          background-color: black;
+          background-color: var(--theme-fg-color);
+          transition: background-color 0.1s ease-in-out;
           border-radius: 6px;
           height: 9px;
         }
 
         .loading-screen-import-operations {
-          color: black;
           height: 150px;
           overflow: hidden;
           width: auto;
@@ -136,11 +165,17 @@
           font-family: utopian-inter, 'sans-serif';
         }
 
+        .loading-screen-import-operations,
+        .loading-screen-import-operations li {
+          color: var(--theme-fg-color);
+          transition: color 0.1s ease-in-out;
+        }
+
         .utopia-logo-pyramid.light {
-          display: block;
+          display: var(--theme-light-png-visibility);
         }
         .utopia-logo-pyramid.dark {
-          display: none;
+          display: var(--theme-dark-png-visibility);
         }
 
         .loading-screen-wrapper {
@@ -149,36 +184,6 @@
           align-items: center;
           justify-content: center;
         }
-
-        @media (prefers-color-scheme: dark) {
-          body {
-            background-color: #1a1a1a;
-          }
-
-          .editor-loading-screen {
-            background-color: #1a1a1a;
-          }
-
-          .loading-screen-import-operations,
-          .loading-screen-import-operations li {
-            color: white;
-          }
-
-          .progress-bar-shell {
-            border: 1px solid white;
-          }
-
-          .progress-bar-progress {
-            background-color: white;
-          }
-
-          .utopia-logo-pyramid.light {
-            display: none;
-          }
-          .utopia-logo-pyramid.dark {
-            display: block;
-          }
-        }
       }
     </style>
   </head>

From a9a93c2219cde52c0f88bd576dc4ce4da990708a Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:37:20 +0100
Subject: [PATCH 248/272] Fix parsing parent element container from props
 (#6681)

**Problem:**

The `parentContainerGridPropertiesFromProps` in the special size
measurements is incorrectly calcluated off of the computed style of the
parent. This results, among other issues, into the template being
serialized to its computed values whenever
`gridMoveStrategiesExtraCommands` is applied inside strategies (e.g.
right after moving a grid item).

**Fix:**

Try to use the parent element style directly when parsing.

| Before | After |
|--------|------------|
|
https://github.com/user-attachments/assets/3a3a62b4-c030-422d-bd69-d80e52a76ef5
|
https://github.com/user-attachments/assets/ffbc2c3e-e7b3-4812-b9b4-71d096030b94
|



**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6680
---
 ...change-location-strategy.spec.browser2.tsx | 111 +++++++++++++++++-
 editor/src/components/canvas/dom-walker.ts    |   4 +-
 2 files changed, 113 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
index a0774e94e142..5dcfb2072f27 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
@@ -1,6 +1,6 @@
 import * as EP from '../../../../core/shared/element-path'
 import { offsetPoint, windowPoint } from '../../../../core/shared/math-utils'
-import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
+import { selectComponentsForTest, wait } from '../../../../utils/utils.test-utils'
 import CanvasActions from '../../canvas-actions'
 import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
 import { mouseDownAtPoint, mouseMoveToPoint, mouseUpAtPoint } from '../../event-helpers.test-utils'
@@ -28,6 +28,34 @@ describe('grid element change location strategy', () => {
     })
   })
 
+  it('does not alter the grid template', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeFractionalTemplate,
+      'await-first-dom-report',
+    )
+
+    const testId = 'aaa'
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 1,
+        gridPath: 'sb/scene/grid',
+        testId: testId,
+      },
+    )
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '7',
+      gridColumnStart: '3',
+      gridRowEnd: '4',
+      gridRowStart: '2',
+    })
+
+    const grid = await editor.renderedDOM.findByTestId('grid')
+    expect(grid.style.gridTemplateColumns).toEqual('1fr 1fr 2fr 2fr 1fr 1fr')
+    expect(grid.style.gridTemplateRows).toEqual('1fr 1fr 2fr 1fr')
+  })
+
   describe('component items', () => {
     it('can change the location of components on a grid when component takes style prop', async () => {
       const editor = await renderTestEditorWithCode(
@@ -881,6 +909,87 @@ export var storyboard = (
 )
 `
 
+const ProjectCodeFractionalTemplate = `import * as React from 'react'
+import { Scene, Storyboard, Placeholder } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 847,
+        height: 895,
+        position: 'absolute',
+        left: 46,
+        top: 131,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateRows: '1fr 1fr 2fr 1fr',
+          gridTemplateColumns:
+            '1fr 1fr 2fr 2fr 1fr 1fr',
+          gridGap: 16,
+          height: 482,
+          width: 786,
+          position: 'absolute',
+          left: 31,
+          top: 0,
+        }}
+        data-uid='grid'
+		data-testid='grid'
+      >
+        <div
+          style={{
+            minHeight: 0,
+            backgroundColor: '#f3785f',
+            gridColumnEnd: 5,
+            gridColumnStart: 1,
+            gridRowEnd: 3,
+            gridRowStart: 1,
+          }}
+          data-uid='aaa'
+          data-testid='aaa'
+        />
+        <div
+          style={{
+            minHeight: 0,
+            backgroundColor: '#23565b',
+          }}
+          data-uid='bbb'
+          data-testid='bbb'
+        />
+        <Placeholder
+          style={{
+            minHeight: 0,
+            gridColumnEnd: 5,
+            gridRowEnd: 4,
+            gridColumnStart: 1,
+            gridRowStart: 3,
+            backgroundColor: '#0074ff',
+          }}
+          data-uid='ccc'
+        />
+        <Placeholder
+          style={{
+            minHeight: 0,
+            gridColumnEnd: 9,
+            gridRowEnd: 4,
+            gridColumnStart: 5,
+            gridRowStart: 3,
+          }}
+          data-uid='ddd'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`
+
 const makeProjectCodeWithItemComponent = (
   itemComponentCode: string,
 ) => `import * as React from 'react'
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index baeb2ca0da52..00a78950527b 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -930,7 +930,9 @@ function getSpecialMeasurements(
       : null
 
   const containerGridPropertiesFromProps = getGridContainerProperties(element.style)
-  const parentContainerGridPropertiesFromProps = getGridContainerProperties(parentElementStyle)
+  const parentContainerGridPropertiesFromProps = getGridContainerProperties(
+    element.parentElement?.style ?? parentElementStyle,
+  )
   const containerGridProperties = getGridContainerProperties(computedStyle, {
     dynamicCols: isDynamicGridTemplate(containerGridPropertiesFromProps.gridTemplateColumns),
     dynamicRows: isDynamicGridTemplate(containerGridPropertiesFromProps.gridTemplateRows),

From 6b3c5a24ae3bda12b0730b55633530c42ccff10b Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 27 Nov 2024 11:01:53 +0100
Subject: [PATCH 249/272] Respect spans when resizing grid cells (#6685)

**Problem:**

Resizing grid cells always forces explicit numerical placement pins,
chomping any `span`s that may have been defined on the cell.

**Fix:**

After determining the right numerical positions for the resized cell
bounds, do a normalization pass so that the new grid props are rewritten
to respect the new bounds but also to express them with `spans` if the
original pins were spans in the first place.

For example, assuming enlarging to the right by 1 cell:

| Initial | Result |
|--------|----------|
| `gridColumn: span 2` | `gridColumn: span 3` |
| `gridColumn 3 / span 2` | `gridColumn: 3 / span 3` |

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6683
---
 ...-resize-element-strategy.spec.browser2.tsx | 218 ++++++++++++++++++
 .../grid-resize-element-strategy.ts           |  85 ++++++-
 2 files changed, 300 insertions(+), 3 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 2ddbdf0315ce..1f07c6144cce 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -671,6 +671,185 @@ export var storyboard = (
       gridRowEnd: 'auto',
     })
   })
+
+  describe('spans', () => {
+    it('respects column start spans', async () => {
+      const editor = await renderTestEditorWithCode(
+        makeProjectCodeWithCustomPlacement({ gridColumn: 'span 2', gridRow: '2' }),
+        'await-first-dom-report',
+      )
+
+      // enlarge to the right
+      {
+        await runCellResizeTest(
+          editor,
+          'column-end',
+          gridCellTargetId(EP.fromString('sb/grid'), 2, 3),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: 'auto',
+          gridColumnStart: 'span 3',
+          gridRowEnd: 'auto',
+          gridRowStart: '2',
+        })
+      }
+
+      // shrink from the left
+      {
+        await runCellResizeTest(
+          editor,
+          'column-start',
+          gridCellTargetId(EP.fromString('sb/grid'), 2, 2),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: '4',
+          gridColumnStart: 'span 2',
+          gridRowEnd: 'auto',
+          gridRowStart: '2',
+        })
+      }
+
+      // enlarge back from the left
+      {
+        await runCellResizeTest(
+          editor,
+          'column-start',
+          gridCellTargetId(EP.fromString('sb/grid'), 2, 1),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: 'auto',
+          gridColumnStart: 'span 3',
+          gridRowEnd: 'auto',
+          gridRowStart: '2',
+        })
+      }
+    })
+    it('respects column end spans', async () => {
+      const editor = await renderTestEditorWithCode(
+        makeProjectCodeWithCustomPlacement({ gridColumn: '2 / span 2', gridRow: '2' }),
+        'await-first-dom-report',
+      )
+
+      // enlarge to the right
+      {
+        await runCellResizeTest(
+          editor,
+          'column-end',
+          gridCellTargetId(EP.fromString('sb/grid'), 2, 4),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: 'span 3',
+          gridColumnStart: '2',
+          gridRowEnd: 'auto',
+          gridRowStart: '2',
+        })
+      }
+    })
+    it('respects row start spans', async () => {
+      const editor = await renderTestEditorWithCode(
+        makeProjectCodeWithCustomPlacement({ gridColumn: '2', gridRow: 'span 2' }),
+        'await-first-dom-report',
+      )
+
+      // enlarge to the bottom
+      {
+        await runCellResizeTest(
+          editor,
+          'row-end',
+          gridCellTargetId(EP.fromString('sb/grid'), 3, 2),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: 'auto',
+          gridColumnStart: '2',
+          gridRowEnd: 'auto',
+          gridRowStart: 'span 3',
+        })
+      }
+
+      // shrink from the top
+      {
+        await runCellResizeTest(
+          editor,
+          'row-start',
+          gridCellTargetId(EP.fromString('sb/grid'), 2, 2),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: 'auto',
+          gridColumnStart: '2',
+          gridRowEnd: '4',
+          gridRowStart: 'span 2',
+        })
+      }
+
+      // enlarge back from the top
+      {
+        await runCellResizeTest(
+          editor,
+          'row-start',
+          gridCellTargetId(EP.fromString('sb/grid'), 1, 2),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: 'auto',
+          gridColumnStart: '2',
+          gridRowEnd: 'auto',
+          gridRowStart: 'span 3',
+        })
+      }
+    })
+    it('respects row end spans', async () => {
+      const editor = await renderTestEditorWithCode(
+        makeProjectCodeWithCustomPlacement({ gridColumn: '2', gridRow: '2 / span 2' }),
+        'await-first-dom-report',
+      )
+
+      // enlarge to the bottom
+      {
+        await runCellResizeTest(
+          editor,
+          'row-end',
+          gridCellTargetId(EP.fromString('sb/grid'), 4, 2),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: 'auto',
+          gridColumnStart: '2',
+          gridRowEnd: 'span 3',
+          gridRowStart: '2',
+        })
+      }
+    })
+  })
 })
 
 const ProjectCode = `import * as React from 'react'
@@ -948,3 +1127,42 @@ export var storyboard = (
 function unsafeCast<T>(a: unknown): T {
   return a as T
 }
+
+function makeProjectCodeWithCustomPlacement(params: {
+  gridColumn: string
+  gridRow: string
+}): string {
+  return `import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <div
+      style={{
+        backgroundColor: '#aaaaaa33',
+        position: 'absolute',
+        width: 600,
+        height: 400,
+        display: 'grid',
+        gap: 10,
+        gridTemplateColumns: '1fr 1fr 1fr 1fr',
+        gridTemplateRows: '1fr 1fr 1fr 1fr',
+      }}
+      data-uid='grid'
+    >
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          alignSelf: 'stretch',
+          justifySelf: 'stretch',
+          gridColumn: '${params.gridColumn}',
+          gridRow: '${params.gridRow}',
+        }}
+        data-uid='cell'
+		data-testid='cell'
+      />
+    </div>
+  </Storyboard>
+)
+`
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 8fe12fcc8849..7e3ec36af17c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -1,11 +1,18 @@
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
+import type {
+  GridElementProperties,
+  GridPositionOrSpan,
+  GridPositionValue,
+} from '../../../../core/shared/element-template'
+import { gridSpanNumeric, isGridSpan } from '../../../../core/shared/element-template'
 import {
   type CanvasRectangle,
   isInfinityRectangle,
   rectangleIntersection,
 } from '../../../../core/shared/math-utils'
 import { gridContainerIdentifier, gridItemIdentifier } from '../../../editor/store/editor-state'
+import { cssKeyword } from '../../../inspector/common/css-utils'
 import { isFillOrStretchModeAppliedOnAnySide } from '../../../inspector/inspector-common'
 import {
   controlsForGridPlaceholders,
@@ -21,7 +28,7 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import { findOriginalGrid, getCommandsForGridItemPlacement } from './grid-helpers'
+import { getCommandsForGridItemPlacement } from './grid-helpers'
 import { resizeBoundingBoxFromSide } from './resize-helpers'
 
 export const gridResizeElementStrategy: CanvasStrategyFactory = (
@@ -104,15 +111,60 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         null,
       )
 
-      const gridProps = getNewGridPropsFromResizeBox(resizeBoundingBox, allCellBounds)
+      const gridPropsNumeric = getNewGridPropsFromResizeBox(resizeBoundingBox, allCellBounds)
 
-      if (gridProps == null) {
+      if (gridPropsNumeric == null) {
         return emptyStrategyApplicationResult
       }
 
       const gridTemplate =
         selectedElementMetadata.specialSizeMeasurements.parentContainerGridProperties
 
+      const elementGridPropertiesFromProps =
+        selectedElementMetadata.specialSizeMeasurements.elementGridPropertiesFromProps
+
+      const columnCount =
+        gridPropsNumeric.gridColumnEnd.numericalPosition -
+        gridPropsNumeric.gridColumnStart.numericalPosition
+      const rowCount =
+        gridPropsNumeric.gridRowEnd.numericalPosition -
+        gridPropsNumeric.gridRowStart.numericalPosition
+
+      const gridProps: GridElementProperties = {
+        gridColumnStart: normalizePositionAfterResize(
+          elementGridPropertiesFromProps.gridColumnStart,
+          gridPropsNumeric.gridColumnStart,
+          columnCount,
+          'start',
+          elementGridPropertiesFromProps.gridColumnEnd,
+          gridPropsNumeric.gridColumnEnd,
+        ),
+        gridColumnEnd: normalizePositionAfterResize(
+          elementGridPropertiesFromProps.gridColumnEnd,
+          gridPropsNumeric.gridColumnEnd,
+          columnCount,
+          'end',
+          elementGridPropertiesFromProps.gridColumnStart,
+          gridPropsNumeric.gridColumnStart,
+        ),
+        gridRowStart: normalizePositionAfterResize(
+          elementGridPropertiesFromProps.gridRowStart,
+          gridPropsNumeric.gridRowStart,
+          rowCount,
+          'start',
+          elementGridPropertiesFromProps.gridRowEnd,
+          gridPropsNumeric.gridRowEnd,
+        ),
+        gridRowEnd: normalizePositionAfterResize(
+          elementGridPropertiesFromProps.gridRowEnd,
+          gridPropsNumeric.gridRowEnd,
+          rowCount,
+          'end',
+          elementGridPropertiesFromProps.gridRowStart,
+          gridPropsNumeric.gridRowStart,
+        ),
+      }
+
       return strategyApplicationResult(
         getCommandsForGridItemPlacement(selectedElement, gridTemplate, gridProps),
         [EP.parentPath(selectedElement)],
@@ -158,3 +210,30 @@ function getNewGridPropsFromResizeBox(
     gridColumnEnd: { numericalPosition: newColumnEnd },
   }
 }
+
+// After a resize happens and we know the numerical grid positioning of the new bounds,
+// return a normalized version of the new position so that it respects any spans that
+// may have been there before the resize, and/or default it to 'auto' when it would become redundant.
+function normalizePositionAfterResize(
+  position: GridPositionOrSpan | null,
+  resizedPosition: GridPositionValue,
+  size: number, // the number of cols/rows the cell occupies
+  bound: 'start' | 'end',
+  counterpart: GridPositionOrSpan | null,
+  counterpartResizedPosition: GridPositionValue,
+): GridPositionOrSpan | null {
+  if (isGridSpan(position)) {
+    if (size === 1) {
+      return cssKeyword('auto')
+    }
+    return gridSpanNumeric(size)
+  }
+  if (
+    isGridSpan(counterpart) &&
+    counterpartResizedPosition.numericalPosition === 1 &&
+    bound === 'end'
+  ) {
+    return cssKeyword('auto')
+  }
+  return resizedPosition
+}

From 7507d03000e0d84e93d0b19c9f252b62b752f743 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Thu, 28 Nov 2024 10:22:57 +0000
Subject: [PATCH 250/272] feature(grid) Size Label Tweaks (#6672)

- Added `controlForStrategy` so memoized controls can be used.
- Added `StrategySizeLabel` to every strategy that included
`AbsoluteResizeControl`.
- Include `SizeLabel` in `NewCanvasControlsInner` if `StrategySizeLabel`
  hasn't been included in the strategy controls.
- Extracted out `SizeLabel` into its own file.
- `sizeLabel` function now supports `CSSNumber` for the `state`
parameter.
- `sizeLabelContents` now tries to present the unit values for the
dimensions.
---
 .../canvas-strategy-types.ts                  |   6 +-
 ...ze-bounding-box-strategy.spec.browser2.tsx |   4 +-
 .../absolute-resize-bounding-box-strategy.tsx |   8 +
 .../strategies/basic-resize-strategy.tsx      |   8 +
 .../strategies/flex-resize-basic-strategy.tsx |   8 +
 .../strategies/flex-resize-strategy.tsx       |   8 +
 .../keyboard-absolute-resize-strategy.tsx     |   8 +
 .../canvas/controls/new-canvas-controls.tsx   |  15 +
 .../select-mode/absolute-resize-control.tsx   | 275 +-------------
 .../controls/select-mode/size-label.tsx       | 358 ++++++++++++++++++
 .../components/inspector/inspector-common.ts  |   7 +-
 ...performance-regression-tests.spec.tsx.snap |  52 ++-
 .../performance-regression-tests.spec.tsx     |   8 +-
 13 files changed, 476 insertions(+), 289 deletions(-)
 create mode 100644 editor/src/components/canvas/controls/select-mode/size-label.tsx

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
index 6bf08da6cde1..80d553a97a9a 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
@@ -85,8 +85,12 @@ export interface ControlForStrategy<P> {
   control: React.FC<P>
 }
 
+export function controlForStrategy<P>(control: React.FC<P>): ControlForStrategy<P> {
+  return { type: 'ControlForStrategy', control: control }
+}
+
 export function controlForStrategyMemoized<P>(control: React.FC<P>): ControlForStrategy<P> {
-  return { type: 'ControlForStrategy', control: React.memo<any>(control) }
+  return controlForStrategy(React.memo<any>(control))
 }
 
 export type WhenToShowControl =
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx
index 35fd2e9618e5..05d40787f5f3 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx
@@ -55,7 +55,6 @@ import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
 import type { CSSProperties } from 'react'
 import { MaxContent } from '../../../inspector/inspector-common'
 import {
-  SizeLabelTestId,
   ResizePointTestId,
   AbsoluteResizeControlTestId,
 } from '../../controls/select-mode/absolute-resize-control'
@@ -78,6 +77,7 @@ import {
 } from '../../controls/bounding-box-hooks'
 import { act } from 'react-dom/test-utils'
 import { ComponentsHonouringPropsStylesProject } from './common-projects.test-utils'
+import { SizeLabelTestId } from '../../controls/select-mode/size-label'
 
 // no mouseup here! it starts the interaction and resizes with drag delta
 async function startDragUsingActions(
@@ -678,7 +678,7 @@ describe('Absolute Resize Strategy', () => {
       EP.appendNewElementPath(TestScenePath, ['root', 'sizeless']),
     ])
     const sizeLabel = await editor.renderedDOM.findByTestId(SizeLabelTestId)
-    expect(sizeLabel.textContent).toEqual('(Children) 188 x 161')
+    expect(sizeLabel.textContent).toEqual('(Children) 188 × 161')
   })
   it('resizes component instances that honour the size properties', async () => {
     const renderResult = await renderTestEditorWithCode(
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
index 208447472800..1aabffbe33ee 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx
@@ -36,6 +36,7 @@ import { gatherParentAndSiblingTargets } from '../../controls/guideline-helpers'
 import { ImmediateParentBounds } from '../../controls/parent-bounds'
 import { ImmediateParentOutlines } from '../../controls/parent-outlines'
 import { AbsoluteResizeControl } from '../../controls/select-mode/absolute-resize-control'
+import { StrategySizeLabel } from '../../controls/select-mode/size-label'
 import { ZeroSizeResizeControlWrapper } from '../../controls/zero-sized-element-controls'
 import {
   getDescriptiveStrategyLabelWithRetargetedPaths,
@@ -122,6 +123,13 @@ export function absoluteResizeBoundingBoxStrategy(
         show: 'visible-except-when-other-strategy-is-active',
         priority: 'top',
       }),
+      controlWithProps({
+        control: StrategySizeLabel,
+        props: { targets: originalTargets, pathsWereReplaced: pathsWereReplaced },
+        key: 'size-label',
+        show: 'visible-except-when-other-strategy-is-active',
+        priority: 'top',
+      }),
       controlWithProps({
         control: ZeroSizeResizeControlWrapper,
         props: { targets: originalTargets },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
index ffc0f97ef0ed..52f6d582c583 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -40,6 +40,7 @@ import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-st
 import { ImmediateParentBounds } from '../../controls/parent-bounds'
 import { ImmediateParentOutlines } from '../../controls/parent-outlines'
 import { AbsoluteResizeControl } from '../../controls/select-mode/absolute-resize-control'
+import { StrategySizeLabel } from '../../controls/select-mode/size-label'
 import { ZeroSizeResizeControlWrapper } from '../../controls/zero-sized-element-controls'
 import type {
   CanvasStrategy,
@@ -104,6 +105,13 @@ export function basicResizeStrategy(
         show: 'always-visible',
         priority: 'top',
       }),
+      controlWithProps({
+        control: StrategySizeLabel,
+        props: { targets: selectedElements, pathsWereReplaced: false },
+        key: 'size-label',
+        show: 'visible-except-when-other-strategy-is-active',
+        priority: 'top',
+      }),
       controlWithProps({
         control: ZeroSizeResizeControlWrapper,
         props: { targets: selectedElements },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx
index b0bde9a31625..047481d64619 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx
@@ -38,6 +38,7 @@ import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-
 import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { treatElementAsGroupLike } from './group-helpers'
 import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
+import { StrategySizeLabel } from '../../controls/select-mode/size-label'
 
 export function flexResizeBasicStrategy(
   canvasState: InteractionCanvasState,
@@ -109,6 +110,13 @@ export function flexResizeBasicStrategy(
         show: 'always-visible',
         priority: 'top',
       }),
+      controlWithProps({
+        control: StrategySizeLabel,
+        props: { targets: selectedElements, pathsWereReplaced: false },
+        key: 'size-label',
+        show: 'visible-except-when-other-strategy-is-active',
+        priority: 'top',
+      }),
       controlWithProps({
         control: ZeroSizeResizeControlWrapper,
         props: { targets: selectedElements },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx
index d55cbe7ed7e0..2238128d65d1 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx
@@ -67,6 +67,7 @@ import { treatElementAsGroupLike } from './group-helpers'
 import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
 import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
+import { StrategySizeLabel } from '../../controls/select-mode/size-label'
 
 export const FLEX_RESIZE_STRATEGY_ID = 'FLEX_RESIZE'
 
@@ -129,6 +130,13 @@ export function flexResizeStrategy(
         show: 'always-visible',
         priority: 'top',
       }),
+      controlWithProps({
+        control: StrategySizeLabel,
+        props: { targets: selectedElements, pathsWereReplaced: false },
+        key: 'size-label',
+        show: 'visible-except-when-other-strategy-is-active',
+        priority: 'top',
+      }),
       controlWithProps({
         control: ZeroSizeResizeControlWrapper,
         props: { targets: selectedElements },
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx
index 9d45920a3627..08b263222543 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx
@@ -44,6 +44,7 @@ import type { ElementInstanceMetadataMap } from '../../../../core/shared/element
 import type { AllElementProps } from '../../../editor/store/editor-state'
 import { getDescriptiveStrategyLabelWithRetargetedPaths } from '../canvas-strategies'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import { StrategySizeLabel } from '../../controls/select-mode/size-label'
 
 interface VectorAndEdge {
   movement: CanvasVector
@@ -168,6 +169,13 @@ export function keyboardAbsoluteResizeStrategy(
         show: 'visible-except-when-other-strategy-is-active',
         priority: 'top',
       }),
+      controlWithProps({
+        control: StrategySizeLabel,
+        props: { targets: selectedElements, pathsWereReplaced: pathsWereReplaced },
+        key: 'size-label',
+        show: 'visible-except-when-other-strategy-is-active',
+        priority: 'top',
+      }),
     ],
     fitness: getFitness(interactionSession),
     apply: () => {
diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx
index 9f4a94620c27..35c4d54ee87b 100644
--- a/editor/src/components/canvas/controls/new-canvas-controls.tsx
+++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx
@@ -80,6 +80,7 @@ import {
   GridHelperControls,
   GridMeasurementHelpers,
 } from './grid-controls'
+import { SizeLabel, StrategySizeLabel } from './select-mode/size-label'
 
 export const CanvasControlsContainerID = 'new-canvas-controls-container'
 
@@ -291,6 +292,16 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
   const colorTheme = useColorTheme()
   const { bottomStrategyControls, middleStrategyControls, topStrategyControls } =
     useGetApplicableStrategyControls(localSelectedViews)
+  const sizeLabelInStrategyControls =
+    topStrategyControls.some((control) => {
+      return control.control === StrategySizeLabel
+    }) ||
+    middleStrategyControls.some((control) => {
+      return control.control === StrategySizeLabel
+    }) ||
+    bottomStrategyControls.some((control) => {
+      return control.control === StrategySizeLabel
+    })
   const [inspectorHoveredControls] = useAtom(InspectorHoveredCanvasControls)
   const [inspectorFocusedControls] = useAtom(InspectorFocusedCanvasControls)
 
@@ -640,6 +651,10 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
                   </>,
                 )}
                 {when(isSelectMode(editorMode), <DistanceGuidelineControl />)}
+                {unless(
+                  sizeLabelInStrategyControls,
+                  <SizeLabel targets={localSelectedViews} pathsWereReplaced={false} />,
+                )}
                 <GuidelineControls />
               </>,
             )}
diff --git a/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx b/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
index cb062b956b9b..b3805a7d0f2a 100644
--- a/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/absolute-resize-control.tsx
@@ -1,28 +1,18 @@
 import React from 'react'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
-import type { ElementInstanceMetadataMap } from '../../../../core/shared/element-template'
-import type { CanvasRectangle, CanvasVector } from '../../../../core/shared/math-utils'
-import {
-  boundingRectangleArray,
-  canvasRectangle,
-  isInfinityRectangle,
-  nullIfInfinity,
-  windowPoint,
-} from '../../../../core/shared/math-utils'
+import type { CanvasVector } from '../../../../core/shared/math-utils'
+import { windowPoint } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
-import { assertNever, NO_OP } from '../../../../core/shared/utils'
+import { NO_OP } from '../../../../core/shared/utils'
 import { Modifier } from '../../../../utils/modifiers'
 import { when } from '../../../../utils/react-conditionals'
 import { useColorTheme } from '../../../../uuiui'
 import type { EditorDispatch } from '../../../editor/action-types'
 import { applyCommandsAction } from '../../../editor/actions/action-creators'
 import { useDispatch } from '../../../editor/store/dispatch-context'
-import { getMetadata } from '../../../editor/store/editor-state'
 import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook'
-import type { FixedHugFill } from '../../../inspector/inspector-common'
 import {
-  detectFillHugFixedState,
   invert,
   isFillOrStretchModeAppliedOnAnySide,
   isFillOrStretchModeAppliedOnSpecificSide,
@@ -35,13 +25,12 @@ import { controlForStrategyMemoized } from '../../canvas-strategies/canvas-strat
 import { createInteractionViaMouse } from '../../canvas-strategies/interaction-state'
 import type { EdgePosition } from '../../canvas-types'
 import { CSSCursor } from '../../canvas-types'
-import { getAllTargetsUnderAreaAABB, windowToCanvasCoordinates } from '../../dom-lookup'
+import { windowToCanvasCoordinates } from '../../dom-lookup'
 import { useBoundingBox } from '../bounding-box-hooks'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
 import { isZeroSizedElement } from '../outline-utils'
 import { useMaybeHighlightElement } from './select-mode-hooks'
 import { isEdgePositionEqualTo } from '../../canvas-utils'
-import { treatElementAsGroupLike } from '../../canvas-strategies/strategies/group-helpers'
 import { useResizeEdges } from './use-resize-edges'
 
 export const AbsoluteResizeControlTestId = (targets: Array<ElementPath>): string =>
@@ -52,9 +41,6 @@ interface AbsoluteResizeControlProps {
   pathsWereReplaced: boolean
 }
 
-export const SizeLabelID = 'SizeLabel'
-export const SizeLabelTestId = 'SizeLabelTestId'
-
 export const AbsoluteResizeControl = controlForStrategyMemoized(
   ({ targets, pathsWereReplaced }: AbsoluteResizeControlProps) => {
     const dispatch = useDispatch()
@@ -90,12 +76,6 @@ export const AbsoluteResizeControl = controlForStrategyMemoized(
       ref.current.style.top = boundingBox.height + 'px'
     })
 
-    const resizeRef = useBoundingBox(targets, (ref, boundingBox) => {
-      ref.current.style.top = boundingBox.height + 'px'
-      ref.current.style.left = 0 + 'px'
-      ref.current.style.width = boundingBox.width + 'px'
-    })
-
     const scale = useEditorState(
       Substores.canvasOffset,
       (store) => store.editor.canvas.scale,
@@ -218,7 +198,6 @@ export const AbsoluteResizeControl = controlForStrategyMemoized(
               />
             </React.Fragment>,
           )}
-          <SizeLabel ref={resizeRef} targets={targets} pathsWereReplaced={pathsWereReplaced} />
         </div>
       </CanvasOffsetWrapper>
     )
@@ -343,252 +322,6 @@ const ResizePoint = React.memo(
 )
 ResizePoint.displayName = 'ResizePoint'
 
-const sizeLabel = (state: FixedHugFill['type'], actualSize: number): string => {
-  switch (state) {
-    case 'fill':
-      return 'Fill'
-    case 'hug':
-    case 'hug-group':
-      return 'Hug'
-    case 'squeeze':
-      return 'Squeeze'
-    case 'collapsed':
-      return 'Collapsed'
-    case 'fixed':
-    case 'scaled':
-    case 'detected':
-    case 'computed':
-      return `${actualSize}`
-    case 'stretch':
-      return 'Stretch'
-    default:
-      assertNever(state)
-  }
-}
-
-export type SizeLabelSize = {
-  type: 'SIZE_LABEL_WITH_DIMENSIONS'
-  h: string
-  v: string
-}
-
-function sizeLabelWithDimensions(h: string, v: string): SizeLabelSize {
-  return {
-    type: 'SIZE_LABEL_WITH_DIMENSIONS',
-    h: h,
-    v: v,
-  }
-}
-
-export type SizeLabelGroup = {
-  type: 'SIZE_LABEL_GROUP'
-}
-
-function sizeLabelGroup(): SizeLabelGroup {
-  return {
-    type: 'SIZE_LABEL_GROUP',
-  }
-}
-
-export type SizeLabelChildren = {
-  type: 'SIZE_LABEL_CHILDREN'
-  h: string
-  v: string
-}
-
-function sizeLabelChildren(h: string, v: string): SizeLabelChildren {
-  return {
-    type: 'SIZE_LABEL_CHILDREN',
-    h: h,
-    v: v,
-  }
-}
-
-export type SizeLabelContents = SizeLabelSize | SizeLabelGroup | SizeLabelChildren
-
-function sizeLabelContents(
-  metadata: ElementInstanceMetadataMap,
-  selectedElements: Array<ElementPath>,
-  boundingBox: CanvasRectangle | null,
-  pathsWereReplaced: boolean,
-): SizeLabelContents | null {
-  if (selectedElements.length === 0) {
-    return null
-  }
-
-  if (selectedElements.length === 1) {
-    if (treatElementAsGroupLike(metadata, selectedElements[0])) {
-      return sizeLabelGroup()
-    }
-
-    const globalFrame = MetadataUtils.findElementByElementPath(
-      metadata,
-      selectedElements[0],
-    )?.globalFrame
-    if (globalFrame == null || isInfinityRectangle(globalFrame)) {
-      return null
-    }
-
-    const horizontal =
-      detectFillHugFixedState('horizontal', metadata, selectedElements[0]).fixedHugFill?.type ??
-      'fixed'
-    const vertical =
-      detectFillHugFixedState('vertical', metadata, selectedElements[0]).fixedHugFill?.type ??
-      'fixed'
-
-    if (pathsWereReplaced) {
-      return sizeLabelChildren(
-        sizeLabel(horizontal, globalFrame.width),
-        sizeLabel(vertical, globalFrame.height),
-      )
-    }
-
-    return sizeLabelWithDimensions(
-      sizeLabel(horizontal, globalFrame.width),
-      sizeLabel(vertical, globalFrame.height),
-    )
-  }
-
-  if (boundingBox != null) {
-    return sizeLabelWithDimensions(`${boundingBox.width}`, `${boundingBox.height}`)
-  }
-
-  return null
-}
-
-interface SizeLabelProps {
-  targets: Array<ElementPath>
-  pathsWereReplaced: boolean
-}
-
-const FontSize = 11
-const PaddingV = 0
-const PaddingH = 2
-const ExplicitHeightHacked = 20
-const BorderRadius = 2
-const SizeLabelMarginTop = 8
-
-function getLabelText(label: SizeLabelContents | null): string | null {
-  if (label == null) {
-    return null
-  }
-  switch (label.type) {
-    case 'SIZE_LABEL_GROUP':
-      return 'Group'
-    case 'SIZE_LABEL_WITH_DIMENSIONS':
-      return `${label.h} x ${label.v}`
-    case 'SIZE_LABEL_CHILDREN':
-      return `(Children) ${label.h} x ${label.v}`
-    default:
-      assertNever(label)
-  }
-}
-
-const SizeLabel = React.memo(
-  React.forwardRef<HTMLDivElement, SizeLabelProps>(({ targets, pathsWereReplaced }, ref) => {
-    const scale = useEditorState(
-      Substores.canvas,
-      (store) => store.editor.canvas.scale,
-      'Resizelabel scale',
-    )
-    const colorTheme = useColorTheme()
-    const metadata = useEditorState(
-      Substores.metadata,
-      (store) => getMetadata(store.editor),
-      'ResizeLabel metadata',
-    )
-
-    const boundingBox = boundingRectangleArray(
-      targets.map((t) => nullIfInfinity(MetadataUtils.getFrameInCanvasCoords(t, metadata))),
-    )
-
-    const label = sizeLabelContents(metadata, targets, boundingBox, pathsWereReplaced)
-    const labelText = getLabelText(label)
-
-    const [dimmed, setDimmed] = React.useState(false)
-
-    const editorRef = useRefEditorState((store) => ({
-      scale: store.editor.canvas.scale,
-      offset: store.editor.canvas.roundedCanvasOffset,
-      jsxMetadata: store.editor.jsxMetadata,
-      elementPathTree: store.editor.elementPathTree,
-      allElementProps: store.editor.allElementProps,
-      hiddenInstances: store.editor.hiddenInstances,
-    }))
-
-    const onMouseEnter = React.useCallback(() => {
-      const distanceBetweenBoxAndLabel = 10 // px
-      const labelRect = document.getElementById(SizeLabelID)?.getBoundingClientRect()
-      if (boundingBox != null && labelRect != null) {
-        const area = canvasRectangle({
-          x: boundingBox.x + (boundingBox.width - labelRect.width) / 2,
-          y:
-            boundingBox.y +
-            boundingBox.height +
-            distanceBetweenBoxAndLabel / editorRef.current.scale,
-          width: labelRect.width,
-          height: labelRect.height,
-        })
-        const elementsUnderLabel = getAllTargetsUnderAreaAABB(
-          editorRef.current.jsxMetadata,
-          [],
-          editorRef.current.hiddenInstances,
-          'no-filter',
-          area,
-          editorRef.current.elementPathTree,
-          editorRef.current.allElementProps,
-          true,
-        )
-        setDimmed(elementsUnderLabel.length > 0)
-      }
-    }, [editorRef, boundingBox])
-
-    const onMouseLeave = React.useCallback(() => {
-      setDimmed(false)
-    }, [])
-
-    return (
-      <div
-        ref={ref}
-        style={{
-          position: 'absolute',
-          display: 'flex',
-          justifyContent: 'center',
-          pointerEvents: 'none',
-        }}
-        data-testid='parent-resize-label'
-      >
-        {when(
-          labelText != null,
-          <div
-            id={SizeLabelID}
-            data-testid={SizeLabelTestId}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              marginTop: SizeLabelMarginTop / scale,
-              padding: `${PaddingV}px ${PaddingH / scale}px`,
-              borderRadius: BorderRadius / scale,
-              color: colorTheme.white.value,
-              backgroundColor: colorTheme.primary.value,
-              fontSize: FontSize / scale,
-              height: ExplicitHeightHacked / scale,
-              opacity: dimmed ? 0.075 : 1,
-              transition: '0.1s',
-              pointerEvents: 'initial',
-            }}
-            onMouseEnter={onMouseEnter}
-            onMouseLeave={onMouseLeave}
-          >
-            {labelText}
-          </div>,
-        )}
-      </div>
-    )
-  }),
-)
-SizeLabel.displayName = 'SizeLabel'
-
 function startResizeInteraction(
   event: React.MouseEvent<HTMLDivElement>,
   dispatch: EditorDispatch,
diff --git a/editor/src/components/canvas/controls/select-mode/size-label.tsx b/editor/src/components/canvas/controls/select-mode/size-label.tsx
new file mode 100644
index 000000000000..2a773d059fa6
--- /dev/null
+++ b/editor/src/components/canvas/controls/select-mode/size-label.tsx
@@ -0,0 +1,358 @@
+import React from 'react'
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import type { ElementInstanceMetadata } from '../../../../core/shared/element-template'
+import {
+  isJSXElement,
+  type ElementInstanceMetadataMap,
+} from '../../../../core/shared/element-template'
+import type { CanvasRectangle } from '../../../../core/shared/math-utils'
+import {
+  boundingRectangleArray,
+  canvasRectangle,
+  isInfinityRectangle,
+  nullIfInfinity,
+} from '../../../../core/shared/math-utils'
+import type { ElementPath } from '../../../../core/shared/project-file-types'
+import { assertNever } from '../../../../core/shared/utils'
+import { when } from '../../../../utils/react-conditionals'
+import { useColorTheme } from '../../../../uuiui'
+import { getMetadata } from '../../../editor/store/editor-state'
+import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook'
+import type { DetectedFillHugFixedState, FixedHugFill } from '../../../inspector/inspector-common'
+import { detectFillHugFixedState } from '../../../inspector/inspector-common'
+import { getAllTargetsUnderAreaAABB } from '../../dom-lookup'
+import { treatElementAsGroupLike } from '../../canvas-strategies/strategies/group-helpers'
+import { defaultEither } from '../../../../core/shared/either'
+import type { CSSNumber } from '../../../inspector/common/css-utils'
+import { isCSSNumber, printCSSNumber } from '../../../inspector/common/css-utils'
+import { toFirst } from '../../../../core/shared/optics/optic-utilities'
+import {
+  eitherRight,
+  fromField,
+  fromTypeGuard,
+  notNull,
+} from '../../../../core/shared/optics/optic-creators'
+import { useBoundingBox } from '../bounding-box-hooks'
+import { controlForStrategy } from '../../canvas-strategies/canvas-strategy-types'
+import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
+import { isZeroSizedElement } from '../outline-utils'
+
+export const SizeLabelID = 'size-label'
+export const SizeLabelTestId = 'size-label'
+
+const sizeLabel = (state: FixedHugFill['type'] | CSSNumber, actualSize: number): string => {
+  if (isCSSNumber(state)) {
+    const printed = printCSSNumber(state, 'px')
+    return typeof printed === 'number' ? `${printed}` : printed
+  } else {
+    switch (state) {
+      case 'fill':
+        return 'Fill'
+      case 'hug':
+      case 'hug-group':
+        return 'Hug'
+      case 'squeeze':
+        return 'Squeeze'
+      case 'collapsed':
+        return 'Collapsed'
+      case 'fixed':
+      case 'scaled':
+      case 'detected':
+      case 'computed':
+        return `${actualSize}`
+      case 'stretch':
+        return 'Stretch'
+      default:
+        assertNever(state)
+    }
+  }
+}
+
+export type SizeLabelSize = {
+  type: 'SIZE_LABEL_WITH_DIMENSIONS'
+  h: string
+  v: string
+}
+
+function sizeLabelWithDimensions(h: string, v: string): SizeLabelSize {
+  return {
+    type: 'SIZE_LABEL_WITH_DIMENSIONS',
+    h: h,
+    v: v,
+  }
+}
+
+export type SizeLabelGroup = {
+  type: 'SIZE_LABEL_GROUP'
+}
+
+function sizeLabelGroup(): SizeLabelGroup {
+  return {
+    type: 'SIZE_LABEL_GROUP',
+  }
+}
+
+export type SizeLabelChildren = {
+  type: 'SIZE_LABEL_CHILDREN'
+  h: string
+  v: string
+}
+
+function sizeLabelChildren(h: string, v: string): SizeLabelChildren {
+  return {
+    type: 'SIZE_LABEL_CHILDREN',
+    h: h,
+    v: v,
+  }
+}
+
+export type SizeLabelContents = SizeLabelSize | SizeLabelGroup | SizeLabelChildren
+
+function detectedStateToOutputValue(
+  detectedState: DetectedFillHugFixedState | null,
+): FixedHugFill['type'] | CSSNumber | null {
+  if (detectedState == null || detectedState.fixedHugFill == null) {
+    return null
+  }
+  switch (detectedState.fixedHugFill.type) {
+    case 'hug':
+    case 'squeeze':
+    case 'collapsed':
+    case 'stretch':
+      return detectedState.fixedHugFill.type
+    case 'hug-group':
+      return 'hug'
+    case 'fixed':
+    case 'fill':
+    case 'computed':
+    case 'detected':
+    case 'scaled':
+      return detectedState.fixedHugFill.value
+    default:
+      assertNever(detectedState.fixedHugFill)
+  }
+}
+
+function sizeLabelContents(
+  metadata: ElementInstanceMetadataMap,
+  selectedElements: Array<ElementPath>,
+  boundingBox: CanvasRectangle | null,
+  pathsWereReplaced: boolean,
+): SizeLabelContents | null {
+  const selectedElement = selectedElements.at(0)
+  if (selectedElement == null || selectedElements.length === 0) {
+    return null
+  }
+
+  if (selectedElements.length === 1) {
+    if (treatElementAsGroupLike(metadata, selectedElement)) {
+      return sizeLabelGroup()
+    }
+
+    const elementMetadata = MetadataUtils.findElementByElementPath(metadata, selectedElement)
+    if (elementMetadata == null) {
+      return null
+    }
+    const element = defaultEither(
+      null,
+      toFirst(
+        notNull<ElementInstanceMetadata>()
+          .compose(fromField('element'))
+          .compose(eitherRight())
+          .compose(fromTypeGuard(isJSXElement)),
+        elementMetadata,
+      ),
+    )
+    if (element == null) {
+      return null
+    }
+
+    const globalFrame = elementMetadata.globalFrame
+    if (globalFrame == null || isInfinityRectangle(globalFrame)) {
+      return null
+    }
+
+    const horizontalState = detectFillHugFixedState('horizontal', metadata, selectedElement)
+    const verticalState = detectFillHugFixedState('vertical', metadata, selectedElement)
+
+    const horizontal = detectedStateToOutputValue(horizontalState) ?? 'fixed'
+    const vertical = detectedStateToOutputValue(verticalState) ?? 'fixed'
+
+    if (pathsWereReplaced) {
+      return sizeLabelChildren(
+        sizeLabel(horizontal, globalFrame.width),
+        sizeLabel(vertical, globalFrame.height),
+      )
+    }
+
+    return sizeLabelWithDimensions(
+      sizeLabel(horizontal, globalFrame.width),
+      sizeLabel(vertical, globalFrame.height),
+    )
+  }
+
+  if (boundingBox != null) {
+    return sizeLabelWithDimensions(`${boundingBox.width}`, `${boundingBox.height}`)
+  }
+
+  return null
+}
+
+interface SizeLabelProps {
+  targets: Array<ElementPath>
+  pathsWereReplaced: boolean
+}
+
+const FontSize = 11
+const PaddingV = 0
+const PaddingH = 2
+const ExplicitHeightHacked = 20
+const BorderRadius = 2
+const SizeLabelMarginTop = 8
+
+function getLabelText(label: SizeLabelContents | null): string | null {
+  if (label == null) {
+    return null
+  }
+  switch (label.type) {
+    case 'SIZE_LABEL_GROUP':
+      return 'Group'
+    case 'SIZE_LABEL_WITH_DIMENSIONS':
+      return `${label.h} × ${label.v}`
+    case 'SIZE_LABEL_CHILDREN':
+      return `(Children) ${label.h} × ${label.v}`
+    default:
+      assertNever(label)
+  }
+}
+
+export const SizeLabel = React.memo<SizeLabelProps>(({ targets, pathsWereReplaced }) => {
+  const resizeRef = useBoundingBox(targets, (ref, boundingBox) => {
+    ref.current.style.top = boundingBox.height + 'px'
+    ref.current.style.left = 0 + 'px'
+    ref.current.style.width = boundingBox.width + 'px'
+  })
+
+  const controlRef = useBoundingBox(targets, (ref, safeGappedBoundingBox, realBoundingBox) => {
+    if (isZeroSizedElement(realBoundingBox)) {
+      ref.current.style.display = 'none'
+    } else {
+      ref.current.style.display = 'block'
+      ref.current.style.left = safeGappedBoundingBox.x + 'px'
+      ref.current.style.top = safeGappedBoundingBox.y + 'px'
+      ref.current.style.width = safeGappedBoundingBox.width + 'px'
+      ref.current.style.height = safeGappedBoundingBox.height + 'px'
+    }
+  })
+
+  const scale = useEditorState(
+    Substores.canvas,
+    (store) => store.editor.canvas.scale,
+    'Resizelabel scale',
+  )
+  const colorTheme = useColorTheme()
+  const metadata = useEditorState(
+    Substores.metadata,
+    (store) => getMetadata(store.editor),
+    'ResizeLabel metadata',
+  )
+
+  const boundingBox = boundingRectangleArray(
+    targets.map((t) => nullIfInfinity(MetadataUtils.getFrameInCanvasCoords(t, metadata))),
+  )
+
+  const label = sizeLabelContents(metadata, targets, boundingBox, pathsWereReplaced)
+  const labelText = getLabelText(label)
+
+  const [dimmed, setDimmed] = React.useState(false)
+
+  const editorRef = useRefEditorState((store) => ({
+    scale: store.editor.canvas.scale,
+    offset: store.editor.canvas.roundedCanvasOffset,
+    jsxMetadata: store.editor.jsxMetadata,
+    elementPathTree: store.editor.elementPathTree,
+    allElementProps: store.editor.allElementProps,
+    hiddenInstances: store.editor.hiddenInstances,
+  }))
+
+  const onMouseEnter = React.useCallback(() => {
+    const distanceBetweenBoxAndLabel = 10 // px
+    const labelRect = document.getElementById(SizeLabelID)?.getBoundingClientRect()
+    if (boundingBox != null && labelRect != null) {
+      const area = canvasRectangle({
+        x: boundingBox.x + (boundingBox.width - labelRect.width) / 2,
+        y:
+          boundingBox.y + boundingBox.height + distanceBetweenBoxAndLabel / editorRef.current.scale,
+        width: labelRect.width,
+        height: labelRect.height,
+      })
+      const elementsUnderLabel = getAllTargetsUnderAreaAABB(
+        editorRef.current.jsxMetadata,
+        [],
+        editorRef.current.hiddenInstances,
+        'no-filter',
+        area,
+        editorRef.current.elementPathTree,
+        editorRef.current.allElementProps,
+        true,
+      )
+      setDimmed(elementsUnderLabel.length > 0)
+    }
+  }, [editorRef, boundingBox])
+
+  const onMouseLeave = React.useCallback(() => {
+    setDimmed(false)
+  }, [])
+
+  return (
+    <CanvasOffsetWrapper>
+      <div
+        data-testid={`${SizeLabelTestId}-wrapper`}
+        ref={controlRef}
+        style={{
+          position: 'absolute',
+          pointerEvents: 'none',
+        }}
+      >
+        <div
+          ref={resizeRef}
+          style={{
+            position: 'absolute',
+            display: 'flex',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+          }}
+          data-testid='parent-resize-label'
+        >
+          {when(
+            labelText != null,
+            <div
+              id={SizeLabelID}
+              data-testid={SizeLabelTestId}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                marginTop: SizeLabelMarginTop / scale,
+                padding: `${PaddingV}px ${PaddingH / scale}px`,
+                borderRadius: BorderRadius / scale,
+                color: colorTheme.white.value,
+                backgroundColor: colorTheme.primary.value,
+                fontSize: FontSize / scale,
+                height: ExplicitHeightHacked / scale,
+                opacity: dimmed ? 0.075 : 1,
+                transition: '0.1s',
+                pointerEvents: 'initial',
+              }}
+              onMouseEnter={onMouseEnter}
+              onMouseLeave={onMouseLeave}
+            >
+              {labelText}
+            </div>,
+          )}
+        </div>
+      </div>
+    </CanvasOffsetWrapper>
+  )
+})
+
+export const StrategySizeLabel = controlForStrategy<SizeLabelProps>(SizeLabel)
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index d7e8974094af..c232156d0a66 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -725,11 +725,16 @@ export function isHuggingFixedHugFill(fixedHugFillMode: FixedHugFillMode | null
   )
 }
 
+export interface DetectedFillHugFixedState {
+  fixedHugFill: FixedHugFill | null
+  controlStatus: ControlStatus
+}
+
 export function detectFillHugFixedState(
   axis: Axis,
   metadata: ElementInstanceMetadataMap,
   elementPath: ElementPath,
-): { fixedHugFill: FixedHugFill | null; controlStatus: ControlStatus } {
+): DetectedFillHugFixedState {
   const element = MetadataUtils.findElementByElementPath(metadata, elementPath)
   if (element == null || isLeft(element.element) || !isJSXElement(element.element.value)) {
     return { fixedHugFill: null, controlStatus: 'off' }
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 2fc81845e032..5b3c8e7a1da5 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -38,9 +38,11 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
@@ -74,7 +76,6 @@ Array [
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))",
   "/Symbol(react.memo)()///div:data-testid='utopia-storyboard-uid/scene-aaa/app-entity:parent/ccc-absolute-resize-control'",
   "/Symbol(react.memo)()///Symbol(react.memo)()",
   "////div",
@@ -94,8 +95,12 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-1-1'",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
+  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/Symbol(react.memo)()///div:data-testid='size-label'",
+  "/Symbol(react.memo)()///div:data-testid='parent-resize-label'",
+  "/Symbol(react.memo)()///div:data-testid='size-label-wrapper'",
+  "/Symbol(react.memo)()///Symbol(react.memo)()",
+  "////div",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div/ElementsOutsideVisibleAreaIndicator/Symbol(react.memo)(IndicatorArrow)",
   "/div/div/NavigatorComponent/Symbol(react.memo)()",
@@ -828,9 +833,11 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
@@ -864,7 +871,6 @@ Array [
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))",
   "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))",
   "/Symbol(react.memo)()///div:data-testid='utopia-storyboard-uid/scene-aaa/app-entity:parent/ccc-absolute-resize-control'",
   "/Symbol(react.memo)()///Symbol(react.memo)()",
   "////div",
@@ -884,8 +890,12 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div:data-testid='resize-control-1-1'",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
+  "/null/Symbol(react.memo)()//Symbol(react.memo)()",
+  "/Symbol(react.memo)()///div:data-testid='size-label'",
+  "/Symbol(react.memo)()///div:data-testid='parent-resize-label'",
+  "/Symbol(react.memo)()///div:data-testid='size-label-wrapper'",
+  "/Symbol(react.memo)()///Symbol(react.memo)()",
+  "////div",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div/ElementsOutsideVisibleAreaIndicator/Symbol(react.memo)(IndicatorArrow)",
   "/div/div/NavigatorComponent/Symbol(react.memo)()",
@@ -1507,9 +1517,11 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
@@ -1803,9 +1815,11 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
@@ -1815,8 +1829,11 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/UtopiaSpiedExoticType(Symbol(react.provider))",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
+  "/Symbol(react.memo)()///div:data-testid='size-label'",
+  "/Symbol(react.memo)()///div:data-testid='parent-resize-label'",
+  "/Symbol(react.memo)()///div:data-testid='size-label-wrapper'",
+  "/Symbol(react.memo)()///Symbol(react.memo)()",
+  "////div",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/div/div/NavigatorComponent/Symbol(react.memo)()",
   "/div/div/NavigatorComponent/Symbol(react.memo)(NavigatorDragLayer)",
@@ -2409,9 +2426,11 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
@@ -2521,9 +2540,11 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
@@ -2646,9 +2667,11 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
@@ -2930,9 +2953,11 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
@@ -2942,8 +2967,11 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)(GridMeasurementHelpers)",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(GridHelperControls)/UtopiaSpiedExoticType(Symbol(react.provider))",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'",
-  "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'",
+  "/Symbol(react.memo)()///div:data-testid='size-label'",
+  "/Symbol(react.memo)()///div:data-testid='parent-resize-label'",
+  "/Symbol(react.memo)()///div:data-testid='size-label-wrapper'",
+  "/Symbol(react.memo)()///Symbol(react.memo)()",
+  "////div",
   "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/div/div/NavigatorComponent/Symbol(react.memo)()",
   "/div/div/NavigatorComponent/Symbol(react.memo)(NavigatorDragLayer)",
@@ -3412,9 +3440,11 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
@@ -3466,9 +3496,11 @@ Array [
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedFunctionComponent(GridHelperControls)",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
+  "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index 47cef035e96b..400fd7302406 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`882`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`893`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1134`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1145`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`660`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`665`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`785`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`790`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })

From 3efb635bd748d284fe143fcdc02eb37e5abb6c7f Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Thu, 28 Nov 2024 15:20:02 +0200
Subject: [PATCH 251/272] feat(css): change media queries to container queries
 (#6684)

This PR changes the loaded project CSS to convert media queries to
container queries.

Note: almost all of the changes are snapshots, these are the important
ones:
- the adjustment code in
[css-utils.ts](https://github.com/concrete-utopia/utopia/pull/6684/files#diff-20815c549e15a5fdfab5e15884455d2647c2d2ee5bac4002d740960e6070677aR55-R97)
- the tests added to
[css-utils.spec.ts](https://github.com/concrete-utopia/utopia/pull/6684/files#diff-a6f48747618684f57b1fa5c924b893cb2c1cc399d6ffacac772dbd3018369656R203-R270)
- a small adjustment to the color parser in
[css-parser-utils.ts](https://github.com/concrete-utopia/utopia/pull/6684/files#diff-7e1f4da9bbdd89ac2c178aeadca1037b8ffd70d81f2ce906bf1bdac0382eed87R344-R348
)

Details:
- Upgrading to `css-tree@3`, we can now parse container queries.
- This PR adds a check to the AST walk that identifies `@media` queries
that include `width` condition, and converts only the `width` related
conditions to a `@container` query (nested inside the `@media` query, if
necessary). The relevant code is
[here](https://github.com/concrete-utopia/utopia/pull/6684/files#diff-20815c549e15a5fdfab5e15884455d2647c2d2ee5bac4002d740960e6070677aR55-R97).
- We also add the container name `scene` to the `Scene/RemixScene`
elements, to be treated as the container boundary.

Note: as part of the upgrade to `css-tree@3` the color parsing slightly
changed to match `CSS Color Level 5`
[spec](https://drafts.csswg.org/css-color-5/#color-syntax), so the lexed
result is wrapped in `color-base`, there was a small fix for it
[added](https://github.com/concrete-utopia/utopia/pull/6684/files#diff-7e1f4da9bbdd89ac2c178aeadca1037b8ffd70d81f2ce906bf1bdac0382eed87R344-R348)
to the PR.

<video
src="https://github.com/user-attachments/assets/91d9bca1-4a64-4cba-8a02-29d65160d974"></video>

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 editor/package.json                           |  6 +-
 editor/pnpm-lock.yaml                         | 99 +++++++++----------
 .../ui-jsx-canvas-bugs.spec.tsx.snap          |  1 +
 .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 41 ++++++++
 editor/src/components/canvas/canvas-types.ts  |  1 +
 .../canvas/ui-jsx-canvas-bugs.spec.tsx        |  6 ++
 .../remix-scene-component.tsx                 |  3 +-
 .../scene-component.tsx                       |  2 +
 .../components/canvas/ui-jsx-canvas.spec.tsx  |  7 ++
 .../components/text-editor/text-editor.tsx    |  7 +-
 .../package-manager/package-manager.spec.ts   |  2 +-
 editor/src/core/properties/css-properties.ts  |  6 +-
 editor/src/core/shared/css-utils.spec.ts      | 85 ++++++++++++++--
 editor/src/core/shared/css-utils.ts           | 74 +++++++++++---
 .../src/core/tailwind/tailwind-compilation.ts |  4 +-
 editor/src/core/webpack-loaders/css-loader.ts |  4 +-
 .../printer-parsers/css/css-parser-utils.ts   |  7 +-
 editor/src/uuiui/inputs/number-input.tsx      | 50 +++++-----
 .../layout/common-layout-shorthands.tsx       |  4 +-
 19 files changed, 302 insertions(+), 107 deletions(-)

diff --git a/editor/package.json b/editor/package.json
index 572cce73951d..147dd196ddb6 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -184,7 +184,7 @@
     "classnames": "2.2.6",
     "clipboard-polyfill": "2.4.6",
     "create-react-class": "15.6.3",
-    "css-tree": "2.3.1",
+    "css-tree": "3.0.1",
     "eslint-config-utopia": "link:../eslint-config-utopia",
     "eslint-plugin-import": "2.25.3",
     "eslint-plugin-jsx-a11y": "6.5.1",
@@ -309,7 +309,7 @@
     "@types/classnames": "2.2.4",
     "@types/codemirror": "0.0.40",
     "@types/create-react-class": "15.6.2",
-    "@types/css-tree": "2.3.4",
+    "@types/css-tree": "2.3.9",
     "@types/diff": "4.0.2",
     "@types/enzyme": "3.1.9",
     "@types/eslint": "7.2.2",
@@ -371,7 +371,7 @@
     "clean-webpack-plugin": "4.0.0",
     "concurrently": "3.5.1",
     "css-loader": "0.28.4",
-    "csstype": "3.0.3",
+    "csstype": "3.1.3",
     "dependency-cruiser": "13.1.5",
     "diff": "5.0.0",
     "enzyme": "3.3.0",
diff --git a/editor/pnpm-lock.yaml b/editor/pnpm-lock.yaml
index 1ac1e957c3aa..b6009018b6a1 100644
--- a/editor/pnpm-lock.yaml
+++ b/editor/pnpm-lock.yaml
@@ -91,7 +91,7 @@ specifiers:
   '@types/classnames': 2.2.4
   '@types/codemirror': 0.0.40
   '@types/create-react-class': 15.6.2
-  '@types/css-tree': 2.3.4
+  '@types/css-tree': 2.3.9
   '@types/diff': 4.0.2
   '@types/enzyme': 3.1.9
   '@types/eslint': 7.2.2
@@ -172,8 +172,8 @@ specifiers:
   concurrently: 3.5.1
   create-react-class: 15.6.3
   css-loader: 0.28.4
-  css-tree: 2.3.1
-  csstype: 3.0.3
+  css-tree: 3.0.1
+  csstype: 3.1.3
   dependency-cruiser: 13.1.5
   diff: 5.0.0
   enzyme: 3.3.0
@@ -403,7 +403,7 @@ dependencies:
   classnames: 2.2.6
   clipboard-polyfill: 2.4.6
   create-react-class: 15.6.3
-  css-tree: 2.3.1
+  css-tree: 3.0.1
   eslint-config-utopia: link:../eslint-config-utopia
   eslint-plugin-import: 2.25.3_xoh4mdbbxtgv4pgsofz5xwre24
   eslint-plugin-jsx-a11y: 6.5.1_5wlsrnjcorawie777qour2ptie_eslint@7.32.0
@@ -531,7 +531,7 @@ devDependencies:
   '@types/classnames': 2.2.4
   '@types/codemirror': 0.0.40
   '@types/create-react-class': 15.6.2
-  '@types/css-tree': 2.3.4
+  '@types/css-tree': 2.3.9
   '@types/diff': 4.0.2
   '@types/enzyme': 3.1.9
   '@types/eslint': 7.2.2
@@ -593,7 +593,7 @@ devDependencies:
   clean-webpack-plugin: 4.0.0_webpack@5.88.2
   concurrently: 3.5.1
   css-loader: 0.28.4
-  csstype: 3.0.3
+  csstype: 3.1.3
   dependency-cruiser: 13.1.5
   diff: 5.0.0
   enzyme: 3.3.0
@@ -712,7 +712,7 @@ packages:
       '@ant-design/icons-svg': 4.2.1
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -2352,7 +2352,7 @@ packages:
       '@emotion/memoize': 0.7.5
       '@emotion/unitless': 0.7.5
       '@emotion/utils': 1.0.0
-      csstype: 3.0.3
+      csstype: 3.1.3
     dev: false
 
   /@emotion/sheet/0.9.4:
@@ -5049,8 +5049,8 @@ packages:
       '@types/react': 18.0.9
     dev: true
 
-  /@types/css-tree/2.3.4:
-    resolution: {integrity: sha512-wdxxe7zEpOXfy5C3FmwinAIc/6p6du/wOKMGZf07JHuHHRIvLtLq8h66zi3Yn7PCyswxbp3Ujx9h+vSuMvfN/w==}
+  /@types/css-tree/2.3.9:
+    resolution: {integrity: sha512-g1FE6xkPDP4tsccmTd6jIugjKZdxIDqAf9h2pc+4LsGgYbOyfa9phNjBHYbm6FtwIlNfT1NBx3f2zSeqO7aRAw==}
     dev: true
 
   /@types/diff/4.0.2:
@@ -5472,7 +5472,7 @@ packages:
     dependencies:
       '@types/prop-types': 15.5.6
       '@types/scheduler': 0.16.1
-      csstype: 3.1.2
+      csstype: 3.1.3
     dev: false
 
   /@types/react/18.0.9:
@@ -5480,7 +5480,7 @@ packages:
     dependencies:
       '@types/prop-types': 15.5.6
       '@types/scheduler': 0.16.1
-      csstype: 3.0.9
+      csstype: 3.1.3
 
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
@@ -8394,11 +8394,11 @@ packages:
       fastparse: 1.1.2
     dev: true
 
-  /css-tree/2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+  /css-tree/3.0.1:
+    resolution: {integrity: sha512-8Fxxv+tGhORlshCdCwnNJytvlvq46sOLSYEx2ZIGurahWvMucSRnyjPA3AmrMq4VPRYbHVpWj5VkiVasrM2H4Q==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
     dependencies:
-      mdn-data: 2.0.30
+      mdn-data: 2.12.1
       source-map-js: 1.0.2
     dev: false
 
@@ -8486,16 +8486,13 @@ packages:
     resolution: {integrity: sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==}
     dev: false
 
-  /csstype/3.0.3:
-    resolution: {integrity: sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==}
-
   /csstype/3.0.9:
     resolution: {integrity: sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==}
-
-  /csstype/3.1.2:
-    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
     dev: false
 
+  /csstype/3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
   /custom-event/1.0.1:
     resolution: {integrity: sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==}
     dev: true
@@ -8975,7 +8972,7 @@ packages:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
     dependencies:
       '@babel/runtime': 7.20.13
-      csstype: 3.1.2
+      csstype: 3.1.3
     dev: false
 
   /dom-serialize/2.2.1:
@@ -13937,8 +13934,8 @@ packages:
       safe-buffer: 5.2.1
     dev: true
 
-  /mdn-data/2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+  /mdn-data/2.12.1:
+    resolution: {integrity: sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==}
     dev: false
 
   /media-typer/0.3.0:
@@ -15878,7 +15875,7 @@ packages:
     dependencies:
       babel-runtime: 6.26.0
       dom-align: 1.12.4
-      prop-types: 15.6.2
+      prop-types: 15.8.1
       rc-util: 4.21.1
     dev: false
 
@@ -15906,7 +15903,7 @@ packages:
       babel-runtime: 6.26.0
       classnames: 2.2.6
       css-animation: 1.6.1
-      prop-types: 15.6.2
+      prop-types: 15.8.1
       raf: 3.4.1
       rc-util: 4.21.1
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
@@ -15933,7 +15930,7 @@ packages:
     dependencies:
       array-tree-filter: 2.1.0
       rc-trigger: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       warning: 4.0.3
     transitivePeerDependencies:
       - react
@@ -15953,7 +15950,7 @@ packages:
       '@ant-design/css-animation': 1.7.3
       classnames: 2.2.6
       rc-animate: 3.1.1_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       shallowequal: 1.1.0
     transitivePeerDependencies:
       - react
@@ -15965,7 +15962,7 @@ packages:
     dependencies:
       babel-runtime: 6.26.0
       rc-animate: 3.1.1_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
     transitivePeerDependencies:
       - react
       - react-dom
@@ -15978,7 +15975,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
     transitivePeerDependencies:
       - react-dom
@@ -16005,7 +16002,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       async-validator: 3.5.2
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
     transitivePeerDependencies:
       - react-dom
@@ -16015,7 +16012,7 @@ packages:
     resolution: {integrity: sha512-4GgnJCjllAVNsZ9fPA+3LnoIgwUqM8QAWpyoKiTkPDN1UWapXYsPiKJCXOhnmiR0X8xpEoYHiobUaiquMliWiQ==}
     dependencies:
       classnames: 2.2.6
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
     transitivePeerDependencies:
       - react
       - react-dom
@@ -16030,7 +16027,7 @@ packages:
       classnames: 2.2.6
       rc-menu: 8.3.1_ef5jwxihqo6n7gxfmzogljlgcm
       rc-trigger: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
     transitivePeerDependencies:
       - react-dom
@@ -16044,7 +16041,7 @@ packages:
       mini-store: 3.0.6_ef5jwxihqo6n7gxfmzogljlgcm
       rc-animate: 3.1.1_ef5jwxihqo6n7gxfmzogljlgcm
       rc-trigger: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       resize-observer-polyfill: 1.5.1
       shallowequal: 1.1.0
     transitivePeerDependencies:
@@ -16089,7 +16086,7 @@ packages:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
       rc-animate: 3.1.1_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -16118,7 +16115,7 @@ packages:
       classnames: 2.2.6
       moment: 2.29.1
       rc-trigger: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
       shallowequal: 1.1.0
@@ -16136,7 +16133,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
     transitivePeerDependencies:
       - react
       - react-dom
@@ -16150,7 +16147,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
       resize-observer-polyfill: 1.5.1
@@ -16181,7 +16178,7 @@ packages:
       classnames: 2.2.6
       rc-motion: 1.1.2_ef5jwxihqo6n7gxfmzogljlgcm
       rc-trigger: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-virtual-list: 1.1.6_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
@@ -16198,7 +16195,7 @@ packages:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
       rc-tooltip: 4.2.3_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
       shallowequal: 1.1.0
@@ -16213,7 +16210,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -16226,7 +16223,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -16259,7 +16256,7 @@ packages:
       rc-menu: 8.3.1_ef5jwxihqo6n7gxfmzogljlgcm
       rc-resize-observer: 0.2.6_ef5jwxihqo6n7gxfmzogljlgcm
       rc-trigger: 4.3.5_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
     transitivePeerDependencies:
       - react
       - react-dom
@@ -16269,7 +16266,7 @@ packages:
     resolution: {integrity: sha512-dE2ibukxxkrde7wH9W8ozHKUO4aQnPZ6qBHtrTH9LoO836PjDdiaWO73fgPB05VfJs9FbZdmGPVEbXCeOP99Ww==}
     dependencies:
       babel-runtime: 6.26.0
-      prop-types: 15.6.2
+      prop-types: 15.8.1
       rc-trigger: 2.6.5_ef5jwxihqo6n7gxfmzogljlgcm
     transitivePeerDependencies:
       - react
@@ -16296,7 +16293,7 @@ packages:
       classnames: 2.2.6
       rc-select: 11.0.13_ef5jwxihqo6n7gxfmzogljlgcm
       rc-tree: 3.11.0_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
     dev: false
@@ -16327,7 +16324,7 @@ packages:
       '@babel/runtime': 7.20.13
       classnames: 2.2.6
       rc-animate: 3.1.1_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
       rc-virtual-list: 1.1.6_ef5jwxihqo6n7gxfmzogljlgcm
       react: 18.1.0_47cciibm4ysmleigs33s763fqu
       react-dom: 18.1.0_abari7w75zfr6mrhvamxwmfpxm_react@18.1.0
@@ -16338,7 +16335,7 @@ packages:
     dependencies:
       babel-runtime: 6.26.0
       classnames: 2.2.6
-      prop-types: 15.6.2
+      prop-types: 15.8.1
       rc-align: 2.4.5
       rc-animate: 2.11.1_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: 4.21.1
@@ -16357,7 +16354,7 @@ packages:
       raf: 3.4.1
       rc-align: 4.0.15_ef5jwxihqo6n7gxfmzogljlgcm
       rc-animate: 3.1.1_ef5jwxihqo6n7gxfmzogljlgcm
-      rc-util: 5.14.0_ef5jwxihqo6n7gxfmzogljlgcm
+      rc-util: 5.43.0_ef5jwxihqo6n7gxfmzogljlgcm
     transitivePeerDependencies:
       - react
       - react-dom
@@ -16373,7 +16370,7 @@ packages:
     resolution: {integrity: sha512-Z+vlkSQVc1l8O2UjR3WQ+XdWlhj5q9BMQNLk2iOBch75CqPfrJyGtcWMcnhRlNuDu0Ndtt4kLVO8JI8BrABobg==}
     dependencies:
       add-dom-event-listener: 1.1.0
-      prop-types: 15.6.2
+      prop-types: 15.8.1
       react-is: 16.13.1
       react-lifecycles-compat: 3.0.4
       shallowequal: 1.1.0
@@ -16459,7 +16456,7 @@ packages:
       '@types/lodash': 4.14.198
       base16: 1.0.0
       color: 3.2.1
-      csstype: 3.1.2
+      csstype: 3.1.3
       lodash.curry: 4.1.1
     dev: false
 
@@ -20311,7 +20308,7 @@ packages:
     dependencies:
       babel-runtime: 6.26.0
       classnames: 2.2.6
-      prop-types: 15.6.2
+      prop-types: 15.8.1
       rc-tooltip: 3.7.3_ef5jwxihqo6n7gxfmzogljlgcm
       rc-util: 4.21.1
       shallowequal: 1.1.0
diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
index 184e8bc688cb..4eba747dd39f 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
@@ -14,6 +14,7 @@ exports[`UiJsxCanvas #747 - DOM object constructor cannot be called as a functio
       data-path=\\"sb/scene\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
index eff92e4a3c60..f69857b8831f 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
@@ -14,6 +14,7 @@ exports[`UiJsxCanvas render Label carried through for generated elements 1`] = `
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -1934,6 +1935,7 @@ exports[`UiJsxCanvas render Label carried through for normal elements 1`] = `
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -2729,6 +2731,7 @@ exports[`UiJsxCanvas render Renders input tag without errors 1`] = `
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -3397,6 +3400,7 @@ exports[`UiJsxCanvas render arbitrary jsx block inside an element inside an arbi
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -5914,6 +5918,7 @@ exports[`UiJsxCanvas render arbitrary jsx block inside an element inside an arbi
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -14228,6 +14233,7 @@ exports[`UiJsxCanvas render class component is available from arbitrary block in
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -15321,6 +15327,7 @@ exports[`UiJsxCanvas render console logging does not do anything bizarre 1`] = `
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -16102,6 +16109,7 @@ exports[`UiJsxCanvas render does not crash if the metadata scenes are not the ap
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -18145,6 +18153,7 @@ exports[`UiJsxCanvas render does not crash if the metadata scenes are undefined
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -20188,6 +20197,7 @@ exports[`UiJsxCanvas render function component is available from arbitrary block
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -21281,6 +21291,7 @@ exports[`UiJsxCanvas render function component works inside a map 1`] = `
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -22788,6 +22799,7 @@ exports[`UiJsxCanvas render handles a component that destructures its props obje
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -24121,6 +24133,7 @@ exports[`UiJsxCanvas render handles a component that renames its props object 1`
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -25453,6 +25466,7 @@ exports[`UiJsxCanvas render handles a component with a props object written by s
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -26888,6 +26902,7 @@ exports[`UiJsxCanvas render handles a component with a props object written by s
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -28323,6 +28338,7 @@ exports[`UiJsxCanvas render handles chaining dependencies into the appropriate o
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -28990,6 +29006,7 @@ exports[`UiJsxCanvas render handles fragments in an arbitrary block 1`] = `
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -40904,6 +40921,7 @@ exports[`UiJsxCanvas render props can be accessed inside the arbitrary js block
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -42065,6 +42083,7 @@ exports[`UiJsxCanvas render refs are handled and triggered correctly in a class
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -42801,6 +42820,7 @@ exports[`UiJsxCanvas render refs are handled and triggered correctly in a functi
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -43640,6 +43660,7 @@ exports[`UiJsxCanvas render renders a 1st party component with uids correctly, u
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -44935,6 +44956,7 @@ exports[`UiJsxCanvas render renders a canvas defined by a utopia storyboard comp
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -46053,6 +46075,7 @@ exports[`UiJsxCanvas render renders a canvas reliant on another file that uses m
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -47326,6 +47349,7 @@ exports[`UiJsxCanvas render renders a canvas testing a multitude of export style
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -52390,6 +52414,7 @@ exports[`UiJsxCanvas render renders a component used in an arbitrary block corre
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -54433,6 +54458,7 @@ exports[`UiJsxCanvas render renders a component used in an arbitrary block corre
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -56474,6 +56500,7 @@ exports[`UiJsxCanvas render renders a component used in an arbitrary block with
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -58603,6 +58630,7 @@ exports[`UiJsxCanvas render renders a component using the spread operator 1`] =
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -59626,6 +59654,7 @@ exports[`UiJsxCanvas render renders a component with a fragment at the root 1`]
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -60682,6 +60711,7 @@ exports[`UiJsxCanvas render renders correctly when a component is passed in via
       data-path=\\"eee/fff\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -61822,6 +61852,7 @@ exports[`UiJsxCanvas render renders correctly with a context 1`] = `
       data-path=\\"ccc/ddd\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -62754,6 +62785,7 @@ exports[`UiJsxCanvas render renders correctly with a nested context in another c
       data-path=\\"ccc/ddd\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -63376,6 +63408,7 @@ exports[`UiJsxCanvas render renders fine with a valid registerModule call 1`] =
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -64286,6 +64319,7 @@ exports[`UiJsxCanvas render renders fine with two circularly referencing arbitra
       data-path=\\"utopia-storyboard-uid/scene\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -65517,6 +65551,7 @@ exports[`UiJsxCanvas render renders fine with two components that reference each
       data-path=\\"utopia-storyboard-uid/scene\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -66157,6 +66192,7 @@ exports[`UiJsxCanvas render renders fragments correctly 1`] = `
       data-path=\\"eee/fff\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -68411,6 +68447,7 @@ exports[`UiJsxCanvas render renders img tag 1`] = `
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -69327,6 +69364,7 @@ exports[`UiJsxCanvas render respects a jsx pragma 1`] = `
       data-factory-function-works=\\"true\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -69997,6 +70035,7 @@ exports[`UiJsxCanvas render supports passing down the scope to children of compo
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -73407,6 +73446,7 @@ exports[`UiJsxCanvas render the canvas supports emotion CSS prop 1`] = `
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -74077,6 +74117,7 @@ exports[`UiJsxCanvas render the spy wrapper is compatible with React.cloneElemen
       data-path=\\"utopia-storyboard-uid/scene-aaa\\"
       style=\\"
         overflow: hidden;
+        container: scene / inline-size;
         position: absolute;
         background-color: var(--utopitheme-emphasizedBackground);
         box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
diff --git a/editor/src/components/canvas/canvas-types.ts b/editor/src/components/canvas/canvas-types.ts
index 9fb4eef52af2..06f6f0f5220e 100644
--- a/editor/src/components/canvas/canvas-types.ts
+++ b/editor/src/components/canvas/canvas-types.ts
@@ -32,6 +32,7 @@ import type {
 } from '../inspector/common/css-utils'
 
 export const CanvasContainerID = 'canvas-container'
+export const SceneContainerName = 'scene'
 
 // TODO: this should not be an enum but a const object
 export enum CSSCursor {
diff --git a/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx b/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
index d4850376f185..689cf7420104 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-bugs.spec.tsx
@@ -82,6 +82,7 @@ export var storyboard = (
             data-path=\\"sb/scene\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -156,6 +157,7 @@ export default function App(props) {
             data-path=\\"sb/scene\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -238,6 +240,7 @@ export default App`,
             data-path=\\"sb/scene\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -351,6 +354,7 @@ export default function App(props) {
             data-path=\\"storyboard-entity/scene-1-entity\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -388,6 +392,7 @@ export default function App(props) {
             data-path=\\"storyboard-entity/scene-2-entity\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -531,6 +536,7 @@ export default function () {
             data-path=\\"storyboard-entity/scene-1-entity\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/remix-scene-component.tsx b/editor/src/components/canvas/ui-jsx-canvas-renderer/remix-scene-component.tsx
index 972216bfb53f..83057fafdc6d 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-renderer/remix-scene-component.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-renderer/remix-scene-component.tsx
@@ -8,7 +8,7 @@ import { UTOPIA_PATH_KEY } from '../../../core/model/utopia-constants'
 import * as EP from '../../../core/shared/element-path'
 import { useSetAtom } from 'jotai'
 import type { AppLoadContext } from '@remix-run/server-runtime'
-
+import { SceneContainerName } from '../canvas-types'
 export const REMIX_SCENE_TESTID = 'remix-scene'
 
 export interface RemixSceneProps {
@@ -24,6 +24,7 @@ export const RemixSceneComponent = React.memo((props: React.PropsWithChildren<Re
   const { style, getLoadContext, startingRoute, ...remainingProps } = props
 
   const sceneStyle: React.CSSProperties = {
+    container: `${SceneContainerName} / inline-size`,
     position: 'relative',
     backgroundColor: colorTheme.emphasizedBackground.value,
     boxShadow: UtopiaStyles.shadowStyles.grounded.boxShadow,
diff --git a/editor/src/components/canvas/ui-jsx-canvas-renderer/scene-component.tsx b/editor/src/components/canvas/ui-jsx-canvas-renderer/scene-component.tsx
index 9db5e4f91e0f..eada697f9adf 100644
--- a/editor/src/components/canvas/ui-jsx-canvas-renderer/scene-component.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas-renderer/scene-component.tsx
@@ -6,6 +6,7 @@ import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { DomWalkerInvalidatePathsCtxAtom } from '../ui-jsx-canvas'
 import type { UTOPIA_SCENE_ID_KEY } from '../../../core/model/utopia-constants'
 import { AlwaysTrue, usePubSubAtomReadOnly } from '../../../core/shared/atom-with-pub-sub'
+import { SceneContainerName } from '../canvas-types'
 
 type ExtendedSceneProps = SceneProps & { [UTOPIA_SCENE_ID_KEY]: string }
 
@@ -20,6 +21,7 @@ export const SceneComponent = React.memo(
     const { style, ...remainingProps } = props
 
     const sceneStyle: React.CSSProperties = {
+      container: `${SceneContainerName} / inline-size`,
       position: 'relative',
       backgroundColor: colorTheme.emphasizedBackground.value,
       boxShadow: UtopiaStyles.shadowStyles.grounded.boxShadow,
diff --git a/editor/src/components/canvas/ui-jsx-canvas.spec.tsx b/editor/src/components/canvas/ui-jsx-canvas.spec.tsx
index 5f4835769c7d..d26b9a678fe6 100644
--- a/editor/src/components/canvas/ui-jsx-canvas.spec.tsx
+++ b/editor/src/components/canvas/ui-jsx-canvas.spec.tsx
@@ -1451,6 +1451,7 @@ export var ${BakedInStoryboardVariableName} = (props) => {
             data-path=\\"utopia-storyboard-uid/scene-aaa\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -1560,6 +1561,7 @@ export var ${BakedInStoryboardVariableName} = (props) => {
             data-path=\\"utopia-storyboard-uid/scene-aaa\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -2062,6 +2064,7 @@ describe('UiJsxCanvas render multifile projects', () => {
             data-path=\\"utopia-storyboard-uid/scene-aaa\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -2157,6 +2160,7 @@ describe('UiJsxCanvas render multifile projects', () => {
             data-path=\\"utopia-storyboard-uid/scene-aaa\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -2254,6 +2258,7 @@ describe('UiJsxCanvas render multifile projects', () => {
             data-path=\\"utopia-storyboard-uid/scene-aaa\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -2336,6 +2341,7 @@ describe('UiJsxCanvas render multifile projects', () => {
             data-path=\\"utopia-storyboard-uid/scene-aaa\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
@@ -2431,6 +2437,7 @@ describe('UiJsxCanvas render multifile projects', () => {
             data-path=\\"utopia-storyboard-uid/scene-aaa\\"
             style=\\"
               overflow: hidden;
+              container: scene / inline-size;
               position: absolute;
               background-color: var(--utopitheme-emphasizedBackground);
               box-shadow: 0px 1px 2px 0px var(--utopitheme-shadow90),
diff --git a/editor/src/components/text-editor/text-editor.tsx b/editor/src/components/text-editor/text-editor.tsx
index 43a5bdb1f5f7..c0e1d85c2be1 100644
--- a/editor/src/components/text-editor/text-editor.tsx
+++ b/editor/src/components/text-editor/text-editor.tsx
@@ -38,6 +38,7 @@ import {
 } from './text-editor-shortcut-helpers'
 import { useColorTheme } from '../../uuiui'
 import { mapArrayToDictionary } from '../../core/shared/array-utils'
+import type { TextRelatedCssProperties } from '../../core/properties/css-properties'
 import { TextRelatedProperties } from '../../core/properties/css-properties'
 import { assertNever } from '../../core/shared/utils'
 import { notice } from '../common/notice'
@@ -527,7 +528,11 @@ const TextEditor = React.memo((props: TextEditorProps) => {
     style: {
       // Ensure that font and text settings are inherited from
       // the containing element:
-      ...mapArrayToDictionary<keyof CSSProperties, 'inherit', keyof CSSProperties>(
+      ...mapArrayToDictionary<
+        keyof TextRelatedCssProperties,
+        'inherit',
+        keyof TextRelatedCssProperties
+      >(
         TextRelatedProperties,
         (key) => key,
         () => 'inherit',
diff --git a/editor/src/core/es-modules/package-manager/package-manager.spec.ts b/editor/src/core/es-modules/package-manager/package-manager.spec.ts
index b8a1b9ccfb4c..500b27022a9b 100644
--- a/editor/src/core/es-modules/package-manager/package-manager.spec.ts
+++ b/editor/src/core/es-modules/package-manager/package-manager.spec.ts
@@ -57,7 +57,7 @@ jest.mock('../../../components/editor/npm-dependency/npm-dependency', () => ({
 }))
 
 jest.mock('../../shared/css-utils', () => ({
-  rescopeCSSToTargetCanvasOnly: (input: string): string => input,
+  convertCssToUtopia: (input: string): string => input,
 }))
 
 describe('ES Dependency Package Manager', () => {
diff --git a/editor/src/core/properties/css-properties.ts b/editor/src/core/properties/css-properties.ts
index cf752a3eb250..20989ccd8bd8 100644
--- a/editor/src/core/properties/css-properties.ts
+++ b/editor/src/core/properties/css-properties.ts
@@ -13,7 +13,11 @@ export const BackgroundPrefixedProperties: Array<keyof CSSProperties> = [
   'backgroundSize',
 ]
 
-export const TextRelatedProperties: Array<keyof CSSProperties> = [
+export type TextRelatedCssProperties = CSSProperties & {
+  textDecorationWidth?: string
+}
+
+export const TextRelatedProperties: Array<keyof TextRelatedCssProperties> = [
   'font',
   'fontFamily',
   'fontFeatureSettings',
diff --git a/editor/src/core/shared/css-utils.spec.ts b/editor/src/core/shared/css-utils.spec.ts
index e2f5e1b2e09b..fc41ac3235e6 100644
--- a/editor/src/core/shared/css-utils.spec.ts
+++ b/editor/src/core/shared/css-utils.spec.ts
@@ -1,5 +1,7 @@
-import { rescopeCSSToTargetCanvasOnly } from './css-utils'
+import { convertCssToUtopia, changeMediaQueryToContainer } from './css-utils'
+import * as csstree from 'css-tree'
 import * as prettier from 'prettier'
+import { SceneContainerName } from '../../components/canvas/canvas-types'
 
 function formatCss(css: string): string {
   return prettier.format(css, { parser: 'css' })
@@ -26,7 +28,7 @@ describe('rescopeCSSToTargetCanvasOnly', () => {
         container-type: inline-size;
       }
 
-      @container (min-width: 700px) {
+      @container (min-width:700px) {
         .apptitle {
             font-size: 3.5em;
         }
@@ -39,14 +41,14 @@ describe('rescopeCSSToTargetCanvasOnly', () => {
         }   
       }
 
-      @container (max-width: 700px) {
+      @container (max-width:700px) {
         .gridcard {
             height: 215px
         }   
       }
     `
 
-    const output = formatCss(rescopeCSSToTargetCanvasOnly(input))
+    const output = formatCss(convertCssToUtopia(input))
     expect(output).toEqual(
       formatCss(`
       @scope (#canvas-container) {
@@ -63,7 +65,7 @@ describe('rescopeCSSToTargetCanvasOnly', () => {
         .appheadercontainer,  .listcardcontainer,  .gridcardcontainer {
           container-type: inline-size;
         }
-        @container (min-width: 700px) {
+        @container (min-width:700px) {
           .apptitle {
               font-size: 3.5em;
           }
@@ -74,7 +76,7 @@ describe('rescopeCSSToTargetCanvasOnly', () => {
               height: 325px
           }   
         }
-        @container (max-width: 700px) {
+        @container (max-width:700px) {
           .gridcard {
               height: 215px
           }   
@@ -143,7 +145,7 @@ describe('rescopeCSSToTargetCanvasOnly', () => {
       }
     `
 
-    const output = formatCss(rescopeCSSToTargetCanvasOnly(input))
+    const output = formatCss(convertCssToUtopia(input))
     expect(output).toEqual(
       formatCss(`
       @scope (#canvas-container) {
@@ -197,3 +199,72 @@ describe('rescopeCSSToTargetCanvasOnly', () => {
     )
   })
 })
+
+describe('changeMediaQueryToContainer', () => {
+  it('converts a simple @media to @container', () => {
+    const css = `
+    @media (max-width: 700px) {
+      .my-class {
+        color: red;
+      }
+    }
+    `
+    const ast = csstree.parse(css) as csstree.StyleSheet
+    changeMediaQueryToContainer(ast.children.first as csstree.Rule, SceneContainerName)
+    const output = formatCss(csstree.generate(ast))
+    expect(output).toEqual(
+      formatCss(`
+      @container ${SceneContainerName} (max-width:700px) {
+        .my-class {
+          color: red;
+        }
+      }
+    `),
+    )
+  })
+
+  it('converts a @media with multiple conditions to @container', () => {
+    const css = `
+    @media (max-width: 700px) and (min-width: 500px) {
+      .my-class {
+        color: red;
+      }
+    }
+    `
+    const ast = csstree.parse(css) as csstree.StyleSheet
+    changeMediaQueryToContainer(ast.children.first as csstree.Rule, SceneContainerName)
+    const output = formatCss(csstree.generate(ast))
+    expect(output).toEqual(
+      formatCss(`
+      @container ${SceneContainerName} (max-width:700px) and (min-width:500px) {
+        .my-class {
+          color: red;
+        }
+      }
+    `),
+    )
+  })
+  it('converts a @media with conditions that are not only width to @container', () => {
+    const css = `
+    @media (prefers-color-scheme: dark) and (min-width: 500px) {
+      .my-class {
+        color: red;
+      }
+    }
+    `
+    const ast = csstree.parse(css) as csstree.StyleSheet
+    changeMediaQueryToContainer(ast.children.first as csstree.Rule, SceneContainerName)
+    const output = formatCss(csstree.generate(ast))
+    expect(output).toEqual(
+      formatCss(`
+      @media (prefers-color-scheme: dark) {
+        @container ${SceneContainerName} (min-width:500px) {
+          .my-class {
+            color: red;
+          }
+        }
+      }
+    `),
+    )
+  })
+})
diff --git a/editor/src/core/shared/css-utils.ts b/editor/src/core/shared/css-utils.ts
index 60a887c075a0..59935ab64b53 100644
--- a/editor/src/core/shared/css-utils.ts
+++ b/editor/src/core/shared/css-utils.ts
@@ -1,5 +1,5 @@
 import * as csstree from 'css-tree'
-import { CanvasContainerID } from '../../components/canvas/canvas-types'
+import { CanvasContainerID, SceneContainerName } from '../../components/canvas/canvas-types'
 
 function scopePseudoClassSelector(): csstree.PseudoClassSelector {
   return csstree.fromPlainObject({
@@ -20,7 +20,7 @@ function isSelectorToChange(node: csstree.CssNode): boolean {
   }
 }
 
-export function rescopeCSSToTargetCanvasOnly(input: string): string {
+export function convertCssToUtopia(input: string): string {
   // First wrap it in an @scope
   const scopedInput = `@scope (#${CanvasContainerID}) {
     ${input}
@@ -29,20 +29,72 @@ export function rescopeCSSToTargetCanvasOnly(input: string): string {
   let ast = csstree.parse(scopedInput)
 
   csstree.walk(ast, function (node, item, list) {
-    // As we are wrapping in an @scope, we need to redirect certain selectors to :scope
-    if (isSelectorToChange(node) && list != null) {
-      list.insertData(scopePseudoClassSelector(), item)
-      list.remove(item)
-      // we need to remove dimensions since they now apply to our canvas
-      if (this.rule != null) {
-        removeDimensionsFromCssRule(this.rule)
-      }
-    }
+    rescopeCSSToTargetCanvasOnly(node, item, list, this.rule)
+    changeMediaQueryToContainer(node, SceneContainerName)
   })
 
   return csstree.generate(ast)
 }
 
+function rescopeCSSToTargetCanvasOnly(
+  node: csstree.CssNode,
+  item: any,
+  list: any,
+  rule: csstree.Rule | null,
+) {
+  if (isSelectorToChange(node) && list != null) {
+    list.insertData(scopePseudoClassSelector(), item)
+    list.remove(item)
+    // we need to remove dimensions since they now apply to our canvas
+    if (rule != null) {
+      removeDimensionsFromCssRule(rule)
+    }
+  }
+}
+const WIDTH_CONDITIONS_REGEX = /\([^()]*?\b(min-width|max-width|width)\b[^()]*?\)/g
+export function changeMediaQueryToContainer(node: csstree.CssNode, containerName?: string) {
+  if (node.type === 'Atrule' && node.name === 'media') {
+    const queryText = csstree.generate(node.prelude as csstree.CssNode)
+    const widthConditions = queryText.match(WIDTH_CONDITIONS_REGEX) ?? []
+
+    if (widthConditions.length > 0) {
+      // Get non-width conditions
+      const nonWidthConditions = queryText
+        .split(/\s+and\s+/)
+        .filter((condition) => condition.match(WIDTH_CONDITIONS_REGEX) == null)
+        .join(' and ')
+        .trim()
+
+      if (nonWidthConditions != '') {
+        // Keep the media query and nest a container query inside
+        const containerQuery = csstree.parse(
+          `@container ${containerName ?? ''} ${widthConditions.join(' and ')}
+                ${csstree.generate(node.block as csstree.CssNode)}
+            `,
+          { context: 'stylesheet' },
+        )
+
+        node.prelude = csstree.parse(nonWidthConditions, {
+          context: 'mediaQueryList',
+        }) as csstree.AtrulePrelude
+        // Create a new block containing the container query
+        node.block = csstree.parse(
+          `{
+         ${csstree.generate(containerQuery)}
+          }`,
+          { context: 'block' },
+        ) as csstree.Block
+      } else {
+        // If there are only width conditions, convert directly to container query
+        node.name = 'container'
+        node.prelude = csstree.parse(`${containerName ?? ''} ${widthConditions.join(' and ')}`, {
+          context: 'mediaQueryList',
+        }) as csstree.AtrulePrelude
+      }
+    }
+  }
+}
+
 const propertiesToRemove = ['width', 'height', 'max-width', 'max-height', 'min-width', 'min-height']
 function removeDimensionsFromCssRule(rule: csstree.Rule): void {
   csstree.walk(rule, (node, item, list) => {
diff --git a/editor/src/core/tailwind/tailwind-compilation.ts b/editor/src/core/tailwind/tailwind-compilation.ts
index 8a61463711ab..6784e21ce790 100644
--- a/editor/src/core/tailwind/tailwind-compilation.ts
+++ b/editor/src/core/tailwind/tailwind-compilation.ts
@@ -10,7 +10,7 @@ import {
   useRefEditorState,
 } from '../../components/editor/store/store-hook'
 import { importDefault } from '../es-modules/commonjs-interop'
-import { rescopeCSSToTargetCanvasOnly } from '../shared/css-utils'
+import { convertCssToUtopia } from '../shared/css-utils'
 import type { RequireFn } from '../shared/npm-dependency-types'
 import { TailwindConfigPath } from './tailwind-config'
 import { isFeatureEnabled } from '../../utils/feature-switches'
@@ -70,7 +70,7 @@ async function generateTailwindStyles(tailwindCss: Tailwindcss, allCSSFiles: str
   const content = contentElement.outerHTML
   const styleString = await tailwindCss.generateStylesFromContent(allCSSFiles, [content])
   const style = ensureElementExists({ type: 'style', id: TailwindStylesElementID })
-  style.textContent = rescopeCSSToTargetCanvasOnly(styleString)
+  style.textContent = convertCssToUtopia(styleString)
 }
 
 function removeTailwindStyles() {
diff --git a/editor/src/core/webpack-loaders/css-loader.ts b/editor/src/core/webpack-loaders/css-loader.ts
index 3b302bc11eb2..9ac551d40910 100644
--- a/editor/src/core/webpack-loaders/css-loader.ts
+++ b/editor/src/core/webpack-loaders/css-loader.ts
@@ -1,4 +1,4 @@
-import { rescopeCSSToTargetCanvasOnly } from '../shared/css-utils'
+import { convertCssToUtopia } from '../shared/css-utils'
 import type { LoadModule, MatchFile, ModuleLoader } from './loader-types'
 import { loadModuleResult } from './loader-types'
 
@@ -9,7 +9,7 @@ const matchFile: MatchFile = (filename: string) => {
 }
 
 const loadModule: LoadModule = (filename: string, contents: string) => {
-  const canvasScopedCSS = rescopeCSSToTargetCanvasOnly(contents)
+  const canvasScopedCSS = convertCssToUtopia(contents)
 
   const loadedContents = `
     Object.defineProperty(module, 'exports', {
diff --git a/editor/src/printer-parsers/css/css-parser-utils.ts b/editor/src/printer-parsers/css/css-parser-utils.ts
index b1412bba0b32..1eb4f0eb56af 100644
--- a/editor/src/printer-parsers/css/css-parser-utils.ts
+++ b/editor/src/printer-parsers/css/css-parser-utils.ts
@@ -339,8 +339,13 @@ export const parseLexedColor: Parser<CSSColor> = (value) => {
     value.match.length === 1
   ) {
     if (value.match[0] != null) {
-      const leaf = value.match[0]
+      let leaf = value.match[0]
       if (isLexerMatch(leaf)) {
+        // a fix for css-tree@3 aligned color parsing to CSS Color Level 5 syntax
+        // https://drafts.csswg.org/css-color-5/#color-syntax
+        if (isNamedSyntaxType(leaf.syntax, ['color-base']) && isLexerMatch(leaf.match[0])) {
+          leaf = leaf.match[0]
+        }
         if (isNamedSyntaxType(leaf.syntax, ['rgb()', 'rgba()', 'hsl()', 'hsla()'])) {
           const parsed = parseAlternative<CSSColorRGB | CSSColorHSL>(
             [parseRGBColor, parseHSLColor],
diff --git a/editor/src/uuiui/inputs/number-input.tsx b/editor/src/uuiui/inputs/number-input.tsx
index 3d5b2afc656e..d9b4796bac67 100644
--- a/editor/src/uuiui/inputs/number-input.tsx
+++ b/editor/src/uuiui/inputs/number-input.tsx
@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
-import type { Interpolation } from '@emotion/react'
+import type { Interpolation, Theme } from '@emotion/react'
 import { jsx } from '@emotion/react'
 import type { MouseEventHandler } from 'react'
 import React from 'react'
@@ -747,30 +747,32 @@ export const NumberInput = React.memo<NumberInputProps>(
         </div>
         <div
           className='number-input-container'
-          css={{
-            color: controlStyles.mainColor,
-            zIndex: isFocused ? 3 : undefined,
-            position: 'relative',
-            borderRadius: UtopiaTheme.inputBorderRadius,
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 5,
-            alignItems: 'center',
-            boxShadow: 'inset 0px 0px 0px 1px transparent',
-            ...chainedStyles,
-            '&:hover': {
-              boxShadow: `inset 0px 0px 0px 1px ${colorTheme.fg7.value}`,
-            },
-            '&:focus-within': {
-              boxShadow: `inset 0px 0px 0px 1px ${colorTheme.dynamicBlue.value}`,
-            },
-            '&:hover input': {
-              color: controlStyles.mainColor,
-            },
-            '&:focus-within input': {
+          css={
+            {
               color: controlStyles.mainColor,
-            },
-          }}
+              zIndex: isFocused ? 3 : undefined,
+              position: 'relative',
+              borderRadius: UtopiaTheme.inputBorderRadius,
+              display: 'flex',
+              flexDirection: 'row',
+              gap: 5,
+              alignItems: 'center',
+              boxShadow: 'inset 0px 0px 0px 1px transparent',
+              ...chainedStyles,
+              '&:hover': {
+                boxShadow: `inset 0px 0px 0px 1px ${colorTheme.fg7.value}`,
+              },
+              '&:focus-within': {
+                boxShadow: `inset 0px 0px 0px 1px ${colorTheme.dynamicBlue.value}`,
+              },
+              '&:hover input': {
+                color: controlStyles.mainColor,
+              },
+              '&:focus-within input': {
+                color: controlStyles.mainColor,
+              },
+            } as Interpolation<Theme>
+          }
         >
           {incrementControls && !disabled ? (
             <div
diff --git a/editor/src/uuiui/widgets/layout/common-layout-shorthands.tsx b/editor/src/uuiui/widgets/layout/common-layout-shorthands.tsx
index bafc1217f598..a514c25ec0ed 100644
--- a/editor/src/uuiui/widgets/layout/common-layout-shorthands.tsx
+++ b/editor/src/uuiui/widgets/layout/common-layout-shorthands.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react'
-import type { CSSProperties } from '@emotion/serialize'
+import type { CSSProperties, CSSInterpolation } from '@emotion/serialize'
 
 interface CommonSenseUtopiaProps {
   flexGrow?: CSSProperties['flexGrow']
@@ -8,4 +8,4 @@ interface CommonSenseUtopiaProps {
 export const commonSenseUtopiaLayoutShorthands = (props: CommonSenseUtopiaProps) =>
   css({
     flexGrow: props.flexGrow,
-  })
+  } as CSSInterpolation)

From bdbc85767c35016627f6022435c08ab660dc87da Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 28 Nov 2024 14:21:25 +0100
Subject: [PATCH 252/272] Prefer span notation when resizing flow grid cells
 (#6687)

**Problem:**

When resizing a grid cell for an in-flow element, `span` notation should
be prefered over explicit pins.

**Fix:**

If the resize happens on a right/bottom edge and the element is in flow,
apply the `span` notation.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6686
---
 ...-resize-element-strategy.spec.browser2.tsx | 101 ++++++++++++++++++
 .../grid-resize-element-strategy.ts           |  40 +++++--
 2 files changed, 135 insertions(+), 6 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 1f07c6144cce..3231cf6bb4b3 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -849,6 +849,107 @@ export var storyboard = (
         })
       }
     })
+    it('uses spans for flow elements', async () => {
+      const editor = await renderTestEditorWithCode(
+        makeProjectCodeWithCustomPlacement({ gridColumn: 'auto', gridRow: 'auto' }),
+        'await-first-dom-report',
+      )
+
+      // enlarge to the right, spans in flow
+      {
+        await runCellResizeTest(
+          editor,
+          'column-end',
+          gridCellTargetId(EP.fromString('sb/grid'), 1, 3),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: 'auto',
+          gridColumnStart: 'span 3',
+          gridRowEnd: 'auto',
+          gridRowStart: 'auto',
+        })
+      }
+
+      // enlarge to the bottom, still spans in flow
+      {
+        await runCellResizeTest(
+          editor,
+          'row-end',
+          gridCellTargetId(EP.fromString('sb/grid'), 4, 3),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: 'auto',
+          gridColumnStart: 'span 3',
+          gridRowEnd: 'auto',
+          gridRowStart: 'span 4',
+        })
+      }
+
+      // shrink from the right, still spans in flow
+      {
+        await runCellResizeTest(
+          editor,
+          'column-end',
+          gridCellTargetId(EP.fromString('sb/grid'), 4, 2),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: 'auto',
+          gridColumnStart: 'span 2',
+          gridRowEnd: 'auto',
+          gridRowStart: 'span 4',
+        })
+      }
+
+      // shrink from the bottom, still spans in flow
+      {
+        await runCellResizeTest(
+          editor,
+          'row-end',
+          gridCellTargetId(EP.fromString('sb/grid'), 3, 2),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: 'auto',
+          gridColumnStart: 'span 2',
+          gridRowEnd: 'auto',
+          gridRowStart: 'span 3',
+        })
+      }
+
+      // shrink from the top, it spans but now is pinned
+      {
+        await runCellResizeTest(
+          editor,
+          'row-start',
+          gridCellTargetId(EP.fromString('sb/grid'), 2, 2),
+          EP.fromString('sb/grid/cell'),
+        )
+
+        const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+          editor.renderedDOM.getByTestId('cell').style
+        expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+          gridColumnEnd: 'auto',
+          gridColumnStart: 'span 2',
+          gridRowEnd: '4',
+          gridRowStart: 'span 2',
+        })
+      }
+    })
   })
 })
 
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 7e3ec36af17c..95047968c676 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -27,8 +27,8 @@ import {
   emptyStrategyApplicationResult,
   strategyApplicationResult,
 } from '../canvas-strategy-types'
-import type { InteractionSession } from '../interaction-state'
-import { getCommandsForGridItemPlacement } from './grid-helpers'
+import type { GridResizeEdge, InteractionSession } from '../interaction-state'
+import { getCommandsForGridItemPlacement, isAutoGridPin } from './grid-helpers'
 import { resizeBoundingBoxFromSide } from './resize-helpers'
 
 export const gridResizeElementStrategy: CanvasStrategyFactory = (
@@ -138,6 +138,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
           'start',
           elementGridPropertiesFromProps.gridColumnEnd,
           gridPropsNumeric.gridColumnEnd,
+          interactionSession.activeControl.edge,
         ),
         gridColumnEnd: normalizePositionAfterResize(
           elementGridPropertiesFromProps.gridColumnEnd,
@@ -146,6 +147,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
           'end',
           elementGridPropertiesFromProps.gridColumnStart,
           gridPropsNumeric.gridColumnStart,
+          interactionSession.activeControl.edge,
         ),
         gridRowStart: normalizePositionAfterResize(
           elementGridPropertiesFromProps.gridRowStart,
@@ -154,6 +156,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
           'start',
           elementGridPropertiesFromProps.gridRowEnd,
           gridPropsNumeric.gridRowEnd,
+          interactionSession.activeControl.edge,
         ),
         gridRowEnd: normalizePositionAfterResize(
           elementGridPropertiesFromProps.gridRowEnd,
@@ -162,6 +165,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
           'end',
           elementGridPropertiesFromProps.gridRowStart,
           gridPropsNumeric.gridRowStart,
+          interactionSession.activeControl.edge,
         ),
       }
 
@@ -211,9 +215,12 @@ function getNewGridPropsFromResizeBox(
   }
 }
 
-// After a resize happens and we know the numerical grid positioning of the new bounds,
-// return a normalized version of the new position so that it respects any spans that
-// may have been there before the resize, and/or default it to 'auto' when it would become redundant.
+/*
+    After a resize happens and we know the numerical grid positioning of the new bounds,
+    return a normalized version of the new position so that it respects any spans that
+    may have been there before the resize, and/or default it to 'auto' when it would become redundant.
+    If the positions match a flow configuration, give priority to span notation.
+*/
 function normalizePositionAfterResize(
   position: GridPositionOrSpan | null,
   resizedPosition: GridPositionValue,
@@ -221,13 +228,34 @@ function normalizePositionAfterResize(
   bound: 'start' | 'end',
   counterpart: GridPositionOrSpan | null,
   counterpartResizedPosition: GridPositionValue,
+  edge: GridResizeEdge,
 ): GridPositionOrSpan | null {
-  if (isGridSpan(position)) {
+  function isFlowResizeOnBound(
+    wantedBound: 'start' | 'end',
+    flowStart: GridPositionOrSpan | null,
+    flowEnd: GridPositionOrSpan | null,
+  ): boolean {
+    return (
+      (edge === 'column-end' || edge === 'row-end') &&
+      bound === wantedBound &&
+      (isGridSpan(flowStart) || isAutoGridPin(flowStart) || flowStart == null) &&
+      (isAutoGridPin(flowEnd) || flowEnd == null)
+    )
+  }
+
+  const isFlowStart = isFlowResizeOnBound('start', position, counterpart)
+  if (isFlowStart || isGridSpan(position)) {
     if (size === 1) {
       return cssKeyword('auto')
     }
     return gridSpanNumeric(size)
   }
+
+  const isFlowEnd = isFlowResizeOnBound('end', counterpart, position)
+  if (isFlowEnd) {
+    return cssKeyword('auto')
+  }
+
   if (
     isGridSpan(counterpart) &&
     counterpartResizedPosition.numericalPosition === 1 &&

From e3ebb2513faac4de32864ecb91f14e6f5b7fd222 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Thu, 28 Nov 2024 15:20:26 +0000
Subject: [PATCH 253/272] feature(grid) Grid Markers Mouse Down Behaviour
 (#6678)

- Ruler markers now take a colour and scale directly.
- Added a short vertical and horizontal pipe marker.
- Grid outlines shown when triggered from the grid markers.
- `RulerMarkers` now takes a callback to trigger the showing of grid
markers.
- Additional properties added to `RulerMarkerData` and
`RulerMarkerPositionData`.
- The additional markers are built up using `addOtherMarker`.
- When the row and column grid markers are mouse downed, their
respective ruler and additional markers are shown.
- A `GridRuler` component was added and the `RulerMarkerIndicator`
components respective to their axis are now children of those rulers.
- `RulerMarkerIndicator` components were reworked to cater for their new
functionality and also that they are now within a `GridRuler` component.
- Added `getRulerMarkerColor` utility function.
- Deleted `skewMarkerPosition` as now all of the markers are a fixed
size.
- Removed `priority` setting in `controlsForGridPlaceholders` so the
grid
  controls sit above other controls.
- Introduced `MarkerSVG` component to handle scaling of the SVGs.
- Put the selected ruler markers on top of the other ruler markers.
---
 .../controls/grid-controls-for-strategies.tsx |   1 -
 .../controls/grid-controls-ruler-markers.tsx  | 174 +++---
 .../canvas/controls/grid-controls.tsx         | 561 ++++++++++++------
 3 files changed, 487 insertions(+), 249 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index bf9c276238a9..aeec1504654d 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -217,6 +217,5 @@ export function controlsForGridPlaceholders(
     },
     key: `GridControls${suffix == null ? '' : suffix}`,
     show: whenToShow,
-    priority: 'bottom',
   }
 }
diff --git a/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx b/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx
index be44ba0c6698..d3c58737b402 100644
--- a/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx
@@ -1,82 +1,110 @@
 import React from 'react'
-import { colorTheme } from '../../../uuiui'
+import type { UtopiColor } from '../../../uuiui'
+import { RulerMarkerIconSize } from './grid-controls'
 
-export type RulerMarkerType = 'span-start' | 'span-end' | 'auto' | 'pinned'
+export type RulerMarkerType = 'span-start' | 'span-end' | 'auto' | 'auto-short' | 'pinned'
 
-const upFacingTriangle = (
-  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
-    <polygon
-      points='5,1 10,10 0,10'
-      fill={colorTheme.primary.value}
-      stroke={colorTheme.white.value}
-      strokeWidth='0.5'
-    />
-  </svg>
-)
+interface MarkerSVGProps {
+  scale: number
+}
+
+function MarkerSVG({ scale, children }: React.PropsWithChildren<MarkerSVGProps>) {
+  return (
+    <svg
+      width={`${RulerMarkerIconSize / scale}`}
+      height={`${RulerMarkerIconSize / scale}`}
+      viewBox={`0 0 ${RulerMarkerIconSize} ${RulerMarkerIconSize}`}
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      {children}
+    </svg>
+  )
+}
+
+function upFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <polygon
+        points={`${
+          RulerMarkerIconSize / 2
+        },0 ${RulerMarkerIconSize},${RulerMarkerIconSize} 0,${RulerMarkerIconSize}`}
+        fill={fillColor.value}
+      />
+    </MarkerSVG>
+  )
+}
+
+function rightFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <polygon
+        points={`${RulerMarkerIconSize},${RulerMarkerIconSize / 2} 0,0 0,${RulerMarkerIconSize}`}
+        fill={fillColor.value}
+      />
+    </MarkerSVG>
+  )
+}
+
+function downFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <polygon
+        points={`${RulerMarkerIconSize / 2},${RulerMarkerIconSize} 0,0 ${RulerMarkerIconSize},0`}
+        fill={fillColor.value}
+      />
+    </MarkerSVG>
+  )
+}
+
+function leftFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <polygon
+        points={`0,${
+          RulerMarkerIconSize / 2
+        } ${RulerMarkerIconSize},0 ${RulerMarkerIconSize},${RulerMarkerIconSize}`}
+        fill={fillColor.value}
+      />
+    </MarkerSVG>
+  )
+}
 
-const rightFacingTriangle = (
-  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
-    <polygon
-      points='10,5 0,0 0,10'
-      fill={colorTheme.primary.value}
-      stroke={colorTheme.white.value}
-      strokeWidth='0.5'
-    />
-  </svg>
-)
+function regularVerticalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <rect x='4' y='0' width='3' height={`${RulerMarkerIconSize}`} fill={fillColor.value} />
+    </MarkerSVG>
+  )
+}
 
-const downFacingTriangle = (
-  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
-    <polygon
-      points='5,10 0,0 10,0'
-      fill={colorTheme.primary.value}
-      stroke={colorTheme.white.value}
-      strokeWidth='0.5'
-    />
-  </svg>
-)
+function regularHorizontalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <rect x='0' y='4' width={`${RulerMarkerIconSize}`} height='3' fill={fillColor.value} />
+    </MarkerSVG>
+  )
+}
 
-const leftFacingTriangle = (
-  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
-    <polygon
-      points='0,5 10,0 10,10'
-      fill={colorTheme.primary.value}
-      stroke={colorTheme.white.value}
-      strokeWidth='0.5'
-    />
-  </svg>
-)
+function shortVerticalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <rect x='4' y='2' width='3' height='9' fill={fillColor.value} />
+    </MarkerSVG>
+  )
+}
 
-const verticalPipe = (
-  <svg width='4' height='11' xmlns='http://www.w3.org/2000/svg'>
-    <rect
-      x='0.25'
-      y='0.25'
-      width='3'
-      height='10'
-      fill={colorTheme.primary.value}
-      stroke={colorTheme.white.value}
-      strokeWidth='0.5'
-    />
-  </svg>
-)
+function shortHorizontalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <rect x='2' y='4' width='9' height='3' fill={fillColor.value} />
+    </MarkerSVG>
+  )
+}
 
-const horizontalPipe = (
-  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
-    <rect
-      x='0.25'
-      y='3.50'
-      width='10'
-      height='3'
-      fill={colorTheme.primary.value}
-      stroke={colorTheme.white.value}
-      strokeWidth='0.5'
-    />
-  </svg>
-)
+type ColorToReactNode = (fillColor: UtopiColor, scale: number) => React.ReactNode
 
 export const rulerMarkerIcons: {
-  [key in RulerMarkerType]: { column: React.ReactNode; row: React.ReactNode }
+  [key in RulerMarkerType]: { column: ColorToReactNode; row: ColorToReactNode }
 } = {
   'span-start': {
     column: rightFacingTriangle,
@@ -87,8 +115,12 @@ export const rulerMarkerIcons: {
     row: upFacingTriangle,
   },
   auto: {
-    column: verticalPipe,
-    row: horizontalPipe,
+    column: regularVerticalPipe,
+    row: regularHorizontalPipe,
+  },
+  'auto-short': {
+    column: shortVerticalPipe,
+    row: shortHorizontalPipe,
   },
   pinned: {
     column: downFacingTriangle,
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index a6f18b1d6e64..10f860cac8eb 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -27,6 +27,7 @@ import {
 } from '../../../core/shared/element-template'
 import type { CanvasPoint, CanvasRectangle, LocalRectangle } from '../../../core/shared/math-utils'
 import {
+  boundingRectangleArray,
   canvasPoint,
   canvasRectangle,
   isFiniteRectangle,
@@ -49,6 +50,7 @@ import { optionalMap } from '../../../core/shared/optional-utils'
 import { assertNever, NO_OP } from '../../../core/shared/utils'
 import { Modifier } from '../../../utils/modifiers'
 import { when } from '../../../utils/react-conditionals'
+import type { UtopiColor } from '../../../uuiui'
 import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import {
@@ -60,7 +62,6 @@ import {
 } from '../../editor/store/store-hook'
 import type { GridDimension, GridDiscreteDimension } from '../../inspector/common/css-utils'
 import {
-  isCSSKeyword,
   isDynamicGridRepeat,
   isGridCSSRepeat,
   printCSSNumberWithDefaultUnit,
@@ -79,6 +80,7 @@ import {
   getGridChildCellCoordBoundsFromCanvas,
   gridCellTargetId,
 } from '../canvas-strategies/strategies/grid-cell-bounds'
+import type { GridCellGlobalFrames } from '../canvas-strategies/strategies/grid-helpers'
 import {
   getGlobalFrameOfGridCellFromMetadata,
   getGridRelatedIndexes,
@@ -128,8 +130,8 @@ import {
   useGridMeasurementHelperData,
 } from './grid-measurements'
 import type { Property } from 'csstype'
-import { isInsertMode, isSelectMode } from '../../editor/editor-modes'
 import { isFeatureEnabled } from '../../../utils/feature-switches'
+import type { ThemeObject } from '../../../uuiui/styles/theme/theme-helpers'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -1188,6 +1190,8 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
     }),
   )
 
+  const [showGridCellOutlines, setShowGridCellOutlines] = React.useState(false)
+
   const isGridItemSelectedWithoutInteraction =
     selectedGridItems.length > 0 && !isGridItemInteractionActive
 
@@ -1215,7 +1219,9 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
             <GridControl
               key={GridControlKey(gridContainerOrComponentPath)}
               grid={grid}
-              controlsVisible={shouldHaveVisibleControls ? 'visible' : 'not-visible'}
+              controlsVisible={
+                shouldHaveVisibleControls || showGridCellOutlines ? 'visible' : 'not-visible'
+              }
             />
           )
         })}
@@ -1223,7 +1229,13 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
         {when(
           isFeatureEnabled('Grid Ruler Markers'),
           selectedGridItems.map((path) => {
-            return <RulerMarkers key={`ruler-markers-${EP.toString(path)}`} path={path} />
+            return (
+              <RulerMarkers
+                key={`ruler-markers-${EP.toString(path)}`}
+                path={path}
+                setShowGridCellOutlines={setShowGridCellOutlines}
+              />
+            )
           }),
         )}
         <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
@@ -2157,12 +2169,14 @@ function useSelectedGridItems(): ElementPath[] {
   )
 }
 
-const rulerMarkerIconSize = 12 // px
+export const RulerMarkerIconSize = 11 // px
 
 type RulerMarkerData = {
   parentGrid: GridContainerProperties
   cellRect: CanvasRectangle
   gridRect: CanvasRectangle
+  otherColumnMarkers: Array<RulerMarkerPositionData>
+  otherRowMarkers: Array<RulerMarkerPositionData>
   columnStart: RulerMarkerPositionData
   columnEnd: RulerMarkerPositionData
   rowStart: RulerMarkerPositionData
@@ -2170,14 +2184,34 @@ type RulerMarkerData = {
 }
 
 type RulerMarkerPositionData = {
+  markerType: 'selected' | 'target' | 'other'
+  rowOrColumn: 'row' | 'column'
   top: number
   left: number
   position: GridPositionOrSpan | null
   bound: 'start' | 'end'
 }
 
-const RulerMarkers = React.memo((props: { path: ElementPath }) => {
-  const markers: RulerMarkerData | null = useEditorState(
+interface RulerMarkersProps {
+  setShowGridCellOutlines: (show: boolean) => void
+  path: ElementPath
+}
+
+const RulerMarkers = React.memo((props: RulerMarkersProps) => {
+  const gridRect: CanvasRectangle | null = useEditorState(
+    Substores.metadata,
+    (store) => {
+      const originalGrid = findOriginalGrid(store.editor.jsxMetadata, EP.parentPath(props.path))
+      if (originalGrid == null) {
+        return null
+      }
+
+      return MetadataUtils.getFrameOrZeroRectInCanvasCoords(originalGrid, store.editor.jsxMetadata)
+    },
+    'RulerMarkers gridRect',
+  )
+
+  const parentGridCellGlobalFrames = useEditorState(
     Substores.metadata,
     (store) => {
       const elementMetadata = MetadataUtils.findElementByElementPath(
@@ -2188,6 +2222,30 @@ const RulerMarkers = React.memo((props: { path: ElementPath }) => {
         return null
       }
 
+      return elementMetadata.specialSizeMeasurements.parentGridCellGlobalFrames
+    },
+    'RulerMarkers parentGridCellGlobalFrames',
+  )
+
+  const rulerMarkerData: RulerMarkerData | null = useEditorState(
+    Substores.metadata,
+    (store) => {
+      if (gridRect == null) {
+        return null
+      }
+
+      if (parentGridCellGlobalFrames == null) {
+        return null
+      }
+
+      const elementMetadata = MetadataUtils.findElementByElementPath(
+        store.editor.jsxMetadata,
+        props.path,
+      )
+      if (elementMetadata == null) {
+        return null
+      }
+
       const elementGridProperties = elementMetadata.specialSizeMeasurements.elementGridProperties
       if (elementGridProperties == null) {
         return null
@@ -2200,12 +2258,6 @@ const RulerMarkers = React.memo((props: { path: ElementPath }) => {
         return null
       }
 
-      const parentGridCellGlobalFrames =
-        elementMetadata.specialSizeMeasurements.parentGridCellGlobalFrames
-      if (parentGridCellGlobalFrames == null) {
-        return null
-      }
-
       const cellBounds = getGridChildCellCoordBoundsFromCanvas(
         elementMetadata,
         parentGridCellGlobalFrames,
@@ -2241,11 +2293,6 @@ const RulerMarkers = React.memo((props: { path: ElementPath }) => {
         cellBounds.height,
       )
 
-      const gridRect = MetadataUtils.getFrameOrZeroRectInCanvasCoords(
-        originalGrid,
-        store.editor.jsxMetadata,
-      )
-
       const cellRect = parentGridCellGlobalFrames[cellBounds.row - 1][cellBounds.column - 1]
       const cellRectResized = canvasRectangle({
         x: cellRect.x,
@@ -2254,128 +2301,342 @@ const RulerMarkers = React.memo((props: { path: ElementPath }) => {
         height: height,
       })
 
+      let otherColumnMarkers: Array<RulerMarkerPositionData> = []
+      let otherRowMarkers: Array<RulerMarkerPositionData> = []
+
+      function addOtherMarker(
+        rowOrColumn: RulerMarkerPositionData['rowOrColumn'],
+        bound: RulerMarkerPositionData['bound'],
+        rulerLeft: number,
+        rulerTop: number,
+      ): void {
+        const otherMarker: RulerMarkerPositionData = {
+          markerType: 'other',
+          rowOrColumn: rowOrColumn,
+          top: rulerTop,
+          left: rulerLeft,
+          position: null,
+          bound: bound,
+        }
+        const addTo = rowOrColumn === 'row' ? otherRowMarkers : otherColumnMarkers
+        addTo.push(otherMarker)
+      }
+
+      // Add the additional markers for columns.
+      const lastColumnIndex = parentGridCellGlobalFrames[0].length - 1
+      for (let columnIndex = 0; columnIndex <= lastColumnIndex; columnIndex++) {
+        const cell = parentGridCellGlobalFrames[0][columnIndex]
+        if (left !== cell.x) {
+          addOtherMarker('column', 'start', cell.x, gridRect.y)
+        }
+        if (left + width !== cell.x + cell.width) {
+          addOtherMarker('column', 'end', cell.x + cell.width, gridRect.y)
+        }
+      }
+
+      // Add the additional markers for rows.
+      const lastRowIndex = parentGridCellGlobalFrames.length - 1
+      for (let rowIndex = 0; rowIndex <= lastRowIndex; rowIndex++) {
+        const cell = parentGridCellGlobalFrames[rowIndex][0]
+        if (top !== cell.y) {
+          addOtherMarker('row', 'start', gridRect.x, cell.y)
+        }
+        if (top + height !== cell.y + cell.height) {
+          addOtherMarker('row', 'end', gridRect.x, cell.y + cell.height)
+        }
+      }
+
+      const columnStart: RulerMarkerPositionData = {
+        markerType: 'selected',
+        rowOrColumn: 'column',
+        top: gridRect.y,
+        left: left,
+        position: elementGridProperties.gridColumnStart,
+        bound: 'start',
+      }
+      const columnEnd: RulerMarkerPositionData = {
+        markerType: 'selected',
+        rowOrColumn: 'column',
+        top: gridRect.y,
+        left: left + width,
+        position: elementGridProperties.gridColumnEnd,
+        bound: 'end',
+      }
+      const rowStart: RulerMarkerPositionData = {
+        markerType: 'selected',
+        rowOrColumn: 'row',
+        top: top,
+        left: gridRect.x,
+        position: elementGridProperties.gridRowStart,
+        bound: 'start',
+      }
+      const rowEnd: RulerMarkerPositionData = {
+        markerType: 'selected',
+        rowOrColumn: 'row',
+        top: top + height,
+        left: gridRect.x,
+        position: elementGridProperties.gridRowEnd,
+        bound: 'end',
+      }
+
       return {
         parentGrid: parentGrid,
         cellRect: cellRectResized,
         gridRect: gridRect,
-        columnStart: {
-          top: gridRect.y,
-          left: left,
-          position: elementGridProperties.gridColumnStart,
-          bound: 'start',
-        },
-        columnEnd: {
-          top: gridRect.y,
-          left: left + width,
-          position: elementGridProperties.gridColumnEnd,
-          bound: 'end',
-        },
-        rowStart: {
-          top: top,
-          left: gridRect.x,
-          position: elementGridProperties.gridRowStart,
-          bound: 'start',
-        },
-        rowEnd: {
-          top: top + height,
-          left: gridRect.x,
-          position: elementGridProperties.gridRowEnd,
-          bound: 'end',
-        },
+        otherColumnMarkers: otherColumnMarkers,
+        otherRowMarkers: otherRowMarkers,
+        columnStart: columnStart,
+        columnEnd: columnEnd,
+        rowStart: rowStart,
+        rowEnd: rowEnd,
       }
     },
     'RulerMarkers markers',
   )
 
-  if (markers == null) {
+  const [showExtraMarkers, setShowExtraMarkers] = React.useState<'row' | 'column' | null>(null)
+  const markerMouseUp = React.useCallback(
+    (event: MouseEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      setShowExtraMarkers(null)
+      props.setShowGridCellOutlines(false)
+      window.removeEventListener('mouseup', markerMouseUp)
+    },
+    [props],
+  )
+  const rowMarkerMouseDown = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      setShowExtraMarkers('row')
+      props.setShowGridCellOutlines(true)
+      window.addEventListener('mouseup', markerMouseUp)
+    },
+    [markerMouseUp, props],
+  )
+  const columnMarkerMouseDown = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      setShowExtraMarkers('column')
+      props.setShowGridCellOutlines(true)
+      window.addEventListener('mouseup', markerMouseUp)
+    },
+    [markerMouseUp, props],
+  )
+
+  if (rulerMarkerData == null || gridRect == null) {
     return null
   }
 
   return (
     <React.Fragment>
-      {/* Indicators */}
-      <RulerMarkerIndicator
-        parentGrid={markers.parentGrid}
-        marker={markers.columnStart}
-        axis={'column'}
-      />
-      <RulerMarkerIndicator
-        parentGrid={markers.parentGrid}
-        marker={markers.columnEnd}
-        axis={'column'}
-      />
-      <RulerMarkerIndicator
-        parentGrid={markers.parentGrid}
-        marker={markers.rowStart}
-        axis={'row'}
-      />
-      <RulerMarkerIndicator parentGrid={markers.parentGrid} marker={markers.rowEnd} axis={'row'} />
+      <GridRuler
+        axis='column'
+        gridRect={gridRect}
+        cellFrames={parentGridCellGlobalFrames}
+        rulerVisible={showExtraMarkers === 'column' ? 'visible' : 'not-visible'}
+      >
+        {/* Other markers for unselected tracks */}
+        {rulerMarkerData.otherColumnMarkers.map((marker, index) => {
+          return (
+            <RulerMarkerIndicator
+              key={`ruler-marker-${index}`}
+              gridRect={rulerMarkerData.gridRect}
+              parentGrid={rulerMarkerData.parentGrid}
+              marker={marker}
+              axis={marker.rowOrColumn}
+              testID={`ruler-marker-${marker.rowOrColumn}-${index}`}
+              visible={showExtraMarkers == marker.rowOrColumn ? 'visible' : 'not-visible'}
+            />
+          )
+        })}
+        {/* Selected item markers */}
+        <RulerMarkerIndicator
+          gridRect={rulerMarkerData.gridRect}
+          parentGrid={rulerMarkerData.parentGrid}
+          marker={rulerMarkerData.columnStart}
+          axis={'column'}
+          visible={'visible'}
+          onMouseDown={columnMarkerMouseDown}
+          testID={'ruler-marker-column-start'}
+        />
+        <RulerMarkerIndicator
+          gridRect={rulerMarkerData.gridRect}
+          parentGrid={rulerMarkerData.parentGrid}
+          marker={rulerMarkerData.columnEnd}
+          axis={'column'}
+          visible={'visible'}
+          onMouseDown={columnMarkerMouseDown}
+          testID={'ruler-marker-column-end'}
+        />
+      </GridRuler>
+
+      <GridRuler
+        axis='row'
+        gridRect={gridRect}
+        cellFrames={parentGridCellGlobalFrames}
+        rulerVisible={showExtraMarkers === 'row' ? 'visible' : 'not-visible'}
+      >
+        {/* Other markers for unselected tracks */}
+        {rulerMarkerData.otherRowMarkers.map((marker, index) => {
+          return (
+            <RulerMarkerIndicator
+              key={`ruler-marker-${index}`}
+              gridRect={rulerMarkerData.gridRect}
+              parentGrid={rulerMarkerData.parentGrid}
+              marker={marker}
+              axis={marker.rowOrColumn}
+              testID={`ruler-marker-${marker.rowOrColumn}-${index}`}
+              visible={showExtraMarkers == marker.rowOrColumn ? 'visible' : 'not-visible'}
+            />
+          )
+        })}
+        {/* Selected item markers */}
+        <RulerMarkerIndicator
+          gridRect={rulerMarkerData.gridRect}
+          parentGrid={rulerMarkerData.parentGrid}
+          marker={rulerMarkerData.rowStart}
+          axis={'row'}
+          visible={'visible'}
+          onMouseDown={rowMarkerMouseDown}
+          testID={'ruler-marker-row-start'}
+        />
+        <RulerMarkerIndicator
+          gridRect={rulerMarkerData.gridRect}
+          parentGrid={rulerMarkerData.parentGrid}
+          marker={rulerMarkerData.rowEnd}
+          axis={'row'}
+          visible={'visible'}
+          onMouseDown={rowMarkerMouseDown}
+          testID={'ruler-marker-row-end'}
+        />
+      </GridRuler>
+
       {/* Offset lines */}
       <GridCellOffsetLine
-        top={markers.columnStart.top}
-        left={markers.columnStart.left}
-        size={markers.cellRect.y - markers.gridRect.y}
+        top={rulerMarkerData.columnStart.top}
+        left={rulerMarkerData.columnStart.left}
+        size={rulerMarkerData.cellRect.y - rulerMarkerData.gridRect.y}
         orientation='vertical'
       />
       <GridCellOffsetLine
-        top={markers.columnEnd.top}
-        left={markers.columnEnd.left}
-        size={markers.cellRect.y - markers.gridRect.y}
+        top={rulerMarkerData.columnEnd.top}
+        left={rulerMarkerData.columnEnd.left}
+        size={rulerMarkerData.cellRect.y - rulerMarkerData.gridRect.y}
         orientation='vertical'
       />
       <GridCellOffsetLine
-        top={markers.rowStart.top}
-        left={markers.rowStart.left}
-        size={markers.cellRect.x - markers.gridRect.x}
+        top={rulerMarkerData.rowStart.top}
+        left={rulerMarkerData.rowStart.left}
+        size={rulerMarkerData.cellRect.x - rulerMarkerData.gridRect.x}
         orientation='horizontal'
       />
       <GridCellOffsetLine
-        top={markers.rowEnd.top}
-        left={markers.rowEnd.left}
-        size={markers.cellRect.x - markers.gridRect.x}
+        top={rulerMarkerData.rowEnd.top}
+        left={rulerMarkerData.rowEnd.left}
+        size={rulerMarkerData.cellRect.x - rulerMarkerData.gridRect.x}
         orientation='horizontal'
       />
+
       {/* Cell outline */}
       <GridCellOutline
-        top={markers.cellRect.y}
-        left={markers.cellRect.x}
-        width={markers.cellRect.width + 1}
-        height={markers.cellRect.height + 1}
+        top={rulerMarkerData.cellRect.y}
+        left={rulerMarkerData.cellRect.x}
+        width={rulerMarkerData.cellRect.width + 1}
+        height={rulerMarkerData.cellRect.height + 1}
       />
     </React.Fragment>
   )
 })
 RulerMarkers.displayName = 'RulerMarkers'
 
+interface GridRulerProps {
+  axis: 'row' | 'column'
+  gridRect: CanvasRectangle
+  cellFrames: GridCellGlobalFrames | null
+  rulerVisible: 'visible' | 'not-visible'
+}
+
+const GridRuler = React.memo<React.PropsWithChildren<GridRulerProps>>(
+  ({ axis, gridRect, rulerVisible, cellFrames, children }) => {
+    const colorTheme = useColorTheme()
+    const scale = useEditorState(
+      Substores.canvas,
+      (store) => store.editor.canvas.scale,
+      'GridRuler scale',
+    )
+
+    // Make sure the ruler extends to cover all the cells and not just the grid dimensions.
+    const cellMaxRect = React.useMemo(() => {
+      return boundingRectangleArray([gridRect, ...(cellFrames?.flat() ?? [])]) ?? gridRect
+    }, [cellFrames, gridRect])
+
+    const columnLeft = gridRect.x
+    const rowLeft = gridRect.x - RulerMarkerIconSize / scale
+    const left = axis === 'row' ? rowLeft : columnLeft
+
+    const columnTop = gridRect.y - RulerMarkerIconSize / scale
+    const rowTop = gridRect.y
+    const top = axis === 'row' ? rowTop : columnTop
+
+    const width = axis === 'row' ? RulerMarkerIconSize / scale : cellMaxRect.width
+    const height = axis === 'row' ? cellMaxRect.height : RulerMarkerIconSize / scale
+
+    return (
+      <div
+        data-testid={`ruler-${axis}`}
+        style={{
+          position: 'absolute',
+          left: left,
+          top: top,
+          width: width,
+          height: height,
+          backgroundColor: rulerVisible === 'visible' ? colorTheme.white.value : 'transparent',
+          outlineWidth: '0.2px',
+          outlineStyle: 'solid',
+          outlineColor: rulerVisible === 'visible' ? colorTheme.black.value : 'transparent',
+        }}
+      >
+        {children}
+      </div>
+    )
+  },
+)
+GridRuler.displayName = 'GridRuler'
+
 const RulerMarkerIndicator = React.memo(
   (props: {
+    gridRect: CanvasRectangle
     parentGrid: GridContainerProperties
     marker: RulerMarkerPositionData
     axis: 'row' | 'column'
+    testID: string
+    visible: 'visible' | 'not-visible'
+    onMouseDown?: (event: React.MouseEvent) => void
   }) => {
     const colorTheme = useColorTheme()
 
-    const markerType = getRulerMarkerType({
-      position: props.marker.position,
-      bound: props.marker.bound,
-    })
-    const markerIcon = rulerMarkerIcons[markerType][props.axis]
-
     const canvasScale = useEditorState(
       Substores.canvasOffset,
       (store) => store.editor.canvas.scale,
       'RulerMarkerIndicator canvasScale',
     )
 
-    const scaledTop = props.marker.top * canvasScale
-    const top =
-      scaledTop -
-      skewMarkerPosition(props.axis === 'column', props.axis, props.marker.bound, markerType)
+    const markerType = getRulerMarkerType(props.marker)
+    const markerColor = getRulerMarkerColor(colorTheme, props.marker)
+    const markerIcon = rulerMarkerIcons[markerType][props.axis](markerColor, canvasScale)
+
+    const scaledTop =
+      props.axis === 'row'
+        ? props.marker.top - props.gridRect.y - RulerMarkerIconSize / canvasScale / 2 + 0.5
+        : 0
 
-    const scaledLeft = props.marker.left * canvasScale
-    const left =
-      scaledLeft -
-      skewMarkerPosition(props.axis === 'row', props.axis, props.marker.bound, markerType)
+    const scaledLeft =
+      props.axis === 'column'
+        ? props.marker.left - props.gridRect.x - RulerMarkerIconSize / canvasScale / 2 + 0.5
+        : 0
 
     const labelText = React.useMemo(() => {
       if (props.marker.position == null) {
@@ -2388,16 +2649,17 @@ const RulerMarkerIndicator = React.memo(
 
     return (
       <div
+        data-testid={props.testID}
         style={{
           position: 'absolute',
-          top: top,
-          left: left,
+          top: scaledTop,
+          left: scaledLeft,
           color: colorTheme.primary.value,
-          maxHeight: rulerMarkerIconSize,
-          maxWidth: rulerMarkerIconSize,
-          display: 'flex',
-          zoom: 1 / canvasScale,
+          height: RulerMarkerIconSize / canvasScale,
+          width: RulerMarkerIconSize / canvasScale,
+          display: props.visible === 'visible' ? 'flex' : 'none',
         }}
+        onMouseDown={props.onMouseDown}
         css={{
           [`> .${labelClass}`]: {
             visibility: 'hidden',
@@ -2417,16 +2679,17 @@ const RulerMarkerIndicator = React.memo(
             style={{
               position: 'absolute',
               background: colorTheme.primary.value,
-              borderRadius: 2,
-              padding: '3px 6px',
+              borderRadius: 2 / canvasScale,
+              padding: `${3 / canvasScale}px ${6 / canvasScale}px`,
               color: colorTheme.white.value,
-              height: 20,
+              height: 20 / canvasScale,
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              top: props.axis === 'column' ? -23 : 0,
+              top: props.axis === 'column' ? -23 / canvasScale : 0,
               left: props.axis === 'column' ? 0 : undefined,
-              right: props.axis === 'row' ? rulerMarkerIconSize + 1 : undefined,
+              right: props.axis === 'row' ? (RulerMarkerIconSize + 1) / canvasScale : undefined,
+              fontSize: 11 / canvasScale,
             }}
           >
             {labelText}
@@ -2438,15 +2701,14 @@ const RulerMarkerIndicator = React.memo(
 )
 RulerMarkerIndicator.displayName = 'RulerMarkerIndicator'
 
-function getRulerMarkerType(props: {
-  position: GridPositionOrSpan | null
-  bound: 'start' | 'end'
-}): RulerMarkerType {
-  const isAuto = isAutoGridPin(props.position)
-  const isSpanStart = props.bound === 'start' && isGridSpan(props.position)
-  const isSpanEnd = props.bound === 'end' && isGridSpan(props.position)
+function getRulerMarkerType(marker: RulerMarkerPositionData): RulerMarkerType {
+  const isAuto = isAutoGridPin(marker.position)
+  const isSpanStart = marker.bound === 'start' && isGridSpan(marker.position)
+  const isSpanEnd = marker.bound === 'end' && isGridSpan(marker.position)
 
-  if (isSpanStart) {
+  if (marker.markerType === 'other' || marker.markerType === 'target') {
+    return 'auto-short'
+  } else if (isSpanStart) {
     return 'span-start'
   } else if (isSpanEnd) {
     return 'span-end'
@@ -2457,6 +2719,19 @@ function getRulerMarkerType(props: {
   }
 }
 
+function getRulerMarkerColor(colorTheme: ThemeObject, marker: RulerMarkerPositionData): UtopiColor {
+  switch (marker.markerType) {
+    case 'selected':
+      return colorTheme.primary
+    case 'target':
+      return colorTheme.brandPurple
+    case 'other':
+      return colorTheme.grey65
+    default:
+      assertNever(marker.markerType)
+  }
+}
+
 function getCellCanvasWidthFromBounds(
   grid: CanvasRectangle[][],
   index: number,
@@ -2527,74 +2802,6 @@ export const GridHelperControls = () => {
 }
 GridHelperControls.displayName = 'GridHelperControls'
 
-// This function returns the amount of pixels used to adjust the position of
-// individual ruler markers, which need specific skews based on their shape.
-function skewMarkerPosition(
-  isOnTheSameAxis: boolean,
-  axis: 'column' | 'row',
-  bound: 'start' | 'end',
-  markerType: RulerMarkerType,
-): number {
-  if (isOnTheSameAxis) {
-    return rulerMarkerIconSize
-  }
-
-  // span-end triangle, on the column
-  const spanEndColumn = axis === 'column' && markerType === 'span-end'
-  if (spanEndColumn) {
-    return 9
-  }
-  // pinned triangle, on the column
-  const pinnedEndColumn = axis === 'column' && markerType === 'pinned' && bound === 'end'
-  if (pinnedEndColumn) {
-    return 5
-  }
-  // any other ending marker, on the column
-  const endColumn = bound === 'end' && axis === 'column'
-  if (endColumn) {
-    return 1
-  }
-
-  // span-end triangle, on the row
-  const spanEndRow = axis === 'row' && markerType === 'span-end'
-  if (spanEndRow) {
-    return 9
-  }
-  // any other ending marker, on the row
-  const endRow = bound === 'end' && axis === 'row'
-  if (endRow) {
-    return 4
-  }
-
-  // span-start triangle, on the column
-  const spanStartColumn = axis === 'column' && markerType === 'span-start'
-  if (spanStartColumn) {
-    return 0
-  }
-  const pinnedStartColumn = axis === 'column' && markerType === 'pinned' && bound === 'start'
-  if (pinnedStartColumn) {
-    return 5
-  }
-  // any starting marker, on the column
-  const startColumn = bound === 'start' && axis === 'column'
-  if (startColumn) {
-    return 1
-  }
-
-  // span-start starting triangle, on the row
-  const spanStartRow = axis === 'row' && markerType === 'span-start'
-  if (spanStartRow) {
-    return 0
-  }
-  // any other starting marker, on the row
-  const startRow = bound === 'start' && axis === 'row'
-  if (startRow) {
-    return 4
-  }
-
-  return 0
-}
-
 const GridCellOffsetLine = React.memo(
   (props: { top: number; left: number; size: number; orientation: 'vertical' | 'horizontal' }) => {
     const colorTheme = useColorTheme()

From fbde4f13c2eda6c99fcecdc24fa851af6d2882a8 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 2 Dec 2024 17:28:17 +0100
Subject: [PATCH 254/272] Cell resize via ruler markers (#6689)

**Problem:**

It should be possible to resize grid cells using the ruler markers.

**Fix:**

When dragging a ruler marker:
1. start a new interaction for the new resize strategy variant which
detects the closest cell on a given axis
2. freeze the existing markers so they don't move until the interaction
is complete
3. show a pink snap line on the interaction target, with a label on top
indicating the pin value
4. show a live offset line following the drag position

**Notes:**
- The snap line positioning might be tweaked in the future based on what
we decide to do with "duplicate" ruler notches.
- The resize is only enabled for stretching grid items, same as we do
with the regular resize. We should (probably?) incrementally add the
ability to resize cells even if their child is not stretching when using
the rulers.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6688
---
 .../ui-jsx-canvas-bugs.spec.tsx.snap          |   2 +
 .../__snapshots__/ui-jsx-canvas.spec.tsx.snap | 257 +++++++++++++++
 .../canvas-strategies/canvas-strategies.tsx   |   4 +-
 .../canvas-strategies/interaction-state.ts    |  15 +
 .../strategies/grid-cell-bounds.ts            |   9 +-
 ...change-location-strategy.spec.browser2.tsx |   2 +-
 ...e-element-ruler-strategy.spec.browser2.tsx | 178 ++++++++++
 .../grid-resize-element-ruler-strategy.ts     | 312 ++++++++++++++++++
 .../grid-resize-element-strategy.ts           |  24 +-
 .../canvas/controls/grid-controls.tsx         | 257 ++++++++++++++-
 editor/src/components/canvas/dom-walker.ts    |  13 +
 .../store-deep-equality-instances-3.spec.ts   |   7 +
 .../store/store-deep-equality-instances.ts    |  20 +-
 editor/src/core/shared/element-template.ts    |   9 +
 14 files changed, 1081 insertions(+), 28 deletions(-)
 create mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.spec.browser2.tsx
 create mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts

diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
index 4eba747dd39f..20a071cae079 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap
@@ -256,6 +256,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -428,6 +429,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
diff --git a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
index f69857b8831f..21d4cc888da1 100644
--- a/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
+++ b/editor/src/components/canvas/__snapshots__/ui-jsx-canvas.spec.tsx.snap
@@ -297,6 +297,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -492,6 +493,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -982,6 +984,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -1321,6 +1324,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -1515,6 +1519,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -1709,6 +1714,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -1903,6 +1909,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -2203,6 +2210,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -2398,6 +2406,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -2699,6 +2708,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -2998,6 +3008,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -3193,6 +3204,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -3368,6 +3380,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -3685,6 +3698,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -3880,6 +3894,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -4282,6 +4297,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -4650,6 +4666,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -4873,6 +4890,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -5062,6 +5080,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -5285,6 +5304,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -5474,6 +5494,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -5697,6 +5718,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -5886,6 +5908,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -6254,6 +6277,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -6449,6 +6473,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -7072,6 +7097,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -7661,6 +7687,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -8090,6 +8117,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -8485,6 +8513,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -8728,6 +8757,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -8937,6 +8967,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -9180,6 +9211,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -9389,6 +9421,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -9632,6 +9665,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -9841,6 +9875,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -10270,6 +10305,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -10665,6 +10701,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -10908,6 +10945,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -11117,6 +11155,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -11360,6 +11399,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -11569,6 +11609,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -11812,6 +11853,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -12021,6 +12063,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -12450,6 +12493,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -12845,6 +12889,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -13088,6 +13133,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -13297,6 +13343,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -13540,6 +13587,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -13749,6 +13797,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -13992,6 +14041,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -14201,6 +14251,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -14512,6 +14563,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -14707,6 +14759,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -14943,6 +14996,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -15119,6 +15173,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -15295,6 +15350,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -15594,6 +15650,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -15789,6 +15846,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -16077,6 +16135,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -16394,6 +16453,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -16589,6 +16649,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -17008,6 +17069,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -17392,6 +17454,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -17635,6 +17698,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -17878,6 +17942,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -18121,6 +18186,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -18438,6 +18504,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -18633,6 +18700,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -19052,6 +19120,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -19436,6 +19505,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -19679,6 +19749,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -19922,6 +19993,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -20165,6 +20237,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -20476,6 +20549,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -20671,6 +20745,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -20907,6 +20982,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -21083,6 +21159,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -21259,6 +21336,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -21570,6 +21648,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -21765,6 +21844,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -22106,6 +22186,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -22413,6 +22494,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -22590,6 +22672,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -22767,6 +22850,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -23094,6 +23178,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -23304,6 +23389,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -23793,6 +23879,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -24101,6 +24188,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -24427,6 +24515,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -24637,6 +24726,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -25126,6 +25216,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -25434,6 +25525,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -25761,6 +25853,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -25971,6 +26064,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -26511,6 +26605,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -26870,6 +26965,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -27197,6 +27293,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -27407,6 +27504,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -27947,6 +28045,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -28306,6 +28405,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -28604,6 +28704,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -28799,6 +28900,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -28974,6 +29076,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -29395,6 +29498,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -29590,6 +29694,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -31543,6 +31648,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -33042,6 +33148,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -34507,6 +34614,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -35154,6 +35262,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -35529,6 +35638,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -36176,6 +36286,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -36551,6 +36662,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -37198,6 +37310,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -37573,6 +37686,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -38258,6 +38372,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -38675,6 +38790,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -39360,6 +39476,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -39777,6 +39894,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -40462,6 +40580,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -40879,6 +40998,7 @@ export var storyboard = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -41200,6 +41320,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -41395,6 +41516,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -41665,6 +41787,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -41858,6 +41981,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -42051,6 +42175,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -42351,6 +42476,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -42546,6 +42672,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -42788,6 +42915,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -43087,6 +43215,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -43282,6 +43411,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -43628,6 +43758,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -43973,6 +44104,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -44168,6 +44300,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -44471,6 +44604,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -44723,6 +44857,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -44924,6 +45059,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -45251,6 +45387,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -45461,6 +45598,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -45841,6 +45979,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -46043,6 +46182,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -46523,6 +46663,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -46733,6 +46874,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -47115,6 +47257,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -47317,6 +47460,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -47728,6 +47872,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -47922,6 +48067,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -48741,6 +48887,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -48918,6 +49065,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -49095,6 +49243,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -49272,6 +49421,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -49451,6 +49601,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -49628,6 +49779,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -49805,6 +49957,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -49982,6 +50135,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -50227,6 +50381,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -50433,6 +50588,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -50612,6 +50768,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -50789,6 +50946,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -50966,6 +51124,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -51143,6 +51302,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -51320,6 +51480,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -51497,6 +51658,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -51674,6 +51836,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -51851,6 +52014,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -52028,6 +52192,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -52205,6 +52370,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -52382,6 +52548,7 @@ export var App = (props) => {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -52699,6 +52866,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -52894,6 +53062,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -53313,6 +53482,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -53697,6 +53867,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -53940,6 +54111,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -54183,6 +54355,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -54426,6 +54599,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -54743,6 +54917,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -54938,6 +55113,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -55356,6 +55532,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -55739,6 +55916,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -55982,6 +56160,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -56225,6 +56404,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -56468,6 +56648,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -56785,6 +56966,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -56980,6 +57162,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -57442,6 +57625,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -57869,6 +58053,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -58112,6 +58297,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -58355,6 +58541,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -58598,6 +58785,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -58921,6 +59109,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -59131,6 +59320,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -59420,6 +59610,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -59622,6 +59813,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -59923,6 +60115,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -60095,6 +60288,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -60315,6 +60509,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -60497,6 +60692,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -60679,6 +60875,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -60967,6 +61164,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -61139,6 +61337,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -61417,6 +61616,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -61637,6 +61837,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -61820,6 +62021,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -62096,6 +62298,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -62268,6 +62471,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -62556,6 +62760,7 @@ export var storyboard = (
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -62753,6 +62958,7 @@ export var storyboard = (
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -63029,6 +63235,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -63201,6 +63408,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -63376,6 +63584,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -63660,6 +63869,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -63832,6 +64042,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -64085,6 +64296,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -64287,6 +64499,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -64565,6 +64778,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -64737,6 +64951,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -65087,6 +65302,7 @@ export var storyboard = (
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -65303,6 +65519,7 @@ export var storyboard = (
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -65519,6 +65736,7 @@ export var storyboard = (
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -65796,6 +66014,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -65968,6 +66187,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -66160,6 +66380,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -66482,6 +66703,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -66677,6 +66899,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -67209,6 +67432,7 @@ export var storyboard = (
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -67391,6 +67615,7 @@ export var storyboard = (
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -67687,6 +67912,7 @@ export var storyboard = (
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -67981,6 +68207,7 @@ export var storyboard = (
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -68199,6 +68426,7 @@ export var storyboard = (
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -68415,6 +68643,7 @@ export var storyboard = (
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -68719,6 +68948,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -68914,6 +69144,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -69138,6 +69369,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -69331,6 +69563,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -69633,6 +69866,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -69828,6 +70062,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -70003,6 +70238,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -70335,6 +70571,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -70530,6 +70767,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -70974,6 +71212,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -71383,6 +71622,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -71640,6 +71880,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -71867,6 +72108,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -72060,6 +72302,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -72317,6 +72560,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -72544,6 +72788,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -72737,6 +72982,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -72994,6 +73240,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -73221,6 +73468,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -73414,6 +73662,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -73715,6 +73964,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -73910,6 +74160,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -74085,6 +74336,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -74396,6 +74648,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -74591,6 +74844,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -74834,6 +75088,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -75047,6 +75302,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
@@ -75230,6 +75486,7 @@ Object {
       "parentFlexDirection": null,
       "parentFlexGap": 0,
       "parentGridCellGlobalFrames": null,
+      "parentGridFrame": null,
       "parentHugsOnMainAxis": false,
       "parentJustifyContent": null,
       "parentLayoutSystem": "flow",
diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
index 5f31076f29bf..ce32f1cacebc 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -71,6 +71,7 @@ import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { gridChangeElementLocationStrategy } from './strategies/grid-change-element-location-strategy'
 import { resizeGridStrategy } from './strategies/resize-grid-strategy'
 import { gridResizeElementStrategy } from './strategies/grid-resize-element-strategy'
+import { gridResizeElementRulerStrategy } from './strategies/grid-resize-element-ruler-strategy'
 import { gridChangeElementLocationDuplicateStrategy } from './strategies/grid-change-element-location-duplicate-strategy'
 import { setGridGapStrategy } from './strategies/set-grid-gap-strategy'
 import type { CanvasCommand } from '../commands/commands'
@@ -141,6 +142,7 @@ const resizeStrategies: MetaCanvasStrategy = (
       basicResizeStrategy,
       resizeGridStrategy,
       gridResizeElementStrategy,
+      gridResizeElementRulerStrategy,
     ],
   )
 }
@@ -680,7 +682,7 @@ export function combineApplicableControls(
   let gridControlsTargets: Map<WhenToShowControl, Array<GridIdentifier>> = new Map()
   for (const control of gridControlsInstances) {
     if (isGridControlsProps(control.props)) {
-      const possibleTargets = gridControlsTargets.get(control.show)
+      let possibleTargets = gridControlsTargets.get(control.show)
       if (possibleTargets == null) {
         gridControlsTargets.set(control.show, control.props.targets)
       } else {
diff --git a/editor/src/components/canvas/canvas-strategies/interaction-state.ts b/editor/src/components/canvas/canvas-strategies/interaction-state.ts
index d781e4a7f9a6..90d223c210b6 100644
--- a/editor/src/components/canvas/canvas-strategies/interaction-state.ts
+++ b/editor/src/components/canvas/canvas-strategies/interaction-state.ts
@@ -689,6 +689,20 @@ export function gridResizeHandle(id: string, edge: GridResizeEdge): GridResizeHa
   }
 }
 
+export interface GridResizeRulerHandle {
+  type: 'GRID_RESIZE_RULER_HANDLE'
+  id: string
+  edge: GridResizeEdge
+}
+
+export function gridResizeRulerHandle(id: string, edge: GridResizeEdge): GridResizeRulerHandle {
+  return {
+    type: 'GRID_RESIZE_RULER_HANDLE',
+    id: id,
+    edge: edge,
+  }
+}
+
 export type CanvasControlType =
   | BoundingArea
   | ResizeHandle
@@ -701,6 +715,7 @@ export type CanvasControlType =
   | GridCellHandle
   | GridAxisHandle
   | GridResizeHandle
+  | GridResizeRulerHandle
 
 export function isDragToPan(
   interaction: InteractionSession | null,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
index 3d42495f0e96..0b6be8ac12dc 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts
@@ -98,10 +98,17 @@ export function getClosestGridCellToPoint(
   return closestCell
 }
 
+export type GridCellCoordBounds = {
+  column: number
+  row: number
+  width: number
+  height: number
+}
+
 export function getGridChildCellCoordBoundsFromCanvas(
   child: ElementInstanceMetadata,
   gridCellGlobalFrames: GridCellGlobalFrames,
-) {
+): GridCellCoordBounds | null {
   const cellFrame = child.globalFrame
   if (cellFrame == null || isInfinityRectangle(cellFrame) || gridCellGlobalFrames == null) {
     return null
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
index 5dcfb2072f27..61c0463bcab0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
@@ -1,6 +1,6 @@
 import * as EP from '../../../../core/shared/element-path'
 import { offsetPoint, windowPoint } from '../../../../core/shared/math-utils'
-import { selectComponentsForTest, wait } from '../../../../utils/utils.test-utils'
+import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 import CanvasActions from '../../canvas-actions'
 import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
 import { mouseDownAtPoint, mouseMoveToPoint, mouseUpAtPoint } from '../../event-helpers.test-utils'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.spec.browser2.tsx
new file mode 100644
index 000000000000..351199046ddb
--- /dev/null
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.spec.browser2.tsx
@@ -0,0 +1,178 @@
+import {
+  selectComponentsForTest,
+  setFeatureForBrowserTestsUseInDescribeBlockOnly,
+} from '../../../../utils/utils.test-utils'
+import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
+import * as EP from '../../../../core/shared/element-path'
+import {
+  RulerMarkerColumnEndTestId,
+  RulerMarkerRowEndTestId,
+  RulerMarkerRowStartTestId,
+} from '../../controls/grid-controls'
+import { mouseDownAtPoint, mouseMoveToPoint, mouseUpAtPoint } from '../../event-helpers.test-utils'
+
+describe('grid resize element ruler strategy', () => {
+  setFeatureForBrowserTestsUseInDescribeBlockOnly('Grid Ruler Markers', true)
+
+  it('can resize a pinned element horizontally', async () => {
+    const renderResult = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+    await selectComponentsForTest(renderResult, [EP.fromString('sb/grid/pinned')])
+
+    const control = await renderResult.renderedDOM.findByTestId(RulerMarkerColumnEndTestId)
+    const controlRect = control.getBoundingClientRect()
+    const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+    const endPoint = { x: controlRect.x + 200, y: controlRect.y + 5 }
+    await mouseDownAtPoint(control, startPoint)
+    await mouseMoveToPoint(control, endPoint)
+    await mouseUpAtPoint(control, endPoint)
+
+    const element = await renderResult.renderedDOM.findByTestId('pinned')
+    expect(element.style.gridColumn).toBe('2 / 4')
+    expect(element.style.gridRow).toBe('3')
+  })
+
+  it('can resize a pinned element vertically', async () => {
+    const renderResult = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+    await selectComponentsForTest(renderResult, [EP.fromString('sb/grid/pinned')])
+
+    const control = await renderResult.renderedDOM.findByTestId(RulerMarkerRowEndTestId)
+    const controlRect = control.getBoundingClientRect()
+    const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+    const endPoint = { x: controlRect.x + 5, y: controlRect.y + 100 }
+    await mouseDownAtPoint(control, startPoint)
+    await mouseMoveToPoint(control, endPoint)
+    await mouseUpAtPoint(control, endPoint)
+
+    const element = await renderResult.renderedDOM.findByTestId('pinned')
+    expect(element.style.gridColumn).toBe('2')
+    expect(element.style.gridRow).toBe('3 / 5')
+  })
+
+  it('can resize a flow element horizontally', async () => {
+    const renderResult = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+    await selectComponentsForTest(renderResult, [EP.fromString('sb/grid/flow1')])
+
+    const control = await renderResult.renderedDOM.findByTestId(RulerMarkerColumnEndTestId)
+    const controlRect = control.getBoundingClientRect()
+    const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+    const endPoint = { x: controlRect.x + 200, y: controlRect.y + 5 }
+    await mouseDownAtPoint(control, startPoint)
+    await mouseMoveToPoint(control, endPoint)
+    await mouseUpAtPoint(control, endPoint)
+
+    const element = await renderResult.renderedDOM.findByTestId('flow1')
+    expect(element.style.gridColumn).toBe('span 2')
+    expect(element.style.gridRow).toBe('auto')
+  })
+
+  it('can resize a flow element vertically', async () => {
+    const renderResult = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+    await selectComponentsForTest(renderResult, [EP.fromString('sb/grid/flow1')])
+
+    const control = await renderResult.renderedDOM.findByTestId(RulerMarkerRowEndTestId)
+    const controlRect = control.getBoundingClientRect()
+    const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+    const endPoint = { x: controlRect.x + 5, y: controlRect.y + 100 }
+    await mouseDownAtPoint(control, startPoint)
+    await mouseMoveToPoint(control, endPoint)
+    await mouseUpAtPoint(control, endPoint)
+
+    const element = await renderResult.renderedDOM.findByTestId('flow1')
+    expect(element.style.gridColumn).toBe('auto')
+    expect(element.style.gridRow).toBe('span 2')
+  })
+
+  it('can resize a flow element into a pinned element', async () => {
+    const renderResult = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+    await selectComponentsForTest(renderResult, [EP.fromString('sb/grid/flow1')])
+
+    {
+      const control = await renderResult.renderedDOM.findByTestId(RulerMarkerRowEndTestId)
+      const controlRect = control.getBoundingClientRect()
+      const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+      const endPoint = { x: controlRect.x + 5, y: controlRect.y + 100 }
+      await mouseDownAtPoint(control, startPoint)
+      await mouseMoveToPoint(control, endPoint)
+      await mouseUpAtPoint(control, endPoint)
+
+      const element = await renderResult.renderedDOM.findByTestId('flow1')
+      expect(element.style.gridColumn).toBe('auto')
+      expect(element.style.gridRow).toBe('span 2')
+    }
+
+    {
+      const control = await renderResult.renderedDOM.findByTestId(RulerMarkerRowStartTestId)
+      const controlRect = control.getBoundingClientRect()
+      const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+      const endPoint = { x: controlRect.x + 5, y: controlRect.y + 100 }
+      await mouseDownAtPoint(control, startPoint)
+      await mouseMoveToPoint(control, endPoint)
+      await mouseUpAtPoint(control, endPoint)
+
+      const element = await renderResult.renderedDOM.findByTestId('flow1')
+      expect(element.style.gridColumn).toBe('auto')
+      expect(element.style.gridRowEnd).toBe('3')
+    }
+  })
+})
+
+const ProjectCode = `
+import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <div
+      style={{
+        backgroundColor: '#aaaaaa33',
+        position: 'absolute',
+        left: 210,
+        top: 80,
+        width: 690,
+        height: 459,
+        display: 'grid',
+        gap: 10,
+        gridTemplateColumns: '1fr 1fr 1fr 1fr',
+        gridTemplateRows: '1fr 1fr 1fr 1fr',
+      }}
+      data-uid='grid'
+      data-testid='grid'
+    >
+      <div
+        style={{
+          backgroundColor: '#09f',
+          alignSelf: 'stretch',
+          justifySelf: 'stretch',
+        }}
+        data-uid='flow1'
+        data-testid='flow1'
+      />
+      <div
+        style={{
+          backgroundColor: '#0f9',
+          justifySelf: 'stretch',
+          alignSelf: 'stretch',
+        }}
+        data-uid='flow2'
+        data-testid='flow2'
+      />
+      <div
+        style={{
+          backgroundColor: '#f09',
+          gridColumn: 2,
+          gridRow: 3,
+          alignSelf: 'stretch',
+          justifySelf: 'stretch',
+        }}
+        data-uid='pinned'
+        data-testid='pinned'
+      />
+    </div>
+  </Storyboard>
+)
+`
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts
new file mode 100644
index 000000000000..877807b8e796
--- /dev/null
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts
@@ -0,0 +1,312 @@
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import { mapDropNulls } from '../../../../core/shared/array-utils'
+import * as EP from '../../../../core/shared/element-path'
+import type {
+  GridElementProperties,
+  GridPositionOrSpan,
+} from '../../../../core/shared/element-template'
+import { gridPositionValue, isGridPositionValue } from '../../../../core/shared/element-template'
+import type { CanvasPoint, CanvasRectangle, CanvasVector } from '../../../../core/shared/math-utils'
+import { canvasRectangle, isInfinityRectangle } from '../../../../core/shared/math-utils'
+import { assertNever } from '../../../../core/shared/utils'
+import { gridContainerIdentifier, gridItemIdentifier } from '../../../editor/store/editor-state'
+import { isCSSKeyword } from '../../../inspector/common/css-utils'
+import { isFillOrStretchModeAppliedOnAnySide } from '../../../inspector/inspector-common'
+import {
+  controlsForGridPlaceholders,
+  GridResizeControls,
+} from '../../controls/grid-controls-for-strategies'
+import type { CanvasStrategyFactory } from '../canvas-strategies'
+import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
+import type { InteractionCanvasState } from '../canvas-strategy-types'
+import {
+  getTargetPathsFromInteractionTarget,
+  emptyStrategyApplicationResult,
+  strategyApplicationResult,
+} from '../canvas-strategy-types'
+import type { GridResizeEdge, InteractionSession } from '../interaction-state'
+import type { GridCellCoordBounds } from './grid-cell-bounds'
+import { getGridChildCellCoordBoundsFromCanvas } from './grid-cell-bounds'
+import { getCommandsForGridItemPlacement } from './grid-helpers'
+import { normalizeGridElementPositionAfterResize } from './grid-resize-element-strategy'
+
+export const gridResizeElementRulerStrategy: CanvasStrategyFactory = (
+  canvasState: InteractionCanvasState,
+  interactionSession: InteractionSession | null,
+) => {
+  const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget)
+  if (selectedElements.length !== 1) {
+    return null
+  }
+
+  const selectedElement = selectedElements[0]
+  const selectedElementMetadata = MetadataUtils.findElementByElementPath(
+    canvasState.startingMetadata,
+    selectedElement,
+  )
+  if (selectedElementMetadata == null) {
+    return null
+  }
+  const isElementInsideGrid = MetadataUtils.isGridItem(
+    canvasState.startingMetadata,
+    selectedElement,
+  )
+  if (!isElementInsideGrid) {
+    return null
+  }
+
+  const selectedElementBounds = MetadataUtils.getFrameInCanvasCoords(
+    selectedElement,
+    canvasState.startingMetadata,
+  )
+  if (selectedElementBounds == null || isInfinityRectangle(selectedElementBounds)) {
+    return null
+  }
+
+  return {
+    id: 'GRID-CELL-RESIZE-RULER-STRATEGY',
+    name: 'Resize Grid Cell (ruler)',
+    descriptiveLabel: 'Resize Grid Cell (ruler)',
+    icon: {
+      category: 'tools',
+      type: 'pointer',
+    },
+    controlsToRender: [
+      {
+        control: GridResizeControls,
+        props: { target: gridContainerIdentifier(selectedElement) },
+        key: `grid-resize-controls-${EP.toString(selectedElement)}`,
+        show: 'always-visible',
+      },
+      controlsForGridPlaceholders(gridItemIdentifier(selectedElement)),
+    ],
+    fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_RESIZE_RULER_HANDLE', 1),
+    apply: () => {
+      if (
+        interactionSession == null ||
+        interactionSession.interactionData.type !== 'DRAG' ||
+        interactionSession.interactionData.drag == null ||
+        interactionSession.activeControl.type !== 'GRID_RESIZE_RULER_HANDLE'
+      ) {
+        return emptyStrategyApplicationResult
+      }
+
+      if (!isFillOrStretchModeAppliedOnAnySide(canvasState.startingMetadata, selectedElement)) {
+        // TODO this should be removed to support resizing cells that are not stretching
+        return emptyStrategyApplicationResult
+      }
+
+      const allCellBounds =
+        selectedElementMetadata.specialSizeMeasurements.parentGridCellGlobalFrames
+
+      if (allCellBounds == null) {
+        return emptyStrategyApplicationResult
+      }
+
+      const bounds = getGridChildCellCoordBoundsFromCanvas(selectedElementMetadata, allCellBounds)
+      if (bounds == null) {
+        return emptyStrategyApplicationResult
+      }
+
+      if (allCellBounds.length < 1) {
+        return emptyStrategyApplicationResult
+      }
+      const columns = allCellBounds[0]
+      const columnsWithAddition =
+        // count one extra column so we correctly find the eastmost bound
+        columns.concat(
+          canvasRectangle({
+            x: columns[columns.length - 1].x + columns[columns.length - 1].width,
+            y: columns[columns.length - 1].y,
+            width: 0,
+            height: 0,
+          }),
+        )
+      const closestHorizontal = getClosestCellAlongAxis(
+        columnsWithAddition,
+        'x',
+        interactionSession.interactionData.drag,
+        interactionSession.interactionData.dragStart,
+      )
+
+      const rows = mapDropNulls((r) => {
+        if (r.length < 1) {
+          return null
+        }
+        return r[0]
+      }, allCellBounds)
+      if (rows.length < 1) {
+        return emptyStrategyApplicationResult
+      }
+      const rowsWithAddition =
+        // count one extra row so we correctly find the southmost bound
+        rows.concat(
+          canvasRectangle({
+            x: rows[rows.length - 1].x,
+            y: rows[rows.length - 1].y + rows[rows.length - 1].height,
+            width: 0,
+            height: 0,
+          }),
+        )
+      const closestVertical = getClosestCellAlongAxis(
+        rowsWithAddition,
+        'y',
+        interactionSession.interactionData.drag,
+        interactionSession.interactionData.dragStart,
+      )
+
+      const elementGridPropertiesFromProps =
+        selectedElementMetadata.specialSizeMeasurements.elementGridPropertiesFromProps
+
+      const resizedProps = getResizedElementProperties(
+        interactionSession.activeControl.edge,
+        selectedElementMetadata.specialSizeMeasurements.elementGridProperties,
+        bounds,
+        closestHorizontal,
+        closestVertical,
+      )
+
+      const columnCount = getCellsCount(resizedProps.gridColumnStart, resizedProps.gridColumnEnd)
+      const rowCount = getCellsCount(resizedProps.gridRowStart, resizedProps.gridRowEnd)
+
+      const normalizedGridProps: GridElementProperties = {
+        gridColumnStart: normalizeGridElementPositionAfterResize(
+          elementGridPropertiesFromProps.gridColumnStart,
+          resizedProps.gridColumnStart,
+          columnCount ?? bounds.width,
+          'start',
+          elementGridPropertiesFromProps.gridColumnEnd,
+          resizedProps.gridColumnEnd,
+          interactionSession.activeControl.edge,
+        ),
+        gridColumnEnd: normalizeGridElementPositionAfterResize(
+          elementGridPropertiesFromProps.gridColumnEnd,
+          resizedProps.gridColumnEnd,
+          columnCount ?? bounds.width,
+          'end',
+          elementGridPropertiesFromProps.gridColumnStart,
+          resizedProps.gridColumnStart,
+          interactionSession.activeControl.edge,
+        ),
+        gridRowStart: normalizeGridElementPositionAfterResize(
+          elementGridPropertiesFromProps.gridRowStart,
+          resizedProps.gridRowStart,
+          rowCount ?? bounds.height,
+          'start',
+          elementGridPropertiesFromProps.gridRowEnd,
+          resizedProps.gridRowEnd,
+          interactionSession.activeControl.edge,
+        ),
+        gridRowEnd: normalizeGridElementPositionAfterResize(
+          elementGridPropertiesFromProps.gridRowEnd,
+          resizedProps.gridRowEnd,
+          rowCount ?? bounds.height,
+          'end',
+          elementGridPropertiesFromProps.gridRowStart,
+          resizedProps.gridRowStart,
+          interactionSession.activeControl.edge,
+        ),
+      }
+
+      const gridTemplate =
+        selectedElementMetadata.specialSizeMeasurements.parentContainerGridProperties
+
+      return strategyApplicationResult(
+        getCommandsForGridItemPlacement(selectedElement, gridTemplate, normalizedGridProps),
+        [EP.parentPath(selectedElement), selectedElement],
+      )
+    },
+  }
+}
+
+function getClosestCellAlongAxis(
+  cells: CanvasRectangle[],
+  axis: 'x' | 'y',
+  drag: CanvasVector,
+  dragStart: CanvasPoint,
+): number | null {
+  let closest: number | null = null
+  let minDist = Infinity
+  for (let i = 0; i < cells.length; i++) {
+    const cell = cells[i]
+    const position = drag[axis] + dragStart[axis]
+    const dist = Math.abs(cell[axis] - position)
+    if (dist < minDist) {
+      minDist = dist
+      closest = i + 1 // plus one because it's a grid pin, so it's 1-indexed
+    }
+  }
+  return closest
+}
+
+function getResizedElementProperties(
+  edge: GridResizeEdge,
+  initial: GridElementProperties,
+  bounds: GridCellCoordBounds,
+  closestHorizontal: number | null,
+  closestVertical: number | null,
+): GridElementProperties {
+  function maybeAuto(
+    position: GridPositionOrSpan | null,
+    valueIfAuto: number,
+  ): GridPositionOrSpan | null {
+    if (isCSSKeyword(position) && position.value === 'auto') {
+      return gridPositionValue(valueIfAuto)
+    }
+    return position
+  }
+
+  switch (edge) {
+    case 'column-end':
+      return {
+        ...initial,
+        gridColumnEnd:
+          closestHorizontal != null
+            ? gridPositionValue(Math.max(bounds.column + 1, closestHorizontal))
+            : initial.gridColumnEnd,
+        gridColumnStart: maybeAuto(initial.gridColumnStart, bounds.column),
+      }
+    case 'column-start':
+      return {
+        ...initial,
+        gridColumnStart:
+          closestHorizontal != null
+            ? gridPositionValue(Math.min(bounds.column + bounds.width - 1, closestHorizontal))
+            : initial.gridColumnStart,
+        gridColumnEnd: maybeAuto(initial.gridColumnEnd, bounds.column + bounds.width),
+      }
+    case 'row-end':
+      return {
+        ...initial,
+        gridRowEnd:
+          closestVertical != null
+            ? gridPositionValue(Math.max(bounds.row + 1, closestVertical))
+            : initial.gridRowEnd,
+        gridRowStart: maybeAuto(initial.gridRowStart, bounds.row),
+      }
+    case 'row-start':
+      return {
+        ...initial,
+        gridRowStart:
+          closestVertical != null
+            ? gridPositionValue(Math.min(bounds.row + bounds.height - 1, closestVertical))
+            : initial.gridRowStart,
+        gridRowEnd: maybeAuto(initial.gridRowEnd, bounds.row + bounds.height),
+      }
+    default:
+      assertNever(edge)
+  }
+}
+
+function getCellsCount(
+  start: GridPositionOrSpan | null,
+  end: GridPositionOrSpan | null,
+): number | null {
+  if (isGridPositionValue(start) && start.numericalPosition != null) {
+    if (isGridPositionValue(end) && end.numericalPosition != null) {
+      return end.numericalPosition - start.numericalPosition
+    }
+    return start.numericalPosition
+  }
+  return null
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 95047968c676..09c8a5ea3003 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -3,9 +3,12 @@ import * as EP from '../../../../core/shared/element-path'
 import type {
   GridElementProperties,
   GridPositionOrSpan,
-  GridPositionValue,
 } from '../../../../core/shared/element-template'
-import { gridSpanNumeric, isGridSpan } from '../../../../core/shared/element-template'
+import {
+  gridSpanNumeric,
+  isGridPositionValue,
+  isGridSpan,
+} from '../../../../core/shared/element-template'
 import {
   type CanvasRectangle,
   isInfinityRectangle,
@@ -131,7 +134,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         gridPropsNumeric.gridRowStart.numericalPosition
 
       const gridProps: GridElementProperties = {
-        gridColumnStart: normalizePositionAfterResize(
+        gridColumnStart: normalizeGridElementPositionAfterResize(
           elementGridPropertiesFromProps.gridColumnStart,
           gridPropsNumeric.gridColumnStart,
           columnCount,
@@ -140,7 +143,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
           gridPropsNumeric.gridColumnEnd,
           interactionSession.activeControl.edge,
         ),
-        gridColumnEnd: normalizePositionAfterResize(
+        gridColumnEnd: normalizeGridElementPositionAfterResize(
           elementGridPropertiesFromProps.gridColumnEnd,
           gridPropsNumeric.gridColumnEnd,
           columnCount,
@@ -149,7 +152,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
           gridPropsNumeric.gridColumnStart,
           interactionSession.activeControl.edge,
         ),
-        gridRowStart: normalizePositionAfterResize(
+        gridRowStart: normalizeGridElementPositionAfterResize(
           elementGridPropertiesFromProps.gridRowStart,
           gridPropsNumeric.gridRowStart,
           rowCount,
@@ -158,7 +161,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
           gridPropsNumeric.gridRowEnd,
           interactionSession.activeControl.edge,
         ),
-        gridRowEnd: normalizePositionAfterResize(
+        gridRowEnd: normalizeGridElementPositionAfterResize(
           elementGridPropertiesFromProps.gridRowEnd,
           gridPropsNumeric.gridRowEnd,
           rowCount,
@@ -171,7 +174,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
 
       return strategyApplicationResult(
         getCommandsForGridItemPlacement(selectedElement, gridTemplate, gridProps),
-        [EP.parentPath(selectedElement)],
+        [EP.parentPath(selectedElement), selectedElement],
       )
     },
   }
@@ -221,13 +224,13 @@ function getNewGridPropsFromResizeBox(
     may have been there before the resize, and/or default it to 'auto' when it would become redundant.
     If the positions match a flow configuration, give priority to span notation.
 */
-function normalizePositionAfterResize(
+export function normalizeGridElementPositionAfterResize(
   position: GridPositionOrSpan | null,
-  resizedPosition: GridPositionValue,
+  resizedPosition: GridPositionOrSpan | null,
   size: number, // the number of cols/rows the cell occupies
   bound: 'start' | 'end',
   counterpart: GridPositionOrSpan | null,
-  counterpartResizedPosition: GridPositionValue,
+  counterpartResizedPosition: GridPositionOrSpan | null,
   edge: GridResizeEdge,
 ): GridPositionOrSpan | null {
   function isFlowResizeOnBound(
@@ -258,6 +261,7 @@ function normalizePositionAfterResize(
 
   if (
     isGridSpan(counterpart) &&
+    isGridPositionValue(counterpartResizedPosition) &&
     counterpartResizedPosition.numericalPosition === 1 &&
     bound === 'end'
   ) {
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 10f860cac8eb..682a61d03e52 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -22,6 +22,7 @@ import type {
 } from '../../../core/shared/element-template'
 import {
   isGridAutoOrTemplateDimensions,
+  isGridPositionValue,
   isGridSpan,
   type GridAutoOrTemplateBase,
 } from '../../../core/shared/element-template'
@@ -33,6 +34,7 @@ import {
   isFiniteRectangle,
   isInfinityRectangle,
   nullIfInfinity,
+  offsetPoint,
   pointsEqual,
   scaleRect,
   windowPoint,
@@ -62,6 +64,7 @@ import {
 } from '../../editor/store/store-hook'
 import type { GridDimension, GridDiscreteDimension } from '../../inspector/common/css-utils'
 import {
+  isCSSKeyword,
   isDynamicGridRepeat,
   isGridCSSRepeat,
   printCSSNumberWithDefaultUnit,
@@ -74,6 +77,7 @@ import {
   gridAxisHandle,
   gridCellHandle,
   gridResizeHandle,
+  gridResizeRulerHandle,
 } from '../canvas-strategies/interaction-state'
 import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
 import {
@@ -2197,7 +2201,17 @@ interface RulerMarkersProps {
   path: ElementPath
 }
 
+export const RulerMarkerColumnStartTestId = 'ruler-marker-column-start'
+export const RulerMarkerColumnEndTestId = 'ruler-marker-column-end'
+export const RulerMarkerRowStartTestId = 'ruler-marker-row-start'
+export const RulerMarkerRowEndTestId = 'ruler-marker-row-end'
+
 const RulerMarkers = React.memo((props: RulerMarkersProps) => {
+  const dispatch = useDispatch()
+
+  const [frozenMarkers, setFrozenMarkers] = React.useState<RulerMarkerData | null>(null)
+  const [showExtraMarkers, setShowExtraMarkers] = React.useState<'row' | 'column' | null>(null)
+
   const gridRect: CanvasRectangle | null = useEditorState(
     Substores.metadata,
     (store) => {
@@ -2394,36 +2408,95 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
     'RulerMarkers markers',
   )
 
-  const [showExtraMarkers, setShowExtraMarkers] = React.useState<'row' | 'column' | null>(null)
+  const canvasScale = useEditorState(
+    Substores.canvasOffset,
+    (store) => store.editor.canvas.scale,
+    'RulerMarkers canvasScale',
+  )
+
+  const dragRef = useRefEditorState((store) =>
+    store.editor.canvas.interactionSession?.activeControl.type === 'GRID_RESIZE_RULER_HANDLE' &&
+    store.editor.canvas.interactionSession?.interactionData.type === 'DRAG' &&
+    store.editor.canvas.interactionSession?.interactionData.drag != null
+      ? offsetPoint(
+          store.editor.canvas.interactionSession?.interactionData.dragStart,
+          store.editor.canvas.interactionSession?.interactionData.drag,
+        )
+      : null,
+  )
+
+  const resizeControlRef = useRefEditorState((store) =>
+    store.editor.canvas.interactionSession?.activeControl.type !== 'GRID_RESIZE_RULER_HANDLE'
+      ? null
+      : store.editor.canvas.interactionSession.activeControl,
+  )
+
+  const canvasOffsetRef = useRefEditorState((store) => store.editor.canvas.roundedCanvasOffset)
+
+  const startResizeInteraction = React.useCallback(
+    (uid: string, edge: GridResizeEdge) => (e: React.MouseEvent) => {
+      e.stopPropagation()
+
+      const start = windowToCanvasCoordinates(
+        canvasScale,
+        canvasOffsetRef.current,
+        windowPoint({ x: e.nativeEvent.x, y: e.nativeEvent.y }),
+      )
+      dispatch([
+        CanvasActions.createInteractionSession(
+          createInteractionViaMouse(
+            start.canvasPositionRounded,
+            Modifier.modifiersForEvent(e),
+            gridResizeRulerHandle(uid, edge),
+            'zero-drag-not-permitted',
+          ),
+        ),
+      ])
+    },
+    [canvasOffsetRef, dispatch, canvasScale],
+  )
+
   const markerMouseUp = React.useCallback(
     (event: MouseEvent) => {
       event.preventDefault()
       event.stopPropagation()
       setShowExtraMarkers(null)
+      setFrozenMarkers(null)
       props.setShowGridCellOutlines(false)
+
       window.removeEventListener('mouseup', markerMouseUp)
     },
     [props],
   )
+
   const rowMarkerMouseDown = React.useCallback(
-    (event: React.MouseEvent) => {
+    (edge: GridResizeEdge) => (event: React.MouseEvent) => {
       event.preventDefault()
       event.stopPropagation()
+
       setShowExtraMarkers('row')
       props.setShowGridCellOutlines(true)
+      setFrozenMarkers(rulerMarkerData)
+      startResizeInteraction(EP.toUid(props.path), edge)(event)
+
       window.addEventListener('mouseup', markerMouseUp)
     },
-    [markerMouseUp, props],
+    [markerMouseUp, props, startResizeInteraction, rulerMarkerData],
   )
+
   const columnMarkerMouseDown = React.useCallback(
-    (event: React.MouseEvent) => {
+    (edge: GridResizeEdge) => (event: React.MouseEvent) => {
       event.preventDefault()
       event.stopPropagation()
+
       setShowExtraMarkers('column')
       props.setShowGridCellOutlines(true)
+      setFrozenMarkers(rulerMarkerData)
+      startResizeInteraction(EP.toUid(props.path), edge)(event)
+
       window.addEventListener('mouseup', markerMouseUp)
     },
-    [markerMouseUp, props],
+    [markerMouseUp, props, startResizeInteraction, rulerMarkerData],
   )
 
   if (rulerMarkerData == null || gridRect == null) {
@@ -2459,8 +2532,8 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
           marker={rulerMarkerData.columnStart}
           axis={'column'}
           visible={'visible'}
-          onMouseDown={columnMarkerMouseDown}
-          testID={'ruler-marker-column-start'}
+          onMouseDown={columnMarkerMouseDown('column-start')}
+          testID={RulerMarkerColumnStartTestId}
         />
         <RulerMarkerIndicator
           gridRect={rulerMarkerData.gridRect}
@@ -2468,8 +2541,8 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
           marker={rulerMarkerData.columnEnd}
           axis={'column'}
           visible={'visible'}
-          onMouseDown={columnMarkerMouseDown}
-          testID={'ruler-marker-column-end'}
+          onMouseDown={columnMarkerMouseDown('column-end')}
+          testID={RulerMarkerColumnEndTestId}
         />
       </GridRuler>
 
@@ -2500,8 +2573,8 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
           marker={rulerMarkerData.rowStart}
           axis={'row'}
           visible={'visible'}
-          onMouseDown={rowMarkerMouseDown}
-          testID={'ruler-marker-row-start'}
+          onMouseDown={rowMarkerMouseDown('row-start')}
+          testID={RulerMarkerRowStartTestId}
         />
         <RulerMarkerIndicator
           gridRect={rulerMarkerData.gridRect}
@@ -2509,8 +2582,8 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
           marker={rulerMarkerData.rowEnd}
           axis={'row'}
           visible={'visible'}
-          onMouseDown={rowMarkerMouseDown}
-          testID={'ruler-marker-row-end'}
+          onMouseDown={rowMarkerMouseDown('row-end')}
+          testID={RulerMarkerRowEndTestId}
         />
       </GridRuler>
 
@@ -2547,11 +2620,150 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         width={rulerMarkerData.cellRect.width + 1}
         height={rulerMarkerData.cellRect.height + 1}
       />
+
+      {/* Snap line during resize */}
+      <SnapLine
+        gridTemplate={rulerMarkerData.parentGrid}
+        container={rulerMarkerData.gridRect}
+        edge={resizeControlRef.current?.edge ?? null}
+        target={rulerMarkerData.cellRect}
+        markers={rulerMarkerData}
+        frozenMarkers={frozenMarkers}
+      />
+
+      {/* Offset line during resize, following the mouse */}
+      <ResizeOffsetLine
+        edge={resizeControlRef.current?.edge ?? null}
+        drag={dragRef.current}
+        container={rulerMarkerData.gridRect}
+      />
     </React.Fragment>
   )
 })
 RulerMarkers.displayName = 'RulerMarkers'
 
+const ResizeOffsetLine = React.memo(
+  (props: {
+    edge: GridResizeEdge | null
+    drag: CanvasPoint | null
+    container: CanvasRectangle
+  }) => {
+    const colorTheme = useColorTheme()
+
+    if (props.edge == null || props.drag == null) {
+      return null
+    }
+    const isColumn = props.edge === 'column-start' || props.edge === 'column-end'
+
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          width: isColumn ? 1 : props.container.width,
+          height: !isColumn ? 1 : props.container.height,
+          top: isColumn ? props.container.y : props.drag.y,
+          left: !isColumn ? props.container.x : props.drag.x,
+          borderLeft: isColumn ? `1px dashed ${colorTheme.primary.value}` : undefined,
+          borderTop: !isColumn ? `1px dashed ${colorTheme.primary.value}` : undefined,
+        }}
+      />
+    )
+  },
+)
+ResizeOffsetLine.displayName = 'ResizeOffsetLine'
+
+const SnapLine = React.memo(
+  (props: {
+    gridTemplate: GridContainerProperties
+    edge: GridResizeEdge | null
+    container: CanvasRectangle
+    target: CanvasRectangle
+    markers: RulerMarkerData
+    frozenMarkers: RulerMarkerData | null
+  }) => {
+    const colorTheme = useColorTheme()
+
+    const [targetMarker, targetFrozenMarker] = React.useMemo(() => {
+      if (props.edge == null || props.frozenMarkers == null) {
+        return []
+      }
+      switch (props.edge) {
+        case 'column-end':
+          return [props.markers.columnEnd, props.frozenMarkers.columnEnd]
+        case 'column-start':
+          return [props.markers.columnStart, props.frozenMarkers.columnStart]
+        case 'row-end':
+          return [props.markers.rowEnd, props.frozenMarkers.rowEnd]
+        case 'row-start':
+          return [props.markers.rowStart, props.frozenMarkers.rowStart]
+        default:
+          assertNever(props.edge)
+      }
+    }, [props.edge, props.markers, props.frozenMarkers])
+
+    const axis = props.edge === 'column-end' || props.edge === 'column-start' ? 'column' : 'row'
+
+    const canvasScale = useEditorState(
+      Substores.canvasOffset,
+      (store) => store.editor.canvas.scale,
+      'SnapLine canvasScale',
+    )
+
+    if (
+      props.edge == null ||
+      targetMarker == null ||
+      targetMarker.position == null ||
+      targetFrozenMarker == null ||
+      targetFrozenMarker.position == null
+    ) {
+      return null
+    }
+
+    const showLabel = !gridPositionOrSpanEquals(targetMarker.position, targetFrozenMarker.position)
+
+    const labelWidth = 50
+    const labelHeight = 20
+
+    const isColumn = props.edge === 'column-start' || props.edge === 'column-end'
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          width: isColumn ? 1 : props.container.width,
+          height: !isColumn ? 1 : props.container.height,
+          top: isColumn
+            ? props.container.y
+            : props.target.y + (props.edge === 'row-end' ? props.target.height : 0),
+          left: !isColumn
+            ? props.container.x
+            : props.target.x + (props.edge === 'column-end' ? props.target.width : 0),
+          backgroundColor: colorTheme.brandNeonPink.value,
+        }}
+      >
+        {when(
+          showLabel,
+          <div
+            style={{
+              position: 'absolute',
+              top: axis === 'column' ? -labelHeight - RulerMarkerIconSize - 5 : -10,
+              left: axis === 'row' ? -(labelWidth - RulerMarkerIconSize + 30) : 0,
+              color: colorTheme.brandNeonPink.value,
+              fontWeight: 700,
+              textAlign: axis === 'row' ? 'right' : undefined,
+              width: labelWidth,
+              height: labelHeight,
+              zoom: 1 / canvasScale,
+            }}
+          >
+            {printPin(props.gridTemplate, targetMarker.position, axis)}
+          </div>,
+        )}
+      </div>
+    )
+  },
+)
+SnapLine.displayName = 'SnapLine'
+
 interface GridRulerProps {
   axis: 'row' | 'column'
   gridRect: CanvasRectangle
@@ -2848,3 +3060,22 @@ const GridCellOutline = React.memo(
   },
 )
 GridCellOutline.displayName = 'GridCellOutline'
+
+function gridPositionOrSpanEquals(a: GridPositionOrSpan, b: GridPositionOrSpan): boolean {
+  if (isGridSpan(a)) {
+    if (!isGridSpan(b)) {
+      return false
+    }
+    return a.value === b.value
+  }
+  if (isCSSKeyword(a)) {
+    if (!isCSSKeyword(b)) {
+      return false
+    }
+    return a.value === b.value
+  }
+  if (!isGridPositionValue(b)) {
+    return false
+  }
+  return a.numericalPosition === b.numericalPosition
+}
diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
index 00a78950527b..19a10c35f826 100644
--- a/editor/src/components/canvas/dom-walker.ts
+++ b/editor/src/components/canvas/dom-walker.ts
@@ -929,6 +929,18 @@ function getSpecialMeasurements(
         )
       : null
 
+  const parentGridFrame =
+    element.parentElement != null && elementLayoutSystem(parentElementStyle) === 'grid'
+      ? globalFrameForElement(
+          element.parentElement,
+          scale,
+          containerRectLazy,
+          'without-text-content',
+          'nearest-half',
+          elementCanvasRectangleCache,
+        )
+      : null
+
   const containerGridPropertiesFromProps = getGridContainerProperties(element.style)
   const parentContainerGridPropertiesFromProps = getGridContainerProperties(
     element.parentElement?.style ?? parentElementStyle,
@@ -1007,6 +1019,7 @@ function getSpecialMeasurements(
     justifySelf,
     alignSelf,
     border,
+    parentGridFrame,
   )
 }
 
diff --git a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
index b02aff443352..b996d1160c6d 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
@@ -347,6 +347,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
       bottom: 0,
       right: 0,
     },
+    parentGridFrame: null,
   }
 
   const newDifferentValue: SpecialSizeMeasurements = {
@@ -491,6 +492,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
       bottom: 0,
       right: 0,
     },
+    parentGridFrame: null,
   }
 
   it('same reference returns the same reference', () => {
@@ -690,6 +692,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
         bottom: 0,
         right: 0,
       },
+      parentGridFrame: null,
     },
     computedStyle: {
       a: 'a',
@@ -866,6 +869,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
         bottom: 0,
         right: 0,
       },
+      parentGridFrame: null,
     },
     computedStyle: {
       a: 'a',
@@ -1067,6 +1071,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
           bottom: 0,
           right: 0,
         },
+        parentGridFrame: null,
       },
       computedStyle: {
         a: 'a',
@@ -1245,6 +1250,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
           bottom: 0,
           right: 0,
         },
+        parentGridFrame: null,
       },
       computedStyle: {
         a: 'a',
@@ -1423,6 +1429,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
           bottom: 0,
           right: 0,
         },
+        parentGridFrame: null,
       },
       computedStyle: {
         a: 'a',
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index 0879447458ca..d1f16d90eed1 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -461,6 +461,7 @@ import type {
   GridResizeHandle,
   GridResizeEdge,
   GridGapHandle,
+  GridResizeRulerHandle,
 } from '../../canvas/canvas-strategies/interaction-state'
 import {
   boundingArea,
@@ -473,6 +474,7 @@ import {
   gridAxisHandle,
   gridResizeHandle,
   gridGapHandle,
+  gridResizeRulerHandle,
 } from '../../canvas/canvas-strategies/interaction-state'
 import type { Modifiers } from '../../../utils/modifiers'
 import type {
@@ -2498,6 +2500,7 @@ export function SpecialSizeMeasurementsKeepDeepEquality(): KeepDeepEqualityCall<
         newSize.justifySelf,
         newSize.alignSelf,
         newSize.borderWidths,
+        newSize.parentGridFrame,
       )
       return keepDeepEqualityResult(sizeMeasurements, false)
     }
@@ -3179,6 +3182,15 @@ export const GridResizeHandleKeepDeepEquality: KeepDeepEqualityCall<GridResizeHa
     gridResizeHandle,
   )
 
+export const GridResizeMarkerHandleKeepDeepEquality: KeepDeepEqualityCall<GridResizeRulerHandle> =
+  combine2EqualityCalls(
+    (handle) => handle.id,
+    createCallWithTripleEquals<string>(),
+    (handle) => handle.edge,
+    createCallWithTripleEquals<GridResizeEdge>(),
+    gridResizeRulerHandle,
+  )
+
 export const GridGapHandleKeepDeepEquality: KeepDeepEqualityCall<GridGapHandle> =
   combine1EqualityCall((handle) => handle.axis, createCallWithTripleEquals<Axis>(), gridGapHandle)
 
@@ -3242,9 +3254,13 @@ export const CanvasControlTypeKeepDeepEquality: KeepDeepEqualityCall<CanvasContr
         return GridGapHandleKeepDeepEquality(oldValue, newValue)
       }
       break
+    case 'GRID_RESIZE_RULER_HANDLE':
+      if (newValue.type === oldValue.type) {
+        return GridResizeMarkerHandleKeepDeepEquality(oldValue, newValue)
+      }
+      break
     default:
-      const _exhaustiveCheck: never = oldValue
-      throw new Error(`Unhandled type ${JSON.stringify(oldValue)}`)
+      assertNever(oldValue)
   }
   return keepDeepEqualityResult(newValue, false)
 }
diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts
index 840a7fe872e1..a301c3b167ef 100644
--- a/editor/src/core/shared/element-template.ts
+++ b/editor/src/core/shared/element-template.ts
@@ -2661,6 +2661,11 @@ export function gridPositionValue(numericalPosition: number | null): GridPositio
   }
 }
 
+export function isGridPositionValue(p: GridPositionOrSpan | null): p is GridPositionValue {
+  const maybe = p as GridPositionValue
+  return p != null && typeof p === 'object' && maybe.numericalPosition !== undefined
+}
+
 export const validGridPositionKeywords = ['auto']
 
 export type ValidGridPositionKeyword = string // using <string> because valid keywords are also line names we cannot know in advance
@@ -2847,6 +2852,7 @@ export interface SpecialSizeMeasurements {
   gridCellGlobalFrames: GridCellGlobalFrames | null
   parentGridCellGlobalFrames: GridCellGlobalFrames | null
   borderWidths: BorderWidths
+  parentGridFrame: CanvasRectangle | null
 }
 
 export function specialSizeMeasurements(
@@ -2906,6 +2912,7 @@ export function specialSizeMeasurements(
   justifySelf: SelfAlignment | null,
   alignSelf: SelfAlignment | null,
   borderWidths: BorderWidths,
+  parentGridFrame: CanvasRectangle | null,
 ): SpecialSizeMeasurements {
   return {
     offset,
@@ -2964,6 +2971,7 @@ export function specialSizeMeasurements(
     justifySelf,
     alignSelf,
     borderWidths,
+    parentGridFrame,
   }
 }
 
@@ -3066,6 +3074,7 @@ export const emptySpecialSizeMeasurements = specialSizeMeasurements(
     right: 0,
     bottom: 0,
   },
+  null,
 )
 
 export function walkElement(

From 3b1624fd6f137a9fbdcc01ebf7239cb7d588f7bd Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 3 Dec 2024 14:12:41 +0100
Subject: [PATCH 255/272] Grid ruler resize labels sticky (#6692)

**Problem:**

Markers should not move while resize is in progress, and the active
one's label should be visible during resize.

**Fix:**

As a followup to https://github.com/concrete-utopia/utopia/pull/6689,
this PR makes sure that markers are fixed when the ruler resize strategy
is active, and that the label for the marker being dragged stays visible
as well.
---
 .../canvas/controls/grid-controls.tsx          | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 682a61d03e52..58d1b9a5c0cb 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -2529,7 +2529,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         <RulerMarkerIndicator
           gridRect={rulerMarkerData.gridRect}
           parentGrid={rulerMarkerData.parentGrid}
-          marker={rulerMarkerData.columnStart}
+          marker={frozenMarkers?.columnStart ?? rulerMarkerData.columnStart}
           axis={'column'}
           visible={'visible'}
           onMouseDown={columnMarkerMouseDown('column-start')}
@@ -2538,7 +2538,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         <RulerMarkerIndicator
           gridRect={rulerMarkerData.gridRect}
           parentGrid={rulerMarkerData.parentGrid}
-          marker={rulerMarkerData.columnEnd}
+          marker={frozenMarkers?.columnEnd ?? rulerMarkerData.columnEnd}
           axis={'column'}
           visible={'visible'}
           onMouseDown={columnMarkerMouseDown('column-end')}
@@ -2570,7 +2570,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         <RulerMarkerIndicator
           gridRect={rulerMarkerData.gridRect}
           parentGrid={rulerMarkerData.parentGrid}
-          marker={rulerMarkerData.rowStart}
+          marker={frozenMarkers?.rowStart ?? rulerMarkerData.rowStart}
           axis={'row'}
           visible={'visible'}
           onMouseDown={rowMarkerMouseDown('row-start')}
@@ -2579,7 +2579,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         <RulerMarkerIndicator
           gridRect={rulerMarkerData.gridRect}
           parentGrid={rulerMarkerData.parentGrid}
-          marker={rulerMarkerData.rowEnd}
+          marker={frozenMarkers?.rowEnd ?? rulerMarkerData.rowEnd}
           axis={'row'}
           visible={'visible'}
           onMouseDown={rowMarkerMouseDown('row-end')}
@@ -2859,6 +2859,14 @@ const RulerMarkerIndicator = React.memo(
 
     const labelClass = 'ruler-marker-label'
 
+    const edge: GridResizeEdge = `${props.axis}-${props.marker.bound}`
+
+    const resizeControlRef = useRefEditorState((store) =>
+      store.editor.canvas.interactionSession?.activeControl.type !== 'GRID_RESIZE_RULER_HANDLE'
+        ? null
+        : store.editor.canvas.interactionSession.activeControl,
+    )
+
     return (
       <div
         data-testid={props.testID}
@@ -2874,7 +2882,7 @@ const RulerMarkerIndicator = React.memo(
         onMouseDown={props.onMouseDown}
         css={{
           [`> .${labelClass}`]: {
-            visibility: 'hidden',
+            visibility: resizeControlRef.current?.edge === edge ? 'visible' : 'hidden',
           },
           ':hover': {
             [`> .${labelClass}`]: {

From 6f299cfd82b1b71682a55f2cc490fd792f155d16 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Tue, 3 Dec 2024 16:55:47 +0000
Subject: [PATCH 256/272] fix(grids) Maintain Grid Cell Pins. (#6691)

- Added `printPinAsString` utility function.
- Implemented `getGridRelativeContainingBlock` to calculate a new
containing block by
building a minimal purely HTML reproduction of the grid so as to use the
browser
  logic for the position and size of the containing block.
- Refactored out `getNewGridElementProps` from the start of
`runGridChangeElementLocation`
  so that it can be used to identify the new grid position on its own.
- Refactored out `getMoveCommandsForDrag` from
`getMoveCommandsForSelectedElement`.
- Replaced `gridChildAbsoluteMoveCommands` with a call to
`getMoveCommandsForDrag`
  in the Grid Absolute Move strategy.
- Added `GridElementChildContainingBlockKey` for simplicity.
---
 .../grid-change-element-location-strategy.ts  |  51 ++++-
 ...change-location-strategy.spec.browser2.tsx |  97 +++++++++-
 .../strategies/grid-helpers.ts                | 160 +++++++++++++++-
 .../grid-move-absolute.spec.browser2.tsx      |   4 +-
 .../strategies/grid-move-absolute.ts          | 174 +++++++++++-------
 .../shared-move-strategies-helpers.ts         |  83 ++++++---
 .../controls/grid-controls-for-strategies.tsx |   2 +
 .../canvas/controls/grid-controls.tsx         |   3 +-
 8 files changed, 465 insertions(+), 109 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
index fcef295fbbba..8eb840663578 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
@@ -35,6 +35,7 @@ import {
   getCommandsForGridItemPlacement,
   sortElementsByGridPosition,
 } from './grid-helpers'
+import type { GridCellCoordinates } from './grid-cell-bounds'
 
 export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -171,20 +172,23 @@ function getCommandsAndPatchForGridChangeElementLocation(
   }
 }
 
-export function runGridChangeElementLocation(
-  jsxMetadata: ElementInstanceMetadataMap,
+interface NewGridElementProps {
+  gridElementProperties: GridElementProperties
+  targetCellCoords: GridCellCoordinates
+  targetRootCell: GridCellCoordinates
+}
+
+export function getNewGridElementProps(
   interactionData: DragInteractionData,
   selectedElementMetadata: ElementInstanceMetadata,
   gridCellGlobalFrames: GridCellGlobalFrames,
-  gridTemplate: GridContainerProperties,
   newPathAfterReparent: ElementPath | null,
-): CanvasCommand[] {
+): NewGridElementProps | null {
   if (interactionData.drag == null) {
-    return []
+    return null
   }
 
   const isReparent = newPathAfterReparent != null
-  const pathForCommands = isReparent ? newPathAfterReparent : selectedElementMetadata.elementPath // when reparenting, we want to use the new path for commands
 
   const gridConfig = isReparent
     ? {
@@ -197,7 +201,7 @@ export function runGridChangeElementLocation(
         selectedElementMetadata,
       )
   if (gridConfig == null) {
-    return []
+    return null
   }
   const { mouseCellPosInOriginalElement, originalCellBounds } = gridConfig
 
@@ -207,7 +211,7 @@ export function runGridChangeElementLocation(
     mouseCellPosInOriginalElement,
   )
   if (targetGridCellData == null) {
-    return []
+    return null
   }
   const { targetCellCoords, targetRootCell } = targetGridCellData
 
@@ -283,10 +287,39 @@ export function runGridChangeElementLocation(
     gridRowEnd: rowBounds.end,
   }
 
+  return {
+    gridElementProperties: gridProps,
+    targetCellCoords: targetCellCoords,
+    targetRootCell: targetRootCell,
+  }
+}
+
+export function runGridChangeElementLocation(
+  jsxMetadata: ElementInstanceMetadataMap,
+  interactionData: DragInteractionData,
+  selectedElementMetadata: ElementInstanceMetadata,
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  gridTemplate: GridContainerProperties,
+  newPathAfterReparent: ElementPath | null,
+): CanvasCommand[] {
+  const newGridElementProps = getNewGridElementProps(
+    interactionData,
+    selectedElementMetadata,
+    gridCellGlobalFrames,
+    newPathAfterReparent,
+  )
+  if (newGridElementProps == null) {
+    return []
+  }
+  const { gridElementProperties, targetCellCoords, targetRootCell } = newGridElementProps
+
+  const isReparent = newPathAfterReparent != null
+  const pathForCommands = isReparent ? newPathAfterReparent : selectedElementMetadata.elementPath // when reparenting, we want to use the new path for commands
+
   const gridCellMoveCommands = getCommandsForGridItemPlacement(
     pathForCommands,
     gridTemplate,
-    gridProps,
+    gridElementProperties,
   )
 
   // The siblings of the grid element being moved
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
index 61c0463bcab0..efb317a19ba2 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
@@ -518,6 +518,101 @@ export var storyboard = (
   </Storyboard>
 )
 `
+
+      const ProjectCodeWithBRPins = `import { Scene, Storyboard } from 'utopia-api'
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 700,
+        height: 759,
+        position: 'absolute',
+        left: 212,
+        top: 128,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        data-uid='grid'
+        style={{
+          backgroundColor: '#fefefe',
+          position: 'absolute',
+          left: 123,
+          top: 133,
+          width: 461,
+          height: 448,
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gridTemplateRows: '1fr 1fr',
+          gridGap: 0,
+        }}
+      >
+        <div
+          data-uid='child'
+          data-testid='child'
+          style={{
+            backgroundColor: '#59a6ed',
+            position: 'absolute',
+            right: 12,
+            bottom: 16,
+            width: 144,
+            height: 134,
+            gridColumn: 1,
+            gridRow: 1,
+          }}
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`
+
+      it('can move absolute element inside a grid cell maintaining right and bottom pins', async () => {
+        const editor = await renderTestEditorWithCode(
+          ProjectCodeWithBRPins,
+          'await-first-dom-report',
+        )
+
+        const child = editor.renderedDOM.getByTestId('child')
+
+        {
+          const { bottom, right, gridColumn, gridRow } = child.style
+          expect({ bottom, right, gridColumn, gridRow }).toEqual({
+            gridColumn: '1',
+            gridRow: '1',
+            right: '12px',
+            bottom: '16px',
+          })
+        }
+
+        await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+
+        const childBounds = child.getBoundingClientRect()
+        const childCenter = windowPoint({
+          x: Math.floor(childBounds.left + childBounds.width / 2),
+          y: Math.floor(childBounds.top + childBounds.height / 2),
+        })
+
+        const endPoint = offsetPoint(childCenter, windowPoint({ x: 20, y: 20 }))
+
+        const dragTarget = editor.renderedDOM.getByTestId(
+          GridCellTestId(EP.fromString('sb/scene/grid/child')),
+        )
+        await mouseDownAtPoint(dragTarget, childCenter)
+        await mouseMoveToPoint(dragTarget, endPoint)
+        await mouseUpAtPoint(dragTarget, endPoint)
+
+        const { bottom, right, gridColumn, gridRow } = child.style
+        expect({ bottom, right, gridColumn, gridRow }).toEqual({
+          gridColumn: '1',
+          gridRow: '1',
+          right: '-8px',
+          bottom: '-4px',
+        })
+      })
       it('can move absolute element inside a grid cell', async () => {
         const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
@@ -729,7 +824,7 @@ export var storyboard = (
             gridRowStart: '1',
             gridRowEnd: 'auto',
             left: '59px',
-            top: '59.5px',
+            top: '60px',
           })
         }
       })
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index f9df02f8816e..af367612b5f9 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -17,7 +17,13 @@ import {
   type GridContainerProperties,
   type GridElementProperties,
 } from '../../../../core/shared/element-template'
-import type { CanvasRectangle } from '../../../../core/shared/math-utils'
+import {
+  localRectangle,
+  Size,
+  zeroRectIfNullOrInfinity,
+  type CanvasRectangle,
+  type LocalRectangle,
+} from '../../../../core/shared/math-utils'
 import * as PP from '../../../../core/shared/property-path'
 import { assertNever } from '../../../../core/shared/utils'
 import type { GridDimension } from '../../../inspector/common/css-utils'
@@ -727,3 +733,155 @@ export function gridIdentifierToString(identifier: GridIdentifier): string {
       assertNever(identifier)
   }
 }
+
+function printPinAsString(
+  gridTemplate: GridContainerProperties,
+  pin: GridPositionOrSpan,
+  axis: 'row' | 'column',
+): string {
+  const printPinResult = printPin(gridTemplate, pin, axis)
+  if (typeof printPinResult === 'number') {
+    return `${printPinResult}`
+  } else {
+    return printPinResult
+  }
+}
+
+const TemporaryGridID = 'temporary-grid'
+
+export function getGridRelativeContainingBlock(
+  gridMetadata: ElementInstanceMetadata,
+  cellMetadata: ElementInstanceMetadata,
+  cellProperties: GridElementProperties,
+): LocalRectangle {
+  const gridProperties = gridMetadata.specialSizeMeasurements.containerGridProperties
+
+  // Create containing fragment.
+  const fragment = document.createDocumentFragment()
+
+  // Create offset container that potentially provides the layout positioning.
+  const offsetContainer = document.createElement('div')
+  offsetContainer.id = TemporaryGridID
+  offsetContainer.style.position = 'absolute'
+  offsetContainer.style.left = '0'
+  offsetContainer.style.top = '0'
+  fragment.appendChild(offsetContainer)
+
+  // Create a grid element with the appropriate properties.
+  const gridElement = document.createElement('div')
+  gridElement.style.display = 'grid'
+  gridElement.style.position = gridMetadata.specialSizeMeasurements.position ?? 'initial'
+  const gridGlobalFrame = zeroRectIfNullOrInfinity(gridMetadata.globalFrame)
+  gridElement.style.left = `${gridGlobalFrame.x}px`
+  gridElement.style.top = `${gridGlobalFrame.y}px`
+  gridElement.style.width = `${gridGlobalFrame.width}px`
+  gridElement.style.height = `${gridGlobalFrame.height}px`
+
+  // Gap needs to be set only if the other two are not present or we'll have rendering issues
+  // due to how measurements are calculated.
+  if (
+    gridMetadata.specialSizeMeasurements.rowGap != null &&
+    gridMetadata.specialSizeMeasurements.columnGap != null
+  ) {
+    const gap = gridMetadata.specialSizeMeasurements.gap
+    gridElement.style.gap = gap == null ? 'initial' : `${gap}px`
+  } else {
+    const rowGap = gridMetadata.specialSizeMeasurements.rowGap
+    gridElement.style.rowGap = rowGap == null ? 'initial' : `${rowGap}px`
+    const columnGap = gridMetadata.specialSizeMeasurements.columnGap
+    gridElement.style.columnGap = columnGap == null ? 'initial' : `${columnGap}px`
+  }
+
+  // Include the padding.
+  const gridPadding = gridMetadata.specialSizeMeasurements.padding
+  gridElement.style.paddingLeft = gridPadding.left == null ? 'initial' : `${gridPadding.left}px`
+  gridElement.style.paddingTop = gridPadding.top == null ? 'initial' : `${gridPadding.top}px`
+  gridElement.style.paddingRight = gridPadding.right == null ? 'initial' : `${gridPadding.right}px`
+  gridElement.style.paddingBottom =
+    gridPadding.bottom == null ? 'initial' : `${gridPadding.bottom}px`
+
+  // Keep the grid hidden from view so that it doesn't flash visibly in the editor.
+  gridElement.style.visibility = 'hidden'
+
+  if (gridProperties.gridTemplateColumns != null) {
+    gridElement.style.gridTemplateColumns = printGridAutoOrTemplateBase(
+      gridProperties.gridTemplateColumns,
+    )
+  }
+  if (gridProperties.gridTemplateRows != null) {
+    gridElement.style.gridTemplateRows = printGridAutoOrTemplateBase(
+      gridProperties.gridTemplateRows,
+    )
+  }
+  if (gridProperties.gridAutoColumns != null) {
+    gridElement.style.gridAutoColumns = printGridAutoOrTemplateBase(gridProperties.gridAutoColumns)
+  }
+  if (gridProperties.gridAutoRows != null) {
+    gridElement.style.gridAutoRows = printGridAutoOrTemplateBase(gridProperties.gridAutoRows)
+  }
+  if (gridProperties.gridAutoFlow != null) {
+    gridElement.style.gridAutoFlow = gridProperties.gridAutoFlow
+  }
+  offsetContainer.appendChild(gridElement)
+
+  // Create a child of the grid element with the appropriate properties.
+  const gridChildElement = document.createElement('div')
+
+  if (cellProperties.gridColumnStart != null) {
+    gridChildElement.style.gridColumnStart = printPinAsString(
+      gridProperties,
+      cellProperties.gridColumnStart,
+      'column',
+    )
+  }
+  if (cellProperties.gridColumnEnd != null) {
+    gridChildElement.style.gridColumnEnd = printPinAsString(
+      gridProperties,
+      cellProperties.gridColumnEnd,
+      'column',
+    )
+  }
+  if (cellProperties.gridRowStart != null) {
+    gridChildElement.style.gridRowStart = printPinAsString(
+      gridProperties,
+      cellProperties.gridRowStart,
+      'row',
+    )
+  }
+  if (cellProperties.gridRowEnd != null) {
+    gridChildElement.style.gridRowEnd = printPinAsString(
+      gridProperties,
+      cellProperties.gridRowEnd,
+      'row',
+    )
+  }
+  gridChildElement.style.position = cellMetadata.specialSizeMeasurements.position ?? 'initial'
+  // Fill out the entire space available.
+  gridChildElement.style.top = '0'
+  gridChildElement.style.left = '0'
+  gridChildElement.style.bottom = '0'
+  gridChildElement.style.right = '0'
+
+  gridElement.appendChild(gridChildElement)
+
+  // Get the result and cleanup the temporary elements.
+  try {
+    document.body.appendChild(fragment)
+    const gridProvidesBounds =
+      gridMetadata.specialSizeMeasurements.providesBoundsForAbsoluteChildren
+    const boundingRect = gridChildElement.getBoundingClientRect()
+    // If the grid provides the bounds, then we need to remove it's position, otherwise
+    // we need to include its position in the offset container.
+    return localRectangle({
+      x: boundingRect.left - (gridProvidesBounds ? gridGlobalFrame.x : 0),
+      y: boundingRect.top - (gridProvidesBounds ? gridGlobalFrame.y : 0),
+      width: boundingRect.width,
+      height: boundingRect.height,
+    })
+  } finally {
+    const gridElementFromDocument = document.getElementById(TemporaryGridID)
+    if (gridElementFromDocument != null) {
+      gridElementFromDocument.remove()
+    }
+  }
+}
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx
index 305863f496e1..389e0034888f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx
@@ -158,12 +158,12 @@ export var storyboard = (
           style={{
             backgroundColor: '#f0f',
             position: 'absolute',
+            left: 300,
+            top: 300,
             width: 79,
             height: 86,
             gridColumn: 1,
             gridRow: 1,
-            top: 300,
-            left: 300,
           }}
           data-uid='dragme'
           data-testid='dragme'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
index 53eb97fe8f6d..775f8d306c7f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
@@ -1,27 +1,30 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
+import type { JSXElementChild } from '../../../../core/shared/element-template'
 import {
+  isJSXElement,
   type ElementInstanceMetadata,
   type ElementInstanceMetadataMap,
   type GridContainerProperties,
 } from '../../../../core/shared/element-template'
-import type { CanvasRectangle } from '../../../../core/shared/math-utils'
+import type { CanvasVector } from '../../../../core/shared/math-utils'
 import {
   canvasRectangle,
-  isInfinityRectangle,
-  offsetPoint,
-  pointDifference,
-  zeroRectangle,
+  canvasRectangleToLocalRectangle,
+  nullIfInfinity,
+  offsetRect,
+  windowPoint,
+  zeroCanvasRect,
   zeroRectIfNullOrInfinity,
+  zeroSize,
 } from '../../../../core/shared/math-utils'
-import * as PP from '../../../../core/shared/property-path'
-import { cssNumber } from '../../../inspector/common/css-utils'
 import type { CanvasCommand } from '../../commands/commands'
-import { deleteProperties } from '../../commands/delete-properties-command'
-import { setCssLengthProperty } from '../../commands/set-css-length-command'
 import { showGridControls } from '../../commands/show-grid-controls-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  GridElementChildContainingBlockKey,
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { InteractionCanvasState } from '../canvas-strategy-types'
@@ -33,14 +36,24 @@ import {
 import type { DragInteractionData, InteractionSession } from '../interaction-state'
 import type { GridCellGlobalFrames } from './grid-helpers'
 import {
-  getGlobalFrameOfGridCell,
+  findOriginalGrid,
+  getGridRelativeContainingBlock,
   getOriginalElementGridConfiguration,
   getParentGridTemplatesFromChildMeasurements,
   gridMoveStrategiesExtraCommands,
 } from './grid-helpers'
-import { runGridChangeElementLocation } from './grid-change-element-location-strategy'
+import {
+  getNewGridElementProps,
+  runGridChangeElementLocation,
+} from './grid-change-element-location-strategy'
 import { getTargetGridCellData } from '../../../inspector/grid-helpers'
 import { gridItemIdentifier } from '../../../editor/store/editor-state'
+import { getMoveCommandsForDrag } from './shared-move-strategies-helpers'
+import { toFirst } from '../../../../core/shared/optics/optic-utilities'
+import { eitherRight, fromTypeGuard } from '../../../../core/shared/optics/optic-creators'
+import { defaultEither } from '../../../../core/shared/either'
+import { forceNotNull } from '../../../..//core/shared/optional-utils'
+import { windowToCanvasCoordinates } from '../../dom-lookup'
 
 export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -194,6 +207,32 @@ function runGridMoveAbsolute(
     return []
   }
   const { targetCellCoords, targetRootCell } = targetGridCellData
+  const element = defaultEither(
+    null,
+    toFirst(
+      eitherRight<string, JSXElementChild>().compose(fromTypeGuard(isJSXElement)),
+      selectedElementMetadata.element,
+    ),
+  )
+  if (element == null) {
+    return []
+  }
+
+  const globalFrame = nullIfInfinity(
+    MetadataUtils.getFrameInCanvasCoords(selectedElementMetadata.elementPath, jsxMetadata),
+  )
+
+  if (globalFrame == null) {
+    return []
+  }
+
+  const localFrame = nullIfInfinity(
+    MetadataUtils.getLocalFrame(
+      selectedElementMetadata.elementPath,
+      jsxMetadata,
+      EP.parentPath(selectedElementMetadata.elementPath),
+    ),
+  )
 
   // if moving an absolutely-positioned child which does not have pinning
   // props, do not set them at all.
@@ -205,27 +244,62 @@ function runGridMoveAbsolute(
         targetCellCoords,
         targetRootCell,
       ),
-      ...gridChildAbsoluteMoveCommands(
-        selectedElementMetadata,
+      ...getMoveCommandsForDrag(
         zeroRectIfNullOrInfinity(
           selectedElementMetadata.specialSizeMeasurements.immediateParentBounds,
         ),
-        interactionData,
-      ),
+        element,
+        selectedElementMetadata.elementPath,
+        selectedElementMetadata.elementPath,
+        interactionData.drag,
+        globalFrame,
+        localFrame,
+        null,
+        false,
+      ).commands,
     ]
   }
 
-  function getContainingRect(): CanvasRectangle {
-    if (selectedElementMetadata.specialSizeMeasurements.immediateParentProvidesLayout) {
-      const gridCellGlobalFrame = getGlobalFrameOfGridCell(gridCellGlobalFrames, targetRootCell)
-      return zeroRectIfNullOrInfinity(gridCellGlobalFrame)
-    } else {
-      return zeroRectIfNullOrInfinity(
-        selectedElementMetadata.specialSizeMeasurements.coordinateSystemBounds,
-      )
-    }
+  // The element may be moving to a different grid position, which is then used
+  // to calculate the potentially new containing block.
+  const newGridElementProps = getNewGridElementProps(
+    interactionData,
+    selectedElementMetadata,
+    gridCellGlobalFrames,
+    null,
+  )
+
+  const coordinateSystemBounds =
+    selectedElementMetadata.specialSizeMeasurements.immediateParentBounds ?? zeroCanvasRect
+
+  // Get the metadata of the original grid.
+  const originalGridPath = findOriginalGrid(
+    jsxMetadata,
+    EP.parentPath(selectedElementMetadata.elementPath),
+  )
+  if (originalGridPath == null) {
+    return []
+  }
+  const originalGrid = MetadataUtils.findElementByElementPath(jsxMetadata, originalGridPath)
+  if (originalGrid == null) {
+    return []
   }
 
+  // Get the containing block of the grid child.
+  const containingBlockRectangle = getGridRelativeContainingBlock(
+    originalGrid,
+    selectedElementMetadata,
+    newGridElementProps?.gridElementProperties ??
+      selectedElementMetadata.specialSizeMeasurements.elementGridProperties,
+  )
+
+  // Get the appropriately shifted and typed local frame value to use.
+  const containingRect = offsetRect(
+    canvasRectangle(containingBlockRectangle),
+    coordinateSystemBounds,
+  )
+  const adjustedLocalFrame = canvasRectangleToLocalRectangle(globalFrame, containingRect)
+
   // otherwise, return a change location + absolute adjustment
   return [
     ...runGridChangeElementLocation(
@@ -236,46 +310,16 @@ function runGridMoveAbsolute(
       gridTemplate,
       null,
     ),
-    ...gridChildAbsoluteMoveCommands(selectedElementMetadata, getContainingRect(), interactionData),
-  ]
-}
-
-function gridChildAbsoluteMoveCommands(
-  element: ElementInstanceMetadata,
-  containingRect: CanvasRectangle,
-  dragInteractionData: DragInteractionData,
-): CanvasCommand[] {
-  if (
-    element.globalFrame == null ||
-    isInfinityRectangle(element.globalFrame) ||
-    dragInteractionData.drag == null
-  ) {
-    return []
-  }
-
-  const offsetInTarget = pointDifference(containingRect, element.globalFrame)
-  const dragOffset = offsetPoint(offsetInTarget, dragInteractionData.drag)
-
-  return [
-    deleteProperties('always', element.elementPath, [
-      PP.create('style', 'top'),
-      PP.create('style', 'left'),
-      PP.create('style', 'right'),
-      PP.create('style', 'bottom'),
-    ]),
-    setCssLengthProperty(
-      'always',
-      element.elementPath,
-      PP.create('style', 'top'),
-      { type: 'EXPLICIT_CSS_NUMBER', value: cssNumber(dragOffset.y, null) },
+    ...getMoveCommandsForDrag(
+      containingRect,
+      element,
+      selectedElementMetadata.elementPath,
+      selectedElementMetadata.elementPath,
+      interactionData.drag,
+      globalFrame,
+      adjustedLocalFrame,
       null,
-    ),
-    setCssLengthProperty(
-      'always',
-      element.elementPath,
-      PP.create('style', 'left'),
-      { type: 'EXPLICIT_CSS_NUMBER', value: cssNumber(dragOffset.x, null) },
-      null,
-    ),
+      false,
+    ).commands,
   ]
 }
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts
index 7ec32d192246..26595f82095b 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts
@@ -226,6 +226,11 @@ function getAppropriateLocalFrame(
     : MetadataUtils.getLocalFrameFromSpecialSizeMeasurements(selectedElement, startingMetadata)
 }
 
+interface CommandsAndIntendedBounds {
+  commands: Array<SetCssLengthProperty | AdjustCssLengthProperties>
+  intendedBounds: Array<CanvasFrameAndTarget>
+}
+
 export function getDirectMoveCommandsForSelectedElement(
   projectContents: ProjectContentTreeRoot,
   startingMetadata: ElementInstanceMetadataMap,
@@ -236,10 +241,7 @@ export function getDirectMoveCommandsForSelectedElement(
   leftOrTop: 'left' | 'top',
   newPixelValue: number,
   options?: MoveCommandsOptions,
-): {
-  commands: Array<SetCssLengthProperty | AdjustCssLengthProperties>
-  intendedBounds: Array<CanvasFrameAndTarget>
-} {
+): CommandsAndIntendedBounds {
   const localFrame = getAppropriateLocalFrame(options, selectedElement, startingMetadata)
 
   const drag = canvasVector({
@@ -258,6 +260,45 @@ export function getDirectMoveCommandsForSelectedElement(
   )
 }
 
+export function getMoveCommandsForDrag(
+  elementParentBounds: CanvasRectangle | null,
+  element: JSXElement,
+  selectedElement: ElementPath,
+  mappedPath: ElementPath,
+  drag: CanvasVector,
+  globalFrame: CanvasRectangle | null,
+  localFrame: LocalRectangle | null,
+  parentFlexDirection: FlexDirection | null,
+  ignoreLocalFrame: boolean,
+): CommandsAndIntendedBounds {
+  if (ignoreLocalFrame) {
+    return createMoveCommandsForElementPositionRelative(
+      element,
+      selectedElement,
+      mappedPath,
+      drag,
+      globalFrame,
+      elementParentBounds,
+      parentFlexDirection,
+    )
+  }
+
+  if (globalFrame == null || localFrame == null) {
+    return { commands: [], intendedBounds: [] }
+  }
+
+  return createMoveCommandsForElementCreatingMissingPins(
+    element,
+    selectedElement,
+    mappedPath,
+    drag,
+    globalFrame,
+    localFrame,
+    elementParentBounds,
+    parentFlexDirection,
+  )
+}
+
 export function getMoveCommandsForSelectedElement(
   projectContents: ProjectContentTreeRoot,
   startingMetadata: ElementInstanceMetadataMap,
@@ -267,10 +308,7 @@ export function getMoveCommandsForSelectedElement(
   mappedPath: ElementPath,
   drag: CanvasVector,
   options?: MoveCommandsOptions,
-): {
-  commands: Array<SetCssLengthProperty | AdjustCssLengthProperties>
-  intendedBounds: Array<CanvasFrameAndTarget>
-} {
+): CommandsAndIntendedBounds {
   const element: JSXElement | null = getJSXElementFromProjectContents(
     selectedElement,
     projectContents,
@@ -302,6 +340,10 @@ export function getMoveCommandsForSelectedElement(
       : null) ??
     null
 
+  if (element == null) {
+    return { commands: [], intendedBounds: [] }
+  }
+
   const globalFrame = nullIfInfinity(
     MetadataUtils.getFrameInCanvasCoords(selectedElement, startingMetadata),
   )
@@ -310,35 +352,16 @@ export function getMoveCommandsForSelectedElement(
     MetadataUtils.getLocalFrame(selectedElement, startingMetadata, EP.parentPath(mappedPath)),
   )
 
-  if (element == null) {
-    return { commands: [], intendedBounds: [] }
-  }
-
-  if (options?.ignoreLocalFrame === true) {
-    return createMoveCommandsForElementPositionRelative(
-      element,
-      selectedElement,
-      mappedPath,
-      drag,
-      globalFrame,
-      elementParentBounds,
-      elementMetadata?.specialSizeMeasurements.parentFlexDirection ?? null,
-    )
-  }
-
-  if (globalFrame == null || localFrame == null) {
-    return { commands: [], intendedBounds: [] }
-  }
-
-  return createMoveCommandsForElementCreatingMissingPins(
+  return getMoveCommandsForDrag(
+    elementParentBounds,
     element,
     selectedElement,
     mappedPath,
     drag,
     globalFrame,
     localFrame,
-    elementParentBounds,
     elementMetadata?.specialSizeMeasurements.parentFlexDirection ?? null,
+    options?.ignoreLocalFrame ?? false,
   )
 }
 
diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index aeec1504654d..9a828d007812 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -149,6 +149,8 @@ export const GridMeasurementHelperKey = (gridPath: ElementPath) =>
   `grid-measurement-helper-${EP.toString(gridPath)}`
 export const GridElementContainingBlockKey = (gridPath: ElementPath) =>
   `grid-measurement-containing-block-${EP.toString(gridPath)}`
+export const GridElementChildContainingBlockKey = (gridPath: ElementPath) =>
+  `${GridElementContainingBlockKey(gridPath)}-child`
 
 export interface GridControlProps {
   grid: GridData
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 58d1b9a5c0cb..4e81983e6e70 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -110,6 +110,7 @@ import {
   GridCellTestId,
   GridControlKey,
   gridEdgeToEdgePosition,
+  GridElementChildContainingBlockKey,
   GridElementContainingBlockKey,
   GridMeasurementHelperKey,
   GridMeasurementHelperMap,
@@ -2050,7 +2051,7 @@ const GridElementContainingBlock = React.memo<GridElementContainingBlockProps>((
       style={style}
     >
       <div
-        id={`${GridElementContainingBlockKey(props.gridPath)}-child`}
+        id={GridElementChildContainingBlockKey(props.gridPath)}
         style={{
           ...gridChildStyle,
           pointerEvents: 'none',

From b8c8a713f60d81edcc60f8a7bed3975ca28bfae3 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:19:27 +0000
Subject: [PATCH 257/272] fix(grids) Restore Metadata When Cancelling
 Interaction. (#6694)

- `interactionCancel` now always restores the metadata regardless of the
state of the interaction session.
---
 .../editor/store/dispatch-strategies.spec.tsx    |  2 +-
 .../editor/store/dispatch-strategies.tsx         | 16 +++++-----------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/editor/src/components/editor/store/dispatch-strategies.spec.tsx b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
index 69d3253550f9..46afee9d3b88 100644
--- a/editor/src/components/editor/store/dispatch-strategies.spec.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.spec.tsx
@@ -140,7 +140,7 @@ describe('interactionCancel', () => {
         'zero-drag-not-permitted',
       ),
     )
-    const actualResult = interactionCancel(editorStore, dispatchResultFromEditorStore(editorStore))
+    const actualResult = interactionCancel(dispatchResultFromEditorStore(editorStore))
     expect(actualResult.newStrategyState.commandDescriptions).toHaveLength(0)
     expect(actualResult.newStrategyState.currentStrategyCommands).toHaveLength(0)
     expect(actualResult.newStrategyState.currentStrategy).toBeNull()
diff --git a/editor/src/components/editor/store/dispatch-strategies.tsx b/editor/src/components/editor/store/dispatch-strategies.tsx
index b49b3c5e3070..a9e3861a4cc0 100644
--- a/editor/src/components/editor/store/dispatch-strategies.tsx
+++ b/editor/src/components/editor/store/dispatch-strategies.tsx
@@ -407,22 +407,16 @@ export function interactionStart(
   }
 }
 
-export function interactionCancel(
-  storedState: EditorStoreFull,
-  result: EditorStoreUnpatched,
-): HandleStrategiesResult {
-  const interactionWasInProgress = interactionInProgress(
-    storedState.unpatchedEditor.canvas.interactionSession,
-  )
+export function interactionCancel(result: EditorStoreUnpatched): HandleStrategiesResult {
   const updatedEditorState: EditorState = {
     ...result.unpatchedEditor,
     canvas: {
       ...result.unpatchedEditor.canvas,
       interactionSession: null,
     },
-    jsxMetadata: interactionWasInProgress ? {} : result.unpatchedEditor.jsxMetadata,
-    domMetadata: interactionWasInProgress ? {} : result.unpatchedEditor.domMetadata,
-    spyMetadata: interactionWasInProgress ? {} : result.unpatchedEditor.spyMetadata,
+    jsxMetadata: result.unpatchedEditor.jsxMetadata,
+    domMetadata: result.unpatchedEditor.domMetadata,
+    spyMetadata: result.unpatchedEditor.spyMetadata,
   }
 
   return {
@@ -823,7 +817,7 @@ function handleStrategiesInner(
     }
   } else {
     if (cancelInteraction) {
-      return interactionCancel(storedState, result)
+      return interactionCancel(result)
     } else if (makeChangesPermanent) {
       return interactionFinished(strategies, storedState, result)
     } else {

From 290e7477677d81a8dc590b57593454b15d0dcf47 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:35:22 +0100
Subject: [PATCH 258/272] Ruler marker resize for non-stretching grid items
 (#6696)

**Problem:**

It should be possible to resize non-stretching grid items via the ruler
markers.

**Fix:**

Because of how grids are rendered, similarly to what happened in
https://github.com/concrete-utopia/utopia/pull/6691, we need to
calculate the rendered dimensions of grid _cells_ (not their contained
items!) after they are rendered, since for non-stretching grid items
their dimensions (via `getGridChildCellCoordBoundsFromCanvas`) don't
match the ones of the cell(s) they are configured to target.

This PR uses the logic introduced in
https://github.com/concrete-utopia/utopia/pull/6691 to calculate the
size of a grid cell starting from its item, and uses that to correctly
place the ruler markers for non-stretching items.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6695
---
 .../strategies/grid-helpers.ts                |  28 ++--
 ...e-element-ruler-strategy.spec.browser2.tsx |  60 ++++++-
 .../grid-resize-element-ruler-strategy.ts     |   6 -
 .../canvas/controls/grid-controls.tsx         | 141 ++---------------
 .../canvas/controls/grid-measurements.tsx     | 146 ++++++++++++++++--
 5 files changed, 222 insertions(+), 159 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index af367612b5f9..4250ba0d1680 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -19,7 +19,6 @@ import {
 } from '../../../../core/shared/element-template'
 import {
   localRectangle,
-  Size,
   zeroRectIfNullOrInfinity,
   type CanvasRectangle,
   type LocalRectangle,
@@ -753,6 +752,9 @@ export function getGridRelativeContainingBlock(
   gridMetadata: ElementInstanceMetadata,
   cellMetadata: ElementInstanceMetadata,
   cellProperties: GridElementProperties,
+  options?: {
+    forcePositionRelative?: boolean
+  },
 ): LocalRectangle {
   const gridProperties = gridMetadata.specialSizeMeasurements.containerGridProperties
 
@@ -779,17 +781,19 @@ export function getGridRelativeContainingBlock(
 
   // Gap needs to be set only if the other two are not present or we'll have rendering issues
   // due to how measurements are calculated.
-  if (
-    gridMetadata.specialSizeMeasurements.rowGap != null &&
-    gridMetadata.specialSizeMeasurements.columnGap != null
-  ) {
-    const gap = gridMetadata.specialSizeMeasurements.gap
-    gridElement.style.gap = gap == null ? 'initial' : `${gap}px`
-  } else {
+  const hasRowGap = gridMetadata.specialSizeMeasurements.rowGap != null
+  if (hasRowGap) {
     const rowGap = gridMetadata.specialSizeMeasurements.rowGap
-    gridElement.style.rowGap = rowGap == null ? 'initial' : `${rowGap}px`
+    gridElement.style.rowGap = `${rowGap}px`
+  }
+  const hasColumnGap = gridMetadata.specialSizeMeasurements.columnGap != null
+  if (hasColumnGap) {
     const columnGap = gridMetadata.specialSizeMeasurements.columnGap
-    gridElement.style.columnGap = columnGap == null ? 'initial' : `${columnGap}px`
+    gridElement.style.columnGap = `${columnGap}px`
+  }
+  if (!hasColumnGap && !hasRowGap) {
+    const gap = gridMetadata.specialSizeMeasurements.gap
+    gridElement.style.gap = gap == null ? 'initial' : `${gap}px`
   }
 
   // Include the padding.
@@ -855,7 +859,9 @@ export function getGridRelativeContainingBlock(
       'row',
     )
   }
-  gridChildElement.style.position = cellMetadata.specialSizeMeasurements.position ?? 'initial'
+  gridChildElement.style.position = options?.forcePositionRelative
+    ? 'relative'
+    : cellMetadata.specialSizeMeasurements.position ?? 'initial'
   // Fill out the entire space available.
   gridChildElement.style.top = '0'
   gridChildElement.style.left = '0'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.spec.browser2.tsx
index 351199046ddb..f3b6ef44b04d 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.spec.browser2.tsx
@@ -1,15 +1,15 @@
+import * as EP from '../../../../core/shared/element-path'
 import {
   selectComponentsForTest,
   setFeatureForBrowserTestsUseInDescribeBlockOnly,
 } from '../../../../utils/utils.test-utils'
-import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
-import * as EP from '../../../../core/shared/element-path'
 import {
   RulerMarkerColumnEndTestId,
   RulerMarkerRowEndTestId,
   RulerMarkerRowStartTestId,
 } from '../../controls/grid-controls'
 import { mouseDownAtPoint, mouseMoveToPoint, mouseUpAtPoint } from '../../event-helpers.test-utils'
+import { renderTestEditorWithCode } from '../../ui-jsx.test-utils'
 
 describe('grid resize element ruler strategy', () => {
   setFeatureForBrowserTestsUseInDescribeBlockOnly('Grid Ruler Markers', true)
@@ -119,6 +119,42 @@ describe('grid resize element ruler strategy', () => {
       expect(element.style.gridRowEnd).toBe('3')
     }
   })
+
+  it('can resize a non-stretching pinned element', async () => {
+    const renderResult = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+    await selectComponentsForTest(renderResult, [EP.fromString('sb/grid/pinned-fixed')])
+
+    const control = await renderResult.renderedDOM.findByTestId(RulerMarkerColumnEndTestId)
+    const controlRect = control.getBoundingClientRect()
+    const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+    const endPoint = { x: controlRect.x + 200, y: controlRect.y + 5 }
+    await mouseDownAtPoint(control, startPoint)
+    await mouseMoveToPoint(control, endPoint)
+    await mouseUpAtPoint(control, endPoint)
+
+    const element = await renderResult.renderedDOM.findByTestId('pinned-fixed')
+    expect(element.style.gridColumn).toBe('1 / 3')
+    expect(element.style.gridRow).toBe('2')
+  })
+
+  it('can resize a non-stretching flow element', async () => {
+    const renderResult = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+    await selectComponentsForTest(renderResult, [EP.fromString('sb/grid/flow-fixed')])
+
+    const control = await renderResult.renderedDOM.findByTestId(RulerMarkerColumnEndTestId)
+    const controlRect = control.getBoundingClientRect()
+    const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+    const endPoint = { x: controlRect.x + 200, y: controlRect.y + 5 }
+    await mouseDownAtPoint(control, startPoint)
+    await mouseMoveToPoint(control, endPoint)
+    await mouseUpAtPoint(control, endPoint)
+
+    const element = await renderResult.renderedDOM.findByTestId('flow-fixed')
+    expect(element.style.gridColumn).toBe('span 2')
+    expect(element.style.gridRow).toBe('auto')
+  })
 })
 
 const ProjectCode = `
@@ -161,6 +197,15 @@ export var storyboard = (
         data-uid='flow2'
         data-testid='flow2'
       />
+      <div
+        style={{
+          backgroundColor: '#f0f',
+          width: 50,
+          height: 50,
+        }}
+        data-uid='flow-fixed'
+        data-testid='flow-fixed'
+      />
       <div
         style={{
           backgroundColor: '#f09',
@@ -172,6 +217,17 @@ export var storyboard = (
         data-uid='pinned'
         data-testid='pinned'
       />
+      <div
+        style={{
+          backgroundColor: '#ff0',
+          gridColumn: 1,
+          gridRow: 2,
+          width: 50,
+          height: 50,
+        }}
+        data-uid='pinned-fixed'
+        data-testid='pinned-fixed'
+      />
     </div>
   </Storyboard>
 )
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts
index 877807b8e796..d23a45a82bcc 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts
@@ -11,7 +11,6 @@ import { canvasRectangle, isInfinityRectangle } from '../../../../core/shared/ma
 import { assertNever } from '../../../../core/shared/utils'
 import { gridContainerIdentifier, gridItemIdentifier } from '../../../editor/store/editor-state'
 import { isCSSKeyword } from '../../../inspector/common/css-utils'
-import { isFillOrStretchModeAppliedOnAnySide } from '../../../inspector/inspector-common'
 import {
   controlsForGridPlaceholders,
   GridResizeControls,
@@ -91,11 +90,6 @@ export const gridResizeElementRulerStrategy: CanvasStrategyFactory = (
         return emptyStrategyApplicationResult
       }
 
-      if (!isFillOrStretchModeAppliedOnAnySide(canvasState.startingMetadata, selectedElement)) {
-        // TODO this should be removed to support resizing cells that are not stretching
-        return emptyStrategyApplicationResult
-      }
-
       const allCellBounds =
         selectedElementMetadata.specialSizeMeasurements.parentGridCellGlobalFrames
 
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 4e81983e6e70..15be395a7d3d 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -30,7 +30,6 @@ import type { CanvasPoint, CanvasRectangle, LocalRectangle } from '../../../core
 import {
   boundingRectangleArray,
   canvasPoint,
-  canvasRectangle,
   isFiniteRectangle,
   isInfinityRectangle,
   nullIfInfinity,
@@ -80,10 +79,7 @@ import {
   gridResizeRulerHandle,
 } from '../canvas-strategies/interaction-state'
 import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
-import {
-  getGridChildCellCoordBoundsFromCanvas,
-  gridCellTargetId,
-} from '../canvas-strategies/strategies/grid-cell-bounds'
+import { gridCellTargetId } from '../canvas-strategies/strategies/grid-cell-bounds'
 import type { GridCellGlobalFrames } from '../canvas-strategies/strategies/grid-helpers'
 import {
   getGlobalFrameOfGridCellFromMetadata,
@@ -130,6 +126,7 @@ import type { RulerMarkerType } from './grid-controls-ruler-markers'
 import { rulerMarkerIcons } from './grid-controls-ruler-markers'
 import type { GridData, GridMeasurementHelperData } from './grid-measurements'
 import {
+  calculateGridCellRectangle,
   getGridElementMeasurementHelperData,
   useGridElementMeasurementHelperData,
   useGridMeasurementHelperData,
@@ -2245,11 +2242,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
   const rulerMarkerData: RulerMarkerData | null = useEditorState(
     Substores.metadata,
     (store) => {
-      if (gridRect == null) {
-        return null
-      }
-
-      if (parentGridCellGlobalFrames == null) {
+      if (gridRect == null || parentGridCellGlobalFrames == null) {
         return null
       }
 
@@ -2267,55 +2260,11 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
       }
 
       const parentGrid = elementMetadata.specialSizeMeasurements.parentContainerGridProperties
-
-      const originalGrid = findOriginalGrid(store.editor.jsxMetadata, EP.parentPath(props.path))
-      if (originalGrid == null) {
-        return null
-      }
-
-      const cellBounds = getGridChildCellCoordBoundsFromCanvas(
-        elementMetadata,
-        parentGridCellGlobalFrames,
-      )
-      if (cellBounds == null) {
+      const cellRect = calculateGridCellRectangle(store.editor.jsxMetadata, props.path)
+      if (cellRect == null) {
         return null
       }
 
-      if (parentGridCellGlobalFrames.length === 0) {
-        return null
-      }
-      const firstRow = parentGridCellGlobalFrames[0]
-      const cellBoundsColumnIndex = cellBounds.column - 1
-      const left = firstRow[cellBoundsColumnIndex].x
-      const width = getCellCanvasWidthFromBounds(
-        parentGridCellGlobalFrames,
-        cellBoundsColumnIndex,
-        cellBounds.width,
-      )
-
-      const cellBoundsRowIndex = cellBounds.row - 1
-      if (
-        parentGridCellGlobalFrames.length <= cellBoundsRowIndex ||
-        parentGridCellGlobalFrames[cellBoundsRowIndex].length === 0
-      ) {
-        return null
-      }
-      const firstColumn = parentGridCellGlobalFrames[cellBoundsRowIndex][0]
-      const top = firstColumn.y
-      const height = getCellCanvasHeightFromBounds(
-        parentGridCellGlobalFrames,
-        cellBoundsRowIndex,
-        cellBounds.height,
-      )
-
-      const cellRect = parentGridCellGlobalFrames[cellBounds.row - 1][cellBounds.column - 1]
-      const cellRectResized = canvasRectangle({
-        x: cellRect.x,
-        y: cellRect.y,
-        width: width,
-        height: height,
-      })
-
       let otherColumnMarkers: Array<RulerMarkerPositionData> = []
       let otherRowMarkers: Array<RulerMarkerPositionData> = []
 
@@ -2341,10 +2290,10 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
       const lastColumnIndex = parentGridCellGlobalFrames[0].length - 1
       for (let columnIndex = 0; columnIndex <= lastColumnIndex; columnIndex++) {
         const cell = parentGridCellGlobalFrames[0][columnIndex]
-        if (left !== cell.x) {
+        if (cellRect.x !== cell.x) {
           addOtherMarker('column', 'start', cell.x, gridRect.y)
         }
-        if (left + width !== cell.x + cell.width) {
+        if (cellRect.x + cellRect.width !== cell.x + cell.width) {
           addOtherMarker('column', 'end', cell.x + cell.width, gridRect.y)
         }
       }
@@ -2353,10 +2302,10 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
       const lastRowIndex = parentGridCellGlobalFrames.length - 1
       for (let rowIndex = 0; rowIndex <= lastRowIndex; rowIndex++) {
         const cell = parentGridCellGlobalFrames[rowIndex][0]
-        if (top !== cell.y) {
+        if (cellRect.y !== cell.y) {
           addOtherMarker('row', 'start', gridRect.x, cell.y)
         }
-        if (top + height !== cell.y + cell.height) {
+        if (cellRect.y + cellRect.height !== cell.y + cell.height) {
           addOtherMarker('row', 'end', gridRect.x, cell.y + cell.height)
         }
       }
@@ -2365,7 +2314,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         markerType: 'selected',
         rowOrColumn: 'column',
         top: gridRect.y,
-        left: left,
+        left: cellRect.x,
         position: elementGridProperties.gridColumnStart,
         bound: 'start',
       }
@@ -2373,14 +2322,14 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         markerType: 'selected',
         rowOrColumn: 'column',
         top: gridRect.y,
-        left: left + width,
+        left: cellRect.x + cellRect.width,
         position: elementGridProperties.gridColumnEnd,
         bound: 'end',
       }
       const rowStart: RulerMarkerPositionData = {
         markerType: 'selected',
         rowOrColumn: 'row',
-        top: top,
+        top: cellRect.y,
         left: gridRect.x,
         position: elementGridProperties.gridRowStart,
         bound: 'start',
@@ -2388,15 +2337,15 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
       const rowEnd: RulerMarkerPositionData = {
         markerType: 'selected',
         rowOrColumn: 'row',
-        top: top + height,
+        top: cellRect.y + cellRect.height,
         left: gridRect.x,
         position: elementGridProperties.gridRowEnd,
         bound: 'end',
       }
 
-      return {
+      const data: RulerMarkerData = {
         parentGrid: parentGrid,
-        cellRect: cellRectResized,
+        cellRect: cellRect,
         gridRect: gridRect,
         otherColumnMarkers: otherColumnMarkers,
         otherRowMarkers: otherRowMarkers,
@@ -2405,6 +2354,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         rowStart: rowStart,
         rowEnd: rowEnd,
       }
+      return data
     },
     'RulerMarkers markers',
   )
@@ -2953,65 +2903,6 @@ function getRulerMarkerColor(colorTheme: ThemeObject, marker: RulerMarkerPositio
   }
 }
 
-function getCellCanvasWidthFromBounds(
-  grid: CanvasRectangle[][],
-  index: number,
-  cells: number,
-): number {
-  if (grid.length === 0) {
-    return 0
-  }
-
-  const currentRow = grid[0]
-  if (currentRow.length <= index) {
-    return 0
-  }
-  if (cells <= 1) {
-    return currentRow[index].width
-  }
-
-  function getPadding() {
-    if (currentRow.length <= 1) {
-      return 0
-    }
-    return currentRow[1].x - (currentRow[0].x + currentRow[0].width)
-  }
-  const padding = getPadding()
-
-  return currentRow.slice(index + 1, index + cells).reduce((acc, curr) => {
-    return acc + curr.width + padding
-  }, currentRow[index].width)
-}
-
-function getCellCanvasHeightFromBounds(
-  grid: CanvasRectangle[][],
-  index: number,
-  cells: number,
-): number {
-  const columns = grid.map((row) => row[0])
-  if (columns.length <= index) {
-    return 0
-  }
-
-  const currentColumn = columns[index]
-
-  if (cells <= 1) {
-    return currentColumn.height
-  }
-
-  function getPadding() {
-    if (grid.length <= 1) {
-      return 0
-    }
-    return grid[1][0].y - (grid[0][0].y + grid[0][0].height)
-  }
-  const padding = getPadding()
-
-  return columns.slice(index + 1, index + cells).reduce((acc, curr) => {
-    return acc + curr.height + padding
-  }, currentColumn.height)
-}
-
 export const GridHelperControls = () => {
   const helperControlsStore = React.useContext(HelperControlsStateContext)
   return (
diff --git a/editor/src/components/canvas/controls/grid-measurements.tsx b/editor/src/components/canvas/controls/grid-measurements.tsx
index 9dcdf39daf1a..8600da3ef9cc 100644
--- a/editor/src/components/canvas/controls/grid-measurements.tsx
+++ b/editor/src/components/canvas/controls/grid-measurements.tsx
@@ -1,32 +1,47 @@
 import type { Property } from 'csstype'
 import type { CSSProperties } from 'react'
-import type { GridIdentifier } from '../../editor/store/editor-state'
+import React from 'react'
+import type { Sides } from 'utopia-api/core'
+import { sides } from 'utopia-api/core'
+import type { ElementPath } from 'utopia-shared/src/types'
+import { MetadataUtils } from '../../../core/model/element-metadata-utils'
+import { domRectToScaledCanvasRectangle, getRoundingFn } from '../../../core/shared/dom-utils'
+import { applicative4Either, defaultEither, isRight, mapEither } from '../../../core/shared/either'
+import * as EP from '../../../core/shared/element-path'
 import type {
   BorderWidths,
+  ElementInstanceMetadata,
+  ElementInstanceMetadataMap,
   GridAutoOrTemplateBase,
   GridElementProperties,
 } from '../../../core/shared/element-template'
-import type { CanvasRectangle } from '../../../core/shared/math-utils'
-import type { Sides } from 'utopia-api/core'
-import { sides } from 'utopia-api/core'
-import type { ElementPath } from 'utopia-shared/src/types'
-import { getFromElement } from '../direct-dom-lookups'
+import {
+  canvasRectangle,
+  offsetRect,
+  zeroCanvasRect,
+  type CanvasRectangle,
+} from '../../../core/shared/math-utils'
+import { assertNever } from '../../../core/shared/utils'
+import { useKeepReferenceEqualityIfPossible } from '../../../utils/react-performance'
+import Utils from '../../../utils/utils'
+import type { GridIdentifier } from '../../editor/store/editor-state'
+import { Substores, useEditorState } from '../../editor/store/store-hook'
+import { useMonitorChangesToElements } from '../../editor/store/store-monitor'
+import { isStaticGridRepeat, parseCSSLength } from '../../inspector/common/css-utils'
+import { getGridChildCellCoordBoundsFromCanvas } from '../canvas-strategies/strategies/grid-cell-bounds'
+import type { GridCellGlobalFrames } from '../canvas-strategies/strategies/grid-helpers'
+import {
+  findOriginalGrid,
+  getGridRelativeContainingBlock,
+} from '../canvas-strategies/strategies/grid-helpers'
 import { CanvasContainerID } from '../canvas-types'
+import { getFromElement } from '../direct-dom-lookups'
 import {
   applicativeSidesPxTransform,
   getGridContainerProperties,
   getGridElementProperties,
 } from '../dom-walker'
-import { isStaticGridRepeat, parseCSSLength } from '../../inspector/common/css-utils'
-import { assertNever } from '../../../core/shared/utils'
-import { applicative4Either, defaultEither, isRight, mapEither } from '../../../core/shared/either'
-import { domRectToScaledCanvasRectangle, getRoundingFn } from '../../../core/shared/dom-utils'
-import Utils from '../../../utils/utils'
-import React from 'react'
-import { Substores, useEditorState } from '../../editor/store/store-hook'
 import { addChangeCallback, removeChangeCallback } from '../observers'
-import { useMonitorChangesToElements } from '../../editor/store/store-monitor'
-import { useKeepReferenceEqualityIfPossible } from '../../../utils/react-performance'
 
 export type GridElementMeasurementHelperData = {
   frame: CanvasRectangle
@@ -341,3 +356,104 @@ export function useGridElementMeasurementHelperData(
 
   return useKeepReferenceEqualityIfPossible(getGridElementMeasurementHelperData(elementPath, scale))
 }
+
+function getCellPositionFromCanvas(
+  elementMetadata: ElementInstanceMetadata,
+  parentGridCellGlobalFrames: GridCellGlobalFrames,
+): { left: number; top: number } | null {
+  const cellCoordBoundsFromCanvas = getGridChildCellCoordBoundsFromCanvas(
+    elementMetadata,
+    parentGridCellGlobalFrames,
+  )
+  if (cellCoordBoundsFromCanvas == null) {
+    return null
+  }
+
+  if (parentGridCellGlobalFrames.length === 0) {
+    return null
+  }
+
+  const firstRow = parentGridCellGlobalFrames[0]
+  const left = firstRow[cellCoordBoundsFromCanvas.column - 1].x
+
+  const cellBoundsRowIndex = cellCoordBoundsFromCanvas.row - 1
+  if (
+    parentGridCellGlobalFrames.length <= cellBoundsRowIndex ||
+    parentGridCellGlobalFrames[cellBoundsRowIndex].length === 0
+  ) {
+    return null
+  }
+  const firstColumn = parentGridCellGlobalFrames[cellBoundsRowIndex][0]
+  const top = firstColumn.y
+
+  return { left, top }
+}
+
+function getCellDimensions(
+  jsxMetadata: ElementInstanceMetadataMap,
+  cellItemMetadata: ElementInstanceMetadata,
+): { width: number; height: number } | null {
+  const originalGrid = findOriginalGrid(jsxMetadata, EP.parentPath(cellItemMetadata.elementPath))
+  if (originalGrid == null) {
+    return null
+  }
+
+  const gridMetadata = MetadataUtils.findElementByElementPath(jsxMetadata, originalGrid)
+  if (gridMetadata == null) {
+    return null
+  }
+
+  const coordinateSystemBounds =
+    cellItemMetadata.specialSizeMeasurements.immediateParentBounds ?? zeroCanvasRect
+
+  const calculatedCellBounds = getGridRelativeContainingBlock(
+    gridMetadata,
+    cellItemMetadata,
+    cellItemMetadata.specialSizeMeasurements.elementGridProperties,
+    {
+      forcePositionRelative: true,
+    },
+  )
+  const cellRect = offsetRect(canvasRectangle(calculatedCellBounds), coordinateSystemBounds)
+  const { width, height } = cellRect
+
+  return { width, height }
+}
+
+/**
+ * Returns the _actual_ canvas rectangle for a grid _cell_ (not its contained item) that's rendered on the canvas.
+ * This is done by combining grabbing the position from the parent grid frames (which is required for flow elements!),
+ * with the HTML calculation of dimensions in getGridRelativeContainingBlock.
+ */
+export function calculateGridCellRectangle(
+  jsxMetadata: ElementInstanceMetadataMap,
+  path: ElementPath,
+): CanvasRectangle | null {
+  const cellItemMetadata = MetadataUtils.findElementByElementPath(jsxMetadata, path)
+  if (cellItemMetadata == null) {
+    return null
+  }
+
+  const parentGridCellGlobalFrames =
+    cellItemMetadata.specialSizeMeasurements.parentGridCellGlobalFrames
+  if (parentGridCellGlobalFrames == null) {
+    return null
+  }
+
+  const position = getCellPositionFromCanvas(cellItemMetadata, parentGridCellGlobalFrames)
+  if (position == null) {
+    return null
+  }
+
+  const dimensions = getCellDimensions(jsxMetadata, cellItemMetadata)
+  if (dimensions == null) {
+    return null
+  }
+
+  return canvasRectangle({
+    x: position.left,
+    y: position.top,
+    width: dimensions.width,
+    height: dimensions.height,
+  })
+}

From 911e427d6a5b5b29ff4e3d3a0d45d9b5a8670fcd Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 5 Dec 2024 13:50:05 +0100
Subject: [PATCH 259/272] Ruler markers outine + snapline outline (#6698)

**Problem:**

1. The ruler markers used to have a white outline, but it's gone
2. The snapline labels should have a white outline around their text

**Fix:**

| What | Img |
|---|------|
| Markers | <img width="427" alt="Screenshot 2024-12-05 at 10 51 06"
src="https://github.com/user-attachments/assets/94a54c19-d3dc-4a77-ae54-82554129abf6">
|
| Labels | <img width="711" alt="Screenshot 2024-12-05 at 10 53 18"
src="https://github.com/user-attachments/assets/6b12be2e-c8ad-44a2-a5c0-0b95dd0b0268">
|

Fixes #6697
---
 .../controls/grid-controls-ruler-markers.tsx  | 42 ++++++++++++++++---
 .../canvas/controls/grid-controls.tsx         | 13 +++++-
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx b/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx
index d3c58737b402..f8023464a468 100644
--- a/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import type { UtopiColor } from '../../../uuiui'
+import { colorTheme, type UtopiColor } from '../../../uuiui'
 import { RulerMarkerIconSize } from './grid-controls'
 
 export type RulerMarkerType = 'span-start' | 'span-end' | 'auto' | 'auto-short' | 'pinned'
@@ -29,6 +29,7 @@ function upFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNode
           RulerMarkerIconSize / 2
         },0 ${RulerMarkerIconSize},${RulerMarkerIconSize} 0,${RulerMarkerIconSize}`}
         fill={fillColor.value}
+        stroke={colorTheme.white.value}
       />
     </MarkerSVG>
   )
@@ -40,6 +41,7 @@ function rightFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactN
       <polygon
         points={`${RulerMarkerIconSize},${RulerMarkerIconSize / 2} 0,0 0,${RulerMarkerIconSize}`}
         fill={fillColor.value}
+        stroke={colorTheme.white.value}
       />
     </MarkerSVG>
   )
@@ -51,6 +53,7 @@ function downFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNo
       <polygon
         points={`${RulerMarkerIconSize / 2},${RulerMarkerIconSize} 0,0 ${RulerMarkerIconSize},0`}
         fill={fillColor.value}
+        stroke={colorTheme.white.value}
       />
     </MarkerSVG>
   )
@@ -64,6 +67,7 @@ function leftFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNo
           RulerMarkerIconSize / 2
         } ${RulerMarkerIconSize},0 ${RulerMarkerIconSize},${RulerMarkerIconSize}`}
         fill={fillColor.value}
+        stroke={colorTheme.white.value}
       />
     </MarkerSVG>
   )
@@ -72,7 +76,14 @@ function leftFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNo
 function regularVerticalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
   return (
     <MarkerSVG scale={scale}>
-      <rect x='4' y='0' width='3' height={`${RulerMarkerIconSize}`} fill={fillColor.value} />
+      <rect
+        x='4'
+        y='0'
+        width='3'
+        height={`${RulerMarkerIconSize}`}
+        fill={fillColor.value}
+        stroke={colorTheme.white.value}
+      />
     </MarkerSVG>
   )
 }
@@ -80,7 +91,14 @@ function regularVerticalPipe(fillColor: UtopiColor, scale: number): React.ReactN
 function regularHorizontalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
   return (
     <MarkerSVG scale={scale}>
-      <rect x='0' y='4' width={`${RulerMarkerIconSize}`} height='3' fill={fillColor.value} />
+      <rect
+        x='0'
+        y='4'
+        width={`${RulerMarkerIconSize}`}
+        height='3'
+        fill={fillColor.value}
+        stroke={colorTheme.white.value}
+      />
     </MarkerSVG>
   )
 }
@@ -88,7 +106,14 @@ function regularHorizontalPipe(fillColor: UtopiColor, scale: number): React.Reac
 function shortVerticalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
   return (
     <MarkerSVG scale={scale}>
-      <rect x='4' y='2' width='3' height='9' fill={fillColor.value} />
+      <rect
+        x='4'
+        y='2'
+        width='3'
+        height='9'
+        fill={fillColor.value}
+        stroke={colorTheme.white.value}
+      />
     </MarkerSVG>
   )
 }
@@ -96,7 +121,14 @@ function shortVerticalPipe(fillColor: UtopiColor, scale: number): React.ReactNod
 function shortHorizontalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
   return (
     <MarkerSVG scale={scale}>
-      <rect x='2' y='4' width='9' height='3' fill={fillColor.value} />
+      <rect
+        x='2'
+        y='4'
+        width='9'
+        height='3'
+        fill={fillColor.value}
+        stroke={colorTheme.white.value}
+      />
     </MarkerSVG>
   )
 }
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 15be395a7d3d..fa7abecbbaa1 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -2697,7 +2697,7 @@ const SnapLine = React.memo(
             style={{
               position: 'absolute',
               top: axis === 'column' ? -labelHeight - RulerMarkerIconSize - 5 : -10,
-              left: axis === 'row' ? -(labelWidth - RulerMarkerIconSize + 30) : 0,
+              left: axis === 'row' ? -(labelWidth - RulerMarkerIconSize + 30) : -7,
               color: colorTheme.brandNeonPink.value,
               fontWeight: 700,
               textAlign: axis === 'row' ? 'right' : undefined,
@@ -2706,7 +2706,16 @@ const SnapLine = React.memo(
               zoom: 1 / canvasScale,
             }}
           >
-            {printPin(props.gridTemplate, targetMarker.position, axis)}
+            <span
+              style={{
+                backgroundColor: 'white',
+                padding: '2px 4px',
+                borderRadius: 2,
+                fontSize: 11 / canvasScale,
+              }}
+            >
+              {printPin(props.gridTemplate, targetMarker.position, axis)}
+            </span>
           </div>,
         )}
       </div>

From 2a4e2c065013729fd0cc6157d0dd9fbe50c7e6dc Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:05:47 +0100
Subject: [PATCH 260/272] Clamp ruler marker resize offset line position
 (#6700)

**Problem:**

While resizing via the ruler markers the offset line should not be
allowed to go past the grid container bounds.

**Fix:**

Clamp the `top` and `left` props of the line based on the container.

Fixes #6699
---
 .../src/components/canvas/controls/grid-controls.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index fa7abecbbaa1..9362d108d06c 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -30,6 +30,7 @@ import type { CanvasPoint, CanvasRectangle, LocalRectangle } from '../../../core
 import {
   boundingRectangleArray,
   canvasPoint,
+  clamp,
   isFiniteRectangle,
   isInfinityRectangle,
   nullIfInfinity,
@@ -2606,14 +2607,21 @@ const ResizeOffsetLine = React.memo(
     }
     const isColumn = props.edge === 'column-start' || props.edge === 'column-end'
 
+    const top = isColumn
+      ? props.container.y
+      : clamp(props.container.y, props.container.y + props.container.height, props.drag.y)
+    const left = !isColumn
+      ? props.container.x
+      : clamp(props.container.x, props.container.x + props.container.width, props.drag.x)
+
     return (
       <div
         style={{
           position: 'absolute',
           width: isColumn ? 1 : props.container.width,
           height: !isColumn ? 1 : props.container.height,
-          top: isColumn ? props.container.y : props.drag.y,
-          left: !isColumn ? props.container.x : props.drag.x,
+          top: top,
+          left: left,
           borderLeft: isColumn ? `1px dashed ${colorTheme.primary.value}` : undefined,
           borderTop: !isColumn ? `1px dashed ${colorTheme.primary.value}` : undefined,
         }}

From 1aa33872108c897cfb5cd16a45d2fe4f0895a049 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:26:49 +0100
Subject: [PATCH 261/272] Adjust ruler marker resize for spanning elements
 (#6703)

**Problem:**

Ruler marker resize needs some extra tweaks for spanning elements.

**Fix:**

1. Make it possible to resize correctly a flow item that spans from the
start by dragging its end marker
2. Make it possible to resize correctly a flow item that spans from the
end by dragging its start/end markers and treat them as a more
traditional shrink/expand

Also added specific tests for span combinations.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6701
---
 ...e-element-ruler-strategy.spec.browser2.tsx | 180 ++++++++++++++++++
 .../grid-resize-element-ruler-strategy.ts     |  40 +++-
 2 files changed, 216 insertions(+), 4 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.spec.browser2.tsx
index f3b6ef44b04d..153e382509cd 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.spec.browser2.tsx
@@ -5,6 +5,7 @@ import {
 } from '../../../../utils/utils.test-utils'
 import {
   RulerMarkerColumnEndTestId,
+  RulerMarkerColumnStartTestId,
   RulerMarkerRowEndTestId,
   RulerMarkerRowStartTestId,
 } from '../../controls/grid-controls'
@@ -155,6 +156,127 @@ describe('grid resize element ruler strategy', () => {
     expect(element.style.gridColumn).toBe('span 2')
     expect(element.style.gridRow).toBe('auto')
   })
+
+  describe('spans', () => {
+    it('can resize a flow spanning element (start, from the right)', async () => {
+      const renderResult = await renderTestEditorWithCode(
+        ProjectCodeWithSpans,
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(renderResult, [EP.fromString('sb/grid/flow1')])
+
+      const control = await renderResult.renderedDOM.findByTestId(RulerMarkerColumnEndTestId)
+      const controlRect = control.getBoundingClientRect()
+      const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+      const endPoint = { x: controlRect.x + 200, y: controlRect.y + 5 }
+      await mouseDownAtPoint(control, startPoint)
+      await mouseMoveToPoint(control, endPoint)
+      await mouseUpAtPoint(control, endPoint)
+
+      const element = await renderResult.renderedDOM.findByTestId('flow1')
+      expect(element.style.gridColumn).toBe('span 3')
+      expect(element.style.gridRow).toBe('auto')
+    })
+
+    it('can resize a flow spanning element (start, from the left)', async () => {
+      const renderResult = await renderTestEditorWithCode(
+        ProjectCodeWithSpans,
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(renderResult, [EP.fromString('sb/grid/flow1')])
+
+      const control = await renderResult.renderedDOM.findByTestId(RulerMarkerColumnStartTestId)
+      const controlRect = control.getBoundingClientRect()
+      const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+      const endPoint = { x: controlRect.x + 200, y: controlRect.y + 5 }
+      await mouseDownAtPoint(control, startPoint)
+      await mouseMoveToPoint(control, endPoint)
+      await mouseUpAtPoint(control, endPoint)
+
+      const element = await renderResult.renderedDOM.findByTestId('flow1')
+      expect(element.style.gridColumn).toBe('')
+      expect(element.style.gridColumnStart).toBe('')
+      expect(element.style.gridColumnEnd).toBe('3')
+      expect(element.style.gridRow).toBe('auto')
+    })
+
+    it('can resize a flow spanning element (end)', async () => {
+      const renderResult = await renderTestEditorWithCode(
+        ProjectCodeWithSpans,
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(renderResult, [EP.fromString('sb/grid/flow2')])
+
+      // expand to the right
+      {
+        const control = await renderResult.renderedDOM.findByTestId(RulerMarkerColumnEndTestId)
+        const controlRect = control.getBoundingClientRect()
+        const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+        const endPoint = { x: controlRect.x + 200, y: controlRect.y + 5 }
+        await mouseDownAtPoint(control, startPoint)
+        await mouseMoveToPoint(control, endPoint)
+        await mouseUpAtPoint(control, endPoint)
+
+        const element = await renderResult.renderedDOM.findByTestId('flow2')
+        expect(element.style.gridColumn).toBe('2 / span 3')
+        expect(element.style.gridRow).toBe('auto')
+      }
+
+      // shrink from the left
+      {
+        const control = await renderResult.renderedDOM.findByTestId(RulerMarkerColumnStartTestId)
+        const controlRect = control.getBoundingClientRect()
+        const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+        const endPoint = { x: controlRect.x + 200, y: controlRect.y + 5 }
+        await mouseDownAtPoint(control, startPoint)
+        await mouseMoveToPoint(control, endPoint)
+        await mouseUpAtPoint(control, endPoint)
+
+        const element = await renderResult.renderedDOM.findByTestId('flow2')
+        expect(element.style.gridColumn).toBe('3 / span 2')
+        expect(element.style.gridRow).toBe('auto')
+      }
+
+      // expand back from the left
+      {
+        const control = await renderResult.renderedDOM.findByTestId(RulerMarkerColumnStartTestId)
+        const controlRect = control.getBoundingClientRect()
+        const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+        const endPoint = { x: controlRect.x - 400, y: controlRect.y + 5 }
+        await mouseDownAtPoint(control, startPoint)
+        await mouseMoveToPoint(control, endPoint)
+        await mouseUpAtPoint(control, endPoint)
+
+        const element = await renderResult.renderedDOM.findByTestId('flow2')
+        expect(element.style.gridColumn).toBe('1 / span 4')
+        expect(element.style.gridRow).toBe('auto')
+      }
+    })
+
+    it('can resize a pinned spanning element', async () => {
+      const renderResult = await renderTestEditorWithCode(
+        ProjectCodeWithSpans,
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(renderResult, [EP.fromString('sb/grid/pinned')])
+
+      const control = await renderResult.renderedDOM.findByTestId(RulerMarkerColumnEndTestId)
+      const controlRect = control.getBoundingClientRect()
+      const startPoint = { x: controlRect.x + 5, y: controlRect.y + 5 }
+      const endPoint = { x: controlRect.x + 200, y: controlRect.y + 5 }
+      await mouseDownAtPoint(control, startPoint)
+      await mouseMoveToPoint(control, endPoint)
+      await mouseUpAtPoint(control, endPoint)
+
+      const element = await renderResult.renderedDOM.findByTestId('pinned')
+      expect(element.style.gridColumn).toBe('2 / span 3')
+      expect(element.style.gridRow).toBe('3')
+    })
+  })
 })
 
 const ProjectCode = `
@@ -232,3 +354,61 @@ export var storyboard = (
   </Storyboard>
 )
 `
+
+const ProjectCodeWithSpans = `
+import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <div
+      style={{
+        backgroundColor: '#aaaaaa33',
+        position: 'absolute',
+        left: 210,
+        top: 80,
+        width: 690,
+        height: 459,
+        display: 'grid',
+        gap: 10,
+        gridTemplateColumns: '1fr 1fr 1fr 1fr',
+        gridTemplateRows: '1fr 1fr 1fr 1fr',
+      }}
+      data-uid='grid'
+      data-testid='grid'
+    >
+      <div
+        style={{
+          backgroundColor: '#09f',
+          alignSelf: 'stretch',
+          justifySelf: 'stretch',
+          gridColumn: 'span 2',
+        }}
+        data-uid='flow1'
+        data-testid='flow1'
+      />
+      <div
+        style={{
+          backgroundColor: '#f90',
+          alignSelf: 'stretch',
+          justifySelf: 'stretch',
+          gridColumn: '2 / span 2',
+        }}
+        data-uid='flow2'
+        data-testid='flow2'
+      />
+      <div
+        style={{
+          backgroundColor: '#f09',
+          gridColumn: '2 / span 2',
+          gridRow: 3,
+          alignSelf: 'stretch',
+          justifySelf: 'stretch',
+        }}
+        data-uid='pinned'
+        data-testid='pinned'
+      />
+    </div>
+  </Storyboard>
+)
+`
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts
index d23a45a82bcc..30c1fb75487a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts
@@ -5,7 +5,11 @@ import type {
   GridElementProperties,
   GridPositionOrSpan,
 } from '../../../../core/shared/element-template'
-import { gridPositionValue, isGridPositionValue } from '../../../../core/shared/element-template'
+import {
+  gridPositionValue,
+  isGridPositionValue,
+  isGridSpan,
+} from '../../../../core/shared/element-template'
 import type { CanvasPoint, CanvasRectangle, CanvasVector } from '../../../../core/shared/math-utils'
 import { canvasRectangle, isInfinityRectangle } from '../../../../core/shared/math-utils'
 import { assertNever } from '../../../../core/shared/utils'
@@ -160,8 +164,18 @@ export const gridResizeElementRulerStrategy: CanvasStrategyFactory = (
         closestVertical,
       )
 
-      const columnCount = getCellsCount(resizedProps.gridColumnStart, resizedProps.gridColumnEnd)
-      const rowCount = getCellsCount(resizedProps.gridRowStart, resizedProps.gridRowEnd)
+      const columnCount = getCellsCount(
+        resizedProps.gridColumnStart,
+        resizedProps.gridColumnEnd,
+        bounds.column,
+        bounds.width,
+      )
+      const rowCount = getCellsCount(
+        resizedProps.gridRowStart,
+        resizedProps.gridRowEnd,
+        bounds.row,
+        bounds.height,
+      )
 
       const normalizedGridProps: GridElementProperties = {
         gridColumnStart: normalizeGridElementPositionAfterResize(
@@ -295,12 +309,30 @@ function getResizedElementProperties(
 function getCellsCount(
   start: GridPositionOrSpan | null,
   end: GridPositionOrSpan | null,
+  originalStart: number,
+  originalSize: number,
 ): number | null {
+  // start is a number
   if (isGridPositionValue(start) && start.numericalPosition != null) {
+    // end is also a number, return the difference
     if (isGridPositionValue(end) && end.numericalPosition != null) {
       return end.numericalPosition - start.numericalPosition
     }
-    return start.numericalPosition
+
+    // end is a discrete span, recalculate the size as a shrink or an expansion of the original size
+    if (isGridSpan(end) && end.type === 'SPAN_NUMERIC') {
+      return originalSize + (originalStart - start.numericalPosition)
+    }
   }
+
+  // start is a discrete span
+  if (isGridSpan(start) && start.type === 'SPAN_NUMERIC') {
+    // end is a number, return the max between the span size and the start position
+    if (isGridPositionValue(end) && end.numericalPosition != null) {
+      return Math.max(end.numericalPosition, start.value) - 1
+    }
+  }
+
+  // nothing specific found, will be handled with a separate fallback
   return null
 }

From 24bf538610eac2c19c0f2a1113241e335de79f7e Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Thu, 5 Dec 2024 15:49:41 +0000
Subject: [PATCH 262/272] feature(grids) Check Element Against Containing Block
 (#6702)

- Added `rectangleContainsRectangleInclusive` utility function.
- Added `getNewGridElementPropsCheckingOriginalGrid` as a wrapper around
`getNewGridElementProps` which checks if the element is outside of the
containing block anywhere.
---
 .../grid-change-element-location-strategy.ts  |  10 +-
 ...change-location-strategy.spec.browser2.tsx |  49 +++++++-
 .../grid-move-absolute.spec.browser2.tsx      |   4 +-
 .../strategies/grid-move-absolute.ts          | 105 ++++++++++++++----
 editor/src/core/shared/math-utils.ts          |  12 ++
 5 files changed, 153 insertions(+), 27 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
index 8eb840663578..2557a35c9e47 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
@@ -34,8 +34,16 @@ import {
   isAutoGridPin,
   getCommandsForGridItemPlacement,
   sortElementsByGridPosition,
+  getGridRelativeContainingBlock,
 } from './grid-helpers'
 import type { GridCellCoordinates } from './grid-cell-bounds'
+import {
+  canvasRectangle,
+  offsetPoint,
+  offsetRect,
+  rectContainsPoint,
+  zeroCanvasRect,
+} from '../../../../core/shared/math-utils'
 
 export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -172,7 +180,7 @@ function getCommandsAndPatchForGridChangeElementLocation(
   }
 }
 
-interface NewGridElementProps {
+export interface NewGridElementProps {
   gridElementProperties: GridElementProperties
   targetCellCoords: GridCellCoordinates
   targetRootCell: GridCellCoordinates
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
index efb317a19ba2..04c6a3939405 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx
@@ -698,7 +698,7 @@ export var storyboard = (
         }
       })
 
-      it('can move absolute element among grid cells', async () => {
+      it('can move absolute element among grid cells (within containing block)', async () => {
         const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
         const child = editor.renderedDOM.getByTestId('child')
@@ -730,13 +730,56 @@ export var storyboard = (
         await mouseMoveToPoint(dragTarget, endPoint)
         await mouseUpAtPoint(dragTarget, endPoint)
 
+        {
+          const { top, left, gridColumn, gridRow } = child.style
+          expect({ top, left, gridColumn, gridRow }).toEqual({
+            gridColumn: '1',
+            gridRow: '1',
+            left: '252px',
+            top: '256px',
+          })
+        }
+      })
+
+      it('can move absolute element among grid cells', async () => {
+        const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+        const child = editor.renderedDOM.getByTestId('child')
+
+        {
+          const { top, left, gridColumn, gridRow } = child.style
+          expect({ top, left, gridColumn, gridRow }).toEqual({
+            gridColumn: '1',
+            gridRow: '1',
+            left: '12px',
+            top: '16px',
+          })
+        }
+
+        await selectComponentsForTest(editor, [EP.fromString('sb/scene/grid/child')])
+
+        const childBounds = child.getBoundingClientRect()
+        const childCenter = windowPoint({
+          x: Math.floor(childBounds.left + childBounds.width / 2),
+          y: Math.floor(childBounds.top + childBounds.height / 2),
+        })
+
+        const endPoint = offsetPoint(childCenter, windowPoint({ x: 300, y: 300 }))
+        const dragTarget = editor.renderedDOM.getByTestId(
+          GridCellTestId(EP.fromString('sb/scene/grid/child')),
+        )
+
+        await mouseDownAtPoint(dragTarget, childCenter)
+        await mouseMoveToPoint(dragTarget, endPoint)
+        await mouseUpAtPoint(dragTarget, endPoint)
+
         {
           const { top, left, gridColumn, gridRow } = child.style
           expect({ top, left, gridColumn, gridRow }).toEqual({
             gridColumn: '2',
             gridRow: '2',
-            left: '21.5px',
-            top: '32px',
+            left: '81.5px',
+            top: '92px',
           })
         }
       })
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx
index 389e0034888f..f4de8c072645 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.spec.browser2.tsx
@@ -156,14 +156,14 @@ export var storyboard = (
       >
         <div
           style={{
+            gridColumn: 1,
+            gridRow: 1,
             backgroundColor: '#f0f',
             position: 'absolute',
             left: 300,
             top: 300,
             width: 79,
             height: 86,
-            gridColumn: 1,
-            gridRow: 1,
           }}
           data-uid='dragme'
           data-testid='dragme'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
index 775f8d306c7f..fe46c424ee44 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
@@ -8,12 +8,16 @@ import {
   type ElementInstanceMetadataMap,
   type GridContainerProperties,
 } from '../../../../core/shared/element-template'
-import type { CanvasVector } from '../../../../core/shared/math-utils'
+import type { CanvasRectangle, CanvasVector } from '../../../../core/shared/math-utils'
 import {
   canvasRectangle,
   canvasRectangleToLocalRectangle,
+  isNotNullFiniteRectangle,
   nullIfInfinity,
+  offsetPoint,
   offsetRect,
+  rectangleContainsRectangleInclusive,
+  rectContainsPoint,
   windowPoint,
   zeroCanvasRect,
   zeroRectIfNullOrInfinity,
@@ -42,6 +46,7 @@ import {
   getParentGridTemplatesFromChildMeasurements,
   gridMoveStrategiesExtraCommands,
 } from './grid-helpers'
+import type { NewGridElementProps } from './grid-change-element-location-strategy'
 import {
   getNewGridElementProps,
   runGridChangeElementLocation,
@@ -177,6 +182,57 @@ function getCommandsAndPatchForGridAbsoluteMove(
   }
 }
 
+export function getNewGridElementPropsCheckingOriginalGrid(
+  originalGridMetadata: ElementInstanceMetadata,
+  interactionData: DragInteractionData,
+  selectedElementMetadata: ElementInstanceMetadata,
+  gridCellGlobalFrames: GridCellGlobalFrames,
+  coordinateSystemBounds: CanvasRectangle,
+  newPathAfterReparent: ElementPath | null,
+): NewGridElementProps | null {
+  if (interactionData.drag == null) {
+    return null
+  }
+
+  // Identify the containing block position and size.
+  const originalContainingBlockRectangle = getGridRelativeContainingBlock(
+    originalGridMetadata,
+    selectedElementMetadata,
+    selectedElementMetadata.specialSizeMeasurements.elementGridProperties,
+  )
+
+  // Capture the original position of the grid child.
+  const originalCanvasFrame = selectedElementMetadata.globalFrame
+  if (!isNotNullFiniteRectangle(originalCanvasFrame)) {
+    return null
+  }
+
+  // Identify if the new position of the grid child is wholly inside the containing block's
+  // global frame.
+  const containingBlockGlobalFrame = offsetRect(
+    canvasRectangle(originalContainingBlockRectangle),
+    coordinateSystemBounds,
+  )
+  const gridChildNewGlobalFrame = offsetRect(originalCanvasFrame, interactionData.drag)
+  const insideOriginalContainingBlock = rectangleContainsRectangleInclusive(
+    containingBlockGlobalFrame,
+    gridChildNewGlobalFrame,
+  )
+
+  // If the element is inside the containing block,
+  // then don't attempt to move it.
+  if (insideOriginalContainingBlock) {
+    return null
+  }
+
+  return getNewGridElementProps(
+    interactionData,
+    selectedElementMetadata,
+    gridCellGlobalFrames,
+    newPathAfterReparent,
+  )
+}
+
 function runGridMoveAbsolute(
   jsxMetadata: ElementInstanceMetadataMap,
   interactionData: DragInteractionData,
@@ -260,18 +316,6 @@ function runGridMoveAbsolute(
     ]
   }
 
-  // The element may be moving to a different grid position, which is then used
-  // to calculate the potentially new containing block.
-  const newGridElementProps = getNewGridElementProps(
-    interactionData,
-    selectedElementMetadata,
-    gridCellGlobalFrames,
-    null,
-  )
-
-  const coordinateSystemBounds =
-    selectedElementMetadata.specialSizeMeasurements.immediateParentBounds ?? zeroCanvasRect
-
   // Get the metadata of the original grid.
   const originalGridPath = findOriginalGrid(
     jsxMetadata,
@@ -285,6 +329,23 @@ function runGridMoveAbsolute(
     return []
   }
 
+  const coordinateSystemBounds =
+    selectedElementMetadata.specialSizeMeasurements.immediateParentBounds
+  if (coordinateSystemBounds == null) {
+    return []
+  }
+
+  // The element may be moving to a different grid position, which is then used
+  // to calculate the potentially new containing block.
+  const newGridElementProps = getNewGridElementPropsCheckingOriginalGrid(
+    originalGrid,
+    interactionData,
+    selectedElementMetadata,
+    gridCellGlobalFrames,
+    coordinateSystemBounds,
+    null,
+  )
+
   // Get the containing block of the grid child.
   const containingBlockRectangle = getGridRelativeContainingBlock(
     originalGrid,
@@ -302,14 +363,16 @@ function runGridMoveAbsolute(
 
   // otherwise, return a change location + absolute adjustment
   return [
-    ...runGridChangeElementLocation(
-      jsxMetadata,
-      interactionData,
-      selectedElementMetadata,
-      gridCellGlobalFrames,
-      gridTemplate,
-      null,
-    ),
+    ...(newGridElementProps == null
+      ? []
+      : runGridChangeElementLocation(
+          jsxMetadata,
+          interactionData,
+          selectedElementMetadata,
+          gridCellGlobalFrames,
+          gridTemplate,
+          null,
+        )),
     ...getMoveCommandsForDrag(
       containingRect,
       element,
diff --git a/editor/src/core/shared/math-utils.ts b/editor/src/core/shared/math-utils.ts
index a50258330f00..14f9d6263c7c 100644
--- a/editor/src/core/shared/math-utils.ts
+++ b/editor/src/core/shared/math-utils.ts
@@ -322,6 +322,18 @@ export function rectangleContainsRectangle(
   )
 }
 
+export function rectangleContainsRectangleInclusive(
+  outer: CanvasRectangle,
+  inner: CanvasRectangle,
+): boolean {
+  return (
+    outer.x <= inner.x &&
+    inner.x + inner.width <= outer.x + outer.width &&
+    outer.y <= inner.y &&
+    inner.y + inner.height <= outer.y + outer.height
+  )
+}
+
 export function rectangleFromTLBR(
   topLeft: CanvasPoint,
   bottomRight: CanvasPoint,

From 7bca70dadf387611caf2b840361ae202a310c009 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 6 Dec 2024 11:19:22 +0100
Subject: [PATCH 263/272] Scale ruler marker snap lines correctly (#6706)

**Problem:**

Scale is applied inconsistently on the snap line and its label during
ruler marker resizing.

**Fix:**

1. Make sure to scale the label container
2. Make sure the perceived size of the snapline stays the same
regardless of the zoom level

Fixes #[6705](https://github.com/concrete-utopia/utopia/issues/6705)
---
 .../canvas/controls/grid-controls.tsx         | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 9362d108d06c..694719ff77cd 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -2684,19 +2684,24 @@ const SnapLine = React.memo(
     const labelHeight = 20
 
     const isColumn = props.edge === 'column-start' || props.edge === 'column-end'
+
+    const top = isColumn
+      ? props.container.y
+      : props.target.y + (props.edge === 'row-end' ? props.target.height : 0)
+    const left = !isColumn
+      ? props.container.x
+      : props.target.x + (props.edge === 'column-end' ? props.target.width : 0)
+
     return (
       <div
         style={{
           position: 'absolute',
-          width: isColumn ? 1 : props.container.width,
-          height: !isColumn ? 1 : props.container.height,
-          top: isColumn
-            ? props.container.y
-            : props.target.y + (props.edge === 'row-end' ? props.target.height : 0),
-          left: !isColumn
-            ? props.container.x
-            : props.target.x + (props.edge === 'column-end' ? props.target.width : 0),
+          width: isColumn ? 1 : props.container.width * canvasScale,
+          height: !isColumn ? 1 : props.container.height * canvasScale,
+          top: top * canvasScale,
+          left: left * canvasScale,
           backgroundColor: colorTheme.brandNeonPink.value,
+          zoom: 1 / canvasScale,
         }}
       >
         {when(
@@ -2711,7 +2716,6 @@ const SnapLine = React.memo(
               textAlign: axis === 'row' ? 'right' : undefined,
               width: labelWidth,
               height: labelHeight,
-              zoom: 1 / canvasScale,
             }}
           >
             <span
@@ -2719,7 +2723,7 @@ const SnapLine = React.memo(
                 backgroundColor: 'white',
                 padding: '2px 4px',
                 borderRadius: 2,
-                fontSize: 11 / canvasScale,
+                fontSize: 11,
               }}
             >
               {printPin(props.gridTemplate, targetMarker.position, axis)}

From c54189e1ab0cf5563b48a86424d723bbd42947c5 Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Fri, 6 Dec 2024 10:37:13 +0000
Subject: [PATCH 264/272] fix(grids) Freeze Other Markers (#6704)

- `RulerMarkers` now uses the frozen marker data for other row and other
columns.
---
 .../components/canvas/controls/grid-controls.tsx   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 694719ff77cd..ee322993a3da 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -2455,6 +2455,8 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
     return null
   }
 
+  const frozenOrRegularMarkerData = frozenMarkers ?? rulerMarkerData
+
   return (
     <React.Fragment>
       <GridRuler
@@ -2464,7 +2466,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         rulerVisible={showExtraMarkers === 'column' ? 'visible' : 'not-visible'}
       >
         {/* Other markers for unselected tracks */}
-        {rulerMarkerData.otherColumnMarkers.map((marker, index) => {
+        {frozenOrRegularMarkerData.otherColumnMarkers.map((marker, index) => {
           return (
             <RulerMarkerIndicator
               key={`ruler-marker-${index}`}
@@ -2481,7 +2483,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         <RulerMarkerIndicator
           gridRect={rulerMarkerData.gridRect}
           parentGrid={rulerMarkerData.parentGrid}
-          marker={frozenMarkers?.columnStart ?? rulerMarkerData.columnStart}
+          marker={frozenOrRegularMarkerData.columnStart}
           axis={'column'}
           visible={'visible'}
           onMouseDown={columnMarkerMouseDown('column-start')}
@@ -2490,7 +2492,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         <RulerMarkerIndicator
           gridRect={rulerMarkerData.gridRect}
           parentGrid={rulerMarkerData.parentGrid}
-          marker={frozenMarkers?.columnEnd ?? rulerMarkerData.columnEnd}
+          marker={frozenOrRegularMarkerData.columnEnd}
           axis={'column'}
           visible={'visible'}
           onMouseDown={columnMarkerMouseDown('column-end')}
@@ -2505,7 +2507,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         rulerVisible={showExtraMarkers === 'row' ? 'visible' : 'not-visible'}
       >
         {/* Other markers for unselected tracks */}
-        {rulerMarkerData.otherRowMarkers.map((marker, index) => {
+        {frozenOrRegularMarkerData.otherRowMarkers.map((marker, index) => {
           return (
             <RulerMarkerIndicator
               key={`ruler-marker-${index}`}
@@ -2522,7 +2524,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         <RulerMarkerIndicator
           gridRect={rulerMarkerData.gridRect}
           parentGrid={rulerMarkerData.parentGrid}
-          marker={frozenMarkers?.rowStart ?? rulerMarkerData.rowStart}
+          marker={frozenOrRegularMarkerData.rowStart}
           axis={'row'}
           visible={'visible'}
           onMouseDown={rowMarkerMouseDown('row-start')}
@@ -2531,7 +2533,7 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
         <RulerMarkerIndicator
           gridRect={rulerMarkerData.gridRect}
           parentGrid={rulerMarkerData.parentGrid}
-          marker={frozenMarkers?.rowEnd ?? rulerMarkerData.rowEnd}
+          marker={frozenOrRegularMarkerData.rowEnd}
           axis={'row'}
           visible={'visible'}
           onMouseDown={rowMarkerMouseDown('row-end')}

From 8c77bb7a40f3495e0e2fe9d3079464caceed7736 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:02:30 +0100
Subject: [PATCH 265/272] Use pink from the light theme for grid controls
 accents (#6708)

**Problem:**

The pink/magenta color used in the grid controls should always be the
one from the light theme.

**Fix:**

Use a new `gridControlsPink` color that matches `brandNeonPink` from the
light theme.

Fixes #6707
---
 editor/src/components/canvas/controls/grid-controls.tsx | 6 +++---
 editor/src/uuiui/styles/theme/dark.ts                   | 1 +
 editor/src/uuiui/styles/theme/light.ts                  | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index ee322993a3da..dc0866da7d46 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -970,7 +970,7 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
           const activePositioningTarget = isActiveCell && !dontShowActiveCellHighlight // TODO: move the logic into runGridChangeElementLocation and do not set targetCell prop in these cases
 
           const borderColor = activePositioningTarget
-            ? colorTheme.brandNeonPink.value
+            ? colorTheme.gridControlsPink.value
             : colorTheme.grey65.value
 
           return (
@@ -2702,7 +2702,7 @@ const SnapLine = React.memo(
           height: !isColumn ? 1 : props.container.height * canvasScale,
           top: top * canvasScale,
           left: left * canvasScale,
-          backgroundColor: colorTheme.brandNeonPink.value,
+          backgroundColor: colorTheme.gridControlsPink.value,
           zoom: 1 / canvasScale,
         }}
       >
@@ -2713,7 +2713,7 @@ const SnapLine = React.memo(
               position: 'absolute',
               top: axis === 'column' ? -labelHeight - RulerMarkerIconSize - 5 : -10,
               left: axis === 'row' ? -(labelWidth - RulerMarkerIconSize + 30) : -7,
-              color: colorTheme.brandNeonPink.value,
+              color: colorTheme.gridControlsPink.value,
               fontWeight: 700,
               textAlign: axis === 'row' ? 'right' : undefined,
               width: labelWidth,
diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
index b1e57f176aa7..3ce901a5a19a 100644
--- a/editor/src/uuiui/styles/theme/dark.ts
+++ b/editor/src/uuiui/styles/theme/dark.ts
@@ -75,6 +75,7 @@ const darkBase = {
   border2: createUtopiColor('#181C20'),
   border3: createUtopiColor('#181C20'),
   bg1transparentgradient: createUtopiColor('radial-gradient(circle, #181C20 15%, #181C2000 80%)'),
+  gridControlsPink: createUtopiColor('oklch(72.2% 0.36 331.7)'), // copy of light theme's brandNeonPink
 }
 
 const darkPrimitives = {
diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts
index 69ef0bca8362..e520b41c10b4 100644
--- a/editor/src/uuiui/styles/theme/light.ts
+++ b/editor/src/uuiui/styles/theme/light.ts
@@ -75,6 +75,7 @@ const lightBase = {
   border2: createUtopiColor('hsl(0,0%,86%)'),
   border3: createUtopiColor('hsl(0,0%,83%)'),
   bg1transparentgradient: createUtopiColor('radial-gradient(circle, #ffffff 15%, #ffffff00 80%)'),
+  gridControlsPink: createUtopiColor('oklch(72.2% 0.36 331.7)'), // copy of brandNeonPink
 }
 
 const lightPrimitives = {

From d258bcff0644376fec9f0a8c9ef7107fda1590ba Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Mon, 9 Dec 2024 14:37:02 +0000
Subject: [PATCH 266/272] fix(tests) Tweaks to make jest run tests faster.
 (#6709)

- Moved a UIDs related test into `parser-printer-uids.spec.tsx`.
- Reduced the `maxRuns` for the moved test as it was taking a long time.
---
 .../parser-printer-uids.spec.tsx              | 144 +++++++++++++++++-
 .../parser-printer/parser-printer.spec.ts     | 144 +-----------------
 2 files changed, 143 insertions(+), 145 deletions(-)

diff --git a/editor/src/core/workers/parser-printer/parser-printer-uids.spec.tsx b/editor/src/core/workers/parser-printer/parser-printer-uids.spec.tsx
index 7e83e90f4079..e6de2ab1f509 100644
--- a/editor/src/core/workers/parser-printer/parser-printer-uids.spec.tsx
+++ b/editor/src/core/workers/parser-printer/parser-printer-uids.spec.tsx
@@ -1,7 +1,9 @@
+/* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "FastCheck.assert", "ensureElementsHaveUID", "checkElementUIDs"] }] */
+import * as FastCheck from 'fast-check'
+import { assertNever } from '../../../core/shared/utils'
 import { MajesticBrokerTestCaseCode } from '../../../test-cases/majestic-broker'
 import {
   emptyComments,
-  isJSExpressionMapOrOtherJavaScript,
   isJSXElement,
   isUtopiaJSXComponent,
   jsExpressionOtherJavaScript,
@@ -18,13 +20,19 @@ import {
   foldParsedTextFile,
   isParseSuccess,
   RevisionsState,
-  TextFile,
   textFile,
   textFileContents,
   unparsed,
 } from '../../shared/project-file-types'
 import { lintAndParse, parseCode, printCode, printCodeOptions } from './parser-printer'
-import { testParseCode } from './parser-printer.test-utils'
+import type { ArbitraryProject } from './parser-printer.test-utils'
+import {
+  ensureArbitraryBlocksHaveUID,
+  ensureElementsHaveUID,
+  isWantedElement,
+  printedProjectContentArbitrary,
+  testParseCode,
+} from './parser-printer.test-utils'
 import { applyPrettier } from 'utopia-vscode-common'
 import type { ProjectContentTreeRoot } from '../../../components/assets'
 import { addFileToProjectContents, contentsToTree } from '../../../components/assets'
@@ -32,7 +40,7 @@ import {
   DefaultPackageJson,
   StoryboardFilePath,
 } from '../../../components/editor/store/editor-state'
-import { emptySet } from '../../shared/set-utils'
+import { emptySet, setsEqual } from '../../shared/set-utils'
 import { createCodeFile } from '../../../components/custom-code/code-file.test-utils'
 import { renderTestEditorWithProjectContent } from '../../../components/canvas/ui-jsx.test-utils'
 import { updateFile } from '../../../components/editor/actions/action-creators'
@@ -471,3 +479,131 @@ export var app = (props) => {
     expect(actualResult).toEqual(expectedResult)
   })
 })
+
+describe('check that the UIDs of everything in a file also align with the highlight bounds for that file', () => {
+  function checkElementUIDs(stripUIDs: boolean): void {
+    function checkElementUIDSMatchHighlightBounds(
+      printedArbitraryProjects: [ArbitraryProject, ArbitraryProject],
+    ): boolean {
+      const [firstPrintedProjectContent, secondPrintedProjectContent] = printedArbitraryProjects
+      const alreadyExistingUIDs: Set<string> = emptySet()
+
+      let fileCounter: number = 100
+      let projectContents: ProjectContents = {}
+
+      for (const { code: printedCode } of [
+        firstPrintedProjectContent,
+        secondPrintedProjectContent,
+      ]) {
+        const parseResult = testParseCode(printedCode, alreadyExistingUIDs)
+        foldParsedTextFile(
+          (failure) => {
+            throw new Error(`${JSON.stringify(failure)}`)
+          },
+          (success) => {
+            let uids: Array<string> = []
+            for (const topLevelElement of success.topLevelElements) {
+              switch (topLevelElement.type) {
+                case 'UTOPIA_JSX_COMPONENT':
+                  ensureElementsHaveUID(
+                    topLevelElement.rootElement,
+                    uids,
+                    isWantedElement,
+                    'walk-attributes',
+                  )
+                  if (topLevelElement.arbitraryJSBlock != null) {
+                    ensureArbitraryBlocksHaveUID(
+                      topLevelElement.arbitraryJSBlock,
+                      uids,
+                      isWantedElement,
+                      'walk-attributes',
+                    )
+                  }
+                  break
+                case 'ARBITRARY_JS_BLOCK':
+                  ensureArbitraryBlocksHaveUID(
+                    topLevelElement,
+                    uids,
+                    isWantedElement,
+                    'walk-attributes',
+                  )
+                  break
+                case 'IMPORT_STATEMENT':
+                case 'UNPARSED_CODE':
+                  break
+                default:
+                  assertNever(topLevelElement)
+              }
+            }
+
+            // Check the UIDs for the elements, which excludes attributes.
+            const elementUIDS = new Set(uids)
+            const highlightBoundsUIDs = new Set(Object.keys(success.highlightBounds))
+            if (!setsEqual(elementUIDS, highlightBoundsUIDs)) {
+              throw new Error(
+                `Element UIDs [${Array.from(
+                  elementUIDS,
+                ).sort()}] do not match the highlight bounds UIDs: [${Array.from(
+                  highlightBoundsUIDs,
+                ).sort()}]`,
+              )
+            }
+
+            const fileValue = textFile(
+              textFileContents(printedCode, success, RevisionsState.ParsedAhead),
+              null,
+              null,
+              0,
+            )
+            const singleFileUniqueIDsResult = getUidMappings(
+              contentsToTree({ '/index.js': fileValue }),
+            )
+
+            // Check the UIDs for anything and everything, including attributes.
+            const fullHighlightBoundsUIDs = new Set(Object.keys(success.fullHighlightBounds))
+            const allUIDsAreEqual = setsEqual(
+              fullHighlightBoundsUIDs,
+              new Set(getAllUniqueUidsFromMapping(singleFileUniqueIDsResult.filePathToUids)),
+            )
+            if (!allUIDsAreEqual) {
+              throw new Error(
+                `All UIDs [${Array.from(
+                  getAllUniqueUidsFromMapping(singleFileUniqueIDsResult.filePathToUids),
+                ).sort()}] do not match the full highlight bounds UIDs: [${Array.from(
+                  fullHighlightBoundsUIDs,
+                ).sort()}]`,
+              )
+            }
+
+            projectContents[`/index${fileCounter++}.js`] = fileValue
+          },
+          (unparsedResult) => {
+            throw new Error(`${unparsedResult}`)
+          },
+          parseResult,
+        )
+      }
+
+      // Check that this parse has not surfaced any duplicates within itself.
+      const uniqueIDsResult = getUidMappings(contentsToTree(projectContents))
+      const anyDuplicates = Object.keys(uniqueIDsResult.duplicateIDs).length > 0
+      if (anyDuplicates) {
+        throw new Error(`Found duplicate UIDs: ${uniqueIDsResult.duplicateIDs}`)
+      }
+
+      return true
+    }
+    const printedArbitrary = printedProjectContentArbitrary(stripUIDs)
+    const dataUIDProperty = FastCheck.property(
+      FastCheck.tuple(printedArbitrary, printedArbitrary),
+      checkElementUIDSMatchHighlightBounds,
+    )
+    FastCheck.assert(dataUIDProperty, { verbose: false, numRuns: 20 })
+  }
+  it.concurrent('with UIDs left in', () => {
+    checkElementUIDs(false)
+  })
+  it.concurrent('with UIDs stripped', () => {
+    checkElementUIDs(true)
+  })
+})
diff --git a/editor/src/core/workers/parser-printer/parser-printer.spec.ts b/editor/src/core/workers/parser-printer/parser-printer.spec.ts
index 422a6321cfae..dea57c3f9677 100644
--- a/editor/src/core/workers/parser-printer/parser-printer.spec.ts
+++ b/editor/src/core/workers/parser-printer/parser-printer.spec.ts
@@ -44,21 +44,15 @@ import {
 } from '../../shared/element-template'
 import { sampleCode } from '../../model/new-project-files'
 import { addImport, emptyImports } from '../common/project-file-utils'
-import { onlyImportReact, sampleImportsForTests } from '../../model/test-ui-js-file.test-utils'
-import type { ParseSuccess, ProjectContents } from '../../shared/project-file-types'
+import { sampleImportsForTests } from '../../model/test-ui-js-file.test-utils'
+import type { ParseSuccess } from '../../shared/project-file-types'
 import {
   isParseSuccess,
   importAlias,
   foldParsedTextFile,
-  EmptyExportsDetail,
   exportFunction,
   exportDefaultFunctionOrClass,
-  exportVariables,
-  exportVariable,
   parseSuccess,
-  textFileContents,
-  RevisionsState,
-  textFile,
 } from '../../shared/project-file-types'
 import { lintAndParse, parseCode, printCode, printCodeOptions } from './parser-printer'
 import { applyPrettier } from 'utopia-vscode-common'
@@ -69,9 +63,7 @@ import {
   clearParseResultUniqueIDsAndEmptyBlocks,
   clearTopLevelElementUniqueIDsAndEmptyBlocks,
   elementsStructure,
-  ensureArbitraryBlocksHaveUID,
   ensureElementsHaveUID,
-  isWantedElement,
   JustImportViewAndReact,
   printedProjectContentArbitrary,
   simplifyParsedTextFileAttributes,
@@ -82,16 +74,13 @@ import { InfiniteLoopError, InfiniteLoopMaxIterations } from './transform-preven
 import { BakedInStoryboardUID, BakedInStoryboardVariableName } from '../../model/scene-utils'
 import { optionalMap } from '../../shared/optional-utils'
 import { StoryboardFilePath } from '../../../components/editor/store/editor-state'
-import { emptySet, setsEqual } from '../../shared/set-utils'
+import { emptySet } from '../../shared/set-utils'
 import {
   BLOCK_RAN_TO_END_FUNCTION_NAME,
   EARLY_RETURN_RESULT_FUNCTION_NAME,
   EARLY_RETURN_VOID_FUNCTION_NAME,
   JSX_CANVAS_LOOKUP_FUNCTION_NAME,
 } from '../../shared/dom-utils'
-import { assertNever } from '../../../core/shared/utils'
-import { contentsToTree } from '../../../components/assets'
-import { getUidMappings, getAllUniqueUidsFromMapping } from '../../model/get-uid-mappings'
 import {
   filtered,
   fromField,
@@ -6099,133 +6088,6 @@ export var whatever2 = (props) => <View data-uid='aaa'>
     const dataUIDProperty = FastCheck.property(printedArbitrary, checkDataUIDsPopulated)
     FastCheck.assert(dataUIDProperty, { verbose: true })
   })
-  describe('check that the UIDs of everything in a file also align with the highlight bounds for that file', () => {
-    function checkElementUIDs(stripUIDs: boolean): void {
-      function checkElementUIDSMatchHighlightBounds(
-        printedArbitraryProjects: [ArbitraryProject, ArbitraryProject],
-      ): boolean {
-        const [firstPrintedProjectContent, secondPrintedProjectContent] = printedArbitraryProjects
-        const alreadyExistingUIDs: Set<string> = emptySet()
-
-        let fileCounter: number = 100
-        let projectContents: ProjectContents = {}
-
-        for (const { code: printedCode } of [
-          firstPrintedProjectContent,
-          secondPrintedProjectContent,
-        ]) {
-          const parseResult = testParseCode(printedCode, alreadyExistingUIDs)
-          foldParsedTextFile(
-            (failure) => {
-              throw new Error(`${JSON.stringify(failure)}`)
-            },
-            (success) => {
-              let uids: Array<string> = []
-              for (const topLevelElement of success.topLevelElements) {
-                switch (topLevelElement.type) {
-                  case 'UTOPIA_JSX_COMPONENT':
-                    ensureElementsHaveUID(
-                      topLevelElement.rootElement,
-                      uids,
-                      isWantedElement,
-                      'walk-attributes',
-                    )
-                    if (topLevelElement.arbitraryJSBlock != null) {
-                      ensureArbitraryBlocksHaveUID(
-                        topLevelElement.arbitraryJSBlock,
-                        uids,
-                        isWantedElement,
-                        'walk-attributes',
-                      )
-                    }
-                    break
-                  case 'ARBITRARY_JS_BLOCK':
-                    ensureArbitraryBlocksHaveUID(
-                      topLevelElement,
-                      uids,
-                      isWantedElement,
-                      'walk-attributes',
-                    )
-                    break
-                  case 'IMPORT_STATEMENT':
-                  case 'UNPARSED_CODE':
-                    break
-                  default:
-                    assertNever(topLevelElement)
-                }
-              }
-
-              // Check the UIDs for the elements, which excludes attributes.
-              const elementUIDS = new Set(uids)
-              const highlightBoundsUIDs = new Set(Object.keys(success.highlightBounds))
-              if (!setsEqual(elementUIDS, highlightBoundsUIDs)) {
-                throw new Error(
-                  `Element UIDs [${Array.from(
-                    elementUIDS,
-                  ).sort()}] do not match the highlight bounds UIDs: [${Array.from(
-                    highlightBoundsUIDs,
-                  ).sort()}]`,
-                )
-              }
-
-              const fileValue = textFile(
-                textFileContents(printedCode, success, RevisionsState.ParsedAhead),
-                null,
-                null,
-                0,
-              )
-              const singleFileUniqueIDsResult = getUidMappings(
-                contentsToTree({ '/index.js': fileValue }),
-              )
-
-              // Check the UIDs for anything and everything, including attributes.
-              const fullHighlightBoundsUIDs = new Set(Object.keys(success.fullHighlightBounds))
-              const allUIDsAreEqual = setsEqual(
-                fullHighlightBoundsUIDs,
-                new Set(getAllUniqueUidsFromMapping(singleFileUniqueIDsResult.filePathToUids)),
-              )
-              if (!allUIDsAreEqual) {
-                throw new Error(
-                  `All UIDs [${Array.from(
-                    getAllUniqueUidsFromMapping(singleFileUniqueIDsResult.filePathToUids),
-                  ).sort()}] do not match the full highlight bounds UIDs: [${Array.from(
-                    fullHighlightBoundsUIDs,
-                  ).sort()}]`,
-                )
-              }
-
-              projectContents[`/index${fileCounter++}.js`] = fileValue
-            },
-            (unparsed) => {
-              throw new Error(`${unparsed}`)
-            },
-            parseResult,
-          )
-        }
-
-        // Check that this parse has not surfaced any duplicates within itself.
-        const uniqueIDsResult = getUidMappings(contentsToTree(projectContents))
-        const anyDuplicates = Object.keys(uniqueIDsResult.duplicateIDs).length > 0
-        if (anyDuplicates) {
-          throw new Error(`Found duplicate UIDs: ${uniqueIDsResult.duplicateIDs}`)
-        }
-
-        return true
-      }
-      const printedArbitrary = printedProjectContentArbitrary(stripUIDs)
-      const dataUIDProperty = FastCheck.property(
-        FastCheck.tuple(printedArbitrary, printedArbitrary),
-        checkElementUIDSMatchHighlightBounds,
-      )
-      FastCheck.assert(dataUIDProperty, { verbose: false, numRuns: 100 })
-    }
-    it('with UIDs left in', () => {
-      checkElementUIDs(false)
-    })
-    it('with UIDs stripped', () => {
-      checkElementUIDs(true)
-    })
-  })
   it('when react is not imported treat components as arbitrary blocks', () => {
     const code = `
 export var whatever = (props) => <View data-uid='aaa'>

From 6f5cb65b15a8d2beffbadf117fd5033ed7b93a5f Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:37:27 +0100
Subject: [PATCH 267/272] Preserve justifySelf and alignSelf when resizing a
 fixed grid item (#6711)

**Problem:**

When resizing a grid item with fixed sizes, it loses any `alignSelf` or
`justifySelf` props that were defined on it.

**Fix:**

Make sure to not nuke those props when resizing grid items.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6710
---
 .../canvas-strategies/strategies/basic-resize-strategy.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
index 52f6d582c583..8c3a65d3baf0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -242,12 +242,12 @@ export function basicResizeStrategy(
             ),
           ]
 
-          if (isEdgePositionAHorizontalEdge(edgePosition)) {
+          if (isEdgePositionAHorizontalEdge(edgePosition) && !isGridCell) {
             commands.push(
               deleteProperties('always', selectedElement, [PP.create('style', 'justifySelf')]),
             )
           }
-          if (isEdgePositionAVerticalEdge(edgePosition)) {
+          if (isEdgePositionAVerticalEdge(edgePosition) && !isGridCell) {
             commands.push(
               deleteProperties('always', selectedElement, [PP.create('style', 'alignSelf')]),
             )

From 544461aa4b836821b933a9186287cfee6eb4f20e Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 10 Dec 2024 11:39:07 +0100
Subject: [PATCH 268/272] Fix getGridRelativeContainingBlock for flow elements
 (#6713)

**Problem:**

`getGridRelativeContainingBlock` doesn't correctly return the item
position for flow elements. It was temporarily patched with the
positioning coming from `getGridChildCellCoordBoundsFromCanvas`, but
this PR instead fixes it for good, which cascade-solves a bunch of other
small bugs.

**Fix:**

The flow positioning requires _all_ preceding grid items to be available
in the grid, so this PR does just that: inject every (ordered!) child
into the temporary grid, retrieve the wanted one, and return its
bounding box.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6712
---
 .../grid-change-element-location-strategy.ts  |   8 --
 .../strategies/grid-helpers.ts                | 102 +++++++++++-------
 .../strategies/grid-move-absolute.ts          |  39 +++----
 .../canvas/controls/grid-controls.tsx         |   6 +-
 .../canvas/controls/grid-measurements.tsx     |  96 +++--------------
 5 files changed, 100 insertions(+), 151 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
index 2557a35c9e47..7ef0e98a20e6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
@@ -34,16 +34,8 @@ import {
   isAutoGridPin,
   getCommandsForGridItemPlacement,
   sortElementsByGridPosition,
-  getGridRelativeContainingBlock,
 } from './grid-helpers'
 import type { GridCellCoordinates } from './grid-cell-bounds'
-import {
-  canvasRectangle,
-  offsetPoint,
-  offsetRect,
-  rectContainsPoint,
-  zeroCanvasRect,
-} from '../../../../core/shared/math-utils'
 
 export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
index 4250ba0d1680..b722d1e84c82 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -19,6 +19,7 @@ import {
 } from '../../../../core/shared/element-template'
 import {
   localRectangle,
+  zeroRectangle,
   zeroRectIfNullOrInfinity,
   type CanvasRectangle,
   type LocalRectangle,
@@ -750,8 +751,8 @@ const TemporaryGridID = 'temporary-grid'
 
 export function getGridRelativeContainingBlock(
   gridMetadata: ElementInstanceMetadata,
-  cellMetadata: ElementInstanceMetadata,
-  cellProperties: GridElementProperties,
+  gridElements: ElementInstanceMetadata[],
+  targetElement: ElementPath,
   options?: {
     forcePositionRelative?: boolean
   },
@@ -828,47 +829,68 @@ export function getGridRelativeContainingBlock(
   }
   offsetContainer.appendChild(gridElement)
 
-  // Create a child of the grid element with the appropriate properties.
-  const gridChildElement = document.createElement('div')
+  function addItemToGrid(measurements: SpecialSizeMeasurements) {
+    // Create a child of the grid element with the appropriate properties.
+    const gridChildElement = document.createElement('div')
 
-  if (cellProperties.gridColumnStart != null) {
-    gridChildElement.style.gridColumnStart = printPinAsString(
-      gridProperties,
-      cellProperties.gridColumnStart,
-      'column',
-    )
-  }
-  if (cellProperties.gridColumnEnd != null) {
-    gridChildElement.style.gridColumnEnd = printPinAsString(
-      gridProperties,
-      cellProperties.gridColumnEnd,
-      'column',
-    )
-  }
-  if (cellProperties.gridRowStart != null) {
-    gridChildElement.style.gridRowStart = printPinAsString(
-      gridProperties,
-      cellProperties.gridRowStart,
-      'row',
-    )
-  }
-  if (cellProperties.gridRowEnd != null) {
-    gridChildElement.style.gridRowEnd = printPinAsString(
-      gridProperties,
-      cellProperties.gridRowEnd,
-      'row',
-    )
+    const { elementGridProperties, position } = measurements
+
+    if (elementGridProperties.gridColumnStart != null) {
+      gridChildElement.style.gridColumnStart = printPinAsString(
+        gridProperties,
+        elementGridProperties.gridColumnStart,
+        'column',
+      )
+    }
+    if (elementGridProperties.gridColumnEnd != null) {
+      gridChildElement.style.gridColumnEnd = printPinAsString(
+        gridProperties,
+        elementGridProperties.gridColumnEnd,
+        'column',
+      )
+    }
+    if (elementGridProperties.gridRowStart != null) {
+      gridChildElement.style.gridRowStart = printPinAsString(
+        gridProperties,
+        elementGridProperties.gridRowStart,
+        'row',
+      )
+    }
+    if (elementGridProperties.gridRowEnd != null) {
+      gridChildElement.style.gridRowEnd = printPinAsString(
+        gridProperties,
+        elementGridProperties.gridRowEnd,
+        'row',
+      )
+    }
+    gridChildElement.style.position = options?.forcePositionRelative
+      ? 'relative'
+      : position ?? 'initial'
+    // Fill out the entire space available.
+    gridChildElement.style.top = '0'
+    gridChildElement.style.left = '0'
+    gridChildElement.style.bottom = '0'
+    gridChildElement.style.right = '0'
+
+    return gridChildElement
   }
-  gridChildElement.style.position = options?.forcePositionRelative
-    ? 'relative'
-    : cellMetadata.specialSizeMeasurements.position ?? 'initial'
-  // Fill out the entire space available.
-  gridChildElement.style.top = '0'
-  gridChildElement.style.left = '0'
-  gridChildElement.style.bottom = '0'
-  gridChildElement.style.right = '0'
 
-  gridElement.appendChild(gridChildElement)
+  // add every element into the grid, so flow elements will be correctly positioned
+  const createdElements = gridElements.map((element) =>
+    addItemToGrid(element.specialSizeMeasurements),
+  )
+  createdElements.forEach((elem) => gridElement.appendChild(elem))
+
+  // get the index of the generated target element
+  const targetIndex = gridElements.findIndex((element) =>
+    EP.pathsEqual(element.elementPath, targetElement),
+  )
+  if (targetIndex < 0 || targetIndex >= createdElements.length) {
+    // this should never happen
+    return localRectangle(zeroRectangle)
+  }
+  // grab the generated element via its index
+  const gridChildElement = createdElements[targetIndex]
 
   // Get the result and cleanup the temporary elements.
   try {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
index fe46c424ee44..2ecadc5fa9b0 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
@@ -1,34 +1,29 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
-import type { JSXElementChild } from '../../../../core/shared/element-template'
+import type {
+  JSXElementChild,
+  SpecialSizeMeasurements,
+} from '../../../../core/shared/element-template'
 import {
   isJSXElement,
   type ElementInstanceMetadata,
   type ElementInstanceMetadataMap,
   type GridContainerProperties,
 } from '../../../../core/shared/element-template'
-import type { CanvasRectangle, CanvasVector } from '../../../../core/shared/math-utils'
+import type { CanvasRectangle } from '../../../../core/shared/math-utils'
 import {
   canvasRectangle,
   canvasRectangleToLocalRectangle,
   isNotNullFiniteRectangle,
   nullIfInfinity,
-  offsetPoint,
   offsetRect,
   rectangleContainsRectangleInclusive,
-  rectContainsPoint,
-  windowPoint,
-  zeroCanvasRect,
   zeroRectIfNullOrInfinity,
-  zeroSize,
 } from '../../../../core/shared/math-utils'
 import type { CanvasCommand } from '../../commands/commands'
 import { showGridControls } from '../../commands/show-grid-controls-command'
-import {
-  controlsForGridPlaceholders,
-  GridElementChildContainingBlockKey,
-} from '../../controls/grid-controls-for-strategies'
+import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { InteractionCanvasState } from '../canvas-strategy-types'
@@ -57,8 +52,6 @@ import { getMoveCommandsForDrag } from './shared-move-strategies-helpers'
 import { toFirst } from '../../../../core/shared/optics/optic-utilities'
 import { eitherRight, fromTypeGuard } from '../../../../core/shared/optics/optic-creators'
 import { defaultEither } from '../../../../core/shared/either'
-import { forceNotNull } from '../../../..//core/shared/optional-utils'
-import { windowToCanvasCoordinates } from '../../dom-lookup'
 
 export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -197,8 +190,8 @@ export function getNewGridElementPropsCheckingOriginalGrid(
   // Identify the containing block position and size.
   const originalContainingBlockRectangle = getGridRelativeContainingBlock(
     originalGridMetadata,
-    selectedElementMetadata,
-    selectedElementMetadata.specialSizeMeasurements.elementGridProperties,
+    [selectedElementMetadata],
+    selectedElementMetadata.elementPath,
   )
 
   // Capture the original position of the grid child.
@@ -347,11 +340,21 @@ function runGridMoveAbsolute(
   )
 
   // Get the containing block of the grid child.
+  const patchedSpecialSizeMeasurements: SpecialSizeMeasurements = {
+    ...selectedElementMetadata.specialSizeMeasurements,
+    elementGridProperties:
+      newGridElementProps?.gridElementProperties ??
+      selectedElementMetadata.specialSizeMeasurements.elementGridProperties,
+  }
   const containingBlockRectangle = getGridRelativeContainingBlock(
     originalGrid,
-    selectedElementMetadata,
-    newGridElementProps?.gridElementProperties ??
-      selectedElementMetadata.specialSizeMeasurements.elementGridProperties,
+    [
+      {
+        ...selectedElementMetadata,
+        specialSizeMeasurements: patchedSpecialSizeMeasurements,
+      },
+    ],
+    selectedElementMetadata.elementPath,
   )
 
   // Get the appropriately shifted and typed local frame value to use.
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index dc0866da7d46..011f3ed07876 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -2261,7 +2261,11 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
       }
 
       const parentGrid = elementMetadata.specialSizeMeasurements.parentContainerGridProperties
-      const cellRect = calculateGridCellRectangle(store.editor.jsxMetadata, props.path)
+      const cellRect = calculateGridCellRectangle(
+        store.editor.jsxMetadata,
+        store.editor.elementPathTree,
+        props.path,
+      )
       if (cellRect == null) {
         return null
       }
diff --git a/editor/src/components/canvas/controls/grid-measurements.tsx b/editor/src/components/canvas/controls/grid-measurements.tsx
index 8600da3ef9cc..ce2418a87189 100644
--- a/editor/src/components/canvas/controls/grid-measurements.tsx
+++ b/editor/src/components/canvas/controls/grid-measurements.tsx
@@ -10,7 +10,6 @@ import { applicative4Either, defaultEither, isRight, mapEither } from '../../../
 import * as EP from '../../../core/shared/element-path'
 import type {
   BorderWidths,
-  ElementInstanceMetadata,
   ElementInstanceMetadataMap,
   GridAutoOrTemplateBase,
   GridElementProperties,
@@ -28,8 +27,6 @@ import type { GridIdentifier } from '../../editor/store/editor-state'
 import { Substores, useEditorState } from '../../editor/store/store-hook'
 import { useMonitorChangesToElements } from '../../editor/store/store-monitor'
 import { isStaticGridRepeat, parseCSSLength } from '../../inspector/common/css-utils'
-import { getGridChildCellCoordBoundsFromCanvas } from '../canvas-strategies/strategies/grid-cell-bounds'
-import type { GridCellGlobalFrames } from '../canvas-strategies/strategies/grid-helpers'
 import {
   findOriginalGrid,
   getGridRelativeContainingBlock,
@@ -42,6 +39,7 @@ import {
   getGridElementProperties,
 } from '../dom-walker'
 import { addChangeCallback, removeChangeCallback } from '../observers'
+import type { ElementPathTrees } from '../../../core/shared/element-path-tree'
 
 export type GridElementMeasurementHelperData = {
   frame: CanvasRectangle
@@ -357,42 +355,16 @@ export function useGridElementMeasurementHelperData(
   return useKeepReferenceEqualityIfPossible(getGridElementMeasurementHelperData(elementPath, scale))
 }
 
-function getCellPositionFromCanvas(
-  elementMetadata: ElementInstanceMetadata,
-  parentGridCellGlobalFrames: GridCellGlobalFrames,
-): { left: number; top: number } | null {
-  const cellCoordBoundsFromCanvas = getGridChildCellCoordBoundsFromCanvas(
-    elementMetadata,
-    parentGridCellGlobalFrames,
-  )
-  if (cellCoordBoundsFromCanvas == null) {
-    return null
-  }
-
-  if (parentGridCellGlobalFrames.length === 0) {
-    return null
-  }
-
-  const firstRow = parentGridCellGlobalFrames[0]
-  const left = firstRow[cellCoordBoundsFromCanvas.column - 1].x
-
-  const cellBoundsRowIndex = cellCoordBoundsFromCanvas.row - 1
-  if (
-    parentGridCellGlobalFrames.length <= cellBoundsRowIndex ||
-    parentGridCellGlobalFrames[cellBoundsRowIndex].length === 0
-  ) {
+export function calculateGridCellRectangle(
+  jsxMetadata: ElementInstanceMetadataMap,
+  pathTree: ElementPathTrees,
+  path: ElementPath,
+): CanvasRectangle | null {
+  const cellItemMetadata = MetadataUtils.findElementByElementPath(jsxMetadata, path)
+  if (cellItemMetadata == null) {
     return null
   }
-  const firstColumn = parentGridCellGlobalFrames[cellBoundsRowIndex][0]
-  const top = firstColumn.y
 
-  return { left, top }
-}
-
-function getCellDimensions(
-  jsxMetadata: ElementInstanceMetadataMap,
-  cellItemMetadata: ElementInstanceMetadata,
-): { width: number; height: number } | null {
   const originalGrid = findOriginalGrid(jsxMetadata, EP.parentPath(cellItemMetadata.elementPath))
   if (originalGrid == null) {
     return null
@@ -406,54 +378,10 @@ function getCellDimensions(
   const coordinateSystemBounds =
     cellItemMetadata.specialSizeMeasurements.immediateParentBounds ?? zeroCanvasRect
 
-  const calculatedCellBounds = getGridRelativeContainingBlock(
-    gridMetadata,
-    cellItemMetadata,
-    cellItemMetadata.specialSizeMeasurements.elementGridProperties,
-    {
-      forcePositionRelative: true,
-    },
-  )
-  const cellRect = offsetRect(canvasRectangle(calculatedCellBounds), coordinateSystemBounds)
-  const { width, height } = cellRect
-
-  return { width, height }
-}
-
-/**
- * Returns the _actual_ canvas rectangle for a grid _cell_ (not its contained item) that's rendered on the canvas.
- * This is done by combining grabbing the position from the parent grid frames (which is required for flow elements!),
- * with the HTML calculation of dimensions in getGridRelativeContainingBlock.
- */
-export function calculateGridCellRectangle(
-  jsxMetadata: ElementInstanceMetadataMap,
-  path: ElementPath,
-): CanvasRectangle | null {
-  const cellItemMetadata = MetadataUtils.findElementByElementPath(jsxMetadata, path)
-  if (cellItemMetadata == null) {
-    return null
-  }
-
-  const parentGridCellGlobalFrames =
-    cellItemMetadata.specialSizeMeasurements.parentGridCellGlobalFrames
-  if (parentGridCellGlobalFrames == null) {
-    return null
-  }
-
-  const position = getCellPositionFromCanvas(cellItemMetadata, parentGridCellGlobalFrames)
-  if (position == null) {
-    return null
-  }
-
-  const dimensions = getCellDimensions(jsxMetadata, cellItemMetadata)
-  if (dimensions == null) {
-    return null
-  }
+  const siblings = MetadataUtils.getSiblingsOrdered(jsxMetadata, pathTree, path)
 
-  return canvasRectangle({
-    x: position.left,
-    y: position.top,
-    width: dimensions.width,
-    height: dimensions.height,
+  const calculatedCellBounds = getGridRelativeContainingBlock(gridMetadata, siblings, path, {
+    forcePositionRelative: true,
   })
+  return offsetRect(canvasRectangle(calculatedCellBounds), coordinateSystemBounds)
 }

From e34fdc378dbf7d230bc0a44223564ed42605b6f7 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 10 Dec 2024 15:31:35 +0100
Subject: [PATCH 269/272] Tweak design when resizing grid stretching items
 (#6718)

**Problem:**

When resizing a stretching grid item there should be no blue translucent
overlay and the cursor should stay consistent during the interaction.

**Fix:**

Do that.

| Before | After |
|---------|--------------|
| ![Kapture 2024-12-10 at 13 18
45](https://github.com/user-attachments/assets/091ae790-ebab-4289-8345-45dd803c390d)
| ![Kapture 2024-12-10 at 13 17
39](https://github.com/user-attachments/assets/2a859957-8b80-4bf9-a062-5cf524930f44)
|

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6717
---
 .../strategies/grid-resize-element-strategy.ts    | 15 +++++++++++++--
 .../components/canvas/controls/grid-controls.tsx  |  3 +--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 09c8a5ea3003..2141f6add524 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -17,6 +17,8 @@ import {
 import { gridContainerIdentifier, gridItemIdentifier } from '../../../editor/store/editor-state'
 import { cssKeyword } from '../../../inspector/common/css-utils'
 import { isFillOrStretchModeAppliedOnAnySide } from '../../../inspector/inspector-common'
+import { CSSCursor } from '../../canvas-types'
+import { setCursorCommand } from '../../commands/set-cursor-command'
 import {
   controlsForGridPlaceholders,
   gridEdgeToEdgePosition,
@@ -172,9 +174,18 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         ),
       }
 
+      const cursor =
+        interactionSession.activeControl.edge === 'column-start' ||
+        interactionSession.activeControl.edge === 'column-end'
+          ? CSSCursor.ColResize
+          : CSSCursor.RowResize
+
       return strategyApplicationResult(
-        getCommandsForGridItemPlacement(selectedElement, gridTemplate, gridProps),
-        [EP.parentPath(selectedElement), selectedElement],
+        [
+          ...getCommandsForGridItemPlacement(selectedElement, gridTemplate, gridProps),
+          setCursorCommand(cursor),
+        ],
+        [(EP.parentPath(selectedElement), selectedElement)],
       )
     },
   }
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 011f3ed07876..b0ccf8058658 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -1682,7 +1682,6 @@ interface GridResizeControlProps {
 
 export const GridResizeControlsComponent = ({ target }: GridResizeControlProps) => {
   const gridTarget = getGridIdentifierContainerOrComponentPath(target)
-  const colorTheme = useColorTheme()
 
   const element = useEditorState(
     Substores.metadata,
@@ -1854,7 +1853,7 @@ export const GridResizeControlsComponent = ({ target }: GridResizeControlProps)
           left: bounds?.x ?? element.globalFrame.x,
           width: bounds?.width ?? element.globalFrame.width,
           height: bounds?.height ?? element.globalFrame.height,
-          backgroundColor: isResizing ? colorTheme.primary25.value : 'transparent',
+          backgroundColor: 'transparent',
         }}
       >
         <div

From 0a6ad3f2471836e98f35cffea09d6a7c7bdbb2c3 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 11 Dec 2024 12:24:34 +0100
Subject: [PATCH 270/272] Split controls for grid rulers and placeholders,
 don't show placeholders during item resize (#6720)

**Problem:**

Grid control placeholders should not show while resizing a grid item.

**Fix:**

1. Split the grid controls into two components - one for the
placeholders and one for the ruler/markers.
2. Do not show the placeholders while resizing a grid item (via its
edges)
3. Do some prep work to only show row/col placeholder lines during
marker resize (an incremental PR will take care of that)

| Before | After |
|-----------|--------------|
| ![Kapture 2024-12-11 at 12 22
44](https://github.com/user-attachments/assets/bca7def9-91fc-4095-9cff-9058b77ee609)
| ![Kapture 2024-12-11 at 12 22
02](https://github.com/user-attachments/assets/255ceb5f-6a5e-4085-82b3-5e057ffb4c3e)
|

Fixes #[6719](https://github.com/concrete-utopia/utopia/issues/6719)
---
 .../strategies/basic-resize-strategy.tsx      |  12 ++-
 ...nge-element-location-duplicate-strategy.ts |  10 +-
 ...ange-element-location-keyboard-strategy.ts |  10 +-
 .../grid-change-element-location-strategy.ts  |   6 +-
 .../strategies/grid-move-absolute.ts          |   6 +-
 .../strategies/grid-reorder-strategy.ts       |   6 +-
 .../grid-resize-element-ruler-strategy.ts     |   2 +
 .../grid-resize-element-strategy.ts           |   4 +-
 .../controls/grid-controls-for-strategies.tsx |  26 +++++
 .../canvas/controls/grid-controls.tsx         | 100 +++++++++++-------
 10 files changed, 134 insertions(+), 48 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
index 8c3a65d3baf0..976888db8e84 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -36,7 +36,10 @@ import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  controlsForGridRulers,
+} from '../../controls/grid-controls-for-strategies'
 import { ImmediateParentBounds } from '../../controls/parent-bounds'
 import { ImmediateParentOutlines } from '../../controls/parent-outlines'
 import { AbsoluteResizeControl } from '../../controls/select-mode/absolute-resize-control'
@@ -130,7 +133,12 @@ export function basicResizeStrategy(
         key: 'parent-bounds-control',
         show: 'visible-only-while-active',
       }),
-      ...(isGridCell ? [controlsForGridPlaceholders(gridItemIdentifier(selectedElement))] : []),
+      ...(isGridCell
+        ? [
+            controlsForGridPlaceholders(gridItemIdentifier(selectedElement)),
+            controlsForGridRulers(gridItemIdentifier(selectedElement)),
+          ]
+        : []),
     ],
     fitness:
       interactionSession != null &&
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
index ffa2066191ae..b10120351cef 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
@@ -7,7 +7,10 @@ import { setCursorCommand } from '../../commands/set-cursor-command'
 
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  controlsForGridRulers,
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { CustomStrategyState, InteractionCanvasState } from '../canvas-strategy-types'
@@ -79,7 +82,10 @@ export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory =
       category: 'tools',
       type: 'pointer',
     },
-    controlsToRender: [controlsForGridPlaceholders(gridItemIdentifier(selectedElement))],
+    controlsToRender: [
+      controlsForGridPlaceholders(gridItemIdentifier(selectedElement)),
+      controlsForGridRulers(gridItemIdentifier(selectedElement)),
+    ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 3),
     apply: () => {
       if (
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
index 0bee8900873a..be83591b9b74 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
@@ -2,7 +2,10 @@ import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
 import type { GridPositionValue } from '../../../../core/shared/element-template'
 import { gridPositionValue } from '../../../../core/shared/element-template'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  controlsForGridRulers,
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategy, InteractionCanvasState } from '../canvas-strategy-types'
 import {
   emptyStrategyApplicationResult,
@@ -68,7 +71,10 @@ export function gridChangeElementLocationResizeKeyboardStrategy(
       category: 'modalities',
       type: 'reorder-large',
     },
-    controlsToRender: [controlsForGridPlaceholders(gridItemIdentifier(target))],
+    controlsToRender: [
+      controlsForGridPlaceholders(gridItemIdentifier(target)),
+      controlsForGridRulers(gridItemIdentifier(target)),
+    ],
     fitness: fitness(interactionSession),
     apply: () => {
       if (interactionSession == null || interactionSession.interactionData.type !== 'KEYBOARD') {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
index 7ef0e98a20e6..03d6a8fcb7a7 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
@@ -16,7 +16,10 @@ import { getTargetGridCellData } from '../../../inspector/grid-helpers'
 import type { CanvasCommand } from '../../commands/commands'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { showGridControls } from '../../commands/show-grid-controls-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  controlsForGridRulers,
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { InteractionCanvasState } from '../canvas-strategy-types'
@@ -97,6 +100,7 @@ export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
     },
     controlsToRender: [
       controlsForGridPlaceholders(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
+      controlsForGridRulers(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 2),
     apply: () => {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
index 2ecadc5fa9b0..aa206cd67988 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
@@ -23,7 +23,10 @@ import {
 } from '../../../../core/shared/math-utils'
 import type { CanvasCommand } from '../../commands/commands'
 import { showGridControls } from '../../commands/show-grid-controls-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  controlsForGridRulers,
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { InteractionCanvasState } from '../canvas-strategy-types'
@@ -102,6 +105,7 @@ export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
     },
     controlsToRender: [
       controlsForGridPlaceholders(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
+      controlsForGridRulers(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 2),
     apply: () => {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
index abec7c1437cd..52e38352c41f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
@@ -11,7 +11,10 @@ import { absolute } from '../../../../utils/utils'
 import type { CanvasCommand } from '../../commands/commands'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { showGridControls } from '../../commands/show-grid-controls-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  controlsForGridRulers,
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { InteractionCanvasState } from '../canvas-strategy-types'
@@ -95,6 +98,7 @@ export const gridReorderStrategy: CanvasStrategyFactory = (
     },
     controlsToRender: [
       controlsForGridPlaceholders(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
+      controlsForGridRulers(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
     ],
     fitness: onlyFitWhenDraggingThisControl(
       interactionSession,
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts
index 30c1fb75487a..d8eeee81929c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts
@@ -17,6 +17,7 @@ import { gridContainerIdentifier, gridItemIdentifier } from '../../../editor/sto
 import { isCSSKeyword } from '../../../inspector/common/css-utils'
 import {
   controlsForGridPlaceholders,
+  controlsForGridRulers,
   GridResizeControls,
 } from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
@@ -82,6 +83,7 @@ export const gridResizeElementRulerStrategy: CanvasStrategyFactory = (
         show: 'always-visible',
       },
       controlsForGridPlaceholders(gridItemIdentifier(selectedElement)),
+      controlsForGridRulers(gridItemIdentifier(selectedElement)),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_RESIZE_RULER_HANDLE', 1),
     apply: () => {
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 2141f6add524..1c9129be903a 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -20,7 +20,7 @@ import { isFillOrStretchModeAppliedOnAnySide } from '../../../inspector/inspecto
 import { CSSCursor } from '../../canvas-types'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 import {
-  controlsForGridPlaceholders,
+  controlsForGridRulers,
   gridEdgeToEdgePosition,
   GridResizeControls,
 } from '../../controls/grid-controls-for-strategies'
@@ -88,7 +88,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         key: `grid-resize-controls-${EP.toString(selectedElement)}`,
         show: 'always-visible',
       },
-      controlsForGridPlaceholders(gridItemIdentifier(selectedElement)),
+      controlsForGridRulers(gridItemIdentifier(selectedElement)),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_RESIZE_HANDLE', 1),
     apply: () => {
diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
index 9a828d007812..b91113d0677d 100644
--- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
+++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -25,6 +25,7 @@ import {
   GridControlsComponent,
   GridResizeControlsComponent,
   GridRowColumnResizingControlsComponent,
+  GridRulersControlsComponent,
 } from './grid-controls'
 import { isEdgePositionOnSide } from '../canvas-utils'
 import { useMonitorChangesToElements } from '../../../components/editor/store/store-monitor'
@@ -167,6 +168,15 @@ export function isGridControlsProps(props: unknown): props is GridControlsProps
 
 export const GridControls = controlForStrategyMemoized<GridControlsProps>(GridControlsComponent)
 
+export interface GridRulersControlsProps {
+  type: 'GRID_RULERS_CONTROLS_PROPS'
+  targets: GridIdentifier[]
+}
+
+export const GridRulersControls = controlForStrategyMemoized<GridRulersControlsProps>(
+  GridRulersControlsComponent,
+)
+
 interface GridResizeControlProps {
   target: GridIdentifier
 }
@@ -221,3 +231,19 @@ export function controlsForGridPlaceholders(
     show: whenToShow,
   }
 }
+
+export function controlsForGridRulers(
+  gridPath: GridIdentifier | Array<GridIdentifier>,
+  whenToShow: WhenToShowControl = 'always-visible',
+  suffix: string | null = null,
+): ControlWithProps<any> {
+  return {
+    control: GridRulersControls,
+    props: {
+      type: 'GRID_RULERS_CONTROLS_PROPS',
+      targets: Array.isArray(gridPath) ? gridPath : [gridPath],
+    },
+    key: `GridRulersControls${suffix == null ? '' : suffix}`,
+    show: whenToShow,
+  }
+}
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index b0ccf8058658..4a2475f88264 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -135,6 +135,7 @@ import {
 import type { Property } from 'csstype'
 import { isFeatureEnabled } from '../../../utils/feature-switches'
 import type { ThemeObject } from '../../../uuiui/styles/theme/theme-helpers'
+import { atom, useAtom } from 'jotai'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -160,6 +161,8 @@ function getLabelForAxis(
 
 const GRID_RESIZE_HANDLE_SIZE = 15 // px
 
+const forceShowGridPlaceholdersAtom = atom<GridControlVisibility>('not-visible')
+
 interface GridResizingControlProps {
   dimension: GridDimension
   dimensionIndex: number
@@ -646,9 +649,11 @@ export const GridRowColumnResizingControlsComponent = ({
   )
 }
 
+type GridControlVisibility = 'all' | 'not-visible'
+
 interface GridControlProps {
   grid: GridData
-  controlsVisible: 'visible' | 'not-visible'
+  controlsVisible: GridControlVisibility
 }
 
 const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) => {
@@ -917,7 +922,7 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
     gridPath: gridPath,
   })
 
-  const placeholders = controlsVisible === 'visible' ? range(0, grid.cells) : []
+  const placeholders = controlsVisible !== 'not-visible' ? range(0, grid.cells) : []
   const baseStyle = getGridHelperStyleMatchingTargetGrid(grid)
   const style = {
     ...baseStyle,
@@ -1029,7 +1034,7 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
               backgroundColor:
                 activelyDraggingOrResizingCell != null &&
                 EP.toUid(cell.elementPath) !== activelyDraggingOrResizingCell &&
-                controlsVisible === 'visible'
+                controlsVisible === 'all'
                   ? '#ffffff66'
                   : 'transparent',
               borderRadius: cell.borderRadius ?? 0,
@@ -1044,7 +1049,7 @@ const GridControl = React.memo<GridControlProps>(({ grid, controlsVisible }) =>
       interactionData?.dragStart != null &&
       interactionData?.drag != null &&
       hoveringStart != null &&
-      controlsVisible === 'visible' ? (
+      controlsVisible === 'all' ? (
         <motion.div
           style={{
             pointerEvents: 'none',
@@ -1193,11 +1198,11 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
     }),
   )
 
-  const [showGridCellOutlines, setShowGridCellOutlines] = React.useState(false)
-
   const isGridItemSelectedWithoutInteraction =
     selectedGridItems.length > 0 && !isGridItemInteractionActive
 
+  const [forceShowGridPlaceholders] = useAtom(forceShowGridPlaceholdersAtom)
+
   if (grids.length === 0) {
     return null
   }
@@ -1222,31 +1227,34 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
             <GridControl
               key={GridControlKey(gridContainerOrComponentPath)}
               grid={grid}
-              controlsVisible={
-                shouldHaveVisibleControls || showGridCellOutlines ? 'visible' : 'not-visible'
-              }
+              controlsVisible={shouldHaveVisibleControls ? 'all' : forceShowGridPlaceholders}
             />
           )
         })}
-        {/* Ruler markers */}
-        {when(
-          isFeatureEnabled('Grid Ruler Markers'),
-          selectedGridItems.map((path) => {
-            return (
-              <RulerMarkers
-                key={`ruler-markers-${EP.toString(path)}`}
-                path={path}
-                setShowGridCellOutlines={setShowGridCellOutlines}
-              />
-            )
-          }),
-        )}
         <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
       </CanvasOffsetWrapper>
     </div>
   )
 }
 
+export const GridRulersControlsComponent = React.memo(() => {
+  const selectedGridItems = useSelectedGridItems()
+
+  if (!isFeatureEnabled('Grid Ruler Markers')) {
+    return null
+  }
+  return (
+    <div id={'grid-rulers-controls'}>
+      <CanvasOffsetWrapper>
+        {selectedGridItems.map((path) => {
+          return <RulerMarkers key={`ruler-markers-${EP.toString(path)}`} path={path} />
+        })}
+      </CanvasOffsetWrapper>
+    </div>
+  )
+})
+GridRulersControlsComponent.displayName = 'GridRulersControlsComponent'
+
 const MIN_INDICATORS_DISTANCE = 32 // px
 
 const AbsoluteDistanceIndicators = React.memo(
@@ -2195,7 +2203,6 @@ type RulerMarkerPositionData = {
 }
 
 interface RulerMarkersProps {
-  setShowGridCellOutlines: (show: boolean) => void
   path: ElementPath
 }
 
@@ -2411,17 +2418,19 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
     [canvasOffsetRef, dispatch, canvasScale],
   )
 
+  const [, setForceShowGridPlaceholders] = useAtom(forceShowGridPlaceholdersAtom)
+
   const markerMouseUp = React.useCallback(
     (event: MouseEvent) => {
       event.preventDefault()
       event.stopPropagation()
       setShowExtraMarkers(null)
       setFrozenMarkers(null)
-      props.setShowGridCellOutlines(false)
+      setForceShowGridPlaceholders('not-visible')
 
       window.removeEventListener('mouseup', markerMouseUp)
     },
-    [props],
+    [setForceShowGridPlaceholders],
   )
 
   const rowMarkerMouseDown = React.useCallback(
@@ -2430,13 +2439,13 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
       event.stopPropagation()
 
       setShowExtraMarkers('row')
-      props.setShowGridCellOutlines(true)
+      setForceShowGridPlaceholders('all')
       setFrozenMarkers(rulerMarkerData)
       startResizeInteraction(EP.toUid(props.path), edge)(event)
 
       window.addEventListener('mouseup', markerMouseUp)
     },
-    [markerMouseUp, props, startResizeInteraction, rulerMarkerData],
+    [markerMouseUp, props, startResizeInteraction, rulerMarkerData, setForceShowGridPlaceholders],
   )
 
   const columnMarkerMouseDown = React.useCallback(
@@ -2445,13 +2454,13 @@ const RulerMarkers = React.memo((props: RulerMarkersProps) => {
       event.stopPropagation()
 
       setShowExtraMarkers('column')
-      props.setShowGridCellOutlines(true)
+      setForceShowGridPlaceholders('all')
       setFrozenMarkers(rulerMarkerData)
       startResizeInteraction(EP.toUid(props.path), edge)(event)
 
       window.addEventListener('mouseup', markerMouseUp)
     },
-    [markerMouseUp, props, startResizeInteraction, rulerMarkerData],
+    [markerMouseUp, props, startResizeInteraction, rulerMarkerData, setForceShowGridPlaceholders],
   )
 
   if (rulerMarkerData == null || gridRect == null) {
@@ -2647,23 +2656,41 @@ const SnapLine = React.memo(
   }) => {
     const colorTheme = useColorTheme()
 
-    const [targetMarker, targetFrozenMarker] = React.useMemo(() => {
+    const targetMarker = React.useMemo(() => {
+      if (props.edge == null) {
+        return null
+      }
+      switch (props.edge) {
+        case 'column-end':
+          return props.markers.columnEnd
+        case 'column-start':
+          return props.markers.columnStart
+        case 'row-end':
+          return props.markers.rowEnd
+        case 'row-start':
+          return props.markers.rowStart
+        default:
+          assertNever(props.edge)
+      }
+    }, [props.edge, props.markers])
+
+    const targetFrozenMarker = React.useMemo(() => {
       if (props.edge == null || props.frozenMarkers == null) {
-        return []
+        return null
       }
       switch (props.edge) {
         case 'column-end':
-          return [props.markers.columnEnd, props.frozenMarkers.columnEnd]
+          return props.frozenMarkers.columnEnd
         case 'column-start':
-          return [props.markers.columnStart, props.frozenMarkers.columnStart]
+          return props.frozenMarkers.columnStart
         case 'row-end':
-          return [props.markers.rowEnd, props.frozenMarkers.rowEnd]
+          return props.frozenMarkers.rowEnd
         case 'row-start':
-          return [props.markers.rowStart, props.frozenMarkers.rowStart]
+          return props.frozenMarkers.rowStart
         default:
           assertNever(props.edge)
       }
-    }, [props.edge, props.markers, props.frozenMarkers])
+    }, [props.edge, props.frozenMarkers])
 
     const axis = props.edge === 'column-end' || props.edge === 'column-start' ? 'column' : 'row'
 
@@ -2672,7 +2699,6 @@ const SnapLine = React.memo(
       (store) => store.editor.canvas.scale,
       'SnapLine canvasScale',
     )
-
     if (
       props.edge == null ||
       targetMarker == null ||

From accbe3d09cbdb12250dbf46cd8ace03adfbcf06c Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:41:08 +0200
Subject: [PATCH 271/272] feat(editor): add responsive utils (#6716)

This prep PR adds the responsive utilities we'll use in our responsive
PR, along with types and tests.
The important utilities (that are exposed outside) are:
1. `extractScreenSizeFromCss(css: string)` - which recieves a CSS string
of the media query (i.e `@media (min-width: 100px)`) and turns it into a
`ScreenSize` object (in our example - `{ min: {value: 100, unit: 'px'}
}`). We also support media ranges (`@media (20px < width < 50em)`). This
function is covered in tests.
It uses `mediaQueryToScreenSize(mediaQuery: MediaQuery)` internally,
which takes a `MediaQuery` object (after it was parsed from the CSS
string), and does the "heavy lifting" of converting it to a `ScreenSize`
representation. This inner function is also covered in tests.

2. `selectValueByBreakpoint` - this function recieves a list of possible
variants (values with corresponding `ScreenSize`s which they apply in),
and the current Scene size. It infers the most matching variant
according to the Scene size (can also be the default variant if none are
matching). This function is also fully covered in tests.

No functionality is added to the app itself, this is just a prep PR for
the functionality in the subsequent PR.

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 editor/src/components/canvas/canvas-types.ts  |   8 +
 .../src/components/canvas/responsive-types.ts |  39 ++++
 .../canvas/responsive-utils.spec.ts           | 176 +++++++++++++++
 .../src/components/canvas/responsive-utils.ts | 210 ++++++++++++++++++
 4 files changed, 433 insertions(+)
 create mode 100644 editor/src/components/canvas/responsive-types.ts
 create mode 100644 editor/src/components/canvas/responsive-utils.spec.ts
 create mode 100644 editor/src/components/canvas/responsive-utils.ts

diff --git a/editor/src/components/canvas/canvas-types.ts b/editor/src/components/canvas/canvas-types.ts
index 06f6f0f5220e..787c04380f36 100644
--- a/editor/src/components/canvas/canvas-types.ts
+++ b/editor/src/components/canvas/canvas-types.ts
@@ -30,6 +30,7 @@ import type {
   CSSPadding,
   FlexDirection,
 } from '../inspector/common/css-utils'
+import type { ScreenSize } from './responsive-types'
 
 export const CanvasContainerID = 'canvas-container'
 export const SceneContainerName = 'scene'
@@ -557,6 +558,13 @@ interface ParsedCSSStyleProperty<T> {
   value: T
 }
 
+type StyleHoverModifier = { type: 'hover' }
+export type StyleMediaSizeModifier = {
+  type: 'media-size'
+  size: ScreenSize
+}
+export type StyleModifier = StyleHoverModifier | StyleMediaSizeModifier
+
 export type CSSStyleProperty<T> =
   | CSSStylePropertyNotFound
   | CSSStylePropertyNotParsable
diff --git a/editor/src/components/canvas/responsive-types.ts b/editor/src/components/canvas/responsive-types.ts
new file mode 100644
index 000000000000..c1e025a6f8fc
--- /dev/null
+++ b/editor/src/components/canvas/responsive-types.ts
@@ -0,0 +1,39 @@
+import type { Identifier, Dimension } from 'css-tree'
+import type { CSSNumber } from '../inspector/common/css-utils'
+// @media (min-width: 100px) and (max-width: 200em) => { min: { value: 100, unit: 'px' }, max: { value: 200, unit: 'em' } }
+export type ScreenSize = {
+  min?: CSSNumber
+  max?: CSSNumber
+}
+
+export interface MediaQuery {
+  type: 'MediaQuery'
+  loc: null
+  modifier: null
+  mediaType: null
+  condition?: {
+    type: 'Condition'
+    loc: null
+    kind: 'media'
+    children: Array<FeatureRange | Feature | Identifier>
+  }
+}
+
+export interface FeatureRange {
+  type: 'FeatureRange'
+  loc: null
+  kind: 'media'
+  left?: Dimension | Identifier
+  leftComparison: '<' | '>'
+  middle: Dimension | Identifier
+  rightComparison: '<' | '>'
+  right?: Dimension | Identifier
+}
+
+export interface Feature {
+  type: 'Feature'
+  loc: null
+  kind: 'media'
+  name: 'min-width' | 'max-width'
+  value?: Dimension
+}
diff --git a/editor/src/components/canvas/responsive-utils.spec.ts b/editor/src/components/canvas/responsive-utils.spec.ts
new file mode 100644
index 000000000000..dcbcc0c434c1
--- /dev/null
+++ b/editor/src/components/canvas/responsive-utils.spec.ts
@@ -0,0 +1,176 @@
+import * as csstree from 'css-tree'
+import { mediaQueryToScreenSize, selectValueByBreakpoint } from './responsive-utils'
+import type { ScreenSize, MediaQuery } from './responsive-types'
+import { extractScreenSizeFromCss } from './responsive-utils'
+import type { StyleModifier } from './canvas-types'
+
+describe('extractScreenSizeFromCss', () => {
+  it('extracts screen size from simple media query', () => {
+    const css = '@media (min-width: 100px) and (max-width: 500px)'
+    const result = extractScreenSizeFromCss(css)
+    expect(result).toEqual({
+      min: { value: 100, unit: 'px' },
+      max: { value: 500, unit: 'px' },
+    })
+  })
+
+  it('returns null for invalid media query', () => {
+    const css = 'not-a-media-query'
+    const result = extractScreenSizeFromCss(css)
+    expect(result).toBeNull()
+  })
+
+  it('uses cache for repeated calls with same CSS', () => {
+    const css = '@media (min-width: 100px)'
+
+    // First call
+    const result1 = extractScreenSizeFromCss(css)
+    // Second call - should return same object reference
+    const result2 = extractScreenSizeFromCss(css)
+
+    expect(result1).toBe(result2) // Use toBe for reference equality
+    expect(result1).toEqual({
+      min: { value: 100, unit: 'px' },
+    })
+  })
+
+  it('handles different CSS strings independently in cache', () => {
+    const css1 = '@media (min-width: 100px)'
+    const css2 = '@media (max-width: 500px)'
+
+    // First string
+    const result1a = extractScreenSizeFromCss(css1)
+    const result1b = extractScreenSizeFromCss(css1)
+    expect(result1a).toBe(result1b)
+    expect(result1a).toEqual({
+      min: { value: 100, unit: 'px' },
+    })
+
+    // Second string
+    const result2a = extractScreenSizeFromCss(css2)
+    const result2b = extractScreenSizeFromCss(css2)
+    expect(result2a).toBe(result2b)
+    expect(result2a).toEqual({
+      max: { value: 500, unit: 'px' },
+    })
+
+    // Different strings should have different references
+    expect(result1a).not.toBe(result2a)
+  })
+})
+
+describe('selectValueByBreakpoint', () => {
+  const variants: { value: string; modifiers?: StyleModifier[] }[] = [
+    {
+      value: 'Desktop Value',
+      modifiers: [{ type: 'media-size', size: { min: { value: 200, unit: 'px' } } }],
+    },
+    {
+      value: 'Tablet Value',
+      modifiers: [{ type: 'media-size', size: { min: { value: 100, unit: 'px' } } }],
+    },
+    {
+      value: 'Extra Large Value',
+      modifiers: [{ type: 'media-size', size: { min: { value: 20, unit: 'em' } } }],
+    },
+    {
+      value: 'Ranged Value',
+      modifiers: [
+        {
+          type: 'media-size',
+          size: { min: { value: 80, unit: 'px' }, max: { value: 90, unit: 'px' } },
+        },
+      ],
+    },
+    {
+      value: 'Mobile Value',
+      modifiers: [{ type: 'media-size', size: { min: { value: 60, unit: 'px' } } }],
+    },
+    { value: 'Default Value' },
+  ]
+  const tests: { title: string; screenSize: number; expected: string }[] = [
+    { title: 'selects the correct value', screenSize: 150, expected: 'Tablet Value' },
+    { title: 'select the closest value', screenSize: 250, expected: 'Desktop Value' },
+    { title: 'converts em to px', screenSize: 350, expected: 'Extra Large Value' },
+    {
+      title: 'selects the default value if no breakpoint is matched',
+      screenSize: 50,
+      expected: 'Default Value',
+    },
+    {
+      title: 'selects the ranged value if the screen size is within the range',
+      screenSize: 85,
+      expected: 'Ranged Value',
+    },
+    {
+      title: 'selects the mobile value if the screen size is outside the ranged values',
+      screenSize: 95,
+      expected: 'Mobile Value',
+    },
+  ] as const
+
+  tests.forEach((test) => {
+    it(`${test.title}`, () => {
+      expect(selectValueByBreakpoint(variants, test.screenSize)?.value).toEqual(test.expected)
+    })
+  })
+
+  it('selects null if no matching breakpoint and no default value', () => {
+    const largeVariants: { value: string; modifiers?: StyleModifier[] }[] = [
+      {
+        value: 'Desktop Value',
+        modifiers: [{ type: 'media-size', size: { min: { value: 200, unit: 'px' } } }],
+      },
+      {
+        value: 'Tablet Value',
+        modifiers: [{ type: 'media-size', size: { min: { value: 100, unit: 'px' } } }],
+      },
+    ]
+    expect(selectValueByBreakpoint(largeVariants, 50)).toBeNull()
+  })
+  it('selects default value if no media modifiers', () => {
+    const noMediaVariants: { value: string; modifiers?: StyleModifier[] }[] = [
+      {
+        value: 'Hover Value',
+        modifiers: [{ type: 'hover' }],
+      },
+      { value: 'Default Value' },
+    ]
+    expect(selectValueByBreakpoint(noMediaVariants, 50)?.value).toEqual('Default Value')
+  })
+})
+
+describe('mediaQueryToScreenSize', () => {
+  it('converts simple screen size queries', () => {
+    const testCases: { input: string; expected: ScreenSize }[] = [
+      {
+        input: '@media (100px <width < 500px)',
+        expected: { min: { value: 100, unit: 'px' }, max: { value: 500, unit: 'px' } },
+      },
+      {
+        input: '@media (min-width: 100px) and (max-width: 500px)',
+        expected: { min: { value: 100, unit: 'px' }, max: { value: 500, unit: 'px' } },
+      },
+      {
+        input: '@media screen and (min-width: 100px)',
+        expected: { min: { value: 100, unit: 'px' } },
+      },
+      {
+        input: '@media (100px < width) and (max-width: 500px)',
+        expected: { min: { value: 100, unit: 'px' }, max: { value: 500, unit: 'px' } },
+      },
+      {
+        input: '@media (width > 100px)',
+        expected: { min: { value: 100, unit: 'px' } },
+      },
+    ]
+    testCases.forEach((testCase) => {
+      csstree.walk(csstree.parse(testCase.input), (node) => {
+        if (node.type === 'MediaQuery') {
+          const result = mediaQueryToScreenSize(node as unknown as MediaQuery)
+          expect(result).toEqual(testCase.expected)
+        }
+      })
+    })
+  })
+})
diff --git a/editor/src/components/canvas/responsive-utils.ts b/editor/src/components/canvas/responsive-utils.ts
new file mode 100644
index 000000000000..52349915b1b6
--- /dev/null
+++ b/editor/src/components/canvas/responsive-utils.ts
@@ -0,0 +1,210 @@
+import type { Feature, FeatureRange, MediaQuery, ScreenSize } from './responsive-types'
+import * as csstree from 'css-tree'
+import type { StyleMediaSizeModifier, StyleModifier } from './canvas-types'
+import { type CSSNumber, type CSSNumberUnit, cssNumber } from '../inspector/common/css-utils'
+import { memoize } from '../../core/shared/memoize'
+
+/**
+ * Extracts the screen size from a CSS string, for example:
+ * `@media (min-width: 100px)` -> { min: {value: 100, unit: 'px'} }
+ * `@media (20px < width < 50em)` -> { min: {value: 20, unit: 'px'}, max: {value: 50, unit: 'em'} }
+ */
+export const extractScreenSizeFromCss = memoize((css: string): ScreenSize | null => {
+  const mediaQuery = parseMediaQueryFromCss(css)
+  return mediaQuery == null ? null : mediaQueryToScreenSize(mediaQuery)
+})
+
+function extractFromFeatureRange(featureRange: FeatureRange): {
+  leftValue: CSSNumber | null
+  rightValue: CSSNumber | null
+  leftComparison: '<' | '>' | null
+  rightComparison: '<' | '>' | null
+} | null {
+  // (100px < width < 500px) OR (500px > width > 100px) OR (100px > width) OR (500px < width)
+  if (featureRange?.middle?.type === 'Identifier' && featureRange.middle.name === 'width') {
+    const leftValue =
+      featureRange.left?.type === 'Dimension'
+        ? cssNumber(Number(featureRange.left.value), featureRange.left.unit as CSSNumberUnit)
+        : null
+
+    const rightValue =
+      featureRange.right?.type === 'Dimension'
+        ? cssNumber(Number(featureRange.right.value), featureRange.right.unit as CSSNumberUnit)
+        : null
+
+    return {
+      leftValue: leftValue,
+      rightValue: rightValue,
+      leftComparison: featureRange.leftComparison,
+      rightComparison: featureRange.rightComparison,
+    }
+  }
+  // (width > 100px) OR (width < 500px)
+  if (featureRange?.left?.type === 'Identifier' && featureRange.left.name === 'width') {
+    const rightValue =
+      featureRange.middle?.type === 'Dimension'
+        ? cssNumber(Number(featureRange.middle.value), featureRange.middle.unit as CSSNumberUnit)
+        : null
+    // this is not a mistake, since we normalize the "width" to be in the middle
+    const rightComparison = featureRange.leftComparison
+
+    return {
+      leftValue: null,
+      leftComparison: null,
+      rightValue: rightValue,
+      rightComparison: rightComparison,
+    }
+  }
+  return null
+}
+
+export function mediaQueryToScreenSize(mediaQuery: MediaQuery): ScreenSize {
+  const result: ScreenSize = {}
+
+  if (mediaQuery.condition?.type === 'Condition') {
+    // 1. Handle FeatureRange case
+    const featureRanges = mediaQuery.condition.children.filter(
+      (child): child is FeatureRange => child.type === 'FeatureRange',
+    ) as Array<FeatureRange>
+
+    featureRanges.forEach((featureRange) => {
+      const rangeData = extractFromFeatureRange(featureRange)
+      if (rangeData == null) {
+        return
+      }
+      const { leftValue, rightValue, leftComparison, rightComparison } = rangeData
+      if (leftValue != null) {
+        if (leftComparison === '<') {
+          result.min = leftValue
+        } else {
+          result.max = leftValue
+        }
+      }
+      if (rightValue != null) {
+        if (rightComparison === '<') {
+          result.max = rightValue
+        } else {
+          result.min = rightValue
+        }
+      }
+    })
+
+    // 2. Handle Feature case (min-width/max-width)
+    const features = mediaQuery.condition.children.filter(
+      (child): child is Feature => child.type === 'Feature',
+    )
+    features.forEach((feature) => {
+      if (feature.value?.type === 'Dimension') {
+        if (feature.name === 'min-width') {
+          result.min = cssNumber(Number(feature.value.value), feature.value.unit as CSSNumberUnit)
+        } else if (feature.name === 'max-width') {
+          result.max = cssNumber(Number(feature.value.value), feature.value.unit as CSSNumberUnit)
+        }
+      }
+    })
+  }
+
+  return result
+}
+
+function parseMediaQueryFromCss(css: string): MediaQuery | null {
+  let result: MediaQuery | null = null
+  csstree.walk(csstree.parse(css), (node) => {
+    if (node.type === 'MediaQuery') {
+      result = node as unknown as MediaQuery
+    }
+  })
+  return result
+}
+
+function getMediaModifier(
+  modifiers: StyleModifier[] | undefined | null,
+): StyleMediaSizeModifier | null {
+  return (modifiers ?? []).filter(
+    (modifier): modifier is StyleMediaSizeModifier => modifier.type === 'media-size',
+  )[0]
+}
+
+export function selectValueByBreakpoint<T extends { modifiers?: StyleModifier[] }>(
+  parsedVariants: T[],
+  sceneWidthInPx?: number,
+): T | null {
+  const relevantModifiers = parsedVariants.filter((variant) => {
+    // 1. filter out variants that don't have media modifiers, but keep variants with no modifiers at all
+    if (variant.modifiers == null || variant.modifiers.length === 0) {
+      return true
+    }
+    const mediaModifier = getMediaModifier(variant.modifiers)
+    if (mediaModifier == null) {
+      // this means it only has other modifiers
+      return false
+    }
+
+    if (sceneWidthInPx == null) {
+      // filter out variants that require a scene width
+      return false
+    }
+
+    // 2. check that it has at least one media modifier that satisfies the current scene width
+    const maxSizeInPx = cssNumberAsPx(mediaModifier.size.max)
+    const minSizeInPx = cssNumberAsPx(mediaModifier.size.min)
+
+    // if it has only max
+    if (maxSizeInPx != null && minSizeInPx == null && sceneWidthInPx <= maxSizeInPx) {
+      return true
+    }
+
+    // if it has only min
+    if (maxSizeInPx == null && minSizeInPx != null && sceneWidthInPx >= minSizeInPx) {
+      return true
+    }
+
+    // if it has both max and min
+    if (
+      maxSizeInPx != null &&
+      minSizeInPx != null &&
+      sceneWidthInPx >= minSizeInPx &&
+      sceneWidthInPx <= maxSizeInPx
+    ) {
+      return true
+    }
+    return false
+  })
+  let chosen: T | null = null
+  for (const variant of relevantModifiers) {
+    const chosenMediaModifier = getMediaModifier(chosen?.modifiers)
+    const variantMediaModifier = getMediaModifier(variant.modifiers)
+    if (variantMediaModifier == null) {
+      if (chosenMediaModifier == null) {
+        // if we have nothing chosen then we'll take the base value
+        chosen = variant
+      }
+      continue
+    }
+    if (chosenMediaModifier == null) {
+      chosen = variant
+      continue
+    }
+    // find the closest media modifier
+    const minSizeInPx = cssNumberAsPx(variantMediaModifier.size.min)
+    const chosenMinSizeInPx = cssNumberAsPx(chosenMediaModifier.size.min)
+    if (minSizeInPx != null && (chosenMinSizeInPx == null || minSizeInPx > chosenMinSizeInPx)) {
+      chosen = variant
+    }
+    const maxSizeInPx = cssNumberAsPx(variantMediaModifier.size.max)
+    const chosenMaxSizeInPx = cssNumberAsPx(chosenMediaModifier.size.max)
+    if (maxSizeInPx != null && (chosenMaxSizeInPx == null || maxSizeInPx < chosenMaxSizeInPx)) {
+      chosen = variant
+    }
+  }
+  if (chosen == null) {
+    return null
+  }
+  return chosen
+}
+
+// TODO: get this value from the Scene
+const EM_TO_PX_RATIO = 16
+export function cssNumberAsPx(value: CSSNumber | null | undefined): number | null {
+  return value == null ? null : value.unit === 'em' ? value.value * EM_TO_PX_RATIO : value.value
+}

From 84da0ab62ac9c8f1dbd1beeac24e261c447e22dd Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Wed, 11 Dec 2024 17:12:00 +0200
Subject: [PATCH 272/272] feat(editor): pass scene size to style plugins
 (#6715)

This prep PR adds the ability to pass the Scene size to the Tailwind
plugin/
This was extracted from the spike since it added small changes in many
files.

**Details:**

- We need the Scene size in
[tailwind-style-plugin.ts](https://github.com/concrete-utopia/utopia/pull/6715/files#diff-ad30d4bf205861b9efac9bb4bdb2bb68707cace215f64915244c46dbfab0607dR23-R25)
to be able (in the next PR) to calculate the matching breakpoint.
- We get the Scene size in `getContainingSceneWidth` in
[responsive-utils.ts](https://github.com/concrete-utopia/utopia/pull/6715/files#diff-4f8de694cb6cb8852ff046766f5015a01f9567d4c3b7472bbac36358b52932aaR7-R16)
and we pass it to the Tailwind plugin.
- The rest of the changes are just passing down this data.

This PR doesn't change any functionality, but is merely a prep PR for
the next, functional one.

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode
---
 .../canvas-strategies/canvas-strategies.tsx   |  2 ++
 .../canvas-strategy-types.ts                  |  6 ++--
 .../commands/adjust-css-length-command.ts     |  1 +
 .../canvas/commands/set-css-length-command.ts |  1 +
 .../select-mode/border-radius-control.tsx     |  1 +
 .../controls/select-mode/flex-gap-control.tsx |  1 +
 .../select-mode/padding-resize-control.tsx    |  1 +
 .../select-mode/subdued-flex-gap-controls.tsx |  1 +
 .../select-mode/subdued-padding-control.tsx   |  1 +
 .../plugins/inline-style-plugin.spec.ts       |  1 +
 .../canvas/plugins/style-plugins.ts           | 16 ++++++++++
 .../canvas/plugins/tailwind-style-plugin.ts   | 32 ++++++++++++-------
 .../src/components/canvas/responsive-utils.ts | 29 +++++++++++++++++
 .../inspector/common/property-path-hooks.ts   |  6 ++--
 .../src/core/model/element-metadata-utils.ts  |  7 ++++
 15 files changed, 90 insertions(+), 16 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
index ce32f1cacebc..1f6367b241eb 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -228,6 +228,7 @@ export function pickCanvasStateFromEditorState(
     propertyControlsInfo: editorState.propertyControlsInfo,
     styleInfoReader: activePlugin.styleInfoFactory({
       projectContents: editorState.projectContents,
+      jsxMetadata: editorState.jsxMetadata,
     }),
   }
 }
@@ -255,6 +256,7 @@ export function pickCanvasStateFromEditorStateWithMetadata(
     propertyControlsInfo: editorState.propertyControlsInfo,
     styleInfoReader: activePlugin.styleInfoFactory({
       projectContents: editorState.projectContents,
+      jsxMetadata: editorState.jsxMetadata,
     }),
   }
 }
diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
index 80d553a97a9a..e27c7bdd404b 100644
--- a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
+++ b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
@@ -112,9 +112,11 @@ export function controlWithProps<P>(value: ControlWithProps<P>): ControlWithProp
 
 export type StyleInfoReader = (elementPath: ElementPath) => StyleInfo | null
 
-export type StyleInfoFactory = (context: {
+export type StyleInfoContext = {
   projectContents: ProjectContentTreeRoot
-}) => StyleInfoReader
+  jsxMetadata: ElementInstanceMetadataMap
+}
+export type StyleInfoFactory = (context: StyleInfoContext) => StyleInfoReader
 
 export interface InteractionCanvasState {
   interactionTarget: InteractionTarget
diff --git a/editor/src/components/canvas/commands/adjust-css-length-command.ts b/editor/src/components/canvas/commands/adjust-css-length-command.ts
index 128aeac077d6..df4b81ecd292 100644
--- a/editor/src/components/canvas/commands/adjust-css-length-command.ts
+++ b/editor/src/components/canvas/commands/adjust-css-length-command.ts
@@ -78,6 +78,7 @@ export const runAdjustCssLengthProperties = (
 
   const styleInfoReader = getActivePlugin(withConflictingPropertiesRemoved).styleInfoFactory({
     projectContents: withConflictingPropertiesRemoved.projectContents,
+    jsxMetadata: withConflictingPropertiesRemoved.jsxMetadata,
   })
 
   const styleInfo = styleInfoReader(command.target)
diff --git a/editor/src/components/canvas/commands/set-css-length-command.ts b/editor/src/components/canvas/commands/set-css-length-command.ts
index f69f66c328df..cc2a0998f8a2 100644
--- a/editor/src/components/canvas/commands/set-css-length-command.ts
+++ b/editor/src/components/canvas/commands/set-css-length-command.ts
@@ -87,6 +87,7 @@ export const runSetCssLengthProperty = (
 
   const styleInfo = getActivePlugin(editorStateWithPropsDeleted).styleInfoFactory({
     projectContents: editorStateWithPropsDeleted.projectContents,
+    jsxMetadata: editorStateWithPropsDeleted.jsxMetadata,
   })(command.target)
 
   if (styleInfo == null) {
diff --git a/editor/src/components/canvas/controls/select-mode/border-radius-control.tsx b/editor/src/components/canvas/controls/select-mode/border-radius-control.tsx
index eb0d98c4d493..7f01a640b7e8 100644
--- a/editor/src/components/canvas/controls/select-mode/border-radius-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/border-radius-control.tsx
@@ -63,6 +63,7 @@ const borderRadiusSelector = createCachedSelector(
   (store: StyleInfoSubstate) =>
     getActivePlugin(store.editor).styleInfoFactory({
       projectContents: store.editor.projectContents,
+      jsxMetadata: store.editor.jsxMetadata,
     }),
   (_: MetadataSubstate, x: ElementPath) => x,
   (metadata, styleInfoReader, selectedElement) => {
diff --git a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
index 672e28d2f801..6f0121923126 100644
--- a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
@@ -139,6 +139,7 @@ export const FlexGapControl = controlForStrategyMemoized<FlexGapControlProps>((p
       maybeFlexGapData(
         getActivePlugin(store.editor).styleInfoFactory({
           projectContents: store.editor.projectContents,
+          jsxMetadata: store.editor.jsxMetadata,
         })(selectedElement),
         MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, selectedElement),
       ),
diff --git a/editor/src/components/canvas/controls/select-mode/padding-resize-control.tsx b/editor/src/components/canvas/controls/select-mode/padding-resize-control.tsx
index c9d8906e69ba..81827667dec2 100644
--- a/editor/src/components/canvas/controls/select-mode/padding-resize-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/padding-resize-control.tsx
@@ -362,6 +362,7 @@ export const PaddingResizeControl = controlForStrategyMemoized((props: PaddingCo
   const styleInfoReaderRef = useRefEditorState((store) =>
     getActivePlugin(store.editor).styleInfoFactory({
       projectContents: store.editor.projectContents,
+      jsxMetadata: store.editor.jsxMetadata,
     }),
   )
 
diff --git a/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx b/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx
index 539d082cc253..4e0091951593 100644
--- a/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx
+++ b/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx
@@ -43,6 +43,7 @@ export const SubduedFlexGapControl = React.memo<SubduedFlexGapControlProps>((pro
       maybeFlexGapData(
         getActivePlugin(store.editor).styleInfoFactory({
           projectContents: store.editor.projectContents,
+          jsxMetadata: store.editor.jsxMetadata,
         })(selectedElement),
         MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, selectedElement),
       ),
diff --git a/editor/src/components/canvas/controls/select-mode/subdued-padding-control.tsx b/editor/src/components/canvas/controls/select-mode/subdued-padding-control.tsx
index 766a180c9386..3fb67c29a496 100644
--- a/editor/src/components/canvas/controls/select-mode/subdued-padding-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/subdued-padding-control.tsx
@@ -29,6 +29,7 @@ export const SubduedPaddingControl = React.memo<SubduedPaddingControlProps>((pro
   const styleInfoReaderRef = useRefEditorState((store) =>
     getActivePlugin(store.editor).styleInfoFactory({
       projectContents: store.editor.projectContents,
+      jsxMetadata: store.editor.jsxMetadata,
     }),
   )
 
diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts b/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts
index 8ba0e9733b8c..e0e8029bce6f 100644
--- a/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts
+++ b/editor/src/components/canvas/plugins/inline-style-plugin.spec.ts
@@ -110,6 +110,7 @@ function getStyleInfoFromInlineStyle(editor: EditorRenderResult) {
 
   const styleInfoReader = InlineStylePlugin.styleInfoFactory({
     projectContents: projectContents,
+    jsxMetadata: jsxMetadata,
   })
   const styleInfo = styleInfoReader(EP.fromString('sb/scene/div'))
   return styleInfo
diff --git a/editor/src/components/canvas/plugins/style-plugins.ts b/editor/src/components/canvas/plugins/style-plugins.ts
index 42ecae83b215..79ef09308456 100644
--- a/editor/src/components/canvas/plugins/style-plugins.ts
+++ b/editor/src/components/canvas/plugins/style-plugins.ts
@@ -51,12 +51,27 @@ export function deleteCSSProp(property: string): DeleteCSSProp {
 
 export type StyleUpdate = UpdateCSSProp | DeleteCSSProp
 
+export type SceneSize = { type: 'no-scene' } | { type: 'scene'; width: number }
+export function noSceneSize(): SceneSize {
+  return { type: 'no-scene' }
+}
+export function sceneSize(width: number | undefined | null): SceneSize {
+  if (width == null) {
+    return noSceneSize()
+  }
+  return { type: 'scene', width: width }
+}
+export type StylePluginContext = {
+  sceneSize: SceneSize
+}
+
 export interface StylePlugin {
   name: string
   styleInfoFactory: StyleInfoFactory
   readStyleFromElementProps: <T extends keyof StyleInfo>(
     attributes: JSXAttributes,
     prop: T,
+    context: StylePluginContext,
   ) => CSSStyleProperty<NonNullable<ParsedCSSProperties[T]>> | null
   updateStyles: (
     editorState: EditorState,
@@ -248,6 +263,7 @@ export function patchRemovedProperties(editorState: EditorState): EditorState {
 
   const styleInfoReader = activePlugin.styleInfoFactory({
     projectContents: editorState.projectContents,
+    jsxMetadata: editorState.jsxMetadata,
   })
 
   const propertiesUpdatedDuringInteraction = getPropertiesUpdatedDuringInteraction(editorState)
diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
index 2941f0bc9a12..e9fadf9ef689 100644
--- a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
+++ b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -5,7 +5,7 @@ import { getElementFromProjectContents } from '../../editor/store/editor-state'
 import type { ParsedCSSProperties } from '../../inspector/common/css-utils'
 import { cssParsers } from '../../inspector/common/css-utils'
 import { mapDropNulls } from '../../../core/shared/array-utils'
-import type { StylePlugin } from './style-plugins'
+import type { StylePlugin, StylePluginContext } from './style-plugins'
 import type { Config } from 'tailwindcss/types/config'
 import type { StyleInfo } from '../canvas-types'
 import { cssStyleProperty, type CSSStyleProperty } from '../canvas-types'
@@ -18,17 +18,20 @@ import {
 import { emptyComments, type JSXAttributes } from 'utopia-shared/src/types'
 import * as PP from '../../../core/shared/property-path'
 import { jsExpressionValue } from '../../../core/shared/element-template'
-
-function parseTailwindProperty<T extends keyof StyleInfo>(
-  value: string | number | undefined,
-  prop: T,
-): CSSStyleProperty<NonNullable<ParsedCSSProperties[T]>> | null {
-  const parsed = cssParsers[prop](value, null)
-  if (isLeft(parsed) || parsed.value == null) {
-    return null
+import { getContainingSceneSize } from '../responsive-utils'
+
+const parseTailwindPropertyFactory =
+  (config: Config | null, context: StylePluginContext) =>
+  <T extends keyof StyleInfo>(
+    value: string | number | undefined,
+    prop: T,
+  ): CSSStyleProperty<NonNullable<ParsedCSSProperties[T]>> | null => {
+    const parsed = cssParsers[prop](value, null)
+    if (isLeft(parsed) || parsed.value == null) {
+      return null
+    }
+    return cssStyleProperty(parsed.value, jsExpressionValue(value, emptyComments))
   }
-  return cssStyleProperty(parsed.value, jsExpressionValue(value, emptyComments))
-}
 
 const TailwindPropertyMapping: Record<string, string> = {
   left: 'positionLeft',
@@ -100,6 +103,7 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
   readStyleFromElementProps: <P extends keyof StyleInfo>(
     attributes: JSXAttributes,
     prop: P,
+    context: StylePluginContext,
   ): CSSStyleProperty<NonNullable<ParsedCSSProperties[P]>> | null => {
     const classNameAttribute = defaultEither(
       null,
@@ -114,10 +118,11 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
     }
 
     const mapping = getTailwindClassMapping(classNameAttribute.split(' '), config)
+    const parseTailwindProperty = parseTailwindPropertyFactory(config, context)
     return parseTailwindProperty(mapping[TailwindPropertyMapping[prop]], prop)
   },
   styleInfoFactory:
-    ({ projectContents }) =>
+    ({ projectContents, jsxMetadata }) =>
     (elementPath) => {
       const classList = getClassNameAttribute(
         getElementFromProjectContents(elementPath, projectContents),
@@ -128,6 +133,9 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
       }
 
       const mapping = getTailwindClassMapping(classList.split(' '), config)
+      const parseTailwindProperty = parseTailwindPropertyFactory(config, {
+        sceneSize: getContainingSceneSize(elementPath, jsxMetadata),
+      })
 
       return {
         gap: parseTailwindProperty(mapping[TailwindPropertyMapping.gap], 'gap'),
diff --git a/editor/src/components/canvas/responsive-utils.ts b/editor/src/components/canvas/responsive-utils.ts
index 52349915b1b6..9d828e6399d5 100644
--- a/editor/src/components/canvas/responsive-utils.ts
+++ b/editor/src/components/canvas/responsive-utils.ts
@@ -3,6 +3,35 @@ import * as csstree from 'css-tree'
 import type { StyleMediaSizeModifier, StyleModifier } from './canvas-types'
 import { type CSSNumber, type CSSNumberUnit, cssNumber } from '../inspector/common/css-utils'
 import { memoize } from '../../core/shared/memoize'
+import type { ElementPath } from '../../core/shared/project-file-types'
+import type { ElementInstanceMetadataMap } from '../../core/shared/element-template'
+import { MetadataUtils } from '../../core/model/element-metadata-utils'
+import { noSceneSize, sceneSize, type SceneSize } from './plugins/style-plugins'
+import type { EditorState } from '../editor/store/editor-state'
+
+export function getContainingSceneSize(
+  selectedElement: ElementPath,
+  jsxMetadata: ElementInstanceMetadataMap,
+): SceneSize {
+  if (selectedElement == null) {
+    return noSceneSize()
+  }
+  const containingScene = MetadataUtils.getParentSceneMetadata(jsxMetadata, selectedElement)
+  return sceneSize(containingScene?.specialSizeMeasurements?.clientWidth)
+}
+
+export function getContainingSceneSizeFromEditorState(editor: EditorState): SceneSize {
+  if (editor == null) {
+    return noSceneSize()
+  }
+  // we're taking the first selected element because we're assuming elements are in the same scene
+  // TODO: support multiple selected elements that are in different scenes?
+  const selectedElement = editor.selectedViews.at(0)
+  if (selectedElement == null) {
+    return noSceneSize()
+  }
+  return getContainingSceneSize(selectedElement, editor.jsxMetadata)
+}
 
 /**
  * Extracts the screen size from a CSS string, for example:
diff --git a/editor/src/components/inspector/common/property-path-hooks.ts b/editor/src/components/inspector/common/property-path-hooks.ts
index 1c8c719c6911..c0ef77d62597 100644
--- a/editor/src/components/inspector/common/property-path-hooks.ts
+++ b/editor/src/components/inspector/common/property-path-hooks.ts
@@ -1,5 +1,4 @@
 import * as PP from '../../../core/shared/property-path'
-import * as EP from '../../../core/shared/element-path'
 
 import deepEqual from 'fast-deep-equal'
 import * as ObjectPath from 'object-path'
@@ -96,6 +95,7 @@ import { getActivePlugin } from '../../canvas/plugins/style-plugins'
 import { isStyleInfoKey, type StyleInfo } from '../../canvas/canvas-types'
 import { assertNever } from '../../../core/shared/utils'
 import { maybeCssPropertyFromInlineStyle } from '../../canvas/commands/utils/property-utils'
+import { getContainingSceneSizeFromEditorState } from '../../canvas/responsive-utils'
 
 export interface InspectorPropsContextData {
   selectedViews: Array<ElementPath>
@@ -763,7 +763,9 @@ export function useGetMultiselectedProps<P extends ParsedPropertiesKeys>(
   const styleInfoReaderRef = useRefEditorState(
     (store) =>
       (props: JSXAttributes, prop: keyof StyleInfo): GetModifiableAttributeResult => {
-        const elementStyle = getActivePlugin(store.editor).readStyleFromElementProps(props, prop)
+        const elementStyle = getActivePlugin(store.editor).readStyleFromElementProps(props, prop, {
+          sceneSize: getContainingSceneSizeFromEditorState(store.editor),
+        })
         if (elementStyle == null) {
           return right({ type: 'ATTRIBUTE_NOT_FOUND' })
         }
diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts
index 7c3661bbcc77..e9892d1e1c96 100644
--- a/editor/src/core/model/element-metadata-utils.ts
+++ b/editor/src/core/model/element-metadata-utils.ts
@@ -1061,6 +1061,13 @@ export const MetadataUtils = {
     const elementMetadata = MetadataUtils.findElementByElementPath(metadata, path)
     return elementMetadata != null && isSceneFromMetadata(elementMetadata)
   },
+  getParentSceneMetadata(
+    metadata: ElementInstanceMetadataMap,
+    path: ElementPath,
+  ): ElementInstanceMetadata | null {
+    const parentPath = MetadataUtils.findSceneOfTarget(path, metadata)
+    return parentPath == null ? null : MetadataUtils.findElementByElementPath(metadata, parentPath)
+  },
   overflows(allElementProps: AllElementProps, path: ElementPath): boolean {
     const elementProps = allElementProps[EP.toString(path)] ?? {}
     const styleProps = elementProps.style ?? null